/*---------------------------------------------------------------------- Template Name: Villade - Architecture and Interiors HTML Template Template URI: https://villadehtml.lohatheme.com Author: Lohatheme Author URI: https://lohatheme.com Version: 1.0 Note: This is Main Style CSS File. */ /*---------------------------------------------------------------------- CSS INDEX ---------------------- ## Default Style ## Common Classes ## Repeat Style ## Padding Margin ## Custom Animation ## Header style ## Hero Area ## Page Banner ## About Area ## Trending Styles Area ## Projects Area ## Services Area ## Timeline Area ## Testimonials Area ## CTA Area ## Team Area ## Counter Area ## FAQ Area ## Contact Area ## 404 Area ## Main Footer ## Intro*/ /* -------------------------------------------------------------- */ /*******************************************************/ /******************* ## Default Style ******************/ /*******************************************************/ * { margin: 0; padding: 0; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; letter-spacing: .5px !important; } html { scroll-behavior: smooth; } body { color: var(--black-30); background: #141413; font-weight: 400; line-height: 28px; font-size: 16px; font-family: "Montserrat", sans-serif; --primary-color: #f58634; --heading-color: #FFFFFF; --secondary-color: #141413; --black-120: #10100F; --black-110: #121211; --black-100: #141413; --black-90: #2C2C2B; --black-80: #434342; --black-70: #5B5B5A; --black-60: #727271; --black-50: #8A8A89; --black-40: #a1a1a1; --black-30: #B9B9B8; --black-20: #D0D0D0; --black-10: #E8E8E7; --border-color: #D9DFE7; } body:has(.light-mode) { color: var(--black-90); background: white; } a { color: var(--black-30); cursor: pointer; outline: none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-decoration: none; } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } a:hover { color: var(--primary-color); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--black-30); } .text-white h1, .text-white h1 a, .text-white h2, .text-white h2 a, .text-white h3, .text-white h3 a, .text-white h4, .text-white h4 a, .text-white h5, .text-white h5 a, .text-white h6, .text-white h6 a, .text-white .h1, .text-white .h1 a, .text-white .h2, .text-white .h2 a, .text-white .h3, .text-white .h3 a, .text-white .h4, .text-white .h4 a, .text-white .h5, .text-white .h5 a, .text-white .h6, .text-white .h6 a { color:var(--heading-color); } .text-black{ color:var(--black-90); } ul, li { list-style: none; padding: 0; margin: 0; } img { max-width: 100%; display: inline-block; } mark { color: var(--secondary-color); background: transparent; text-decoration: underline; } /*======= Input Styles =======*/ input, select, textarea, .nice-select, .form-control { width: 100%; height: auto; padding: 15px 10px; background-color: var(--black-120); border: 1px solid var(--black-120); } .nice-select { font-size: 18px; line-height: 1.3; } .nice-select:after { height: 8px; width: 8px; right: 25px; border-color: var(--heading-color); } .nice-select .current { font-weight: 500; color: var(--heading-color); } .nice-select .list { width: 100%; border-radius: 0; } textarea { display: inherit; padding-top: 20px; } label { cursor: pointer; font-weight: 500; margin-bottom: 5px; color: var(--black-30); } .form-group { position: relative; margin-bottom: 20px; } input:focus, button:focus, .form-control:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: var(--black-90); } input[type=search]::-ms-clear { display: none; width: 0; height: 0; } input[type=search]::-ms-reveal { display: none; width: 0; height: 0; } input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } input[type=checkbox], input[type=radio] { height: auto; width: auto; } .fa, .fas{ font-weight: lighter; } .fa-long-arrow-right:before, .fa-long-arrow-left:before { font-weight: lighter; } .fa-star{ color: var(--primary-color); } .fa-star:before{ font-size: 12px; font-weight: bolder; } button.load-more{ padding: 16px 32px; background: var(--primary-color); color: var(--black-100); } .black-120-bg{ background-color: var(--black-120); } .black-110-bg{ background-color: var(--black-110); } .black-100-bg{ background-color: var(--black-100); } .black-90-bg{ background-color: var(--black-90); } .black-80-bg{ background-color: var(--black-80); } .black-70-bg{ background-color: var(--black-70); } .black-50-bg{ background-color: var(--black-60); } .black-50-bg{ background-color: var(--black-50); } .black-50-bg{ background-color: var(--black-40); } .black-30-bg{ background-color: var(--black-30); } .black-30-bg{ background-color: var(--black-20); } .black-10-bg{ background-color: var(--black-10); } .white-bg{ background: white; } .primary-bg{ background: var(--primary-color); } /*******************************************************/ /****************** ## Common Classes *****************/ /*******************************************************/ .page-wrapper { position: relative; z-index: 9; width: 100%; margin: 0 auto; overflow: hidden; min-width: 300px; } @media only screen and (min-width: 1400px) { .container { max-width: 1350px !important; } } .container-fluid { padding-left: 0; padding-right: 0; } @media only screen and (max-width: 375px) { .col-small { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .row { --bs-gutter-x: 0; } .no-gap { --bs-gutter-x: 0; } @media only screen and (min-width: 992px) { .gap-10 { --bs-gutter-x: 10px; } .gap-16 { --bs-gutter-x: 16px; } } @media only screen and (min-width: 992px) { .gap-20 { --bs-gutter-x: 20px; } } @media only screen and (min-width: 992px) { .gap-30 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 992px) { .gap-40 { --bs-gutter-x: 40px; } } @media only screen and (min-width: 992px) { .gap-50 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 992px) { .gap-60 { --bs-gutter-x: 60px; } .gap-64 { --bs-gutter-x: 64px; } } @media only screen and (min-width: 992px) { .gap-70 { --bs-gutter-x: 70px; } } @media only screen and (min-width: 992px) { .gap-80 { --bs-gutter-x: 80px; } } @media only screen and (min-width: 992px) { .gap-90 { --bs-gutter-x: 90px; } .gap-96 { --bs-gutter-x: 96px; } } @media only screen and (min-width: 992px) { .gap-100 { --bs-gutter-x: 100px; } .gap-128 { --bs-gutter-x: 128px; } } @media only screen and (min-width: 1200px) { .row-cols-xl-7>* { width: 14.2857%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } section{ background-size: cover; background-repeat: no-repeat; } /** Section Title style **/ .section-title { position: relative; } .sub-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--primary-color); text-transform: uppercase; text-align: center; margin-left: 16px; } @media only screen and (max-width: 575px) { .sub-title { font-size: 16px; } } .sub-title .dot-b, .sub-title .dot-a { background: #ffffff; width: 4px; height: 4px; border-radius: 50%; display: inline-block; } .sub-title .dot-b{ margin: auto 0 auto -18px; } .sub-title .line { background: #ffffff; width: 64px; height: 1px; display: inline-block; margin: auto 0; } .sub-title .text{ padding: 0 16px; } /** Button style **/ .theme-btn, a.theme-btn { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-align: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; color:var(--black-100); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .theme-btn{ padding: 0 10px; width: auto; min-width: 160px; min-height: 160px; border-radius: 80px; background:var(--primary-color); color: var(--black-100); } .button-pri { position: relative; z-index: 1; display: block; } .button-pri .theme-btn:before { content: ''; position: absolute; display: block; width: 100%; height: 100%; left: -32px; background-image: url(../images/hero/circle.png); background-size: cover; background-repeat: no-repeat; border: 1px solid var(--primary-color); border-radius: 50%; z-index: -1; } .button-pri:not(.button-left) .theme-btn:before { transition: right 0.2s ease-out 0.2s; } .theme-btn:hover{ background: transparent; } .theme-btn:hover:before { left: 0; background-color: var(--primary-color); transition: 0.3s ease-out 0.3s; } .button-left.button-pri .theme-btn:before { transition: left 0.2s ease-out 0.2s; } .button-left.button-pri .theme-btn:before{ left: unset; right: -32px; } .button-left .theme-btn:hover:before { right: 0; } /* Read More */ .read-more { font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-decoration: underline; text-transform: capitalize; } .read-more i { float: right; font-weight: 400; margin-left: 7px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .read-more:hover { color: var(--secondary-color); text-decoration: underline; } .read-more:hover i { margin-left: 10px; } /* List style One */ .list-style-one li { display: -webkit-box; display: -ms-flexbox; display: flex; } .list-style-one li:not(:last-child) { margin-bottom: 18px; } .list-style-one li:before { width: 7px; height: 7px; -webkit-box-flex: 0; -ms-flex: none; flex: none; content: ''; margin-top: 8px; border-radius: 50%; margin-right: 10px; background: var(--primary-color); } /** Tab Style One **/ ul.nav-pills.tab-style-one{ width: fit-content; max-width: 100%; } ul.nav-pills.tab-style-one li{ flex: unset; } ul.nav-pills.tab-style-one .nav-link{ padding: 16px 32px; } .tab-style-one .nav-link { border-radius: 0; background: transparent; border-bottom: 1px solid var(--border-color); } .light-mode .tab-style-one .nav-link{ border-bottom: 1px solid var(--black-30); } @media only screen and (max-width: 575px) { .tab-style-one .nav-link { font-size: 20px !important; } } .tab-style-one .nav-item.current .nav-link { color: var(--primary-color); background: transparent; border-bottom-color: var(--primary-color); } .light-mode .tab-style-one .nav-item.current .nav-link{ color: var(--primary-color); } .tab-style-one .nav-link.active { color: var(--primary-color); background: transparent; border-bottom-color: var(--primary-color); } .light-mode .tab-style-one .nav-link.active{ color: var(--primary-color); } /*** Preloader style ** */ .preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #FFFFFF; background-repeat: no-repeat; background-position: center center; } .preloader .custom-loader { width: 55px; aspect-ratio: 1; --c: conic-gradient(from -90deg, var(--primary-color) 90deg, #0000 0); background: var(--c), var(--c); background-size: 40% 40%; -webkit-animation: preloader 1s infinite alternate; animation: preloader 1s infinite alternate; } @-webkit-keyframes preloader { 0%, 10% { background-position: 0 0, 0 calc(100%/3); } 50% { background-position: 0 0, calc(100%/3) calc(100%/3); } 90%, 100% { background-position: 0 0, calc(100%/3) 0; } } @keyframes preloader { 0%, 10% { background-position: 0 0, 0 calc(100%/3); } 50% { background-position: 0 0, calc(100%/3) calc(100%/3); } 90%, 100% { background-position: 0 0, calc(100%/3) 0; } } /* Pagination */ .pagination { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0; margin-right: 0; } .pagination li:not(:last-child){ margin-right: 8px; } .pagination li a, .pagination li .page-link { padding: 0; border: 1px solid var(--black-30); font-size: 20px; width: 56px; line-height: 56px; border-radius: 50%; -webkit-box-shadow: none; box-shadow: none; text-align: center; color:var(--heading-color); background: unset; } .page-item:last-child .page-link, .page-item:first-child .page-link{ border-radius: unset; width: fit-content; padding: 0 20px; border-radius: 50% } .pagination li.active .page-link, .pagination li:hover:not(.disabled) .page-link:hover { color: var(--black-100); background: var(--primary-color); border-radius: unset; border: 1px solid var(--black-30); border-radius: 50%; } .light-mode .pagination li a, .light-mode .pagination li .page-link{ color: var(--black-100); border: 1px solid var(--black-100); } .light-mode .pagination li.active .page-link, .light-mode .pagination li:hover:not(.disabled) .page-link:hover { border: 1px solid var(--primary-color); } /*** Scroll Top style ***/ .scroll-top { position: fixed; bottom: 25px; right: 0; width: 40px; height: 40px; z-index: 99; color: white; display: none; font-size: 14px; cursor: pointer; line-height: 40px; background: var(--primary-color); -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } /* Textvar(--heading-color) */ .text-white *, .text-white a, .text-white .read-more, .text-white .list-style-one li, .text-white .list-style-one li:before, .text-white .counter-text-wrap .count-text, .text-white .hotline .content a:not(:hover) { color:var(--heading-color); } /*Project Filter*/ .filter-btns-one { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } .filter-btns-one li { cursor: pointer; font-size: 16px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 700; padding: 8px 15px; margin: 0 10px 20px; color: var(--primary-color); text-transform: uppercase; border: 1px solid var(--border-color); } .filter-btns-one li.current { color:var(--heading-color); background: var(--primary-color); border-color: var(--primary-color); } /* Position */ .rel { position: relative; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .overlay { z-index: 1; position: relative; } .overlay::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.3; background-color: var(--heading-color); } /* Backgruond Size */ .bgs-cover { background-size: cover; background-position: center; } /*******************************************************/ /******************* ## Repeat Style ******************/ /*******************************************************/ .heading, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, .tab-style-one .nav-link, h6, .h6 { color: var(--black-30); font-family: "Montserrat", sans-serif; } .light-mode .heading, .light-mode h1, .light-mode .h1, .light-mode h2, .light-mode .h2, .light-mode h3, .light-mode .h3, .light-mode h4, .light-mode .h4, .light-mode h5, .light-mode .h5, .light-mode .tab-style-one .nav-link, .light-mode h6, .light-mode .h6 { color: var(--black-100); } .heading, h1, .h1, h2, .h2, h3, .h3, h4, .h4{ font-weight: 900; } @media(min-width: 992px){ h1, .h1 { text-shadow: 2px 0 0 var(--black-30); } h1.text-white, .h1.text-white, h2.text-white, .h2.text-white{ text-shadow: 2px 0 0 white; } .giant-text{ text-shadow: 3px 0 0 white, -2px 0 0 white, 2px 0 0 white, -2px 0 0 white, 2px 0 0 white; } h2, .h2 { text-shadow: 2px 0 0 var(--black-30); } .light-mode h2, .light-mode .h2{ text-shadow: 2px 0 0 var(--black-90); } } @media only screen and (min-width: 1600px) { .giant-text{ font-size: 220px; line-height: 1; font-weight: 900; letter-spacing: -5px; } .big-text{ font-size: 120px; line-height: 1.2; font-weight: 900; letter-spacing: -10px; } } @media (min-width: 1400px) and (max-width: 1599px) { .big-text{ font-size: 100px; line-height: 1.2; font-weight: 900; letter-spacing: -10px; } } @media only screen and (min-width: 1400px) { .giant-text { font-size: 110px; line-height: 1; font-weight: 700; letter-spacing: 7px; } .text-right .giant-text { font-size: 110px; position: relative; top: 34px; left: -15px; } h1, .h1 { line-height: 1.2; font-size: 90px; letter-spacing: -3px; } h2, .h2 { line-height: 1.2; font-size: 67px; letter-spacing: -3px; } h3, .h3 { line-height: 1.2; font-size: 51px; letter-spacing: -2px; } h4, .h4 { line-height: 1.2; font-size: 38px; letter-spacing: -2px; } h5, .h5{ line-height: 1.32; font-size: 28px; } h6, .h6 { line-height: 1.5; font-size: 20px; } } @media only screen and (max-width: 1399px) { .giant-text { font-size: 165px; line-height: 1; font-weight: 900; letter-spacing: -5px; } .banner-area .giant-text { font-size: 60px; letter-spacing: 4px !important; } /* .text-right .giant-text { font-size: 110px; position: relative; top: 34px; left: -15px; } */ .big-text{ font-size: 90px; line-height: 1.2; font-weight: 900; letter-spacing: -5px; } h1, .h1 { line-height: 1.2; font-size: 67px; letter-spacing: -3px; } h2, .h2 { line-height: 1.2; font-size: 51px; letter-spacing: 0px; } h3, .h3 { line-height: 1.2; font-size: 38px; letter-spacing: -2px; } h4, .h4{ line-height: 1.32; font-size: 34px; } h5, .h5{ line-height: 1.32; font-size: 24px; } h6, .h6 { line-height: 1.5; font-size: 20px; } } @media only screen and (max-width: 1199px) { .giant-text{ font-size: 116px; line-height: 1; font-weight: 900; letter-spacing: -5px; } .big-text{ font-size: 67px; line-height: 1.2; font-weight: 900; letter-spacing: -3px; } h1, .h1 { line-height: 1.2; font-size: 51px; letter-spacing: -3px; } h2, .h2 { line-height: 1.2; font-size: 46px; letter-spacing: -2px; } } @media only screen and (max-width: 991px) { .big-text{ font-size: 51px; line-height: 1.2; font-weight: 900; letter-spacing: -3px; } h1, .h1 { line-height: 1.2; font-size: 46px; letter-spacing: -2px; text-shadow: unset; } h2, .h2 { line-height: 1.2; font-size: 38px; letter-spacing: -2px; text-shadow: unset; } .light-mode h1, .light-mode .h1, .light-mode h2, .light-mode .h2 { text-shadow: unset; } } @media only screen and (max-width: 767px) { .giant-text{ font-size: 67px; line-height: 1; font-weight: 900; letter-spacing: -5px; } h1, .h1 { line-height: 1.2; font-size: 42px; letter-spacing: -2px; } h2, .h2 { line-height: 1.2; font-size: 32px; letter-spacing: -2px; } h3, .h3{ line-height: 1.32; font-size: 30px; } h4, .h4 { line-height: 1.5; font-size: 26px; } h5, .h5 { line-height: 1.5; font-size: 22px; } } @media only screen and (max-width: 575px) { .giant-text{ font-size: 60px; } } @media(min-width: 992px){ .giant-text{ text-shadow: 3px 0 0 var(--black-30), -2px 0 0 var(--black-30), 2px 0 0 var(--black-30), -2px 0 0 var(--black-30), 2px 0 0 var(--black-30); } .light-mode .giant-text{ text-shadow: 3px 0 0 var(--black-90), -2px 0 0 var(--black-90), 2px 0 0 var(--black-90), -2px 0 0 var(--black-90), 2px 0 0 var(--black-90); } .giant-text.text-white{ text-shadow: 3px 0 0 white, -2px 0 0 white, 2px 0 0 white, -2px 0 0 white, 2px 0 0 white; } .giant-text.text-black-90{ text-shadow: 3px 0 0 var(--black-90), -2px 0 0 var(--black-90), 2px 0 0 var(--black-90), -2px 0 0 var(--black-90), 2px 0 0 var(--black-90); } } .carousel-control-prev-icon, .carousel-control-next-icon{ background-image: none; } button.prev, button.next{ background: transparent; border: 1px solid white; } .carousel-control-prev-icon i, .carousel-control-next-icon i{ color: white; } /*******************************************************/ /************** ## Padding Margin Spacing *************/ /*******************************************************/ /* Padding Around */ .p-64 { padding: 64px; } /* Padding Top */ .pt-32, .py-32 { padding-top: 32px; } .pt-64, .py-64 { padding-top: 64px; } .pt-96, .py-96 { padding-top: 96px; } .pt-128, .py-128{ padding-top: 128px; } .pt-256, .py-256{ padding-top: 256px; } /* Padding Bottom */ .pb-32, .py-32 { padding-bottom: 32px; } .pb-40, .py-40 { padding-bottom: 40px; } .pb-64, .py-64 { padding-bottom: 64px; } .pb-96, .py-96 { padding-bottom: 96px; } .pb-128, .py-128 { padding-bottom: 128px; } .pb-256, .py-256 { padding-bottom: 260px; } /*padding-right*/ .pr-64{ padding-right: 64px; } .pr-96{ padding-right: 96px; } .pr-128{ padding-right: 128px; } /*padding-left*/ .pl-64{ padding-left: 64px; } .pl-96{ padding-left: 96px; } .pl-128{ padding-right: 128px; } /* Margin Top */ .mt-0{ margin-top: 0; } .mt-16, .my-16{ margin-top: 16px; } .mt-32, .my-32{ margin-top: 32px; } .mt-40, .my-40{ margin-top: 40px; } .mt-64, .my-64{ margin-top: 64px; } .mt-92{ margin-top: 92px; } .mt-96, .my-96 { margin-top: 96px; } .mt-128, .my-128 { margin-top: 128px; } .mt-160, .my-160{ margin-top: 160px; } /* Margin Bottom */ .mb-0{ margin-bottom: 0; } .mb-10, .my-10{ margin-bottom: 10px; } .mb-16, .my-16{ margin-bottom: 16px; } .mb-30, .my-30{ margin-bottom: 30px; } .mb-32, .my-32{ margin-bottom: 32px; } .mb-40, .my-40{ margin-bottom: 40px; } .mb-64, .my-64{ margin-bottom: 64px; } .mb-96, .my-96{ margin-bottom: 96px; } .mb-128, .my-128{ margin-bottom: 128px; } /* Margin Right */ .mr-64{ margin-right: 64px; } .mr-128{ margin-right: 128px; } /* Margin Left */ .ml-64{ margin-left: 64px; } /*******************************************************/ /***************** ## Custom Animation ****************/ /*******************************************************/ /* Animation Delay */ .delay-1-0s { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-2-0s { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-0-1s { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .delay-0-2s { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .delay-0-3s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .delay-0-4s { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-0-5s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-0-6s { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-0-7s { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-0-8s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-0-9s { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .delay-1-1s { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .delay-1-2s { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .delay-1-3s { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .delay-1-4s { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .delay-1-5s { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1-6s { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .delay-1-7s { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .delay-1-8s { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .delay-1-9s { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } /* Menu Sticky */ @-webkit-keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } @keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } /* Hero Circle */ @-webkit-keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @-webkit-keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, -50px) rotate(90deg); transform: translate(-150px, -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px, -100px) rotate(90deg); transform: translate(-100px, -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(0, -25px); transform: rotateX(0deg) translate(0, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(0, -25px); transform: rotateX(0deg) translate(0, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @-webkit-keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @-webkit-keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @-webkit-keyframes pulse { to { -webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); } } @keyframes pulse { to { -webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); } } /*******************************************************/ /******************* ## Header style ******************/ /*******************************************************/ header{ margin-bottom: 92px; } @media (max-width: 991px){ header { margin-bottom: 46px; } } .main-header { position: relative; left: 0px; top: 0px; z-index: 999; width: 100%; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-header .header-upper { z-index: 5; width: 100%; position: absolute; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-header.fixed-header .header-upper{ background: var(--black-120); } .light-mode .main-header .header-upper, .light-mode .main-header.fixed-header .header-upper { background: white; border-bottom: 1px solid #f3f3f3; } .main-header .logo-outer { -webkit-box-flex: 0; -ms-flex: none; flex: none; } @media only screen and (max-width: 991px) { .main-header .logo-outer { display: none; } } .main-header .logo { z-index: 9; padding: 2px 0; position: relative; } .main-header.menu-absolute .header-upper { position: absolute; } .main-header.fixed-header { top: 0px; left: 0; position: fixed; -webkit-animation: sticky 1s; animation: sticky 1s; -webkit-box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } /* .main-header.fixed-header .top-header-block { top: 0; left: 0; width: 100%; position: fixed; -webkit-animation: sticky 1s; animation: sticky 1s; -webkit-box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } */ .light-mode .he-phone a{ color: var(--black-90); } .he-phone a:hover{ color: var(--primary-color); } @media only screen and (min-width: 1200px) { .nav-outer + .he-phone .search-btns{ margin-left: 32px; } .search-btns .search-icon { margin-left: 32px; } .nav-outer + .he-phone { margin-right: 0; } } @media only screen and (max-width: 1199px) { .nav-outer + .he-phone .search-btns{ margin-left: 16px; } .search-btns .search-icon { margin-left: 16px; } .nav-outer + .he-phone{ margin-right: 16px; } } @media only screen and (min-width: 992px) { .nav-outer{ margin-left: 128px; } .main-header.fixed-header .main-menu .navbar-collapse>ul>li { padding-top: 25px; padding-bottom: 25px; } } @media only screen and (max-width: 991px) { .nav-outer{ width: 100%; } .search-btns{ margin-left: 16px; } } .header-top{ padding: 16px 0; } .header-top .header-info{ text-align: right; } .light-mode .header-top { color: var(--black-30); } .header-top .header-info i{ color: var(--primary-color); margin-right: 8px; } header form.search-form{ display: none; position: relative; margin: 64px 0; } header form.search-form.current{ display: inherit; } header form.search-form input{ color:var(--heading-color); background: var(--black-100); } header form.search-form button{ color:var(--heading-color); background: transparent; padding: 16px 32px; position: absolute; right: 0; } /** Header Main Menu **/ @media only screen and (max-width: 991px) { .main-menu { width: 100%; } } .main-menu .mobile-logo { margin-right: auto; } @media only screen and (max-width: 575px) { .main-menu .mobile-logo { max-width: 150px; } } @media only screen and (max-width: 991px) { .main-menu .collapse { overflow: auto; } } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navbar-collapse>ul { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse>ul { display: block; padding: 25px 0; background: var(--black-100); } .light-mode .main-menu .navbar-collapse>ul{ background: var(--black-10); } .main-menu .navbar-collapse>ul>li:last-child { border-bottom: 1px solid var(--black-90); } .light-mode .main-menu .navbar-collapse>ul>li:last-child { border-bottom: 1px solid var(--black-20); } } @media only screen and (min-width: 992px) { } .main-menu .navbar-collapse>ul>li>a { text-transform: uppercase; } @media only screen and (min-width: 992px) { .main-menu .navbar-collapse>ul>li>a { color: var(--black-30); } .light-mode .main-menu .navbar-collapse>ul>li>a { color: var(--black-90); } .header-upper.style-2 .main-menu .navbar-collapse>ul>li>a{ color:var(--heading-color); } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse { left: 0; width: 100%; position: absolute; max-height: calc(100vh - 80px); } } .main-menu .navbar-collapse li { padding: 32px 16px; } @media only screen and (max-width: 1399px) { .main-menu .navbar-collapse li { padding-left: 10px; padding-right: 20px; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li { display: block; padding: 0 15px; border-top: 1px solid var(--black-90); } .light-mode .main-menu .navbar-collapse li{ border-top: 1px solid var(--black-20); } } .main-menu .navbar-collapse li.dropdown .dropdown-btn { cursor: pointer; font-size: 12px; margin-left: 5px; } @media only screen and (min-width: 992px) { .main-menu .navbar-collapse li.dropdown .dropdown-btn { color: var(--black-30); } .main-menu .navbar-collapse li li:first-child { border-top: none; } .main-menu .navbar-collapse li.dropdown:hover ul{ display: block; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 0; width: 50px; height: 43px; border-left: 1px solid var(--black-90); text-align: center; line-height: 43px; } .light-mode .main-menu .navbar-collapse li.dropdown .dropdown-btn{ border-left: 1px solid var(--black-20); } } .main-menu .navbar-collapse li a { display: block; opacity: 1; font-size: 16px; position: relative; text-transform: capitalize; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .light-mode .main-menu .navbar-collapse li a { color: var(--black-90); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li a { padding: 10px 10px; line-height: 22px; } } .main-menu .navbar-collapse li.current>a, .main-menu .navbar-collapse li.current-menu-item>a { font-weight: 500; } .main-menu .navbar-collapse li li { border-top: 1px solid var(--black-90); background: var(--black-100); } .light-mode .main-menu .navbar-collapse li li{ background: var(--black-10); border-top: 1px solid var(--black-20); } .main-menu .navbar-collapse li li a { text-transform: capitalize; color: var(--black-30); } .light-mode .main-menu .navbar-collapse li li a { color: var(--black-90); } .main-menu .navbar-collapse li li a:before { display: none; } .main-menu .navbar-collapse li .megamenu { position: absolute; left: 0px; top: 100%; width: 100%; z-index: 100; display: none; padding: 20px 0; background: #ffffff; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navbar-collapse li .megamenu:after { display: block; clear: both; content: ""; } .main-menu .navbar-collapse li.current-menu-item a { color: var(--primary-color); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li .megamenu { position: relative; -webkit-box-shadow: none; box-shadow: none; width: 100%; } .main-menu .navbar-collapse li .megamenu .container { max-width: 100%; } .main-menu .navbar-collapse li .megamenu .row { margin: 0px; } } .main-menu .navbar-collapse li .megamenu ul { display: block; position: relative; top: 0; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .main-menu .navbar-collapse li ul { position: absolute; left: inherit; top: 100%; min-width: 250px; z-index: 100; display: none; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul { position: relative; display: none; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .main-menu .navbar-collapse li ul:after { display: block; clear: both; content: ""; } } @media only screen and (max-width: 991px) and (max-width: 375px) { .main-menu .navbar-collapse li ul { min-width: auto; } } .main-menu .navbar-collapse li ul li { width: 100%; padding: 10px 20px; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul li { padding: 0 15px; } } .main-menu .navbar-collapse li ul li ul { left: 100%; top: 0%; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul li ul { left: auto; } } .main-menu .navbar-header { display: none; } @media only screen and (max-width: 991px) { .main-menu .navbar-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } .main-menu .navbar-header .navbar-toggle { width: 46px; height: 46px; float: right; cursor: pointer; padding: 5px 14px; background: var(--primary-color); } .main-menu .navbar-header .navbar-toggle .icon-bar { background:var(--heading-color); height: 2px; display: block; margin: 4px 0; } .main-menu .navbar-header .navbar-toggle .icon-bar:nth-child(2) { margin-right: 30%; } .main-menu .navbar-header .navbar-toggle .icon-bar:nth-child(3) { margin-right: 60%; } /* Search Btns */ .search-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-left: 1px solid var(--black-30); } .light-mode .search-btns{ border-left: 1px solid var(--black-90); margin-left: 30px; } /* Menuvar(--heading-color) */ .main-header.menu-white .nav-search>button { color:var(--heading-color); } @media only screen and (min-width: 992px) { .main-header.menu-white .main-menu .navigation>li>a, .main-header.menu-white .main-menu .navigation>.dropdown>.dropdown-btn { color:var(--heading-color); } } .main-header.menu-white .main-menu .navigation li li a:hover { color: var(--primary-color); } .main-header.menu-white .menu-sidebar button .icon-bar, .main-header.menu-white .main-menu .navbar-toggle .icon-bar { background:var(--heading-color); } .main-header.menu-white .toggle-btn { --c: conic-gradient(from -90deg,var(--heading-color) 90deg, #0000 0); } .light-mode .fa-chevron-down:before{ color: var(--black-30); } .light-mode .main-header .fa-chevron-down:before{ color: var(--black-90); } /*******************************************************/ /******************** ## Hero Area ********************/ /*******************************************************/ .hero-area { position: relative; } .giant-text.text-black-90{ color: var(--black-90); } .light-mode .hero-area{ background: var(--heading-color); } .text-right{ text-align: right; } section img{ border-radius: 30px; } .fa-arrow-right{ font-size: 16px; font-weight: bold; transform: rotate(-45deg); } .button-pri .fa-arrow-right{ font-size: 32px; } .button-rm-hr{ width: 100%; border-bottom: 1px solid var(--black-90); } .button-rm-hr a{ float: left; } .button-rm-hr .fa-arrow-right{ font-size: 16px; margin-left: auto; } .hero-content { background: var(--black-100); padding: 32px; max-width: 450px; margin-top: -115px; margin-left: 96px; } .row.text-right .giant-text { position: relative; right: 20px; } .hero-img{ margin-top: -64px; } .hero-item{ background-size: cover; background-repeat: no-repeat; } button.prev, button.next{ width: 56px; height: 56px; border-radius: 50%; } .carousel-control-next-icon, .carousel-control-prev-icon{ display: inline; } .hero-area button.prev{ position: absolute; right: 4px; bottom: 50%; z-index: 1; } .hero-area button.next{ position: absolute; right: 4px; bottom: calc(50% + 60px); z-index: 1; } .light-mode .hero-area .hero-content h6, .light-mode .hero-area .hero-content .button-rm-hr i{ color: var(--black-30); } /*-------Hero-area-2--------*/ .hero-area-2 .hero-item{ background-size: cover; background-repeat: no-repeat; } .pri-button{ border-bottom: 1px solid white; width: fit-content; } .pri-button a{ color: white; } .pri-button i{ margin-left: 10px; color: white; } .pri-button:hover i, .pri-button:hover a{ color: var(--primary-color); } .hero-area-2 .content{ position: relative; } .hero-area-2 .small-img img{ width: 634px; height: 634px; object-fit: cover; position: absolute; right: 0; bottom: 0; border: 16px solid var(--black-20); border-radius: 50%; } .hero-area-2 .container.slick-arrow{ position: relative; height: 56px; margin-left: auto; margin-right: auto; } .hero-area-2 .slick-list{ margin-top: -56px; margin-bottom: -72px; } .hero-area-2 .container.slick-arrow:has(button.prev){ top: 200px; } .hero-area-2 .container.slick-arrow:has(button.next){ top: -648px; } .hero-area-2 button.prev{ position: absolute; top: 0; right: 0; z-index: 1; } .hero-area-2 button.next{ z-index: 1; position: absolute; right: 0; top: 0; } .hero-area-2 .giant-text{ position: relative; z-index: 1; } .hero-area-2 .slick-dots { position: relative; bottom: 96px; align-items: center; display: flex; margin-left: auto !important; margin-right: auto !important; width: 1410px; padding-left: 15px; } .hero-area-2 .slick-dots li{ background: white; width: 4px; height: 4px; border-radius: 50%; display: inline-block; overflow: hidden; margin-right: 8px; } .light-mode .hero-area-2 .slick-dots li{ border: 1px solid var(--black-90); } .hero-area-2 .slick-dots li:last-child{ margin-right: 0; } .hero-area-2 .slick-dots li button{ background: transparent; content: none; } .hero-area-2 .slick-dots li.slick-active{ width: 16px; height: 16px; } .hero-area-2 .slick-dots li.slick-active button{ color: white; margin-top: 10px; } @media(max-width: 1399px){ .hero-content{ margin-left: 48px; } .hero-area-2 .container.slick-arrow:has(button.prev) { top: 180px; } .hero-area-2 .container.slick-arrow:has(button.next) { top: -564px; } .hero-area-2 .small-img img { width: 480px; height: 480px; } .hero-area-2 .slick-dots{ width: 1140px; } } @media(max-width: 1199px){ .hero-area-2 .container.slick-arrow:has(button.prev) { top: 139px; } .hero-area-2 .container.slick-arrow:has(button.next) { top: -500px; } .hero-area-2 .slick-dots { width: 960px; } } @media(max-width: 1199px){ .button-pri{ right: 4px; } } @media (max-width: 991px) { .hero-content{ max-width: 230px; margin-top: -96px; } .hero-content .button-rm-hr{ margin-top: 24px; } .button-pri { right: 44px; } .he-phone{ display: none; } .hero-area button.prev{ bottom: 30%; } .hero-area button.next { bottom: calc(30% + 60px); } .hero-area-2 .container.slick-arrow:has(button.next) { top: -454px; } .hero-area-2 .small-img img { width: 320px; height: 320px; border: 8px solid var(--black-20); } .hero-area-2 .content > .mt-64{ margin-top: 16px; } .hero-area-2 .slick-dots { width: 720px; } } @media (max-width: 767px) { .hero-area .hero-item > div:first-child, .hero-area .hero-item > div:nth-child(2), .hero-area .hero-area button.prev, .hero-area .hero-area button.next{ display: none!important; } .hero-content{ margin-left: auto; margin-right: auto; max-width: 90%; margin-top: 0; } .hero-img { margin-top: -25px; } .hero-area-2 div.slick-arrow, .hero-area button.slick-arrow{ display: none!important; } .hero-area-2 .slick-list{ margin-top: 0; margin-bottom: 0; } .hero-area-2 .slick-dots { width: 540px; } } @media (max-width: 575px) { .hero-area-2 .slick-dots { max-width: 540px; } } @media (max-width: 500px) { .hero-area-2 .small-img img { display: none; } } /*******************************************************/ /******************* ## Page Banner *******************/ /*******************************************************/ .banner-area { background-color: var(--black-80); background-size: cover; background-position: bottom; } .banner-area .sub-title{ margin-left: auto; margin-right: auto; width: auto; } .breadcrumb { padding: 0; margin: 0 auto; font-size: 16px; background: transparent; text-transform: capitalize; display: inline-block; } .breadcrumb .breadcrumb-item { padding: 0; display: inline-block; } .breadcrumb .breadcrumb-item a:not(:hover) { color:var(--heading-color); } .breadcrumb .breadcrumb-item { color:var(--heading-color); } .breadcrumb .breadcrumb-item:not(:first-child)::before { content: "\f30b"; margin-left: 16px; margin-right: 16px; -webkit-box-flex: 0; -ms-flex: none; flex: none; color:var(--primary-color); font-family: 'Font Awesome 5 Pro'; } @media(max-width: 539px){ .banner-area .sub-title .text{ width: 76%; } } /*******************************************************/ /******************** ## About Area ********************/ /*******************************************************/ .light-mode .about-area{ background: var(--black-10); } .about-area .left{ padding-right: 96px; } .about-area .right{ position: relative; } .about-area .right-image2 { margin-top: 12%; z-index: 2; position: absolute; right: 15px; } .about-area .right-image3{ margin-top: -30%; position: relative; z-index: 1; margin-left: 20%; } .about-area .nubmer{ font-size: 450px; line-height: 0.8; font-weight: bold; letter-spacing: -5px; margin-left: 15%; margin-top: -266px; margin-bottom: -7px; opacity: 0.2; } @media (max-width: 1399px) { .about-area .nubmer { font-size: 320px; margin-left: 20%; } } @media (max-width: 1199px) { .about-area .nubmer { font-size: 245px; margin-left: 24%; } } @media (min-width: 992px){ .about-area .nubmer{ color: var(--black-100); text-shadow: 1px 1px 0 var(--primary-color), -1px -1px 0 var(--primary-color), 1px -1px 0 var(--primary-color), -1px 1px 0 var(--primary-color), 1px 1px 0 var(--primary-color); } .light-mode .about-area .nubmer{ color: var(--black-10); text-shadow: 1px 1px 0 var(--primary-color), -1px -1px 0 var(--primary-color), 1px -1px 0 var(--primary-color), -1px 1px 0 var(--primary-color), 1px 1px 0 var(--primary-color); } } @media (max-width: 991px){ .about-area .nubmer{ display: none; } .about-area .left { padding-right: 0; margin-bottom: 64px; } .about-area .button-pri { right: 0px; } } @media (max-width: 767px){ .about-area .right-image2, .about-area .right-image3{ display: none; } .about-area .right img{ width: 100%; max-width: 100%; } } /*******************************************************/ /******************** ## About Area 2 ********************/ /*******************************************************/ .light-mode .about-area-2{ background: var(--black-10); } .about-area-2 .imgs{ position: relative; } .about-area-2 .imgs img{ width: 100%; -webkit-transition: all linear 0.7s; -khtml-transition: all linear 0.7s; -moz-transition: all linear 0.7s; -ms-transition: all linear 0.7s; -o-transition: all linear 0.7s; transition: all linear 0.7s; } .about-area-2 .imgs .hovershow{ position: absolute; top: 0; right: 0; opacity: 0; } .about-area-2 .imgs:hover img{ opacity: 0; } .about-area-2 .imgs:hover img.hovershow{ opacity: 1; } .about-area-2 .left{ padding-right: 64px; } .about-area-2 .info{ padding: 16px; width: 100%; background: var(--black-120); } .light-mode .about-area-2 .info{ background: white; } .about-area-2 .info p{ margin-bottom: 0; } .about-area-2 .info i{ color: var(--primary-color); margin-right: 16px; } .about-area-2 .info:not(:first-child){ margin-top: 16px; } /*About area 3*/ .light-mode .about-area-3{ background: white; } .about-area-3 .about-content .col-lg-8.content{ margin-left: auto; margin-right: auto; } @media (max-width: 991px){ .about-area-2 .button-pri, .about-area-3 .button-pri { right: 0px; } .about-area-2 .left{ margin-bottom: 64px; padding-right: 0; } .about-area-2 .gap-16 { --bs-gutter-x: 16px; } } @media (max-width: 767px){ .about-area-2 .left .gap-16 > .col-md-6:first-child{ margin-bottom: 16px; } } /*******************************************************/ /****************** ## Trending Styles Area *******************/ /*******************************************************/ .light-mode .trending-style{ background: white; } .trending-style .pro-items{ height: 464px; display: flex; gap: 64px; } .trending-style .card { width: 33.33%; cursor: pointer; overflow: hidden; border-radius: unset; border: none; transition: width .5s ease; border-radius: 30px; background: var(--black-120); position: relative; } .trending-style .card:after { position: absolute; content: ''; background: #00000082; top: 0; width: 100%; height: 100%; opacity: 0; } .trending-style .card:hover::after { opacity: 1; } .trending-style .card:hover { width: 90%; } .trending-style .card img { width: 100%; height: 464px; object-fit: cover; transition: all .5s ease; } .trending-style .card:hover img { transform: scale(1.2); -webkit-transition: all 400ms ease-in-out; -khtml-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; transition: all 400ms ease-in-out; } .trending-style-content { display: none; } .trending-style .card:hover .trending-style-content { display: block; position: absolute; left: 32px; bottom: 32px; width: 450px; z-index: 999; } .trending-style-content p { margin-top: 16px; } .trending-style-content h4, .trending-style-content p, .trending-style-content a, .trending-style-content i { color: white; } .trending-style .fa-arrow-right { margin-left: 10px; } .trending-style .button-rm-hr{ width: fit-content; border-bottom: 1px solid white; } @media (max-width: 767px){ .trending-style .trending-style-content p{ display: none; } } /*Trending Style 2*/ .light-mode .trending-style-2{ background: white; } .trending-style-2 .carousel-item-next, .trending-style-2 .carousel-item-prev, .trending-style-2 .carousel-item.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .trending-style-2 .carousel-item .trending-act{ position: relative; justify-content: center; } .trending-style-2 .carousel-item .trending-act:first-child{ padding-right: 64px; width: 25%; } .trending-style-2 .carousel-item .trending-act:last-child{ padding-left: 64px; width: 25%; } .trending-style-2 .carousel-item .trending-act:first-child .carousel-caption, .trending-style-2 .carousel-item .trending-act:last-child .carousel-caption{ display: none!important; } .trending-style-2 img{ min-height: 600px; object-fit: cover; position: relative; } .trending-style-2 .trending-style-content2{ position: absolute; top: 64px; left: 64px; } .trending-style-2 .carousel-item .trending-act:last-child .trending-style-content2{ left: 128px; } .trending-style-2 .trending-act:not(:nth-child(2)) .trending-style-content2{ display: none; } .trending-style-2 .trending-act:hover .trending-style-content2{ display: block; } .buttons-vertical{ display: grid; float: right; } .buttons-vertical button.prev{ margin-bottom: 4px; } .light-mode .section-heading button.prev, .light-mode .section-heading button.next{ border: 1px solid var(--black-90); } .light-mode .section-heading .carousel-control-prev-icon i, .light-mode .section-heading .carousel-control-next-icon i{ color: var(--black-90); } @media(max-width: 1600px){ .trending-style-2 .trending-style-content2{ top: 32px; left: 32px; } .trending-style-2 .carousel-item .trending-act:last-child .trending-style-content2{ left: 96px; } } @media(max-width: 1399px){ .trending-style-2 img{ min-height: 320px; } .trending-style-2 .trending-act:first-child:hover .trending-style-content2, .trending-style-2 .trending-act:last-child:hover .trending-style-content2 { display: none; } } @media(max-width: 1199px){ .trending-style .pro-items { gap: 30px; } .trending-style-2 .container-fluid.pl-64{ padding-left: 32px; } .trending-style-2 .container-fluid.pr-64{ padding-right: 32px; } } @media(max-width: 991px){ .section-heading .button-pri { top: 32px; } .trending-style .pro-items { gap: 16px; } .trending-style .pro-items, .trending-style .card img { height: 320px; } .trending-style-2 .carousel-item .trending-act:last-child { width: 35%; } .trending-style-2 .carousel-item .trending-act:first-child { width: 35%; } } @media(max-width: 767px){ .trending-style-2 .carousel-item .trending-act:first-child { padding-right: 32px; } .trending-style-2 .carousel-item .trending-act:last-child { padding-left: 32px; } } @media(max-width: 575px){ .section-heading{ text-align: center; justify-content: center; } .section-heading:not(:has(.button-pri)).mb-96{ margin-bottom: 32px; } .sub-title .line{ width: 32px; } .section-heading .sub-title { align-items: center; justify-content: center; padding-left: 15px; } .carousel-buttons.buttons-vertical{ display: flex!important; margin: 32px 32px 0 32px; float: unset; } .carousel-buttons.buttons-vertical button.next{ margin-left: auto; } .button-pri { right: 30%; } .trending-style-2 .carousel-item .trending-act:first-child, .trending-style-2 .carousel-item .trending-act:last-child { display: none; } } @media(max-width: 500px){ .button-pri { right: 25%; } } @media(max-width: 400px) { .button-pri { right: 20%; } .trending-style .pro-items { display: block; } .trending-style .card { width: 100%; } .trending-style .card:not(:last-child) { margin-bottom: 30px; } .trending-style .pro-items, .trending-style .card img { height: auto; } } /*******************************************************/ /****************** ## Projects Area *******************/ /*******************************************************/ .homeproject-area .project-active .item { margin-bottom: 0; } .homeproject-area img{ max-width: 100%; height: auto; } .project-filter.tab-style-one{ margin-left: auto; margin-right: auto; } .light-mode .homeproject-area{ background: var(--black-10); z-index: -2; position: relative; } .project-active{ height: auto!important; } .project-active .item{ position: unset!important; } .homeproject-area .tab-content img{ position: relative; z-index: -1; } .pro-content { z-index: 99; margin: auto 0; height: auto; } .home-projects-content{ padding: 64px; border-radius: 30px; width: 128%; height: auto; } .odd-pro .home-projects-content{ margin-left: -28%; } .even-pro .home-projects-content{ margin-right: -28%; left: 0; } .even-pro .pro-img{ text-align: right; } .home-pro-desc{ margin-top: 56px; } .home-projects-content h3{ margin-top: 16px; } .light-mode .home-projects-content h3, .light-mode .home-projects-content p{ color: var(--black-30); } .light-mode .home-projects-content h4, .light-mode .home-projects-content .pro-list li{ color: white; } .pro-img{ position: relative; } @media(max-width: 1199px){ .home-projects-content { padding: 32px; } .home-projects-content .button-pri{ display: none; } } @media only screen and (max-width: 991px) { .homeproject-area .tab-content img { width: 100%; } .home-projects-content{ width: 100%; } /* .homeproject-area .odd-pro img{ border-bottom-left-radius: unset; border-bottom-right-radius: unset; } */ /* .homeproject-area .odd-pro .home-projects-content{ border-top-left-radius: unset; border-top-right-radius: unset; } */ .homeproject-area .even-pro img{ border-top-left-radius: unset; border-top-right-radius: unset; } .homeproject-area .even-pro .home-projects-content{ border-bottom-left-radius: unset; border-bottom-right-radius: unset; } .odd-pro .home-projects-content, .even-pro .home-projects-content{ margin: 0; } } @media only screen and (max-width: 576px) { .home-projects-content{ padding: 32px; } } /*Home 2 Projects*/ .light-mode .home2project-area{ background: var(--black-10); } .home2project-area .item img{ width: 100%; height: 800px; object-fit: cover; } .home2project-area .item{ margin-bottom: 30px; } .home2project-area .apartment-image{ position: relative; } .home2project-area .carousel-caption{ padding: 64px; background-color: rgba(0, 0, 0, 0.5); position: absolute; width: fit-content; border-radius: 30px; top: 20%; bottom: 20%; display: none; } .home2project-area .item:hover .carousel-caption{ display: block; } .home2project-area .col-lg-6 .carousel-caption{ left: 28%; right: 28%; } .home2project-area .button-pri .theme-btn:before{ content: none; } .home2project-area .button-pri .theme-btn:hover{ background: var(--primary-color); } @media(max-width: 1899px){ .home2project-area .col-lg-3 .carousel-caption{ left: 12%; right: 12%; } } @media (max-width: 1799px) { .home2project-area .col-lg-3 .carousel-caption { left: 9%; right: 9%; } } @media (max-width: 1699px) { .home2project-area .col-lg-3 .carousel-caption { left: 6%; right: 6%; } } @media(max-width: 1599px){ .home2project-area .carousel-caption { padding: 32px; } } @media (max-width: 1499px) { .home2project-area .col-lg-6 .carousel-caption { left: 22%; right: 22%; } } @media(max-width: 1399px){ .home2project-area .item img{ height: 600px; } .home2project-area .carousel-caption{ top: 10%; bottom: 10%; } } @media (max-width: 1299px) { .home2project-area .col-lg-3 .carousel-caption { left: 0%; right: 0%; } } @media (max-width: 1199px) { .home2project-area .col-lg-6 .carousel-caption { left: 8%; right: 8%; } .home2project-area .col-lg-6 .carousel-caption { left: 17%; right: 17%; } } @media (max-width: 991px) { .home2project-area .gap-30{ --bs-gutter-x: 30px; } .home2project-area .col-lg-6 .carousel-caption, .home2project-area .col-lg-3 .carousel-caption { left: 10%; right: 10%; } .home2project-area .button-pri { right: 0; } } @media (max-width: 575px) { .home2project-area .col-lg-6 .carousel-caption, .home2project-area .col-lg-3 .carousel-caption { left: 22%; right: 22%; } } @media (max-width: 400px) { .home2project-area .col-lg-6 .carousel-caption, .home2project-area .col-lg-3 .carousel-caption { left: 15%; right: 15%; } } .light-mode .home2project-area h4{ color: white; } /*projects-area*/ .projects-area .item{ margin-bottom: 96px; } .light-mode .projects-area{ background: var(--black-10); } .light-mode .projects-area .readmore{ color: var(--black-90); } .projects-area .content{ padding: 32px 64px; } .projects-area .content .readmore{ margin-left: auto; } .projects-area .thumb-image img{ position: relative; width: 100%; height: auto; object-fit: cover; } .projects-area .carousel-buttons{ position: absolute; top: 45%; z-index: 2; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; } .projects-area .carousel-buttons .prev{ margin-left: 16px; } .projects-area .carousel-buttons .next{ margin-right: 16px; } .pro-b-a-item .img-container img{ display: block; } .pro-b-a-images{ place-content: center; position: relative; overflow: hidden; --position: 50%; } .pro-b-a-images .slider-image{ width: 100%; height: 100%; max-width: 1410px; max-height: 656px; object-fit: cover; object-position: left; } .pro-b-a-images .image-before{ position: absolute; inset: 0; width: var(--position); } .pro-b-a-images .image-before{ border-top-right-radius: unset; border-bottom-right-radius: unset; } .pro-b-a-images .buttonslider{ position: absolute; inset: 0; cursor: pointer; opacity: 0; width: 100%; height: 100%; } .pro-b-a-images .buttonslider:focus-visible ~ .slider-button{ outline: 5px solid black; outline-offset: 3px; } .pro-b-a-images .slider-line{ position: absolute; inset: 0; width: 4px; height: 100%; background-color:var(--heading-color); z-index: 10; left: var(--position); transform: translateX(-50%); pointer-events: none; } .pro-b-a-images .slider-button{ position: absolute; background-color:var(--heading-color); padding: 16px; border-radius: 50%; display: grid; place-items: center; top: 50%; left: var(--position); transform: translate(-50%, -50%); pointer-events: none; box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5); } .projects-area .thumb-image.video { -webkit-clip-path: none; clip-path: none; z-index: 1; position: relative; } .projects-area .thumb-image.video .video-play { color:var(--heading-color); z-index: 2; position: absolute; width: auto; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 50px; } @media(max-width: 575px){ .projects-area .content{ padding: 32px; } .projects-area .readmore{ display: none; } } /*projects 02*/ .homeproject-area .pro-list li{ text-align: right; } .homeproject-area .pro-list li b{ float: left; } .homeproject-area .pro-list li:not(:last-child){ border-bottom: 1px solid var(--black-90); } .homeproject-area .pro-list li:not(:first-child){ padding-top: 16px; } /*projects 03*/ .light-mode .projects-03-area{ background: var(--black-10); } .light-mode .projects-03-area .readmore{ color: var(--black-90); } .projects-03-area .item img{ width: 100%; max-width: 100%; } .projects-03-area .item { margin-bottom: 64px; } .projects-03-area .content{ padding: 32px 64px; } .projects-03-area .readmore{ margin-left: auto; } @media(max-width: 991px){ .projects-03-area .gap-64{ --bs-gutter-x: 30px; } .projects-03-area .readmore{ display: none; } .projects-03-area .content { padding: 32px; } } /*project details*/ .light-mode .project-details{ background: var(--black-10); } .project-details .carousel-indicators{ margin: 30px auto 0 auto; } .project-details .carousel-item img{ position: relative; max-height: 792px; object-fit: cover; width: 100%; } .project-details .carousel-buttons{ position: absolute; top: 33%; z-index: 2; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; } .project-details .carousel-buttons button.prev{ margin-left: 16px; } .project-details .carousel-buttons button.next{ margin-right: 16px; } .project-details .carousel-indicators button, .project-details .carousel-indicators [data-bs-target], .project-details .carousel-indicators button img{ width: 100%; height: 128px; padding: 0; margin: 0; } .project-details .carousel-indicators button{ border: unset; border-radius: 30px; } .project-details .carousel-indicators, .project-details .carousel-indicators button{ position: relative; } .project-details .carousel-indicators button img{ position: absolute; top: 0; left: 0; object-fit: cover; } .project-details .carousel-list-images{ width: 100%; justify-content: center; } .project-details .carousel-list-images .button-img{ display: none; } .project-details .carousel-list-images .button-img:has(button.active), .project-details .carousel-list-images .button-img:has(button.active) + .button-img, .project-details .carousel-list-images .button-img:has(button.active) + .button-img + .button-img, .project-details .carousel-list-images .button-img:has(button.active) + .button-img + .button-img + .button-img, .project-details .carousel-list-images .button-img:has(+ .button-img:nth-last-child(3) button.active), .project-details .carousel-list-images .button-img:has(+ .button-img:nth-last-child(2) button.active), .project-details .carousel-list-images .button-img:has(+ .button-img + .button-img:nth-last-child(2) button.active), .project-details .carousel-list-images .button-img:has(+ .button-img:last-child button.active), .project-details .carousel-list-images .button-img:has(+ .button-img + .button-img:last-child button.active), .project-details .carousel-list-images:has(.button-img:last-child button.active) .button-img:nth-last-child(4){ display: inherit; } .project-details .carousel-list-images .button-img:first-child{ padding-left: 0; padding-right: 15px; } .project-details .carousel-list-images .button-img:nth-child(2){ padding-left: 15px; padding-right: 15px; } .project-details .carousel-list-images .button-img:last-child{ padding-left: 15px; padding-right: 0; } .project-details .detail-list-text li{ margin-bottom: 16px; } .project-details .detail-list-text li i{ margin-right: 5px; } .project-details .project-active .item:not(:first-child){ margin-bottom: 30px; } .project-details .detail-info > .left{ margin-top: 8px; } @media(min-width: 991px){ .project-details .detail-info > .left{ padding-right: 15px; margin-top: 8px; } .project-details .detail-info > .right{ padding-left: 15px; } } .project-details .tag-list{ display: inline; } .project-details .tag-list li{ display: inline-block; margin-bottom: 30px; } .project-details .tag-list li a{ color: var(--black-90); background: white; padding: 16px 32px; border-radius: 30px; } .project-details .tag-list li a{ margin-left: 8px; } .project-details .share{ text-align: right; } .project-details .share a{ margin-left: 16px; } .light-mode .project-details .share a{ color: var(--black-90); } @media only screen and (max-width: 991px) { .project-details .carousel-buttons{ top: 26%; } .project-details .detail-info > .right{ margin-top: 96px; } .project-details .project-active .item:not(:first-child){ margin-top: 30px; } } @media only screen and (max-width: 767px) { .project-details .carousel-indicators{ display: none; } .project-details .carousel-buttons { top: 43%; } } .project-details .right .pro-list li{ text-align: right; } .project-details .right .pro-list li b{ float: left; } .project-details .right .pro-list li:not(:last-child){ border-bottom: 1px solid var(--black-90); } .light-mode .project-details .right .pro-list li:not(:last-child){ border-bottom: 1px solid var(--black-10); } .project-details .right .pro-list li:not(:first-child){ padding-top: 16px; } .project-details .right .widget{ background: var(--black-120); padding: 40px; border-radius: 30px; } .light-mode .right .widget{ background: white; } .project-details .right .widget:not(:last-child){ margin-bottom: 30px; } .light-mode .right .recent-posts h5, .light-mode .right .recent-posts h6{ color: white; } .light-mode .right .recent-posts .content{ color: var(--black-30); } .right .recent-posts li{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 32px; } .right .recent-posts li:last-child{ margin-bottom: 0; } .right .recent-posts a.recent-thumb{ width: 96px; height: 96px; display: contents; } .right .recent-posts img{ width: 96px; height: 96px; object-fit: cover; aspect-ratio: 1/1; } .right .recent-posts li i{ color: var(--primary-color); } .right .recent-posts li h6{ margin-bottom: 0; } @media(min-width: 376px){ .right .recent-posts li .content{ margin-left: 16px; } } @media(max-width: 375px){ .right .recent-posts li{ display: block!important; } .right .recent-posts img{ margin-bottom: 16px; } } .right .widget-categories li{ text-align: right; border-bottom: 1px solid var(--black-90); padding: 16px 0; } .light-mode .right .widget-categories li{ border-bottom: 1px solid var(--black-10); } .right .widget-categories li a{ float: left; } .light-mode .right .widget-categories li a{ color: var(--black-90); } .right .widget-categories li:first-child{ padding-top: 0; } .right .widget-categories li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .right .widget-tags a{ padding: 8px 16px; background:var(--heading-color); color: var(--black-100); border-radius: 30px; } .light-mode .right .widget-tags a{ background: var(--black-10); } .right .widget-tags li{ margin-bottom: 14px; margin-right: 4px; display: inline-block; } .right .widget-tags{ padding-right: 36px!important; padding-bottom: 26px!important; } .project-details .widget.sale-off{ min-height: 400px; background-size: cover; background-repeat: no-repeat; } .project-details .widget.sale-off .text{ padding: 8px; background: var(--black-120); border-radius: 50%; width: 128px; height: 128px; text-align: center; } .project-details .widget.sale-off .text p{ margin-bottom: 10px; } .project-details .widget.sale-off .col-8 { width: 64%; } .project-details .widget.sale-off .col-4 { width: 36%; } .project-details .widget .text .percent{ background: var(--primary-color); } @media(max-width: 575px){ .project-details .widget.sale-off .text{ width: 128px; } } /*******************************************************/ /****************** ## Services Area *******************/ /*******************************************************/ .service-area .section-title{ float: left; } .light-mode .service-area{ background: var(--black-20); } .light-mode .service-item{ background: white; } .light-mode .service-item i{ color: var(--black-90); } .service-area .icon{ padding: 32px; background: var(--black-90); width: fit-content; border-radius: 50%; margin-left: auto; margin-right: auto; margin-bottom: -64px; z-index: 1; position: relative; width: 112px; height: 112px; } .service-area .icon .fa:before{ font-size: 48px; color: var(--primary-color); display: inline-block; } .service-area img{ margin-bottom: 32px; } .service-item { padding: 32px; border-radius: 30px; } .service-area .gap-96 > div { margin-bottom: 96px; } .service-area .gap-96{ margin-bottom: -96px; } @media (max-width: 1399px) { .service-area .gap-96 { --bs-gutter-x: 64px; } .service-area .gap-96 > div { margin-bottom: 64px; } .service-area .gap-96{ margin-bottom: -64px; } } @media (max-width: 1199px) { .service-area .gap-96 { --bs-gutter-x: 32px; } .service-area .gap-96 > div { margin-bottom: 32px; } .service-area .gap-96{ margin-bottom: -32px; } } /*service-area-2*/ .light-mode .service-area-2{ background: white; } .service-area-2 .carousel-item-next, .service-area-2 .carousel-item-prev, .service-area-2 .carousel-item.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .service-area-2 .service-act{ width: calc(33.33333333% - 64px); height: 400px; position: relative; transition: all 0.5s ease-in-out; } .service-area-2 .carousel-item .service-act:first-child{ margin-right: 64px; } .service-area-2 .carousel-item .service-act:nth-child(2){ margin-left: 32px; margin-right: 32px; } .service-area-2 .carousel-item .service-act:last-child{ margin-left: 64px; } .service-area-2 .service-act .content{ padding: 64px; border: 1px solid var(--black-80); border-radius: 30px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; transition: all 0.5s ease-in-out; } .service-area-2 .service-act img{ max-width: 100%; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: all 0.5s ease; } .service-area-2 .service-act:hover img { opacity: 1; } .light-mode .service-area-2 .service-act .content h4, .light-mode .service-area-2 .service-act .content p, .light-mode .service-area-2 .service-act .content i{ color: var(--black-90)!important; } .light-mode .service-area-2 .service-act:hover .content h4, .light-mode .service-area-2 .service-act:hover .content p, .light-mode .service-area-2 .service-act:hover .content i{ color: white!important; } @media(max-width: 1599px){ .service-area-2 .service-act { width: calc(33.33333333% - 32px); } .service-area-2 .carousel-item .service-act:first-child { margin-right: 32px; } .service-area-2 .carousel-item .service-act:nth-child(2) { margin-left: 16px; margin-right: 16px; } .service-area-2 .carousel-item .service-act:last-child { margin-left: 32px; } .service-area-2 .service-act .content{ padding: 32px; } } @media(max-width: 1199px){ .service-area-2 .service-act { width: calc(33.33333333% - 16px); } .service-area-2 .carousel-item .service-act:first-child { margin-right: 16px; } .service-area-2 .carousel-item .service-act:nth-child(2) { margin-left: 8px; margin-right: 8px; } .service-area-2 .carousel-item .service-act:last-child { margin-left: 16px; } .service-area-2 .service-act .content{ padding: 16px; } } @media(max-width: 1199px){ .service-area-2 .service-act .content .my-32{ margin: 16px 0; } .service-area-2 .service-act, .service-area-2 .service-act img { height: 450px; } } @media(max-width: 767px){ .service-area-2 .service-act, .service-area-2 .service-act img { height: 400px; } .service-area-2 .carousel-item.active{ display: block; } .service-area-2 .service-act{ width: 100%; } .service-area-2 .carousel-item .service-act{ margin-left: 0!important; margin-right: 0!important; } .service-area-2 .carousel-item .service-act:not(:first-child){ display: none; } } @media(max-width: 575px){ .service-area-2 .container-fluid{ padding-left: 16px; padding-right: 16px; } } /* End Services Area */ /*******************************************************/ /******************* ## Timeline Area ******************/ /*******************************************************/ .light-mode .timeline-area{ background: white; } .section-heading .button{ text-align: right; margin: auto 0 auto auto; } .section-heading .button a{ font-size: 16px; line-height: 24px; padding: 16px 32px; color: white; background-color:var(--primary-color); } .timeline-item .content{ width: 100%; margin-left: 164px; } .wprocess-title { background: var(--black-100); padding: 16px 32px 20px 32px; border-radius: 30px; height: 108px; } .light-mode .wprocess-title{ background: var(--black-10); } /* .timeline-item.slick-current .wprocess-title{ padding: 20px 32px; } */ .wprocess-title .h4{ width: 90%; display: block; } .wprocess-title .arrow-icon{ position: absolute; right: 15px; top: 37px; } .wprocess-title .arrow-icon::after { content: '\f107'; font-weight: 600; font-family: 'Font Awesome 5 Pro'; font-size: 16px; transition: all .3s; margin-inline-start: 15px; right: 0; position: absolute; transform: rotate(-90deg); } .timeline-item.slick-current .wprocess-title .arrow-icon:after{ color: var(--primary-color); } .timeline-item .content:hover .wprocess-title .arrow-icon::after { transform: unset; } .timeline-item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0; } .timeline-item:not(:first-child){ margin-top: 32px; } .timeline-item .description { clear: both; margin-bottom: 0; height: 0; overflow-y: hidden; display: block; margin-top: 0; background: var(--black-100); text-align: justify; } .light-mode .timeline-item .description{ background: var(--black-10); } .timeline-item .content:hover .description { height: 100%; min-height: auto; overflow-y: hidden; padding: 15px 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .timeline-item:has(.content:hover) .wprocess-title{ border-bottom: 1px solid var(--black-90); border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .light-mode .timeline-item:has(.content:hover) .wprocess-title{ border-bottom: 1px solid var(--black-30); } .timeline-item:before { opacity: 0; content: "\f177"; position: absolute; left: 25px; top: 50%; font-weight: 300; font-size: 28px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: var(--primary-color); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: "Font Awesome 5 Pro"; } .timeline-item.slick-current .icon:after, .timeline-item.slick-current .h3{ color: var(--primary-color); } .timeline-item.slick-current .icon{ top: 20px; border: 1px solid var(--primary-color); } .timeline-item.slick-current .icon:before { opacity: 1; } .timeline-item .icon{ width: 64px; height: 64px; -webkit-box-flex: wrap; -ms-flex: wrap; cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; position: absolute; border-radius: 50%; margin-right: 32px; top: 25px; left: 64px; } .timeline-item.slick-current .icon:before{ border: 1px solid var(--black-30); } .timeline-item .icon:after{ content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: var(--heading-color); border-radius: 50%; text-align: center; } .timeline-item.slick-current .icon:after{ width: 32px; height: 32px; line-height: 32px; } .timeline-item.slick-current + .timeline-item .icon:after { width: 24px; height: 24px; line-height: 24px; } .timeline-item.slick-current + .timeline-item .h3 { font-size: 38px; top: 25px; position: relative; } .timeline-item.slick-current + .timeline-item + .timeline-item .icon:after { width: 16px; height: 16px; line-height: 16px; } .timeline-item.slick-current + .timeline-item + .timeline-item .h3 { font-size: 28px; position: relative; top: 25px; } .timeline-item.slick-current + .timeline-item + .timeline-item + .timeline-item .icon:after { width: 8px; height: 8px; line-height: 8px; } .timeline-item.slick-current + .timeline-item + .timeline-item + .timeline-item .h3 { font-size: 20px; position: relative; top: 0; } @media(max-width: 1399px) { /* .timeline-item.slick-current .wprocess-title { padding: 39px 32px; } */ .timeline-item.slick-current + .timeline-item .h3+ { font-size: 28px; } .timeline-item.slick-current + .timeline-item + .timeline-item .h3 { font-size: 20px; } .timeline-item.slick-current + .timeline-item + .timeline-item + .timeline-item .h3{ font-size: 16px; } } .light-mode .timeline-item .icon:after { background: var(--black-90); } .timeline-item.slick-current .icon:before { color:var(--heading-color); } .timeline-item .icon.h2 { color: var(--black-30); margin-left: 32px; } @media(min-width: 992px) { .timeline-item .icon.h2 { text-shadow: 2px 0 0 var(--black-30); } .timeline-item.slick-current .icon.h2 { text-shadow: 2px 0 0 var(--heading-color); } } .timeline-item.slick-current .icon.h2 { color:var(--heading-color); } .light-mode .section-heading .button a { background-color: var(--black-100); color: white; } .light-mode .timeline-item .icon.h2 { text-shadow: 2px 0 0 var(--black-30); } .light-mode .timeline-item.slick-current .icon.h2 { color: var(--black-100); text-shadow: 2px 0 0 var(--black-100); } @media(max-width: 991px) { .light-mode .timeline-item.slick-current .icon.h2 { text-shadow: unset; } } .timeline-item.slick-current:before { top: 50px; left: 0; opacity: 1; } .timeline-content .slick-slide { display: -webkit-box; display: -ms-flexbox; display: flex; } @media(max-width: 499px) { .timeline-area .slick-list { height: 450px!important; } .timeline-item.slick-current:before { content: none; } .timeline-item.slick-current .icon { top: 10px; } .timeline-item .icon { left: 10px; width: 32px; height: 32px; } .timeline-item .icon:after { width: 4px; height: 4px; } .timeline-item .content { margin-left: 55px; } .timeline-item .description { height: 200px; overflow-y: scroll; } .wprocess-title .arrow-icon::after { transform: unset; } .timeline-item .content .description { padding: 32px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .timeline-item.slick-current .content .wprocess-title { border-bottom: 1px solid var(--black-90); border-bottom-right-radius: unset; border-bottom-left-radius: unset; } } /*******************************************************/ /**************** ## Testimonials Area - Reviews Area*****************/ /*******************************************************/ .light-mode .reviews-area{ background: var(--black-10); } .testi-content { background: var(--black-120); padding: 72px 96px 56px 96px; border-radius: 30px; } .light-mode .testi-content{ background: white; } .reviews-area .testi-img { width: 570px; height: 570px; border-radius: 50%; object-fit: cover; margin: 0 auto -88px auto; z-index: 1; position: relative; } .testimonial-item .cite{ margin: 0 auto; width: 33.333333%; position: relative; } .light-mode .testimonial-item .cite h5{ color: var(--black-100)!important; } .testimonial-item .testi-author + i{ position: absolute; right: 0; font-size: 96px; color: var(--primary-color); opacity: 20%; } .testimonials-slider .slick-dots { margin-top: 50px; align-items: center; display: flex; margin-left: auto; margin-right: auto; width: fit-content; } .testimonials-slider .slick-dots li{ background: var(--black-30); width: 4px; height: 4px; border-radius: 50%; display: inline-block; overflow: hidden; margin-right: 8px; } .light-mode .testimonials-slider .slick-dots li{ background: var(--black-90); } .light-mode .testimonials-slider .slick-dots li{ border: 1px solid var(--black-90); } .testimonials-slider .slick-dots li:last-child{ margin-right: 0; } .testimonials-slider .slick-dots li button{ background: transparent; content: none; } .testimonials-slider .slick-dots li.slick-active{ width: 16px; height: 16px; } .testimonials-slider .slick-dots li.slick-active button{ color: var(--black-30); margin-top: 10px; } .light-mode .designations{ color: var(--black-90); } @media(max-width: 1399px){ .reviews-area .testimonial-item .cite { width: 40%; } .reviews-area .testi-img { width: 150px; height: 150px; display: none; } } @media(max-width: 1199px){ .reviews-area .testimonial-item .cite { width: 50%; } .reviews-area .testi-img { width: 350px; height: 350px; } } @media(max-width: 991px){ .reviews-area .testi-img { width: 300px; height: 300px; } .reviews-area .testimonial-item .cite { width: 80%; } } @media(max-width: 767px){ .reviews-area .testimonial-item .cite { width: 100%; } .testi-content { padding: 164px 32px 32px 32px; } } @media(max-width: 400px){ .reviews-area .testi-img { width: 200px; height: 200px; } .testimonial-item .testi-author + i{ display: none; } .testi-content { padding: 164px 16px 16px 16px; } } /*Reviews2 Area*/ .light-mode .reviews2-area{ background: var(--black-10); } .reviews2-area .testimonial-item-bg{ background: var(--black-90); padding: 64px; position: relative; } .light-mode .reviews2-area .testimonial-item-bg { background: var(--black-10); } .reviews2-area .testimonial-item:first-child{ padding-right: 15px; } .reviews2-area .testimonial-item:last-child{ padding-left: 15px; } .reviews2-area .carousel-item-next, .reviews2-area .carousel-item-prev, .reviews2-area .carousel-item.active{ display: flex; } .reviews2-area .testimonial-item-bg3{ background: var(--black-120); padding: 64px; position: relative; border-radius: 30px; } .light-mode .reviews2-area .testimonial-item-bg3 h5{ color: var(--black-100)!important; } .light-mode .reviews2-area .testimonial-item-bg3{ background: white; } .reviews2-area .carousel-item.active .section-title{ visibility: visible!important; } .reviews2-area .testi-img{ width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-right: 16px; } .reviews2-area .testimonial-item .testi-author + i{ right: 64px; } @media(min-width: 992px){ .light-mode .reviews2-area.black-100-bg .section-title h2{ text-shadow: 2px 0 var(--black-90); } .light-mode .reviews2-area.black-110-bg .section-title h2{ text-shadow: 2px 0 white; } .light-mode .error-area h1, .light-mode .error-area .h1{ text-shadow: 2px 0 var(--black-100); } } .reviews2-area .testimonial-item-bg{ background: var(--black-90); padding: 64px; position: relative; } .light-mode .reviews2-area .testimonial-item-bg { background: var(--black-10); } .reviews2-area .testimonial-item:first-child{ padding-right: 15px; } .reviews2-area .testimonial-item:last-child{ padding-left: 15px; } .reviews2-area .carousel-item-next, .reviews2-area .carousel-item-prev, .reviews2-area .carousel-item.active{ display: flex; } .reviews2-area .testimonial-item-bg3{ background: var(--black-120); padding: 64px; position: relative; } .light-mode .reviews2-area .testimonial-item-bg3{ background: white; } .reviews2-area .carousel-item.active .section-title{ visibility: visible!important; } @media(max-width: 991px){ .reviews2-area .testimonial-item:first-child{ padding-right: 0; } .reviews2-area .testimonial-item:last-child{ padding-left: 0; margin-top: 30px; } } @media(max-width: 499px){ .reviews2-area .testimonial-item:last-child{ display: none; } .reviews2-area .testimonial-item-bg3 > .d-flex{ display: block!important; } .reviews2-area .testimonial-item-bg3 > .d-flex img{ margin-bottom: 16px; } .reviews2-area .testimonial-item-bg3{ padding: 16px; } } /*******************************************************/ /****************** ## CTA Area ********************/ /*******************************************************/ .light-mode .cta-area { background: white; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .light-mode .cta-area:after { position: absolute; content: ''; background: #000000; top: 0; width: 100%; height: 100%; opacity: .6; } .light-mode .cta-area h2{ color: var(--black-90); } .cta-area form{ width: 60%; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid var(--black-30); border-radius: 50px; } .cta-area input{ color: var(--black-30); background-color: var(--black-120); border: none; border-top-left-radius: 50px; border-bottom-left-radius: 50px; } .cta-area form button{ background: var(--black-120); color: var(--black-30); border-top-right-radius: 50px; border-bottom-right-radius: 50px; padding: 0 32px; } @media(max-width: 991px){ .cta-area form { width: 80%; } } @media(max-width: 767px){ .cta-area form { width: 100%; } } @media(max-width: 575px){ .cta-area h6.mt-96 { margin-top: 0; } } /*******************************************************/ /******************** ## Blog Area ********************/ /*******************************************************/ /*blog home page*/ .light-mode .blog-home{ background: var(--black-10); } .blog-home .blog-item .content{ padding: 32px; background: var(--black-120); border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .light-mode .blog-home .blog-item .content{ background: white; } .light-mode .blog-home .blog-item .content h6 a{ color: var(--black-90)!important; } .blog-home .blog-item img{ width: 100%; border-bottom-right-radius: unset; border-bottom-left-radius: unset; } .blog-home .col-md-4 .blog-item img{ height: 243px; object-fit: cover; } .blog-home .col-md-8 .blog-item img{ height: 645px; object-fit: cover; } .blog-home .content .readmore{ margin-left: auto; color: var(--primary-color); } .blog-home .col-md-8 .blog-meta{ margin: 0; } .blog-home .col-md-4 .blog-meta{ margin: 0 auto; width: fit-content; } .blog-home .blog-item .content span i, .blog-home .blog-item .blog-meta li i{ color: var(--primary-color) } @media(max-width: 1399px){ .blog-home .col-md-4 .blog-item img{ height: 190px; } .blog-home .col-md-8 .blog-item img{ height: 539px; } } @media(max-width: 1199px){ .blog-home .col-md-4 .blog-meta{ display: none; } .blog-home .col-md-8 .blog-item img { height: 543px; } } @media(max-width: 991px){ .blog-home .col-md-4 .blog-item img{ height: 187px; } .blog-home .gap-30{ --bs-gutter-x: 30px; } .blog-home .blog-item .content { padding: 20px; } } @media(max-width: 767px){ .blog-home .col-md-8 .blog-item img, .blog-home .col-md-4 .blog-item img{ height: auto; } .blog-home .col-md-8{ margin-bottom: 30px; } .blog-home .blog-item .content{ text-align: left; } .blog-home .col-md-4 .blog-meta{ display: flex; margin: unset; } } /*blog page*/ .blog-banner{ height: 100vh; padding-top: 450px; } .blog-thumb .carousel-buttons{ position: absolute; top: 48%; z-index: 2; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: space-between; } .blog-thumb img{ position: relative; height: 456px; width: 100%; max-width: 930px; object-fit: cover; } .blog-content .blog-meta{ justify-content: left; } .blog-content .blog-desc{ padding: 40px; } .blog-content .blog-desc:has(.primary-readmore){ padding-bottom: 56px; } .primary-readmore{ background: var(--primary-color); color: white; padding: 16px 32px; margin-top: 32px; } .primary-readmore:hover{ background: white; color: var(--primary-color); } .blog-content .left{ padding-right: 15px; } .blog-content .sidebar{ padding-left: 15px; } .blog-item{ margin-bottom: 30px; } .blog-item:last-child{ margin-bottom: 0; } .blog-item .blog-thumb.video { -webkit-clip-path: none; clip-path: none; z-index: 1; position: relative; } .blog-item .blog-thumb.video .video-play { color:var(--heading-color); z-index: 2; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 50px; } .blog-content .sidebar .widget-wrapper:not(.search-wg){ margin-top: 30px; padding: 40px; background-color: var(--black-120); } .blog-content .widget-wrapper h5{ margin-bottom: 25px; } .blog-content .sidebar .search-form input{ background-color:var(--heading-color); border-radius: unset; border: unset; height: 60px; } .blog-content .sidebar .search-form button{ position: absolute; right: 0; background: var(--primary-color); padding: 16px 32px; } .blog-content .sidebar .recent-posts li{ display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 32px; } .blog-content .sidebar .recent-posts li:last-child{ margin-bottom: 0; } .blog-content .sidebar .recent-posts a.recent-thumb{ width: 96px; height: 96px; display: contents; } @media(min-width: 375px){ .blog-content .sidebar .recent-posts li .content{ margin-left: 16px; } } .blog-content .sidebar .recent-posts img{ width: 96px; height: 96px; object-fit: cover; aspect-ratio: 1/1; } .blog-content .sidebar .recent-posts li i{ color: var(--primary-color); } .blog-content .sidebar .recent-posts li h6{ margin-bottom: 0; } .blog-content .sidebar .widget-categories li{ margin-bottom: 16px; text-align: right; } .blog-content .sidebar .widget-categories li a{ float: left; } .blog-content .sidebar .widget-categories li:last-child{ margin-bottom: 0; } .blog-content .sidebar .widget-tags a{ padding: 16px 32px; background:var(--heading-color); color: var(--black-100); } .blog-content .sidebar .widget-tags li{ margin-bottom: 30px; margin-right: 4px; display: inline-block; } .blog-content .sidebar .widget-tags li:last-child{ margin-right: 0; margin-bottom: 20px; } .blog-content .sidebar .tags { margin-top: 40px; } .sidebar .widget-categories{ margin-top: -5px; } /*blog details*/ .detail-title{ margin-top: 30px; } /* blockquote section */ blockquote { z-index: 1; padding: 32px; position: relative; overflow: hidden; margin: 30px 0; border-left: 5px solid var(--primary-color); border-radius: 30px; } @media only screen and (max-width: 375px) { blockquote { padding-left: 25px; padding-right: 25px; } } blockquote cite.name { float: right; color: white; clear: both; } .blog-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; } .blog-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; margin-top: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-meta li i { font-size: 16px; margin: -1px 8px 0 0; color: var(--primary-color); } .blog-meta li:not(:first-child){ margin-left: 16px; } .blog-tags{ margin-top: 30px; } .blog-tags span{ margin-right: 16px; } .blog-tags .tag-list{ display: inline; } .blog-tags .tag-list li{ display: inline-block; } .blog-tags .tag-list li a{ padding: 16px 32px; background:var(--heading-color); color: var(--black-100); } @media only screen and (max-width: 991px) { .sidebar { margin-top: 96px; } .blog-content .left { padding-right: 0; } .blog-content .sidebar{ padding-left: 0; } } /* Comments */ .comments-area{ margin-top: 66px; } .comments-area h2{ margin-bottom: 32px; } .comment-body { padding: 32px; border-radius: 30px; background: var(--black-120); display: -webkit-box; display: -ms-flexbox; display: flex; } .light-mode .comment-body{ background: white; } .comment-body:not(:last-child) { margin-bottom: 30px; } .comment-body .author-img { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 20px; width: 128px; height: 128px; } .comment-body .author-img img{ object-fit: cover; border-radius: 50%; aspect-ratio: 1/1; width: 100%; height: auto; } .comment-reply-link{ padding: 8px 16px; border-radius: 30px; color: var(--black-100); background: var(--primary-color); } .comment-reply-link:hover{ color: var(--primary-color); background: var(--black-100); } .comment-body .right h6 { margin-bottom: 5px; text-transform: capitalize; } .comment-body .right .date { font-size: 16px; } .comment-body .right .date i{ color: var(--primary-color); } .comment-body .content { margin-top: 16px; } .comment-body .content p:last-child{ margin-bottom: 0; } .comment-body.child-comment { margin-left: 120px; position: relative; background: var(--black-120); padding: 32px; border-radius: 30px; } .light-mode .comment-body.child-comment{ background: white; } /* Comment Form */ .comment-form{ padding: 64px; background-color: var(--black-120); border-radius: 30px; } .comment-form .form-control{ color: white; } .light-mode .comment-form{ background: white; } .comment-form .form-control:focus{ background-color: var(--black-100); } .light-mode .comment-form .form-control:focus{ background-color: var(--black-10); } .light-mode .comment-form label{ color: var(--black-90); } .comment-form .form-group { margin-bottom: 40px; } .comment-form input, .comment-form textarea{ border: none; border-bottom: 1px solid var(--black-90); } .light-mode .comment-form input, .light-mode .comment-form textarea{ background: white; color: var(--black-90); } .comment-form .form-checkbox { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; } .comment-form .form-checkbox input { margin: -3px 10px 0 0; } .comment-form button{ padding: 16px 32px; border-radius: 30px; width: auto; color: var(--black-100); background: var(--primary-color); } @media only screen and (min-width: 992px) { .comment-form .theme-btn { padding-top: 17px; padding-bottom: 17px; } } @media only screen and (max-width: 767px) { .comment-body.child-comment { margin-left: 50px; } } @media only screen and (max-width: 576px) { .blog-banner{ padding-top: 356px; } .blog-tags .tag-list li{ margin-bottom: 28px; } .blog-meta{ display: block!important; } .comment-body .blog-meta{ margin: unset!important; } .blog-home .blog-meta{ margin-left: 0; margin-right: 0; } .blog-home .blog-meta li{ display: block; } .blog-meta li:not(:first-child) { margin-left: 0; } .comment-body{ display: block; } .comment-body .author-img { margin-bottom: 16px; } .comment-body:has(.comment-reply-link) .content{ margin-bottom: 26px; } .comment-form{ padding: 40px 16px; } .pagination li{ margin-bottom: 6px; } } @media only screen and (max-width: 375px) { .comment-body.child-comment { margin-left: 30px; } .comment-body .content { font-size: 16px; } .blog-content .sidebar .recent-posts li{ display: block; } .sidebar .recent-posts li img{ margin-bottom: 16px; } .blog-content .sidebar .search-form button{ right: 12px; } } .light-mode .blog-content{ background: white; } .light-mode .blog-desc { background-color: var(--black-10); color: var(--black-90); } .light-mode .blog-content .sidebar .widget-wrapper:not(.search-wg) { background-color: var(--black-10); } .light-mode .blog-content .sidebar a{ color: var(--black-90); } .light-mode .blog-content .sidebar .search-form input{ border: 1px solid var(--black-10); } .light-mode blockquote{ background: white; } .light-mode blockquote cite{ color: var(--black-100); } .light-mode .blog-tags .tag-list li a{ background: var(--black-100); color: white; } /*******************************************************/ /******************* ## Counter Area *******************/ /*******************************************************/ .counter-title { font-weight: 700; color: var(--heading-color); text-transform: capitalize; } .text-white .h2, .text-white h5{ color: white; } .achievement-area{ padding: 320px 0; background-size: cover; background-repeat: no-repeat; text-align: center; } .achievement-area .counter-text-wrap > div{ justify-content: center; } .achievement-area .counter-text-wrap{ padding: 64px 32px; border: 1px solid white; border-radius: 30px; } @media(max-width: 991px){ .achievement-area .mobile-mb:not(:last-child){ margin-bottom: 30px; } } /*******************************************************/ /******************** ## Team Area *********************/ /*******************************************************/ .team-area .carousel-item-next, .team-area .carousel-item-prev, .team-area .carousel-item.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .light-mode .team-area{ background: var(--black-10); } .team-area .carousel-item .team-item-wrap{ position: relative; } .team-area .carousel-item .team-item-wrap:nth-child(2){ padding: 0 10px; } .team-area .carousel-item .team-item-wrap:first-child{ padding-right: 20px; } .team-area .carousel-item .team-item-wrap:last-child{ padding-left: 20px; } @media(max-width: 767px){ .team-area .team-item-wrap:not(:first-child){ display: none; } .team-area .team-item-wrap .text { margin-top: 32px; } .team-area .container-fluid{ padding-left: 16px; padding-right: 16px; } .team-area .carousel-item .team-item-wrap{ padding: 0!important; } } /*******************************************************/ /****************** ## FAQ Area ******************/ /*******************************************************/ .light-mode .faq-area{ background: var(--black-10); } @media (min-width: 1400px) { .faq-area h5 button, .faq-area .h5 button{ line-height: 1.32; font-size: 28px; } } @media only screen and (max-width: 1399px) { .faq-area h5 button, .faq-area .h5 button{ line-height: 1.32; font-size: 24px; } } @media only screen and (max-width: 767px) { .faq-area h5 button, .faq-area .h5 button{ line-height: 1.5; font-size: 22px; } } .accordion-item { background-color: unset; border: unset; border-bottom: 1px solid var(--black-80); } .light-mode .accordion-item{ border-bottom: 1px solid var(--black-20); } .accordion-button { padding: 34px 0; background-color:unset; color: var(--black-30); } .accordion-item:first-child .accordion-button{ padding-top: 0; } .accordion-body{ padding: 34px 0; } .accordion-button:focus { border-color: unset; box-shadow: unset; } .light-mode .accordion-button{ color: var(--black-90); } .accordion-button:not(.collapsed) { color: white; background-color: unset; box-shadow: unset; border-bottom: 1px solid var(--primary-color); } .light-mode .accordion-button:not(.collapsed){ color: var(--black-100); } .accordion-button::after{ background-image: unset; content: '\f107'; font-weight: 600; font-family: 'Font Awesome 5 Pro'; font-size: 16px; transition: all .3s; margin-inline-start: 15px; right: 0; position: absolute; } .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); background-image: unset; } .faq-area .image{ position: relative; text-align: right; overflow: hidden; padding-bottom: 96px; } .faq-area .image img{ position: relative; top: 96px; left: 0; bottom: 0; z-index: 1; max-width: calc(100% - 96px); border-radius: 50%; } .faq-area .image:after{ content: ''; width: calc(100% - 160px); background: var(--primary-color); position: absolute; top: 0; left: 32px; bottom: 96px; border-radius: 50%; } .faq-area .image:hover:after{ content: none; transition: right 0.3s ease-out 0.2s; } .faq-area .image:hover img{ top: 0; left: 0; transition: left 0.3s ease-out 0.2s; max-width: 100%; max-height: 100%; } .faq-area .image:hover{ padding-bottom: 0; } @media(max-width: 991px){ .faq-area .faq { padding-right: 0; } .faq-area .image{ display: none; } } /*******************************************************/ /****************** ## Contact Area ******************/ /*******************************************************/ .light-mode .contact-area{ background: white; } .ct-form{ height: 100%; } .contact-form { border: 1px solid #ccc; padding: 64px; margin: auto 0; border-radius: 30px; } .contact-form .form-group{ margin-bottom: 96px; } .contact-form input, .contact-form select, .contact-form textarea, .contact-form .nice-select, .contact-form .form-control { background: transparent; border: unset; border-bottom: 1px solid #ccc; color: white; border-radius: 0; } .light-mode .contact-form input, .light-mode .contact-form select, .light-mode .contact-form textarea, .light-mode .contact-form .nice-select, .light-mode .contact-form .form-control{ color: var(--black-90); } .contact-btn { background: var(--primary-color); padding: 16px 32px; color: white; width: auto; border-radius: 30px; display: flex; justify-content: center; text-align: center; margin: auto; margin-top: 30px; } .contact-info-item i{ margin-right: 32px; } .light-mode .studio-area{ background: var(--black-10); } .studio-area .item-bg{ padding: 32px; } .light-mode .studio-area p a{ color: var(--black-90); } .studio-area p a:hover{ color: var(--primary-color); } @media(max-width: 767px){ .studio-area .section-heading{ text-align: center; } .studio-area .sub-title{ justify-content: center; } } /* Contact Form Validation */ .has-error .with-errors { color: red; margin-top: 5px; margin-bottom: -15px; } #msgSubmit { margin-bottom: 0; margin-top: 10px; } .map-area iframe{ height: 800px; filter: grayscale(100%); margin-bottom: -9px; } @media (max-width: 1399px){ .contact-form{ padding: 32px; } .contact-area .text-bg { width: 178px; } .contact-area .rotate{ left: -420px; font-size: 220px; } } @media (max-width: 991px){ .contact-area .right { display: none; } .studio-area .gap-30.project-active { --bs-gutter-x: 10px; } .studio-area .item-bg { padding: 16px; } } @media (max-width: 767px){ .studio-area .item:not(:first-child){ margin-top: 30px; } } /*******************************************************/ /****************** ## 404 Area ********************/ /*******************************************************/ .light-mode .error-area{ background: white; } .error-giant{ font-size: 520px; line-height: 382px; letter-spacing: -5px; font-weight: bold; } .error-giant-2{ font-size: 180px; line-height: 140px; letter-spacing: -5px; font-weight: bold; } .form-btn{ background: var(--primary-color); padding: 16px 32px; border-radius: 30px; color: var(--black-100); } .form-btn:hover{ background: var(--black-100); color: var(--primary-color); } @media(max-width: 1699px){ .error-giant{ font-size: 460px; } .error-giant-2{ font-size: 160px; } } @media(max-width: 1499px){ .error-giant{ font-size: 320px; line-height: 240px; } .error-giant-2{ font-size: 110px; } } @media(max-width: 1199px){ .error-giant{ font-size: 220px; line-height: 165px; } .error-giant-2{ font-size: 80px; line-height: 1; } } @media(max-width: 767px){ .error-giant{ font-size: 140px; line-height: 104px; } .error-giant-2{ font-size: 50px; letter-spacing: 0px; } } @media(max-width: 500px){ .error-giant{ font-size: 80px; line-height: 62px; } .error-giant-2{ font-size: 24px; line-height: 0.8; } } /*******************************************************/ /******************** ## Main Footer *******************/ /*******************************************************/ .light-mode footer{ background: white; } .light-mode footer a:not(:hover){ color: var(--back-90); } .footer-bottom{ border-bottom: 1px solid var(--black-90); } .footer-bottom .footer-widget:not(:first-child){ margin-left: auto; } .footer-widget { display: block; width: 33.33%; } .footer-widget h5{ font-weight: bold; } .footer-bottom .information { width: 90%; } .footer-bottom .info{ margin-bottom: 16px; } .footer-bottom .info p{ margin-bottom: 0; } .footer-bottom .info i { color: var(--primary-color); margin-right: 16px; margin-top: 6px; } .footer-bottom ul li:not(:last-child){ border-bottom: 1px solid var(--black-90); padding: 16px 0; } .light-mode .footer-bottom ul li:not(:last-child) { border-bottom: none; } .links { display: flex; flex-wrap: wrap; } .links li { width: 35%; } .footer-bottom ul li:last-child { padding-top: 16px; padding-bottom: 0; } .footer-bottom ul li:hover i { color: var(--primary-color); } footer .copyright p{ margin-bottom: 0; } @media(max-width: 991px) { .footer-bottom { display: block!important; padding: 0; border-bottom: unset; } .footer-bottom .footer-widget:not(:first-child) { margin-left: unset; } .footer-widget { width: 50%; margin-bottom: 64px; } .footer-widget:nth-child(odd) { float: left; padding-right: 16px; clear: both; } .footer-widget:nth-child(even) { float: right; padding-left: 16px; } .copyright { clear: both; } } @media(max-width: 575px) { .footer-widget{ width: 100%; margin-bottom: 64px; float: left!important; padding-left: 0!important; padding-right: 0!important; } } /*******************************************************/ /******************** ## Intro *******************/ /*******************************************************/ @media(min-width: 767px) { .intro-area .col-md-6.left { padding-right: 15px; } .intro-area .col-md-6.right { padding-left: 15px; } } .intro-area .content { margin-left: auto; margin-right: auto; margin-top: 64px; text-align: center; } .screen { display: block; width: 100%; height: 600px; overflow: hidden; position: relative; margin: 0 auto; } .screen img { width: 100%; border-radius: unset; height: auto; position: absolute; z-index: 0; margin:0; padding:0; -webkit-transition: top 11s; -moz-transition: top 11s; -ms-transition: top 11s; -o-transition: top 11s; transition: bottom 11s; } @media(min-width:1400px) { .screen img { bottom: -4960px; } } @media (min-width:1200px) and (max-width:1399px) { .screen img { bottom: -3004px; } } @media (max-width:1199px) { .screen img { bottom: -2204px; } } @media (max-width:767px) { .screen img { bottom: -1704px; } .intro-area .left { margin-bottom: 128px; } } .screen:hover img { bottom: 0; -webkit-transition: all 11s; -moz-transition: all 11s; -ms-transition: all 11s; -o-transition: all 11s; transition: all 11s; } .logo img { width: 180px; } .top-header-block ul li { display: inline-block; margin-left: 25px; } .top-header-block ul { text-align: right; } .top-header-block { background: #882f30; padding: 5px 0; } .top-header-block ul li a { color: #fff !important; } .h4.author-text.mb-64.testi-text { font-size: 22px; text-align: center; font-weight: 500; } .project-filter a.nav-link { text-transform: uppercase; } .card .trending-style-content h4 { text-transform: uppercase; } .giant-text span { width: 15px !important; height: 15px !important; background: #f58634; z-index: 999; display: inline-block; border-radius: 50%; } .container { width: 100%; max-width: 1280px; margin: 0 auto; } .row.slider-box-top { margin-top: -60px; } .caption-line h6 { color: #141413; font-size: 20px; border-bottom: 1px solid #b9b9b8; padding: 16px 0px; margin-bottom: 20px; font-weight: 600; } .footer-socials i { font-size: 20px; margin-right: 20px; color: #f58634; } .footer-socials { margin: 20px 0 0; } .footer-socials h5 { font-size: 20px; margin-bottom: 20px; } .wprocess-title span.h3.title { font-size: 20px !important; letter-spacing: 0px; } .kitchen_styling_img img { width: 100%; } .wardrobes-block .col-md-4 { padding: 0 15px; flex: 0 0 50%; max-width: 50%; } .wardrobes-block .row { margin: 0 -15px; } .wardrobes-boxs-content h5 { font-size: 20px; } .wardrobes-boxs { height: 100%; } .wardrobes-boxs-content { text-align: left; padding: 0px 20px; border-radius: 10px; height: 100%; } .wardrobes-boxs-content p { margin-bottom: 0; } .wardrobes_content_box { margin: 50px 0 0; } .wardrobes_content_box .row { gap: 30px 0; } .main-footer .giant-text { font-size: 50px; letter-spacing: 4px; } .hero-area .hero-item .giant-text { font-size: 105px; line-height: 1; font-weight: 900; letter-spacing: 0; } .hero-content { margin-left: 20px; } .hero-content { background: var(--black-100); padding: 32px 25px; max-width: 380px; margin-top: -115px; } .core_meterial { left: 302px !important; position: absolute !important; } .mega-box ul li:first-child { background: #882f30 !important; } .mega-box ul li:first-child a { color: #fff !important; } .reviews-area .testi-img { display: none; } .testi-text { letter-spacing: 0px; } .timeline-content .wprocess-title { padding: 30px; border-radius: 30px; height: auto; } .timeline-item.slick-current + .timeline-item .h3 { font-size: 38px; top: 0; position: relative; } .timeline-item.slick-current + .timeline-item + .timeline-item .h3 { font-size: 28px; position: relative; top: 0; } .wprocess-title .arrow-icon::after { top: -10px; } .tab-ul ul li { padding-bottom: 10px; list-style: disc; margin-left: 20px; } .navigation li:hover ul { display: block; } .timeline-area .slick-list { position: relative; display: block; overflow: unset; margin: 0; padding: 0; } .contactus_info_box .row { margin: 0 -15px; } .contactus_info_box .col-md-4 { padding: 0 15px; } .contactus_box_content { border: 1px solid #e3e3e3; border-radius: 10px; padding: 20px; background: #fff; box-shadow: 0 0 3px 0px rgba(0,0,0,.1); height: 100%; text-align: center; } .contactus_box_content i { width: 70px; height: 70px; background: #882f30; border-radius: 100px; color: #fff; font-size: 25px; line-height: 70px; margin-bottom: 20px; } .contactus_info { margin: 50px 0 70px; } .contactus_box_content p { margin-bottom: 0; } .contactus_box_content p a { color: #2C2C2B; } .contact-form .form-group { margin-bottom: 5px; } #contactForm { width: 100%; max-width: 70%; margin: auto; } .disc_title { width: 100%; max-width: 70%; margin: 20px auto; } .sub_menus { display: none; } ul.sub_menus { display: none !important; } ul.sub-nav li:hover ul.sub_menus { display: block !important; } .dropdown-btn { position: absolute; top: 30px; right: -5px; display: none; } ul.sub-nav li { position: relative; } .plus-icon { position: absolute; top: 23px; right: 25px; transition: .5s; } ul.sub-nav li:hover .plus-icon { transform: rotate(90deg); } #apart-tap1 h4 { font-size: 17px; margin-bottom: 20px; } .wardrobes-img img { width: 100%; max-width: 100px; } .wardrobes-num-box { display: flex; justify-content: space-between; margin-bottom: 30px; } .wardrobes-img { flex: 0 0 100px; } .navigation li { position: relative; } .navigation li i { position: absolute; top: 50%; right: -20px; transform: translate(0px, -50%); font-size: 22px; } .drop-menu { margin-right: 10px; } .plus-icon i { font-size: 16px !important; } p { letter-spacing: .5px; } a { letter-spacing: .5px; } .homeproject-area.portfolio-section .project-active .item { margin-bottom: 50px; } .portfolio-section .pagination { display: none; } p.description.show-first { height: 100% !important; min-height: auto; overflow-y: hidden; padding: 15px 30px; border-bottom-right-radius: 30px; border-bottom-left-radius: 30px; } .radias-unset { border-bottom-right-radius: unset !important; border-bottom-left-radius: unset !important; border-bottom: 1px solid #B9B9B8 !important; } .tab-pane p { text-align: justify; } .tab-ul li { text-align: justify; } .design-consultation-text .section-title { margin-bottom: 20px; } .design-consultation-text ul { padding-left: 20px; margin: 15px 0 0 0; } .design-consultation-text ul li { padding-bottom: 10px; display: flex; align-items: flex-start; } .design-consultation-text ul li i { margin-right: 10px; margin-top: 6px; color: #882f30; } .design-consultation-text p { text-align: justify; } .form-title { margin: 0 0 50px; } .design-consultation--box .col-md-6 { padding: 0 30px; } .design-consultation--box .row { margin: 0 -30px; } input[type="number"] { -moz-appearance: textfield; } p.des-text { margin: 20px 0; max-width: 75%; } .owl-theme .owl-nav.disabled+.owl-dots { margin-top: 20px; } .portfolio-slider .item { margin-bottom: 0 !important; } .contact-form .row { margin: 0 15px; } .contact-form .col-md-6 { padding: 0 15px; } .contact-form .col-md-12 { padding: 0 15px; } textarea.form-control { min-height: 140px !important; height: 140px; } /* radio custom */ .select-radio .container { display: block; position: relative; padding-left: 30px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ .select-radio .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .select-radio .checkmark { position: absolute; top: 5px; left: 0; height: 18px; width: 18px; background-color: transparent; border-radius: 2px; border: 1px solid #2C2C2B; } .select-radio .container input:checked ~ .checkmark { background-color: #f58634; border: 2px solid #f58634; } /* Create the checkmark/indicator (hidden when not checked) */ .select-radio .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .select-radio .container input:checked ~ .checkmark:after { display: block; } .select-radio .container .checkmark:after { left: 4px; top: 0px; width: 7px; height: 11px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .form-group.radio-btn { margin: 20px 0 0; border-bottom: 1px solid #ccc; padding-bottom: 15px; } .form-group.radio-btn label { margin-bottom: 20px; color: #2C2C2B; } .select-radio label { font-size: 16px !important; } .check-box-flex { display: flex; flex-wrap: wrap; } .select-radio { width: 50%; } .select-radio .container { margin-bottom: 10px !important; } .form-group.radio-btn.agree { border-bottom: none; } .form-group.radio-btn.agree .select-radio { width: 100% !important; } .design-consultation-content .contact-form { padding: 32px 0; } .banner-area .giant-text { display: none; } .banner-area.py-128 { padding: 50px 0; } .banner-area .mt-64 { margin-top: 0; } .slick-track { height: auto !important; } .timeline-area .slick-list { height: auto !important; } @media (max-width:1300px) { .hero-area .hero-item .giant-text { font-size: 85px; line-height: 1; font-weight: 900; letter-spacing: 0; } } @media (max-width:1200px) { .hero-area .hero-item .giant-text { font-size: 75px; line-height: 1; font-weight: 900; letter-spacing: 0; } .trending-style-content h4 { font-size: 25px; } .section-title h2 { font-size: 40px; } .wprocess-title span.h3.title { font-size: 17px !important; letter-spacing: 0px; } .giant-text { font-size: 100px; } .container { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 20px; } .wardrobes-block { padding: 0 30px; } #contactForm { width: 100%; max-width: 80%; margin: auto; } } @media (max-width:1100px) { .hero-area .hero-item .giant-text { font-size: 60px; line-height: 1; font-weight: 900; margin-bottom: 15px; letter-spacing: 3px !important; } .nav-outer { margin-left: 68px; } .about-area .tab-content.mt-40 { margin-top: 20px; } .contact-form { padding: 32px 0; } } @media (max-width:1024px) { .nav-outer { margin-left: 0px !important; } .giant-text { font-size: 80px; } .contactus_box_content h5 { font-size: 20px; } } @media (max-width:991px) { .mobile-logo img { width: 220px; } .header-upper { padding: 20px 0; } .hero-area .hero-item .giant-text { font-size: 45px; } .hero-content { background: var(--black-100); padding: 32px 25px; max-width: 340px; margin-top: -115px; display: none; } .py-128 { padding-bottom: 50px; } .py-128 { padding-top: 50px; } .section-title h2 { font-size: 33px; letter-spacing: 0px !important; } .section-heading .col-lg-2.text-right { text-align: left; } .button-pri { right: -36px; } .theme-btn { min-width: 130px; min-height: 130px; border-radius: 80px; } .mobile-logo img { width: 200px; } .button-pri { right: 44px; } .hero-slider .slick-slide img.hero-img { display: block; margin: 40px 0 0 0; } .text-right .giant-text.text-black-90 { margin: 30px 0 0; } .hero-area .hero-item .giant-text { font-size: 45px; letter-spacing: 0 !important; } .button-pri.button-left { right: -10px; } .trending-style .button-pri { right: -50px; } .trending-style-content h4 { font-size: 20px; } .trending-style-content p { margin-top: 16px; line-height: normal; } .homeproject-area .mb-96 { margin-bottom: 40px; } .timeline-area .button-pri { right: -50px; } .timeline-images { display: none; } .timeline-item .content { width: 100%; margin-left: 0; margin: auto; } .timeline-item .icon { display: none; } .timeline-item:before { display: none; } .reviews-area .mb-96 { margin-bottom: 40px; } .blog-area .button-pri { right: -50px; } .blog-area .mb-96 { margin-bottom: 80px; } .pt-128 { padding-top: 70px; } .footer-widget { width: 50%; margin-bottom: 20px; } .footer-widget { width: 100%; margin-bottom: 20px; } .footer-widget:nth-child(even) { float: right; padding-left: 0; } .footer-widget.third-widget h5 { margin-bottom: 20px; } .footer-widget h5 { font-weight: bold; font-size: 22px; } .footer-bottom ul li:not(:last-child) { border-bottom: 1px solid var(--black-90); padding: 16px 0 0; } .giant-text { font-size: 60px; } .main-header .header-upper { z-index: 5; position: unset; } .main-header { margin-bottom: 0; } .links li { width: 35%; } .drop-menu { margin-right: 0; } .navigation li i { width: 50px; height: 40px; text-align: center; line-height: 40px; z-index: 999; top: 21px; } .main-menu .navbar-collapse li a { padding: 10px 10px; line-height: 22px; width: calc(100% - 50px); } .mobile-logo img { width: 180px; } .project-details .button-pri { right: -50px; } .kitchens-style-text h4 { font-size: 23px; } .box-kitchens .col-lg-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; } .col-md-6 { flex: 0 0 auto; width: 100%; } .wardrobes-block .section-heading .button-pri { top: 10px; } .contact-area .giant-text.mb-64 { margin-bottom: 0px; } #contactForm { width: 100%; max-width: 90%; margin: auto; } .select-radio { width: 100%; } } @media (max-width:767px) { .hero-area .hero-item > div:first-child, .hero-area .hero-item > div:nth-child(2), .hero-area .hero-area button.prev, .hero-area .hero-area button.next { display: block !important; } .hero-area .button-pri { display: none; } .hero-area .hero-item .giant-text { font-size: 40px; letter-spacing: 0 !important; } .about-area .right-image2, .about-area .right-image3 { display: block; width: 50% !important; } .about-area .right img { width: 50%; } .about-area .right-image2 { margin-top: 0; z-index: 2; position: absolute; right: -5px; top: 0; } .about-area .right-image3 { margin-top: -380px; position: relative; z-index: 1; margin-left: 37%; } .trending-style .pro-items, .trending-style .card img { height: auto; display: block; } .trending-style .card { width: 100%; cursor: pointer; overflow: unset; background-color: transparent; margin-bottom: 30px; } .trending-style-content { display: block; position: absolute; top: 50%; left: 40px; transform: translate(0px, -50%); z-index: 9999; } .trending-style .card:hover { width: 100%; } .trending-style .container-fluid { padding-left: 30px; padding-right: 30px; } .trending-style .card:hover img { transform: none; } .trending-style .card:after { position: absolute; content: ''; background: #00000082; top: 0; width: 100%; height: 100%; opacity: 1; border-radius: 0; } .section-title h2 { font-size: 30px; letter-spacing: 0px !important; } .footer-widget h5 { font-weight: bold; font-size: 20px; } .mobile-logo img { width: 160px; } .giant-text { font-size: 50px; } p.des-text { margin: 20px 0; max-width: 100%; } .project-details .button-pri { left: 40%; } .box-kitchens .col-lg-6 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; } .derection-reverse { flex-direction: column-reverse; } .kitchens-style-text h4 { font-size: 22px; margin-bottom: 5px; } .wardrobes-img img { width: 100%; max-width: 90px; } .wardrobes-img { flex: 0 0 90px; } .wardrobes-boxs-content h5 { font-size: 18px; } .wardrobes-block { padding: 0 10px; } .wardrobes-boxs-content p { margin-bottom: 0; line-height: 23px; } .light-mode .home-projects-content h4, .light-mode .home-projects-content .pro-list li { color: white; font-size: 22px; margin-bottom: 10px; } .tab-pane .home-projects-content p { text-align: left !important; } ul.nav-pills.tab-style-one .nav-link { padding: 16px 22px; } .contactus_info_box .row { gap: 30px 0; } .sub-titl .mb-32 { margin-bottom: 15px; } } @media (max-width:640px) { .hero-area .hero-item .giant-text { font-size: 35px; letter-spacing: 0 !important; } .about-area .left h2 { font-size: 24px; margin-bottom: 0 !important; } .about-area .right img { width: 40%; } .about-area .right-image3 { margin-top: -260px; margin-left: 31%; width: 40% !important; } .about-area .right-image2 { width: 40% !important; } .home-projects-content h3 { margin-top: 16px; font-size: 25px; } .links li { width: 36%; } .footer-widget.third-widget { margin-bottom: 0; } .giant-text { font-size: 35px; margin-bottom: 10px; } .sub-title .line { display: none; } .about-area-3 .my-64 { margin-bottom: 34px; } .about-area-3 .tab-pane p { text-align: left; } .section-title { position: relative; text-align: center; } .tab-content.mt-40.about-content-abbas { margin: 30px 0 0 !important; } .wardrobes-img img { width: 100%; max-width: 80px; } .wardrobes-img { flex: 0 0 80px; } .pt-128 { padding-top: 40px; } .links li { width: 100%; } .footer-bottom ul li { padding: 4px 0 0 !important; } .main-menu .navbar-header .navbar-toggle { width: 40px; height: 40px; float: right; cursor: pointer; padding: 5px 11px; background: var(--primary-color); border-radius: 3px; } .main-menu .navbar-header .navbar-toggle .icon-bar { background: var(--heading-color); height: 2px; display: block; margin: 4px 0; } .contactus_info { margin: 50px 0 40px; } } @media (max-width:576px) { .hero-area .hero-item .giant-text { font-size: 30px; letter-spacing: 0 !important; } .about-area .tab-content.mt-40 { margin-top: 0; } .section-title h2 { font-size: 22px; letter-spacing: 0px !important; } .section-heading .button-pri { top: 32px; left: 40%; } .button-pri .theme-btn:before { display: none; } .theme-btn i { display: none; height: auto !important; } .theme-btn br { display: none; } .theme-btn { min-width: auto; min-height: auto; border-radius: 10px; padding: 8px 20px; } .button-pri { position: unset; margin: 20px 0 0; text-align: center; } .section-heading { margin-bottom: 40px; } ul.nav-pills.tab-style-one .nav-link { padding: 16px 10px; } ul.nav-pills.tab-style-one .nav-link { padding: 16px 10px; font-size: 17px !important; } .home-projects-content h3 { margin-top: 16px; font-size: 21px; } .home-pro-desc { margin-top: 20px; } .tab-pane p { text-align: center; } .theme-btn, a.theme-btn { color: #fff; } .caption-line h6 { color: #141413; font-size: 18px; border-bottom: 1px solid #b9b9b8; padding: 16px 0px; margin-bottom: 20px; font-weight: 600; text-align: center; } .about-area .left h2 { font-size: 22px; margin-bottom: 0 !important; text-align: center; } .timeline-content .wprocess-title { padding: 20px !important; border-radius: 20px 20px 0 0 !important; margin-bottom: 2px; } .timeline-item .description { height: auto; overflow-y: hidden !important; } .timeline-item .content .description { padding: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important; text-align: left; } .radias-unset { border-bottom-right-radius: unset !important; border-bottom-left-radius: unset !important; border-bottom: none !important; } .wprocess-title .arrow-icon::after { display: none; } .timeline-item.slick-current .icon:after, .timeline-item.slick-current .h3 { color: var(--black-100) !important; } .timeline-item.slick-current .content .wprocess-title { border-bottom: none !important; } .drop-menu { margin-right: 0; } .blog-area .mb-96 { margin-bottom: 40px; } .giant-text { font-size: 25px; } .about-area-3 .giant-text.mb-64 { margin-bottom: 0; } .sub-title.mb-32 { margin-bottom: 10px; } .about-area-3 .mb-64 { margin-bottom: 34px; } #apart-tap1 h4 { font-size: 16px; margin-bottom: 20px; } .banner-area .sub-title .text { width: 100%; } .banner-area .section-heading { margin-bottom: 0; } .giant-text { font-size: 20px; } .kitchens-style-text h4 { font-size: 20px; margin-bottom: 5px; } .kitchens-style-text h4 { font-size: 20px; margin-bottom: 8px; } .kitchens-style-text h4 { font-size: 18px; margin-bottom: 6px; } .light-mode .home-projects-content h4, .light-mode .home-projects-content .pro-list li { color: white; font-size: 20px; margin-bottom: 10px; } .project-filter { display: block; } ul.nav-pills.tab-style-one { width: 100%; max-width: 100%; } ul.nav-pills.tab-style-one .nav-link { padding: 8px 10px; font-size: 16px !important; } .section-heading .sub-title { padding-left: 0; } .sub-title .dot-b, .sub-title .dot-a { display: none; } .sub-title { margin-left: 0; } } @media (max-width:480px) { .hero-area .hero-item .giant-text { font-size: 25px; letter-spacing: 0 !important; } .text-right .giant-text.text-black-90 { margin: 20px 0 0; } .hero-slider .slick-slide img.hero-img { display: block; margin: 30px 0 0 0; } .pb-64, .py-64 { padding-bottom: 34px; } .about-area .left h2 { font-size: 20px; } .caption-line h6 { color: #141413; font-size: 16px; border-bottom: 1px solid #b9b9b8; padding: 10px 0px; } .sub-title .line { width: 32px; display: none; } .sub-title .text { padding: 0 16px; font-size: 15px; } .section-title h2 { font-size: 20px; letter-spacing: 0px !important; } .trending-style .container-fluid { padding-left: 20px; padding-right: 20px; } .trending-style .card:after { border-radius: 10px; } .card img { border-radius: 10px; } .trending-style-content h4 { font-size: 16px; } .testi-content { padding: 40px 16px 16px 16px; } .h4.author-text.mb-64.testi-text { font-size: 16px; text-align: center; font-weight: 500; margin-bottom: 20px; } .reviews-area .testimonial-item .cite { width: 100%; justify-content: center; text-align: center; } .testi-author h5 { font-size: 18px; } .testi-author h5 { font-size: 17px; margin-bottom: 0; } .about-area-3 .mb-64 { margin-bottom: 20px; } .footer-widget h5 { font-weight: bold; font-size: 18px; } .links li { width: 100%; } .footer-bottom ul li { border-bottom: none; padding: 5px 0 0 !important; } .pt-128 { padding-top: 40px; } .footer-widget h5 { font-weight: bold; font-size: 16px; } .information p { line-height: 22px; } .kitchens-style-text p { line-height: 25px; } .wardrobes-num-box { display: block; } .wardrobes-img { margin-bottom: 20px; margin: auto 0px 10px; text-align: center; } .wardrobes-boxs-content { text-align: center; padding: 0px 20px; border-radius: 10px; height: 100%; } } .home-pro-desc { margin-top: 26px; } .home-projects-content h3 { margin-top: 16px; text-align: left; } .drop-menu i.active + ul { display: block !important; } .section-heading .sub-title .line { background: #f58634; width: 64px; height: 1px; display: inline-block; margin: auto 0; } .section-heading .sub-title .dot-b, .sub-title .dot-a { background: #f58634; width: 4px; height: 4px; border-radius: 50%; display: inline-block; } .owl-item.active .item { display: block!important; } ul.material-list li { color: #fff; list-style: disc; margin-left: 20px; } .d-blocks { display: block; } /* Checkbox wrapper */ .wpcf7-list-item label { display: flex; align-items: center; cursor: pointer; gap: 10px; font-size: 16px; } /* Hide default checkbox */ .wpcf7-list-item input[type="checkbox"] { display: none; } /* Create custom box */ .wpcf7-list-item-label { position: relative; padding-left: 28px; } /* Box */ .wpcf7-list-item-label::before { content: ""; width: 18px; height: 18px; border: 1px solid #2C2C2B; border-radius: 2px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #fff; } /* Checked box */ .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before { background-color: #f58220; /* ORANGE */ border-color: #f58220; } /* Tick */ .wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } label { cursor: pointer; font-weight: 500; margin-bottom: 5px; color: #2C2C2B; } span.wpcf7-form-control.wpcf7-checkbox { display: flex; flex-wrap: wrap; } .wpcf7-list-item { width: 50%; margin: 0; margin-bottom: 10px; } .service-label { margin-bottom: 20px; } #Design_Consultation .contact-form { padding: 32px 0; } .agree .wpcf7-list-item { width: 100%; } #Design_Consultation .contact-btn { background: var(--primary-color) !important; padding: 16px 32px !important; color: white !important; width: auto; border-radius: 30px !important; display: flex; justify-content: center; text-align: center; margin: auto; margin-top: 30px; } .wpcf7-spinner { display: none; } .owl-dots { margin: 20px 0; } .owl-nav { display: none; } #home_sliders .owl-item.active .item { display: flex !important; } #home_sliders .owl-carousel .owl-dots.disabled { display: block !important; } .material_section .even-pro .home-projects-content { margin-right: 0; left: 0; } .material_section .home-projects-content { padding: 64px; border-radius: 30px; width: auto; height: 100%; } .material_section .pro-content { z-index: 99; margin: 0 !important; height: auto; } .material_section .col-lg-6 { padding: 0 15px; } .material_section .row { margin: 0 -15px; } @media (max-width:1200px) { .nav-outer { margin-left: 40px; } } @media (max-width:1100px) { .main-menu .navbar-collapse li { padding-left: 10px; padding-right: 11px; } .logo img { width: 150px; } .nav-outer { margin-left: 40px !important; } } @media (max-width:991px) { .home-projects-content { border-radius: 20px 20px 0 0; } #home_sliders .item .pro-img img { border-radius: 0 0 20px 20px !important; } .mb-96, .my-96 { margin-bottom: 50px; } .tab-content h4 { font-size: 24px; line-height: 35px; margin-bottom: 20px; } .odd-pro { flex-direction: column-reverse; } section img { border-radius: 0px; } .design-consultation--box { padding: 0 30px; } .contact-form { border-radius: 10px; } .form-title { margin: 0 0 10px; } #contactForm { width: 100%; max-width: 100%; margin: auto; } .material_section .row { gap: 30px 0; } .material_section .home-projects-content { border-radius: 30px !important; padding: 30px; } } @media (max-width:767px) { .mb-96, .my-96 { margin-bottom: 30px; } .section-title h2 { font-size: 25px; letter-spacing: 0px !important; } .button-pri { margin-bottom: 40px; } .trending-style .button-pri { left: 50%; transform: translate(-8%, 0px); } .timeline-area .button-pri { left: 50%; transform: translate(-8%, 0px); } .about-area-3 .section-heading { margin-bottom: 30px; } .tab-content h4 { font-size: 22px; line-height: 30px; margin-bottom: 20px; } .section-title { position: relative; text-align: center; } } @media (max-width:640px) { .section-title h2 { font-size: 22px !important; letter-spacing: 0px !important; } .trending-style .button-pri { left: 50%; transform: translate(-8%, 0px); margin-bottom: 40px; } .timeline-area .button-pri { left: 50%; transform: translate(0%, 0px); } .py-128 { padding-top: 20px; } .py-128 { padding-bottom: 20px; } .button-pri { margin-bottom: 0; } .hero-area .hero-item .giant-text { font-size: 25px !important; letter-spacing: 0 !important; } .trending-style-content h4 { font-size: 18px; } .tab-content h4 { font-size: 20px; line-height: 30px; margin-bottom: 20px; } } @media (max-width:576px) { .hero-area .hero-item .giant-text { font-size: 20px !important; letter-spacing: 0 !important; } .section-title h2 { font-size: 19px !important; letter-spacing: 0px !important; } .section-heading .sub-title .line { display: none; } .section-heading .sub-title .dot-b, .sub-title .dot-a { display: none; } .button-pri { margin: 10px 0 0; } .trending-style-content h4 { font-size: 16px; } .tab-content h4 { font-size: 18px; line-height: 27px; margin-bottom: 20px; } .nav-outer { margin-left: 0px !important; } .material_section .home-projects-content h4 { color: white; font-size: 17px; margin-bottom: 10px; } ul.material-list li { font-size: 14px; } .banner-area .section-heading span.text.text-white { display: none; } .banner-area.py-128 { padding: 80px 0; } .trending-style .button-pri { left: 50%; transform: translate(0%, 0px); margin-bottom: 0; } } @media (max-width:480px) { .about-area .right-image3 { margin-top: 0; margin-left: 0; width: 100% !important; position: unset !important; } .about-area .right-image2 { width: 100% !important; } .about-area .right img { width: 100%; } .about-area .right img { width: 100%; margin-bottom: 20px !important; } .about-area .left { padding-right: 0; margin-bottom: 34px; } .section-title h2 { font-size: 17px !important; letter-spacing: 0px !important; } .about-area .right-image2 { position: unset !important; } .tab-content h4 { font-size: 16px; line-height: 25px; margin-bottom: 10px; } .tab-ul ul li { line-height: 25px; } }