.news-image-items { margin-top: 30px; height: 546px; position: relative; z-index: 9; &::before { @include before; z-index: -1; background: linear-gradient(180deg, rgba(18, 19, 21, 0.00) 0%, #121315 100%); } .news-content { position: absolute; bottom: 40px; left: 40px; ul { @include flex; gap: 25px; margin-bottom: 20px; li { font-size: 14px; font-weight: 500; color: $white; i { color: $theme-color; margin-right: 8px; } } } h3 { font-size: 28px; margin-bottom: 10px; a { color: $white; &:hover { color: $theme-color; } } } } } .news-right-items { margin-top: 30px; .news-card-items { background-color: $white; box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06); position: relative; @include flex; gap: 25px; justify-content: space-between; @include breakpoint (max-xxl){ flex-wrap: wrap; gap: 0; } .news-image { @include breakpoint (max-xxl){ padding-left: 30px; padding-bottom: 30px; } @include breakpoint (max-lg){ padding: 0; } @include breakpoint (max-md){ padding-left: 30px; padding-bottom: 30px; } } &:not(:last-child){ margin-bottom: 30px; } .news-content { padding: 30px; ul { @include flex; gap: 25px; margin-bottom: 15px; li { font-size: 14px; font-weight: 500; color: $text-color; i { color: $theme-color; margin-right: 8px; } } } h4 { margin-bottom: 10px; a { &:hover { color: $theme-color; } } } .link-btn { color: $theme-color; margin-top: 13px; i { transform: rotate(0); } } } } } .news-section { position: relative; .shape-1 { position: absolute; left: 0; top: 15%; } .shape-2 { position: absolute; right: 70px; bottom: 0; } .shape-3 { position: absolute; bottom: 0; left: 0; } .shape-4 { position: absolute; bottom: 0; right: 0; } } .news-box-items { margin-top: 30px; background-color: #F5F5F5; @include transition; overflow: hidden; .news-image { position: relative; z-index: 2; overflow: hidden; img { @include imgw; position: relative; display: block; object-fit: cover; -webkit-transition: all 500ms ease; transition: all 500ms ease; &:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; -webkit-transform: translateX(50%) scaleX(2); transform: translateX(50%) scaleX(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px) } } } .news-content { padding: 20px 30px; .post-list { @include flex; gap: 95px; margin-bottom: 15px; li { @include transition; } } h4 { margin-bottom: 30px; } .author-items { @include flex; justify-content: space-between; border-top: 1px solid $border-color; padding-top: 30px; @include transition; .author-info { @include flex; gap: 14px; .content { h6 { font-size: 14px; } p { font-size: 14px; } } } .link-btn { color: $theme-color; } } } &:hover,&.active { background-color: #0b2273; .news-image { img { &:first-child { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0) } &:nth-child(2){ -webkit-transform: translateX(-50%) scaleX(2); transform: translateX(-50%) scaleX(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } } } .news-content { .post-list { li { color: $white; } } h4 { a { color: $white; &:hover { color: $theme-color; } } } .author-items { border-top: 1px solid $white; .author-info { .content { h6 { color: $white; } p { color: $white; } } } } } } } .main-sidebar { .single-sidebar-widget { padding: 40px 30px; background-color: #F2F5FA; margin-bottom: 30px; .wid-title { margin-bottom: 25px; h3 { position: relative; padding-bottom: 15px; display: inline-block; font-size: 22px; font-weight: 600; &::after { position: absolute; bottom: 0; left: 0; width: 20px; height: 2px; content: ""; background-color: $header-color; } &::before { position: absolute; bottom: 0; left: 30px; width: 63px; height: 2px; content: ""; background-color: $theme-color; } } } .search-widget { form { width: 100%; position: relative; input { background-color: $white; font-size: 16px; padding: 20px; width: 100%; border: none; color: $text-color; } button { position: absolute; right: 0; top: 0; width: 70px; font-size: 18px; height: 100%; background-color:$theme-color; color: $white; text-align: center; transition: all .3s ease-in-out; &:hover { background-color: $header-color; } } } } .news-widget-categories { ul { li { @include flex; justify-content: space-between; padding: 22px 25px; background-color: $white; font-weight: 500; @include transition; border-radius: 0; font-size: 16px; line-height: 1; a { color: $header-color; } span { @include transition; color: $header-color; } &:not(:last-child){ margin-bottom: 12px; } &:hover { background-color: $theme-color; a { color: $white; } span { color: $white; } } &.active { background-color: $theme-color; a { color: $white; } span { color: $white; } } } } } .recent-post-area { .recent-items { @include flex; gap: 20px; &:not(:last-child){ margin-bottom: 20px; border-bottom: 1px solid $border-color; padding-bottom: 20px; } .recent-content { ul { margin-bottom: 8px; li { i { color: $theme-color; margin-right: 5px; } } } h6 { font-size: 18px; font-weight: 600; a { &:hover { color: $theme-color; } } } } } } .tagcloud { a { display: inline-block; padding: 11px 20px; line-height: 1; font-size: 16px; font-weight: 500; background: $white; margin-right: 5px; text-transform: capitalize; margin-bottom: 10px; border-radius: 0; @include transition; color: $text-color; &:last-child { margin-right: 0; } &:hover { background-color: $theme-color; color: $white; } } } .brochures-download-items { @include flex; justify-content: space-between; &:not(:last-child){ margin-bottom: 30px; } .brochures-items { @include flex; gap: 15px; .icon { font-size: 40px; color: $theme-color; } } .download-btn { width: 43px; height: 43px; line-height: 43px; text-align: center; display: inline-block; background-color: $header-color; font-size: 16px; color: $white; @include transition; &:hover,&.active { background-color: $theme-color; } &.active { &:hover { background-color: $header-color; } } } } } .service-sidebar-widget { .contact-bg { padding: 60px 45px; text-align: center; @include breakpoint (max-xl){ padding: 50px 30px; } @include breakpoint (max-lg){ padding: 50px 30px; } p { font-size: 18px; color: $white; font-weight: 600; } img { margin-top: 70px; margin-bottom: 70px; } .theme-btn { @include breakpoint (max-xxl){ padding: 22px 30px; } } } } } .news-standard-wrapper { .news-standard-items { background-color: #F5F5F5; position: relative; margin-bottom: 50px; @include breakpoint (max-md){ margin-bottom: 30px; } .news-thumb { position: relative; img { @include imgw; } .video-box { width: 70px; height: 70px; border: 1px solid $theme-color; line-height: 70Px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .video-btn { width: 57px; height: 57px; background-color: $theme-color; color: $white; line-height: 57px; text-align: center; display: inline-block; } } } .news-content { padding: 30px 40px; position: relative; z-index: 9; @include breakpoint (max-md){ padding: 30px; } .date-list { @include flex; gap: 40px; margin-bottom: 15px; @include breakpoint (max-xl){ gap: 20px; flex-wrap: wrap; } li { font-size: 16px; font-weight: 400; i { color: $theme-color; margin-right: 5px; } } } h3 { font-weight: bold; margin-bottom: 15px; font-size: 30px; a { &:hover { color: $theme-color; } } @include breakpoint (max-md){ font-size: 27px; } @include breakpoint (max-sm){ font-size: 25px; } } // .news-button { // } } .array-button { @include breakpoint (max-xl){ display: none; } .array-prev { position: absolute; top: 27%; left: 40px; transform: translateY(-50%); z-index: 9; background-color: #FCEDE8; color: $theme-color; border: none; &:hover { background-color: $white; color: $header-color; } } .array-next { position: absolute; top: 27%; right: 40px; transform: translateY(-50%); z-index: 9; border: none; } } } } .blog-post-details { .single-blog-post { .post-featured-thumb { height: 460px; } .post-content { margin-top: 30px; .post-list { gap: 30px; margin-bottom: 20px; border-bottom: 1px solid #F2F5FA; padding-bottom: 20px; li { font-size: 14px; font-weight: 500; i { color: $theme-color; margin-right: 5px; } } } h3 { margin-bottom: 20px; font-size: 30px; @include breakpoint (max-sm){ font-size: 24px; } a { &:hover { color: $theme-color; } } } p { font-weight: 400; } .hilight-text { border-left: 4px solid $theme-color; padding: 40px; background-color: #F2F5FA; p { font-weight: 600; text-transform: capitalize; font-style: italic; line-height: 26px; color: $header-color; } svg { float: right; margin-top: -30px; } } .details-image { img { @include imgw; } } } } .tag-share-wrap { border-top: 1px solid #F2F5FA; border-bottom: 1px solid #F2F5FA; padding: 30px 0; .tagcloud { span { display: inline-block; font-weight: 600; color: $header-color; margin-right: 15px; } a { display: inline-block; padding: 12px 26px; line-height: 1; background: transparent; border: 1px solid #F2F5FA; margin-right: 8px; text-transform: capitalize; font-weight: 500; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; border-radius: 0; @include breakpoint (max-sm){ margin-bottom: 5px; } &:hover { background-color: $theme-color; color: $white; } } } .social-share { span { font-size: 16px; color: $header-color; font-weight: 600; } a { font-size: 16px; color: $header-color; &:not(:last-child){ margin-right: 10px; } &:hover { color: $theme-color; } } } } .comments-area { margin-top: 40px; .comments-heading { margin-bottom: 30px; @include breakpoint (max-sm){ margin-bottom: 20px; } h3 { font-size: 24px; font-weight: 700; @include breakpoint (max-sm){ font-size: 22px; } } } .blog-single-comment { border-bottom: 1px solid #F2F5FA; @include breakpoint (max-sm){ flex-wrap: wrap; gap: 20px; } .content { .head { margin-bottom: 10px; .con { h5 { margin-bottom: 5px; font-weight: 600; font-size: 20px; } } .star { i { color: $theme-color; font-size: 14px; } } } .reply { padding: 5px 15px; font-weight: 400; background-color: $theme-color; color: $white; @include transition; &:hover { background-color: $header-color; } &.color-2 { background-color: $header-color; &:hover { background-color: $theme-color; } } } } } } .comment-form-wrap { h3 { font-size: 24px; margin-bottom: 30px; @include breakpoint (max-sm){ margin-bottom: 20px; } } .form-clt { span { color: $header-color; display: inline-block; margin-bottom: 10px; } input,textarea { width: 100%; outline: none; border: none; background-color: transparent; border: 1px solid #F2F5FA; padding: 16px 20px; font-weight: 500; color: $text-color; &::placeholder { color: $text-color; } } textarea { padding-bottom: 100px; } } } }