:root { --font-body-family: "Space Grotesk", sans-serif; --font-heading-family: "Space Grotesk", sans-serif; --font-body-size: 1.6rem; --font-body-weight: 400; --font-heading-weight: 600; --font-headings-weight: 700; --font-line-height: 2.5rem; --transition: all 0.3s ease 0s; --duration-long: 500ms; --color-shadow: rgba(0, 0, 0, 0.1); --container-fluid-offset: 12rem; --color-background: #fff; --color-background-2: #343f52; --color-background-3: #F3F5FB; --color-background-4: #0B2C3D; --color-background-5: #EDEEF3; --color-background-6: #F5F5F5; --color-background-7: #F2F6F7; --color-background-8: #F8F7FC; --color-foreground: #343f52; --color-foreground-sub: #5E5F63; --color-border: #D9D9D9; --color-hover: #0D2552; --color-white: #fff; } .color-offwhite { --color-foreground: #B4B4B4; } .color-accent-2 { --color-hover: #0D2552; } /* Common Style */ *, *::after, *::before { box-sizing: border-box; } html { scroll-behavior: smooth; } section { scroll-margin-top: 100px; } html, body { min-height: 100%; margin: 0; font-size: 62.5%; padding: 0; } body { font-family: var(--font-body-family); font-size: var(--font-body-size, 1.6rem); font-weight: var(--font-body-weight); font-style: normal; line-height: var(--font-line-height, 2.5rem); position: relative; visibility: visible; overflow-x: hidden; color: var(--color-foreground); background-color: var(--color-background); } @media only screen and (max-width: 767px) { body { font-size: 1.4rem; line-height: 2.4rem; } .main__footer { padding: 4.5rem 0 3.2rem !important; } } [data-aos=fade-up] { transform: translate3d(0, 40px, 0); -webkit-transform: translate3d(0, 40px, 0); -moz-transform: translate3d(0, 40px, 0); -ms-transform: translate3d(0, 40px, 0); -o-transform: translate3d(0, 40px, 0); } .tooltip { font-size: 1.3rem; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; margin: 0; font-family: var(--font-heading-family); } h1, .h1 { font-size: 2.5rem; line-height: 3.2rem; } @media only screen and (min-width: 480px) { h1, .h1 { font-size: 3rem; line-height: 3.5rem; } } @media only screen and (min-width: 576px) { h1, .h1 { font-size: 3.5rem; line-height: 4rem; } } @media only screen and (min-width: 768px) { h1, .h1 { font-size: 4rem; line-height: 4.5rem; } } @media only screen and (min-width: 992px) { h1, .h1 { font-size: 4.5rem; line-height: 5rem; } } @media only screen and (min-width: 1200px) { h1, .h1 { font-size: 5rem; line-height: 5.5rem; } } @media only screen and (min-width: 1366px) { h1, .h1 { font-size: 6rem; line-height: 6.5rem; } } h2, .h2 { font-size: 2.2rem; line-height: 3.2rem; } @media only screen and (min-width: 576px) { h2, .h2 { font-size: 2.8rem; line-height: 3.2rem; } } @media only screen and (min-width: 768px) { h2, .h2 { font-size: 3.2rem; line-height: 4rem; } } @media only screen and (min-width: 992px) { h2, .h2 { font-size: 3.5rem; line-height: 4.5rem; } } @media only screen and (min-width: 1200px) { h2, .h2 { font-size: 4rem; line-height: 5rem; } } @media only screen and (min-width: 1366px) { h2, .h2 { font-size: 4.2rem; line-height: 5.2rem; } } h3, .h3 { font-size: 1.6rem; line-height: 2.4rem; } @media only screen and (min-width: 576px) { h3, .h3 { font-size: 1.7rem; line-height: 2.5rem; } } @media only screen and (min-width: 992px) { h3, .h3 { font-size: 1.8rem; line-height: 2.6rem; } } @media only screen and (min-width: 1200px) { h3, .h3 { font-size: 2rem; line-height: 2.8rem; } } h4, .h4 { font-size: 1.4rem; line-height: 2.2rem; } h5, .h5 { font-weight: 400; } h6, .h6 { font-weight: 400; } p, .p { margin-top: 0; margin-bottom: 1rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--color-foreground); } @media only screen and (min-width: 1200px) { p, .p { margin-bottom: 1.5rem; } } @media only screen and (min-width: 768px) { p, .p { font-size: 1.7rem; line-height: 2.8rem; } } p:last-child { margin-bottom: 0; } a, button { display: inline-block; cursor: pointer; transition: var(--transition); text-decoration: none; color: inherit; } a, button, img, input, textarea { transition: var(--transition); } *:focus { outline: none; box-shadow: none; } a:focus { text-decoration: none; outline: none; } a { color: var(--color-foreground); } a:hover { text-decoration: none; color: var(--color-hover); } button, input[type=submit] { cursor: pointer; font-size: var(--font-body-size); font-weight: var(--font-body-weight); line-height: var(--font-line-height); } input[type=number] { -moz-appearance: textfield; } img { max-width: 100%; height: auto; display: block; } span { display: inline-block; transition: var(--transition); } label { transition: var(--transition); display: block; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { opacity: 1; } input:-moz-placeholder, textarea:-moz-placeholder { opacity: 1; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { opacity: 1; } ul { margin: 0; padding: 0; } ul:last-child { margin-bottom: 0; } li { list-style: none; line-height: 1; } hr { border-top-width: 2px; } @media only screen and (min-width: 576px) { .container { max-width: 576px; } } @media only screen and (min-width: 768px) { .container { max-width: 768px; } } @media only screen and (min-width: 992px) { .container { max-width: 992px; } } @media only screen and (min-width: 1200px) { .container { max-width: 1320px; } } .container.max-w-1430 { max-width: 1460px; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-right: var(--bs-gutter-x, 1.8rem); padding-left: var(--bs-gutter-x, 1.5rem); } .container-fluid { --offset-fluid: 1.5rem; padding-right: var(--offset-fluid); padding-left: var(--offset-fluid); } @media only screen and (min-width: 992px) { .container-fluid { --offset-fluid: 3rem; } } @media only screen and (min-width: 1366px) { .container-fluid { --offset-fluid: calc(var(--container-fluid-offset) / 4.5); } } @media only screen and (min-width: 1600px) { .container-fluid { --offset-fluid: calc(var(--container-fluid-offset) / 2.5); } } @media only screen and (min-width: 1800px) { .container-fluid { --offset-fluid: var(--container-fluid-offset); } } .container-fluid.width-100 { --offset-fluid: 0; } .row { margin-right: -1rem; margin-left: -1rem; } @media only screen and (min-width: 992px) { .row { margin-right: -1.5rem; margin-left: -1.5rem; } } .row > * { padding-right: 1rem; padding-left: 1rem; } @media only screen and (min-width: 992px) { .row > * { padding-right: 1.5rem; padding-left: 1.5rem; } } @media only screen and (max-width: 1199px) { .col-lg-order { order: 1; } .d-lg-none { display: none; } .d-lg-u-block { display: block !important; } } @media only screen and (max-width: 991px) { .d-md-none { display: none; } .d-md-flex { display: flex; } .col-md-order { order: 1; } .d-md-block { display: block ; } .column-reverse-md { flex-direction: column-reverse; } } @media only screen and (max-width: 575px) { .custom-col { width: 50%; } } @media only screen and (max-width: 479px) { .custom-col { width: 100%; } } /* Swiper navigation css */ .swiper:hover .swiper__nav--btn { opacity: 1; visibility: visible; } .swiper__nav--btn { width: 4rem; height: 4rem; background: inherit; border: 0; background: var(--color-hover); color: var(--color-white); border-radius: 50%; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 9; margin-top: 0; transform: translatey(-50%); } .swiper__nav--btn.swiper-button-disabled { background: var(--color-background); color: var(--color-hover); box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.08); } .swiper__nav--btn:hover { background: var(--color-background); color: var(--color-hover); } .swiper__nav--btn::after { display: none; } .swiper__nav--btn.swiper-button-prev { left: 0; } .swiper__nav--btn.swiper-button-next { right: 0; } .swiper__nav--btn.swiper-button-next::after { display: none; } /* Swiper pagination css */ .swiper-pagination { bottom: 0 !important; } .swiper-pagination-bullet { width: 0.8rem; height: 0.8rem; background: var(--color-border); opacity: 1; vertical-align: middle; transition: var(--transition); margin: 0 0.9rem !important; position: relative; border-radius: 50%; } .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--color-hover); } .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; } .swiper-pagination-bullet::before { position: absolute; content: ""; width: 2rem; height: 2rem; border: 2px solid var(--color-hover); left: -6px; top: -6px; border-radius: 50%; transition: 0.3s; opacity: 0; } /* default css here */ .no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*=col-] { padding-right: 0; padding-left: 0; } .position__sticky { position: sticky; top: 0; } .header__transparent { position: absolute !important; top: 0; left: 0; right: 0; z-index: 99; } .solid__btn { display: inline-block; font-size: 1.5rem; line-height: 4.8rem; height: 4.8rem; padding: 0 1.5rem; letter-spacing: 0.2px; border-radius: 1rem; background: var(--color-hover); color: var(--color-white); border: 0; font-weight: 700; } .solid__btn:hover { background: var(--color-background-2); color: var(--color-white); } @media only screen and (min-width: 480px) { .solid__btn { line-height: 5rem; height: 5rem; padding: 0 2rem; } } @media only screen and (min-width: 992px) { .solid__btn { line-height: 4.2rem; height: 4.2rem; padding: 0 2.5rem; } } @media only screen and (min-width: 1366px) { .solid__btn { padding: 0 3rem; line-height: 5.5rem; height: 5.5rem; } } .select { position: relative; } .select::before { border-bottom: 2px solid var(--color-foreground); border-right: 2px solid var(--color-foreground); content: ""; display: block; height: 7px; margin-top: -4px; pointer-events: none; position: absolute; right: 15px; top: 50%; width: 7px; transform-origin: 66% 66%; opacity: 0.7; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .border__top--bottom { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .border__bottom { border-bottom: 1px solid var(--color-border); } select { word-wrap: normal; font-family: var(--font-body-family); font-size: var(--font-body-size); font-weight: var(--font-body-weight); line-height: var(--font-line-height); } .select { position: relative; } .select::before { border-bottom: 2px solid var(--color-foreground); border-right: 2px solid var(--color-foreground); content: ""; display: block; height: 7px; margin-top: -4px; pointer-events: none; position: absolute; right: 18px; top: 50%; width: 7px; transform-origin: 66% 66%; opacity: 0.7; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } @media only screen and (max-width: 991px) { .section__heading.mb-50 { margin-bottom: 4rem; } } @media only screen and (max-width: 767px) { .section__heading.mb-50 { margin-bottom: 3rem; } .amenities__box { width: 45% !important; } } @media only screen and (max-width: 767px) { .section__heading.mb-40 { margin-bottom: 3rem; } } @media only screen and (max-width: 479px) { .section__heading.mb-20 { margin-bottom: 1rem; } } .section__heading--subtitle { font-size: 1.4rem; line-height: 2.2rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; color: var(--color-hover); } @media only screen and (min-width: 480px) { .section__heading--subtitle { font-size: 1.5rem; line-height: 2.4rem; } } @media only screen and (min-width: 768px) { .section__heading--subtitle { font-size: 1.6rem; margin-bottom: 1.2rem; } } @media only screen and (min-width: 992px) { .section__heading--subtitle { font-size: 1.7rem; } } .section__heading--subtitle.color__white { color: var(--color-white); } .section__heading--subtitle span { color: var(--color-hover); } .section__heading--title { font-weight: 700; } .section__heading--title.color__white { color: var(--color-white); } .section__heading--title span { color: var(--color-hover); } .section__heading--desc { font-size: 1.5rem; line-height: 2.4rem; margin-top: 1.5rem; color: var(--color-foreground-sub); } @media only screen and (min-width: 576px) { .section__heading--desc { font-size: 1.6rem; line-height: 2.8rem; margin-top: 2rem; } } @media only screen and (min-width: 992px) { .section__heading--desc { font-size: 1.7rem; line-height: 3rem; } } @media only screen and (min-width: 1200px) { .section__heading--desc { font-size: 1.8rem; } } .section__heading.gap-40 { gap: 2.5rem; } @media only screen and (min-width: 480px) { .section__heading.gap-40 { gap: 3rem; } } @media only screen and (min-width: 992px) { .section__heading.gap-40 { gap: 4rem; } } @media only screen and (max-width: 991px) { .section__heading.d-flex { flex-direction: column; text-align: center; } } @media only screen and (min-width: 992px) { .section__heading--right { max-width: 42%; } } @media only screen and (max-width: 991px) { .row-md-reverse { flex-direction: column-reverse; } } #scroll__top { position: fixed; bottom: 50px; right: 20px; z-index: 99; outline: none; background-color: var(--color-hover); color: var(--color-white); box-shadow: 0 2px 22px rgba(0, 0, 0, 0.16); cursor: pointer; transform: translateY(50px); opacity: 0; visibility: hidden; transition: 0.3s; line-height: 1; width: 4.3rem; height: 4.3rem; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; } #scroll__top:hover { background: var(--color-background-2); } @media only screen and (max-width: 991px) { #scroll__top { bottom: 75px; } } .title-stroke { text-shadow: 3px 3px 0 #ee5f38, -1px -1px 0 #ee5f38, 1px -1px 0 #ee5f38, -1px 1px 0 #ee5f38, 1px 1px 0 #ee5f38; } #scroll__top.active { visibility: visible; opacity: 1; transform: translateY(0); } #scroll__top svg { width: 25px; line-height: 1; } .visually-hidden { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; } .color-hover { color: var(--color-hover); } .line-height-1 { line-height: 1; } .text-left { text-align: left; } .text-right { text-align: right; } .overflow-hidden { overflow: hidden; } .break { word-break: break-word; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .height-100vh { height: 100vh; } .position__relative { position: relative; } .border-0 { border: none; } .width-100 { width: 100%; } @media only screen and (max-width: 991px) { .md-width-100 { width: 100%; } } .display-block { display: block; } /* Tab */ .tab_content { display: block; } .tab_pane { display: none; transition: var(--transition); } .tab_pane:not(.show) { opacity: 0; } .tab_pane.show { opacity: 1; } .tab_pane.active { display: block; } body.overlay__active, .mobile_menu_open, .predictive__search--box_active, .offCanvas__minicart_active, .offcanvas__filter--sidebar_active { overflow-y: hidden; } body.overlay__active::before, .predictive__search--box_active::before, .mobile_menu_open::before, .offCanvas__minicart_active::before, .offcanvas__filter--sidebar_active::before { position: absolute; content: ""; background: #000; width: 100%; height: 100%; z-index: 999; opacity: 0.5; cursor: crosshair; } .font-weight-500 { font-weight: 500 !important; } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate-fadeInDown { animation-name: fadeInDown; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } .fadeInUp { animation-name: fadeInUp; } /* Section padding */ .section--padding { padding-top: 6rem; padding-bottom: 6rem; } @media only screen and (min-width: 768px) { .section--padding { padding-top: 7rem; padding-bottom: 7rem; } } @media only screen and (min-width: 992px) { .section--padding { padding-top: 8rem; padding-bottom: 8rem; } } @media only screen and (min-width: 1200px) { .section--padding { padding-top: 0rem; padding-bottom: 3rem; } } /* Section margin */ .section--margin { margin-top: 5rem; margin-bottom: 5rem; } /* Padding */ .p-0 { padding: 0; } .pt-0 { padding-top: 0; } .pb-0 { padding-bottom: 0; } .pb-15 { padding-bottom: 1.5rem; } .pb-20 { padding-bottom: 2rem; } /* Margin */ .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mt-50 { margin-top: 5rem; } .mb-20 { margin-bottom: 2rem; } .mt-30 { margin-top: 3rem; } .mb--n30 { margin-bottom: -3rem; } .mb--n25 { margin-bottom: -2.5rem; } .mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 1rem; } .mb-12 { margin-bottom: 1.2rem; } .mb-15 { margin-bottom: 1.5rem; } .mb-25 { margin-bottom: 2.5rem; } .mb-30 { margin-bottom: 3rem; } .mb-40 { margin-bottom: 4rem; } .mb--n40 { margin-bottom: -4rem; } .mb-50 { margin-bottom: 5rem; } .mb-80 { margin-bottom: 8rem; } /* 2. Header css */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .container-fluid.padding-lr-120 { padding-left: 8.5rem; padding-right: 1.5rem; } } @media only screen and (min-width: 1200px) and (max-width: 1365px) { .container-fluid.padding-lr-120 { padding-left: 8rem; padding-right: 2rem; } } @media only screen and (min-width: 1366px) { .container-fluid.padding-lr-120 { padding-left: 11rem; } } @media only screen and (min-width: 1600px) { .container-fluid.padding-lr-120 { padding: 0 12rem; } } /* offcanvas header css */ .header__sticky.sticky .offcanvas__header--menu__open--btn { color: var(--foreground-colo) !important; } .offcanvas__header--menu__open { line-height: 1; display: none; } @media only screen and (max-width: 991px) { .offcanvas__header--menu__open { display: block; } } .offcanvas__header--menu__open--svg { width: 32px; } .offcanvas__header--menu__open--btn > * { pointer-events: none; } .offcanvas__header { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; max-width: 300px; height: 100%; transition: var(--transition); transform: translateX(-100%); background-color: var(--color-background); box-shadow: 0 0 10px var(--color-shadow); opacity: 0; visibility: hidden; } @media only screen and (min-width: 480px) { .offcanvas__header { max-width: 400px; } } .offcanvas__header.open { transform: translateX(0); opacity: 1; visibility: visible; } .offcanvas__header.open ~ .offcanvas-overlay { visibility: visible; opacity: 0.75; } .offcanvas-overlay { position: fixed; z-index: 9998; top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; transition: var(--transition); opacity: 0; background-color: var(--color-background-2); } .offcanvas__inner { position: relative; height: 100%; padding-bottom: 5rem; background: #0D2552; } .offcanvas__logo { display: flex; align-items: center; justify-content: space-between; padding: 2.5rem 1.5rem; } .offcanvas__close--btn { position: relative; align-self: center; width: 2rem; height: 2rem; padding: 0; text-indent: -9999px; border: none; } .offcanvas__close--btn::before, .offcanvas__close--btn::after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; content: ""; transform: rotate(45deg); background-color: var(--color-background-2); } .offcanvas__close--btn::after { transform: rotate(-45deg); } .main__header--sticky { display: none; } .main__header--sticky.sticky { display: block; } .offcanvas__download--btn { text-align: center; margin-top: 3rem; } /* offcanvas Menu css */ .offcanvas__menu_ul { overflow: auto; margin: 0; padding: 0; list-style: none; max-height: 380px; } .offcanvas__menu_li { position: relative; border-bottom: 1px solid var(--color-border); } .offcanvas__menu_li:first-child { border-top: 1px solid var(--color-border); } .offcanvas__menu_item { line-height: 1; display: block; padding: 15px 20px; text-transform: uppercase; color: #fff; font-size: 1.5rem; } /* offcanvas Sub Menu */ .offcanvas__sub_menu { display: none; margin: 0; padding: 0; list-style: none; } .offcanvas__sub_menu_li { position: relative; border-top: 1px solid var(--color-border); } .offcanvas__sub_menu_item { line-height: 1; display: block; padding: 15px 0 15px 30px; color: #a3a3a3; font-size: 1.5rem; } .offcanvas__sub_menu_item ~ .offcanvas__sub_menu .offcanvas__sub_menu_item { padding-left: 40px; } .offcanvas__sub_menu_toggle { font-size: 20px; position: absolute; z-index: 9; top: 0; right: 0; width: 4rem; height: 4.6rem; padding: 0; border: none; border-radius: 0; } .offcanvas__sub_menu_toggle::before, .offcanvas__sub_menu_toggle::after { position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; content: ""; transition: var(--transition); transform: translateX(-50%) translateY(-50%); background-color: var(--color-background-2); } .offcanvas__sub_menu_toggle:not(.active)::after { transform: translateX(-50%) translateY(-50%) rotate(90deg); } .offcanvas__account--items { margin-top: 2rem; padding: 0 1.5rem; } .offcanvas__account--items__btn { color: var(--color-hover); gap: 0.5rem; } .side__menu--footer.mobile__menu--footer { border-top: 0; } .mobile__menu--footer .side__menu--info { flex-direction: column; } /* Sidebar menu */ .side__menu--title { font-size: 1.8rem; line-height: 2rem; } .side__menu { overflow-y: auto; width: 375px; } .side__menu--header { border-bottom: 1px solid var(--color-border); padding: 1.5rem 3rem; } .side__menu--close__btn { background: inherit; padding: 0; font-size: 1.8rem; font-weight: 600; border: 0; } .side__menu--close__btn:hover { color: var(--color-hover); } .side__menu--body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 8rem; } .sidebar__gallery { padding: 5rem 2.5rem; } .sidebar__gallery--title { font-size: 1.8rem; line-height: 2rem; margin-bottom: 2.5rem; } .sidebar__gallery--wrapper { flex-wrap: wrap; gap: 1.5rem; } .sidebar__gallery--items { width: 30%; position: relative; } .sidebar__gallery--items:hover .sidebar__gallery--img { transform: scale(1.08); -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); } .sidebar__gallery--items:hover .sidebar__gallery--subtitle { opacity: 1; top: 50%; } .sidebar__gallery--img { border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; } .sidebar__gallery--subtitle { position: absolute; top: 60%; left: 0; right: 0; text-align: center; pointer-events: none; font-size: 1.5rem; font-weight: 700; color: var(--color-white); opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .sidebar__gallery--link { overflow: hidden; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; } .side__menu--footer { padding: 3rem 1rem; border-top: 1px solid var(--color-border); } .side__menu--info { display: flex; gap: 2rem; } .side__menu--info__title { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1.2rem; } .side__menu--info__text { font-size: 1.4rem; color: var(--color-foreground-sub); font-weight: 600; } .side__menu--share__title { font-size: 1.7rem; line-height: 2rem; margin-right: 1.2rem; } .side__menu--share__wrapper { gap: 1.5rem; } .side__menu--share__icon { color: var(--color-foreground-sub); } .side__menu--share__icon:hover { color: var(--color-hover); } .side__menu--share { margin-top: 4rem; } /* header sticky css here */ .header__sticky.sticky { width: 100%; top: 0; background: var(--color-background); left: 0; z-index: 99; box-shadow: 0 0 7px rgba(0, 0, 0, 0.15); transition: 0.3s; } .header__sticky.sticky .header__account--btn.text-white { color: var(--color-foreground) !important; } .sticky .sticky__block { display: block; } .sticky .sticky__none { display: none; } .sticky__block { display: none; } /* main header css here */ .header__section { position: relative; box-shadow: 0 0 4px 0 rgba(0, 0, 0, .12); } .humberger__menu { position: absolute; /* top: 0; */ left: 0; width: 6rem; height: 63%; display: flex; align-items: center; justify-content: center; background: #0C369D; color: var(--color-white); } .humberger__menu:hover { color: var(--color-white); } @media only screen and (min-width: 1200px) { .humberger__menu { } } @media only screen and (min-width: 1366px) { .humberger__menu { width: 9rem; } } @media only screen and (max-width: 991px) { .humberger__menu { display: none; } } @media only screen and (max-width: 991px) { .main__header { padding: 1.5rem 0; } } .main__header.sticky { border-bottom: 0; } .main__header--right { gap: 2rem; } @media only screen and (min-width: 1366px) { .main__header--right { gap: 3rem; } } @media only screen and (min-width: 992px) { .main__header--right.d-lg-block { display: flex !important; } } .main__logo--link { display: block; } .main__logo--title { line-height: 1; padding-bottom: 3px; } .main__logo--img.logo_dark { display: none; } @media only screen and (max-width: 399px) { .main__logo--img { max-width: 23rem; } } /* main menu css here */ .main__menu--items { position: relative; padding: 2.5rem 0; margin-right: 2rem; } @media only screen and (min-width: 1366px) { .main__menu--items { margin-right: 2.5rem; } } @media only screen and (min-width: 1600px) { .main__menu--items { margin-right: 4rem; } } .main__menu--items:last-child { margin-right: 0; } .main__menu--items:hover .main__menu--link { color: var(--color-hover); } .main__menu--items:hover .main__menu--link::before { width: 100%; } .main__menu--items:hover .sub__menu { visibility: visible; margin-top: 0; opacity: 1; } .main__menu--items:hover .mega__menu--wrapper { visibility: visible; margin-top: 0; opacity: 1; } .main__menu--link { font-size: 1.9rem; line-height: 2rem; text-transform: capitalize; color: var(--color-foreground); position: relative; font-weight: 700; padding: 0.3rem 0; } .main__menu--link.active { color: var(--color-hover); } .main__menu--link.active::before { width: 100%; } .main__menu--link::before { position: absolute; content: ""; width: 0; height: 0.1rem; background: var(--color-hover); transition: var(--transition); bottom: 0; left: 0; } .main__menu--link svg { margin-right: 4px; } .menu__arrowdown--icon { margin-left: 3px; margin-right: 0; } .sub__menu { position: absolute; z-index: 99; top: 100%; left: 0; visibility: hidden; width: 266px; margin: 0; margin-top: 10px; padding: 12px; list-style: none; transition: var(--transition); opacity: 0; background-color: var(--color-background); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); border-radius: 1px; } .sub__menu--items { margin-bottom: 1.5rem; } .sub__menu--items:last-child { margin-bottom: 0; } .sub__menu--link { font-size: 1.7rem; display: block; line-height: 2.2rem; color: var(--color-foreground-sub); } /* End main menu css here */ .login__register--link { font-weight: 700; } .login__register--link svg { margin-right: 0.5rem; } @media only screen and (max-width: 1199px) { .login__register--link svg { margin-right: 0; } } @media only screen and (max-width: 1199px) { .login__register--link span { display: none; } } .add__listing--btn { font-weight: 600; } @media only screen and (max-width: 991px) { .add__listing--btn { display: none; } } .add__listing--btn svg { margin-left: 0.5rem; } @media only screen and (max-width: 1199px) { .add__listing--btn svg { margin-left: 0; } } @media only screen and (max-width: 991px) { .add__listing--btn svg { margin-left: 0.7rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .add__listing--btn span { display: none; } } @media only screen and (max-width: 991px) { .add__listing--btn.offcanvas__listing--btn { display: block; max-width: 100%; text-align: center; margin: 3rem 3rem 0 3rem; font-size: 1.7rem; } } /* Home three css */ .header__topbar { background: var(--color-background-2); padding: 0.8rem 0; } @media only screen and (max-width: 767px) { .header__topbar { padding: 1.5rem 0; } } @media only screen and (max-width: 767px) { .header__topbar--inner { flex-direction: column; gap: 1.5rem; } } .header__info { gap: 2rem; } @media only screen and (max-width: 479px) { .header__info { flex-direction: column; gap: 1.5rem; align-items: center; } } .header__info--text { color: var(--color-white); margin-left: 0.5rem; font-size: 1.4rem; } .header__social { gap: 1.5rem; } .header__social--icon { color: #0D2552; font-size: 14pt; } /* Home four css */ .offcanvas__header--menu__open--btn.style4 { color: var(--color-white); } .main__menu--style4 .main__menu--link { color: var(--color-white); } .header__sticky.sticky .main__menu--style4 .main__menu--link { color: var(--color-foreground); } .header__sticky.sticky .main__menu--style4 .main__menu--link:hover { color: var(--color-hover); } .header__sticky.sticky .header__account--icon__link { color: var(--color-foreground); } .header__sticky.sticky .header__account--icon__link:hover { color: var(--color-hover); } .header__author { margin-right: 2.5rem; padding-right: 2.5rem; position: relative; } @media only screen and (max-width: 1199px) { .header__author { display: none !important; } } .header__author::before { position: absolute; content: ""; width: 0.1rem; height: 4rem; background: var(--color-white); right: 0; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .header__author--list:nth-child(2) { margin-left: -8px; } .header__author--list:nth-child(3) { margin-left: -8px; } .header__account--icon { gap: 1.5rem; } .header__account--icon__link { color: var(--color-white); } .predictive__search--title { margin-bottom: 20px; color: var(--color-foreground); } @media only screen and (min-width: 768px) { .predictive__search--title { margin-bottom: 22px; } } @media only screen and (min-width: 1200px) { .predictive__search--title { margin-bottom: 30px; } } .predictive__search--box { background: var(--color-background); box-shadow: 0 -4px 27px rgba(62, 70, 120, 0.16); position: fixed; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; z-index: 999; transition: all 0.3s ease 0s; transform: translateY(-100%); } .predictive__search--box.active { opacity: 1; visibility: visible; transform: translateY(0); } .predictive__search--box__inner { padding: 20px 16px; text-align: center; } @media only screen and (min-width: 576px) { .predictive__search--box__inner { padding: 22px 50px; } } @media only screen and (min-width: 768px) { .predictive__search--box__inner { padding: 30px 80px; } } @media only screen and (min-width: 992px) { .predictive__search--box__inner { padding: 30px 150px; } } .predictive__search--form { width: 100%; position: relative; } .predictive__search--input { width: 100%; height: 4.5rem; border: 1px solid var(--color-border); padding: 0 80px 0 15px; font-size: 1.6rem; font-weight: 400; border-radius: 5px; } .predictive__search--input:focus { border-color: var(--color-hover); } .predictive__search--input:focus::-webkit-input-placeholder { color: #000000; } @media only screen and (min-width: 1200px) { .predictive__search--input { height: 5rem; } } .predictive__search--button { position: absolute; top: 0; right: 0; height: 100%; padding: 0; border: 0; width: 6rem; text-align: center; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: center; background: var(--color-foreground); color: var(--color-white); } .predictive__search--button:hover { background: var(--color-hover); } .predictive__search--close__btn { position: absolute; top: 20px; right: 40px; padding: 0; border: 0; background: inherit; } @media only screen and (max-width: 576px) { .predictive__search--close__btn { right: 15px; } } .predictive__search--close__btn:hover { color: var(--color-hover); transform: scale(1.3); } .predictive__search--close__btn > * { pointer-events: none; } .search__open--btn { position: relative; } .header__account--icon__link > * { pointer-events: none; } /* Home five css */ .header__account--wrapper .header__account--icon__link { color: var(--color-foreground); } .header__account--wrapper .header__account--icon__link:hover { color: var(--color-hover); } .header__account--wrapper { gap: 2rem; } .header__topbar--right { gap: 3rem; } .language__currency { margin-right: 12px; } @media only screen and (max-width: 991px) { .language__currency { margin-right: 0; padding: 5px 20px; } } .language__currency--list { position: relative; margin-right: 12px; padding-right: 12px; } .language__currency--list:last-child { margin-right: 0; padding-right: 0; } .language__currency--list:last-child::before { display: none; } .language__currency--list::before { position: absolute; content: ""; width: 1px; height: 100%; background: var(--color-background); right: 0; top: 0; } .language__switcher--icon__img { vertical-align: middle; margin-right: 3px; display: inline-block; } .language__switcher:hover span { color: var(--color-hover); } .language__switcher:hover svg { color: var(--color-hover); } .language__switcher svg { transition: var(--transition); } .language__switcher { color: var(--color-white); } .language__switcher:hover { color: var(--color-hover); } .account__currency--icon__img { vertical-align: middle; margin-right: 3px; display: inline-block; } .dropdown__language { position: absolute; z-index: 9; width: 100px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); top: 100%; opacity: 0; visibility: hidden; margin-top: 22px; transition: var(--transition); background: var(--color-background); } .dropdown__language.active { opacity: 1; visibility: visible; margin-top: 14px; } .account__currency--link { color: var(--color-white); } .account__currency--link:hover { color: var(--color-hover); } .offcanvas__language--switcher { font-weight: 500; font-family: var(--font-body-family); } .offcanvas__dropdown--language { position: absolute; z-index: 9; width: 100px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); bottom: 100%; opacity: 0; visibility: hidden; margin-bottom: 12px; transition: var(--transition); background: var(--color-background); } .offcanvas__dropdown--language.active { opacity: 1; visibility: visible; margin-bottom: 8px; } .language__items:last-child .language__text { border-bottom: 0; } .language__text { display: block; font-size: 1.3rem; padding: 10px 14px; background: var(--color-background-3); border-bottom: 1px solid var(--color-border); } .language__text:hover { background: var(--color-hover); color: var(--color-white); border-color: var(--color-hover); } .dropdown__currency { position: absolute; z-index: 9; width: 100px; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1); top: 100%; opacity: 0; visibility: hidden; margin-top: 33px; transition: var(--transition); background: var(--color-background); } .dropdown__currency.active { opacity: 1; visibility: visible; margin-top: 14px; } @media only screen and (min-width: 1600px) { .dropdown__currency.active { margin-top: 14px; } } .currency__items:last-child .currency__text { border-bottom: 0; } .currency__text { display: block; font-size: 1.3rem; padding: 10px 14px; background: var(--color-background-3); border-bottom: 1px solid var(--color-border); } .currency__text:hover { background: var(--color-hover); color: var(--color-white); border-color: var(--color-hover); } /* 19. preloader css */ #preloader { position: fixed; left: 0px; top: 0px; z-index: 999; display: flex; height: 100vh; width: 100%; } #preloader:before, #preloader:after { content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: -1; background-color: #000; transition: all 0.3s ease 0s; } .preloaded:before, .preloaded:after { animation: preloadedDone 300ms ease-in-out 500ms forwards; } #preloader:after { left: auto; right: 0; } #preloader .loader--border { margin: auto; width: 1px; height: 250px; position: relative; overflow: hidden; transition: all 0.8s ease 0s; } .loader--border:before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0%; transform: translateY(-50%); background-color: #fff; animation: borderLine 1000ms ease-in-out 0s forwards; } .loader--border:after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background-color: #999999; transform: translateY(-100%); animation: borderRound 1200ms linear 0s infinite; animation-delay: 2000ms; } .preloaded .loader--border { opacity: 0; height: 100% !important; } .preloaded .loader--border:after { opacity: 0; } @keyframes borderLine { 0% { height: 0%; } 100% { height: 100%; } } @keyframes borderRound { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } } @keyframes preloadedDone { 0% { width: 50%; } 100% { width: 0%; } } /* 3. Hero css */ .hero__section--bg { background-position: center center; background-size: cover; } .hero__section--inner { padding: 6rem 0 7rem; } @media only screen and (min-width: 480px) { .hero__section--inner { padding: 7rem 0 8rem; } } @media only screen and (min-width: 768px) { .hero__section--inner { padding: 10rem 0 12rem; } } @media only screen and (min-width: 992px) { .hero__section--inner { padding: 14rem 0; } } @media only screen and (min-width: 1366px) { .hero__section--inner { padding: 22rem 0; } } .hero__section--wrapper { max-width: 117rem; margin: 0 auto; } .hero__content { margin-bottom: 3rem; } @media only screen and (min-width: 576px) { .hero__content { margin-bottom: 4rem; } } @media only screen and (min-width: 768px) { .hero__content { margin-bottom: 5rem; } } .hero__content--desc { color: var(--color-white); } .hero__content--title { color: var(--color-white); } .advance__search--inner { background: var(--color-background); padding: 2rem 2.5rem; gap: 3rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; } @media only screen and (max-width: 1199px) { .advance__search--inner { flex-wrap: wrap; justify-content: center; } } .advance__search--items { height: 5rem; line-height: 4.8rem; width: 100%; border: 1px solid var(--color-border); border-radius: 0.5rem; transition: 0.3s; } @media only screen and (min-width: 768px) { .advance__search--items { height: 5.5rem; line-height: 5.3rem; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .advance__search--items { width: 30%; } } .advance__search--items:hover { border-color: var(--color-hover); } .advance__search--items.price { min-width: 13rem; width: 13rem; } .advance__search--items:focus { border-color: var(--color-hover); } .advance__search--input { border: 0; height: 100%; width: 100%; padding: 0 1.5rem; border-radius: 0.5rem; background: inherit; } .advance__location--icon { position: absolute; right: 1.5rem; } .advance__search--select { width: 96%; height: 100%; padding: 0 1.5rem; border: 0; opacity: 0.7; cursor: pointer; border-radius: 0.5rem; background: inherit; } .advance__search--price { padding: 0 1.5rem; cursor: pointer; } .advance__search--price span { opacity: 0.7; } .advance__search--btn { width: auto; min-width: auto; padding: 0 1.5rem; } @media only screen and (min-width: 480px) { .advance__search--btn { width: 160px; min-width: 160px; padding: 0 2rem; } } .advance__search--btn svg { margin-left: 0.5rem; } .advance__tab--btn { margin-bottom: 3.5rem; gap: 2rem; } .advance__tab--btn__field { width: 9rem; height: 4rem; text-align: center; border: 0; margin: 0; padding: 0; font-size: 1.4rem; text-transform: uppercase; font-weight: 700; background: var(--color-background); color: var(--color-foreground); border-radius: 0.5rem; position: relative; } @media only screen and (min-width: 576px) { .advance__tab--btn__field { width: 10.5rem; height: 4.5rem; } } .advance__tab--btn__field::before { position: absolute; content: ""; bottom: -12px; left: 50%; width: 0; height: 0; border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent; border-top: 1.2rem solid var(--color-hover); transform: translateX(-50%); transition: 0.3s; opacity: 0; } .advance__tab--btn__field.active { background: var(--color-hover); color: var(--color-white); } .advance__tab--btn__field.active::before { opacity: 1; } .advance__wrapper { margin-top: 5rem; } .advance__shape--icon { position: absolute; right: -52px; top: -30px; } .advance__option--btn { padding: 0; border: 0; background: inherit; font-size: 1.8rem; font-weight: 600; color: var(--color-white); } .advance__option--btn:hover { color: var(--color-hover); } .advance__apeartment--area { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; } @media only screen and (min-width: 480px) { .advance__apeartment--area { gap: 3rem; margin-bottom: 3rem; } } .advance__apeartment--list { width: 100%; } @media only screen and (min-width: 480px) { .advance__apeartment--list { width: 46%; } } @media only screen and (min-width: 576px) { .advance__apeartment--list { width: 47%; } } @media only screen and (min-width: 768px) { .advance__apeartment--list { width: 30%; } } .advance__apeartment--label { font-weight: 500; margin-bottom: 1rem; } .advance__apeartment--select { padding: 0 1.5rem; border: 0; opacity: 0.7; cursor: pointer; border-radius: 0.5rem; background: inherit; height: 4.5rem; line-height: 4.3rem; width: 100%; border: 1px solid var(--color-border); border-radius: 0.5rem; transition: 0.3s; -webkit-appearance: none; font-size: 1.5rem; } .advance__apeartment--select:hover { border-color: var(--color-hover); } .advance__apeartment--select:focus { border-color: var(--color-hover); } .advance__apeartment--input__field { padding: 0 1.5rem; border: 0; border-radius: 0.5rem; background: inherit; height: 4.5rem; line-height: 4.3rem; width: 100%; border: 1px solid var(--color-border); border-radius: 0.5rem; transition: 0.3s; font-size: 1.5rem; } .advance__apeartment--input__field:hover { border-color: var(--color-hover); } .advance__apeartment--input__field:focus { border-color: var(--color-hover); } .advance__filter--main--wrapper { max-width: 700px; } .advance__filter--main__content { border-radius: 1rem; padding: 3rem; } .advance__filter--details { padding: 0; } .advance__price--range { margin-bottom: 2.5rem; } .advance__filter--header { margin-bottom: 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); } .advance__filter--header__title { font-size: 2rem; line-height: 2.5rem; font-weight: 500; } .quickview__close--btn { padding: 0; border: 0; background: inherit; opacity: 1; font-weight: 700; font-size: 2rem; } .quickview__close--btn:hover { color: var(--color-hover); } @media only screen and (max-width: 575px) { .interior__amenities--check { width: 45%; } } @media only screen and (max-width: 479px) { .interior__amenities--check { width: 43%; } } @media only screen and (max-width: 399px) { .interior__amenities--check { width: 100%; } } .interior__amenities--check__list { position: relative; } .interior__amenities--check__label { cursor: pointer; display: block; color: var(--color-foreground); padding-left: 3rem; font-size: 1.5rem; } .interior__amenities--check__label:hover { color: var(--color-hover); } .interior__amenities--check__input { position: absolute; left: 0; top: 50%; transform: translatey(-50%); opacity: 0; cursor: pointer; z-index: 999; } .interior__amenities--check__input:checked ~ .interior__amenities--checkmark { background-color: var(--color-hover); border: 1px solid var(--color-hover); } .interior__amenities--check__input:checked ~ .interior__amenities--checkmark::before { display: block; } .interior__amenities--checkmark { height: 1.8rem; width: 1.8rem; border: 1px solid var(--color-border); border-radius: 5px; display: block; position: absolute; top: 50%; left: 0; transform: translatey(-50%); background: var(--color-background); transition: var(--transition); } .interior__amenities--checkmark::before { right: 0.5rem; top: 0.3rem; width: 0.5rem; height: 0.8rem; border: solid white; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; position: absolute; display: none; } .advance__apeartment--iner { gap: 4rem; } @media only screen and (max-width: 767px) { .advance__apeartment--iner { flex-wrap: wrap; } } .interior__amenities--check__list { margin-bottom: 2.5rem; } .interior__amenities--check__list:last-child { margin-bottom: 0; } .interior__amenitie--title { font-size: 1.8rem; margin-bottom: 2.5rem; font-weight: 500; } .interior__amenities--area { margin-bottom: 3rem; } .advance__price--range__title { font-size: 1.8rem; font-weight: 500; } .advance__filter--search__btn { height: 4.5rem; line-height: 4.5rem; padding: 0 2rem; } .advance__filter--search__btn svg { margin-left: 0.8rem; } .modal__price--range { max-width: 35rem; } .advance__price--filter { padding-top: 2rem; } .advance__filter--btn { height: 4.2rem; line-height: 4.2rem; padding: 0 2rem; margin-top: 2rem; } .advance__filter--reset__btn { padding: 0; border: 0; background: inherit; color: var(--color-hover); text-decoration: underline; font-size: 1.8rem; font-weight: 500; } .advance__filter--reset__btn:hover { color: var(--color-foreground); } .advance__filter--footer { border-top: 1px solid var(--color-border); padding-top: 2rem; } /* home 2 css */ .hero__section--bg2 { background-position: center center; background-size: cover; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero__section--bg2 { padding-bottom: 13rem; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero__section--bg2 { padding-bottom: 20rem; } } .hero__thumbnail--slider { max-width: 100%; margin: 0 0 0 auto; } @media only screen and (min-width: 768px) { .hero__thumbnail--slider { } } @media only screen and (min-width: 992px) { .hero__thumbnail--slider { } } @media only screen and (min-width: 1200px) { .hero__thumbnail--slider { } } @media only screen and (min-width: 1366px) { .hero__thumbnail--slider { } } @media only screen and (min-width: 1600px) { .hero__thumbnail--slider { } } @media only screen and (min-width: 1800px) { .hero__thumbnail--slider { } } .hero__container { position: absolute; bottom: 0; left: 0; right: 0; z-index: 9; } @media only screen and (max-width: 767px) { .hero__container { position: inherit; } } @media only screen and (min-width: 768px) { .hero__content.style2 { max-width: 47%; margin-bottom: 5rem; } } @media only screen and (min-width: 992px) { .hero__content.style2 { max-width: 45rem; margin-bottom: 8rem; } } @media only screen and (min-width: 1200px) { .hero__content.style2 { max-width: 55rem; margin-bottom: 16rem; padding: 20px; } } @media only screen and (min-width: 1366px) { .hero__content.style2 { max-width: 60rem; margin-bottom: 14rem; } } @media only screen and (min-width: 1600px) { .hero__content.style2 { margin-bottom: 18rem; max-width: 65rem; } } @media only screen and (min-width: 1800px) { .hero__content.style2 { max-width: 70rem; } } @media only screen and (max-width: 767px) { .hero__content.style2 { padding: 5.5rem 0 4rem; margin-bottom: 0; text-align: center; } } .hero__content--heading__subtitle { text-transform: uppercase; font-weight: 600; color: #343f52; line-height: 2rem; margin-bottom: 1rem; } .hero__content--heading__subtitle svg { margin-right: 0.5rem; } @media only screen and (min-width: 992px) { .hero__content--heading__subtitle { margin-bottom: 1.5rem; } } @media only screen and (max-width: 991px) { .hero__content--heading__subtitle { font-size: 1.5rem; } } .hero__content--heading__title { font-size: 2.5rem; line-height: 3.5rem; font-weight: 700; margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .hero__content--heading__title { font-size: 3rem; line-height: 4rem; font-weight: 700; } } @media only screen and (min-width: 992px) { .hero__content--heading__title { font-size: 3.5rem; line-height: 4.5rem; margin-bottom: 2rem; } } @media only screen and (min-width: 1200px) { .hero__content--heading__title { font-size: 4.5rem; line-height: 5.5rem; } } @media only screen and (min-width: 1366px) { .hero__content--heading__title { font-size: 5rem; line-height: 6rem; } } .hero__content--footer { margin-top: 1.5rem; gap: 2rem; } @media only screen and (min-width: 992px) { .hero__content--footer { margin-top: 2rem; } } @media only screen and (max-width: 767px) { .hero__content--footer { justify-content: center; } } .hero__bideo--play .bideo__play--icon { width: 5.5rem; height: 5.5rem; box-shadow: 0 4px 19px 0 rgba(0, 0, 0, 0.03); } .advance__tab--btn__two .advance__tab--btn__field { border-radius: 0; } .advance__tab--btn__two .advance__tab--btn__field::before { display: none; } .advance__search--filter.style2 { position: relative; z-index: 9; } .advance__search--inner.two { box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.03); border-radius: 0; } @media only screen and (max-width: 767px) { .advance__search--inner.two { gap: 2rem; } } .swiper__pagination--bullet__style.swiper-pagination { top: 38%; bottom: auto !important; left: -18px; width: auto; background: var(--color-background); padding: 2.5rem 1.4rem; border-radius: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 767px) { .swiper__pagination--bullet__style.swiper-pagination { top: auto; bottom: -33px !important; left: 50%; transform: translateX(-50%); padding: 0.8rem 1.5rem; } } .swiper__pagination--bullet__style.swiper-pagination .swiper-pagination-bullet { display: block; margin: 0 0 1.7rem !important; } @media only screen and (max-width: 767px) { .swiper__pagination--bullet__style.swiper-pagination .swiper-pagination-bullet { display: inline-block; margin: 0 1rem !important; } } .swiper__pagination--bullet__style.swiper-pagination .swiper-pagination-bullet:last-child { margin-bottom: 0 !important; } .advance__search--label { font-weight: 600; line-height: 2rem; margin-bottom: 0.5rem; } .advance__two--search__items { position: relative; width: 100%; padding-right: 0; } @media only screen and (min-width: 480px) { .advance__two--search__items { width: 47%; } } @media only screen and (min-width: 768px) { .advance__two--search__items { width: 30%; padding-right: 1.5rem; } } @media only screen and (min-width: 992px) { .advance__two--search__items { width: 22%; } } @media only screen and (min-width: 1200px) { .advance__two--search__items { width: 100%; } } .advance__two--search__items::before { position: absolute; content: ""; width: 0.1rem; height: 4.5rem; background: var(--color-border); right: 0; top: 50%; transform: translatey(-50%); } @media only screen and (max-width: 767px) { .advance__two--search__items::before { display: none; } } .advance__two--search__items .advance__search--input { height: 4rem; padding: 0; } @media only screen and (min-width: 480px) { .advance__two--search__items .advance__search--input { height: 3rem; } } @media only screen and (min-width: 768px) { .advance__two--search__items .advance__search--input { height: 4rem; } } @media only screen and (max-width: 479px) { .advance__two--search__items .advance__search--input { border-bottom: 1px solid var(--color-border); } } .advance__two--search__items .advance__location--icon { top: 50%; line-height: 1.7rem; transform: translatey(-50%); color: var(--color-hover); opacity: 1; } .advance__two--search__items .advance__search--select { padding: 0; height: 4rem; } @media only screen and (min-width: 480px) { .advance__two--search__items .advance__search--select { height: 3rem; } } @media only screen and (min-width: 768px) { .advance__two--search__items .advance__search--select { height: 4rem; } } @media only screen and (max-width: 479px) { .advance__two--search__items .advance__search--select { border-bottom: 1px solid var(--color-border); } } .advance__two--search__items .advance__search--price { padding: 0; } .advance__option--btn__style2 { padding: 0; background: inherit; border: 0; font-weight: 600; font-size: 1.7rem; color: var(--color-foreground-sub); min-width: 10rem; } .advance__option--btn__style2 svg { margin-left: 1rem; } .advance__option--btn__style2:hover { color: var(--color-hover); } /* home three hero css */ .hero__section--bg3 { background: var(--color-background-7); } .hero__section3--container { padding-bottom: 5rem; } @media only screen and (min-width: 1200px) { .hero__section3--container { padding-bottom: 7rem; } } @media only screen and (min-width: 1366px) { .hero__section3--container { padding-bottom: 9rem; } } @media only screen and (max-width: 991px) { .hero__section3--container { flex-direction: column; gap: 3rem; } } .hero__play--vedio { position: absolute; top: 46%; left: 48%; } .hero__thumbnail.hero__home3 { width: 100%; } @media only screen and (min-width: 480px) { .hero__thumbnail.hero__home3 { width: 90%; } } @media only screen and (min-width: 992px) { .hero__thumbnail.hero__home3 { width: 45rem; } } @media only screen and (min-width: 1200px) { .hero__thumbnail.hero__home3 { width: 55rem; } } @media only screen and (min-width: 1366px) { .hero__thumbnail.hero__home3 { width: 67rem; } } @media only screen and (min-width: 1500px) { .hero__thumbnail.hero__home3 { width: 70rem; } } @media only screen and (min-width: 1700px) { .hero__thumbnail.hero__home3 { width: 77rem; } } .hero__content--home3 { width: 100%; } @media only screen and (min-width: 992px) { .hero__content--home3 { width: calc(100% - 45rem); } } @media only screen and (min-width: 1200px) { .hero__content--home3 { width: calc(100% - 55rem); } } @media only screen and (min-width: 1366px) { .hero__content--home3 { width: calc(100% - 67rem); } } @media only screen and (min-width: 1500px) { .hero__content--home3 { width: calc(100% - 70rem); } } @media only screen and (min-width: 1700px) { .hero__content--home3 { width: calc(100% - 77rem); } } @media only screen and (max-width: 991px) { .hero__content--home3 { text-align: center; } } .hero__content--home3 { padding-right: 7rem; } @media only screen and (max-width: 991px) { .hero__content--home3 { padding-right: 0; padding-top: 5rem; } } .advance__search--style3 { box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.06); border-radius: 0; } .advance__search--style3 .advance__search--input { background: var(--color-background-3); border: 1px solid #EBEBEB; height: 5rem; line-height: 4.8rem; padding: 0 1rem; } .advance__search--style3 .advance__search--select { background: var(--color-background-3); border: 1px solid #EBEBEB; height: 5rem; line-height: 4.8rem; padding: 0 1rem; width: 100%; } .advance__search--style3 .advance__search--label { margin-bottom: 1rem; } .advance__search--style3 .advance__two--search__items { padding-right: 0; } .advance__search--style3 .advance__two--search__items::before { display: none; } .hero__thumbnail--badge { width: 10rem; background: var(--color-background); padding: 1rem; border-radius: 0; position: absolute; bottom: 0; left: 0; } @media only screen and (min-width: 480px) { .hero__thumbnail--badge { width: 15rem; padding: 1.5rem 2rem; } } @media only screen and (min-width: 992px) { .hero__thumbnail--badge { border-radius: 1rem; bottom: -3rem; left: -5rem; } } @media only screen and (min-width: 1200px) { .hero__thumbnail--badge { width: 17rem; left: -9rem; } } .hero__thumbnail--badge svg { margin-bottom: 2rem; } @media only screen and (max-width: 479px) { .hero__thumbnail--badge svg { margin-bottom: 1rem; width: 30px; height: 32px; } } .hero__thumbnail--badge__price { font-size: 2rem; line-height: 2.2rem; font-weight: 900; display: block; margin-bottom: 1rem; } @media only screen and (max-width: 479px) { .hero__thumbnail--badge__price { font-size: 1.7rem; line-height: 2rem; margin-bottom: 0.2rem; } } .hero__thumbnail--badge__text { font-size: 1.5rem; line-height: 1.7rem; color: #9EABB2; font-weight: 500; } @media only screen and (max-width: 479px) { .hero__thumbnail--badge__text { font-size: 1.4rem; line-height: 1.5rem; } } /* home four css */ .hero__section--inner__style4 { padding: 9rem 0 5rem; } @media only screen and (min-width: 480px) { .hero__section--inner__style4 { padding: 10rem 0 6rem; } } @media only screen and (min-width: 768px) { .hero__section--inner__style4 { padding: 13rem 0 8rem; } } @media only screen and (min-width: 992px) { .hero__section--inner__style4 { padding: 18rem 0 11rem; } } @media only screen and (min-width: 1200px) { .hero__section--inner__style4 { padding: 23rem 0 16rem; } } @media only screen and (min-width: 1600px) { .hero__section--inner__style4 { padding: 26rem 0 19rem; } } /* home five css */ .hero__section--bg5 { background-repeat: no-repeat; background-position: center center; background-size: cover; } .hero__section5--container { padding: 5rem 0; } @media only screen and (min-width: 768px) { .hero__section5--container { padding: 7rem 0; } } @media only screen and (min-width: 1200px) { .hero__section5--container { padding: 9rem 0; } } @media only screen and (max-width: 991px) { .hero__section5--container { flex-direction: column; gap: 4rem; } } .hero__content--style5 { width: 100%; padding-right: 0; position: relative; z-index: 9; } @media only screen and (min-width: 576px) { .hero__content--style5 { width: 90%; } } @media only screen and (min-width: 768px) { .hero__content--style5 { width: 80%; } } @media only screen and (min-width: 992px) { .hero__content--style5 { width: calc(100% - 40rem); padding-right: 6rem; } } @media only screen and (min-width: 1200px) { .hero__content--style5 { width: calc(100% - 48rem); padding-right: 10rem; } } @media only screen and (min-width: 1366px) { .hero__content--style5 { width: calc(100% - 53rem); } } @media only screen and (max-width: 991px) { .hero__content--style5 { text-align: center; } } .hero__content--style5 .hero__content--heading__desc { width: 100%; } @media only screen and (min-width: 992px) { .hero__content--style5 .hero__content--heading__desc { width: 80%; } } @media only screen and (min-width: 1200px) { .hero__content--style5 .hero__content--heading__desc { width: 70%; } } .hero__content--shape { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); right: 4rem; z-index: -1; } @media only screen and (min-width: 1200px) { .hero__content--shape { right: 10rem; } } @media only screen and (max-width: 991px) { .hero__content--shape { display: none; } } @media only screen and (max-width: 1199px) { .hero__content--shape svg { width: 12rem; } } .advance__search--filter__box { background: rgba(255, 255, 255, 0.08); width: 100%; padding: 1.5rem; border-radius: 1rem; } @media only screen and (min-width: 576px) { .advance__search--filter__box { width: 90%; } } @media only screen and (min-width: 768px) { .advance__search--filter__box { width: 60rem; } } @media only screen and (min-width: 992px) { .advance__search--filter__box { width: 40rem; } } @media only screen and (min-width: 1200px) { .advance__search--filter__box { width: 48rem; } } @media only screen and (min-width: 1366px) { .advance__search--filter__box { width: 53rem; } } .advance__search--filter__box--inner { background: var(--color-background); padding: 1.5rem; border-radius: 1rem; } @media only screen and (min-width: 400px) { .advance__search--filter__box--inner { padding: 2rem; } } .advance__search--input__field { width: 100%; height: 4rem; border: 1px solid var(--color-border); padding: 0 3.2rem 0 1.2rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; color: var(--color-foreground-sub); } @media only screen and (min-width: 400px) { .advance__search--input__field { height: 4.5rem; } } .advance__search--input__field:focus { border-color: var(--color-hover); } .advance__search--select__field { width: 100%; height: 4rem; border: 1px solid var(--color-border); padding: 0 1.2rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; color: var(--color-foreground-sub); -webkit-appearance: none; cursor: pointer; } .advance__search--select__field:focus { border-color: var(--color-hover); } @media only screen and (min-width: 400px) { .advance__search--select__field { height: 4.5rem; } } .advance__search--box__items { margin-bottom: 1.8rem; } @media only screen and (min-width: 400px) { .advance__search--box__items { margin-bottom: 2.2rem; } } .advance__search--input__label { font-weight: 500; margin-bottom: 1rem; line-height: 2rem; } .advance__search--location__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; } .advance__search--btn__style5 { width: 100%; height: 4.5rem; line-height: 4.5rem; } @media only screen and (max-width: 991px) { .hero__content--footer.style5 { justify-content: center; } } /* 4. About css */ .about__section.about__page--section { background: var(--color-background); } .categories__section.categories__bg { background: var(--color-background-3); } .categories__section.categories__bg .categories__box { background: var(--color-background); } @media only screen and (max-width: 991px) { .about__inner { flex-direction: column; } } @media only screen and (min-width: 992px) { .about__thumbnail { width: 38rem; padding-bottom: 4rem; } } @media only screen and (min-width: 1200px) { .about__thumbnail { width: 50rem; padding-bottom: 5rem; } } @media only screen and (max-width: 991px) { .about__thumbnail { width: 54rem; padding-bottom: 3rem; margin: 0 auto; } } @media only screen and (max-width: 767px) { .about__thumbnail { width: 45rem; padding-bottom: 2rem; } } @media only screen and (max-width: 575px) { .about__thumbnail { width: 100%; } } .about__thumbnail--list { display: inline-block; } @media only screen and (max-width: 1199px) { .about__thumbnail--list.one { padding-right: 3rem; } } .about__thumbnail--list.two { position: absolute; bottom: 0; right: 0; } @media only screen and (max-width: 479px) { .about__thumbnail--list.two { max-width: 200px; } } @media only screen and (min-width: 992px) { } @media only screen and (min-width: 1200px) { } @media only screen and (max-width: 991px) { .about__content { width: 100%; margin-top: 4rem; } } @media only screen and (min-width: 1366px) { .about__content .section__heading--title { max-width: 90%; } } .rating__star--text { position: absolute; top: 0; right: 0; width: 11rem; height: 10rem; background: var(--color-background-2); display: flex; align-items: center; justify-content: center; flex-direction: column; } @media only screen and (min-width: 1200px) { .rating__star--text { right: -60px; width: 12rem; height: 12rem; } } .rating__star--text span { display: block; font-size: 1.5rem; font-weight: 500; color: var(--color-white); margin-top: 1rem; } .bideo__play { position: absolute; top: 50%; left: 33%; transform: translatey(-50%) translatex(-50%); transition: var(--transition); } .bideo__play--icon { width: 6.5rem; height: 6.5rem; background: var(--color-background); color: var(--color-hover); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: animate 2s linear infinite; } .bideo__play--icon:hover { color: var(--color-white); background: var(--color-hover); } .bideo__play--icon:hover { transform: scale(1.08); } @keyframes animate { 0% { box-shadow: 0 0 0 0 rgba(201, 127, 95, 0.7); } 40% { box-shadow: 0 0 0 50px rgba(201, 127, 95, 0); } 80% { box-shadow: 0 0 0 50px rgba(201, 127, 95, 0); } 100% { box-shadow: 0 0 0 rgba(201, 127, 95, 0); } } .about__content--info { gap: 1rem; padding: 2rem 0; } @media only screen and (min-width: 576px) { .about__content--info { gap: 3.5rem; } } @media only screen and (min-width: 1200px) { .about__content--info { padding: 3rem 0; } } @media only screen and (max-width: 575px) { .about__content--info { flex-direction: column; } } .about__content--info__icon { width: 5rem; } @media only screen and (min-width: 576px) { .about__content--info__icon { width: 7rem; } } @media only screen and (min-width: 1200px) { .about__content--info__icon { width: 9rem; } } .about__content--info__title { width: calc(100% - 7rem); padding-left: 1.5rem; font-size: 1.8rem; line-height: 2.8rem; } @media only screen and (min-width: 1200px) { .about__content--info__title { width: calc(100% - 9rem); padding-left: 2rem; font-size: 2rem; line-height: 3rem; } } .about__content--details { gap: 3rem; } @media only screen and (min-width: 1200px) { .about__content--details { gap: 3.5rem; } } @media only screen and (max-width: 575px) { .about__content--details { flex-direction: column; align-items: flex-start !important; gap: 2.5rem; } } .about__experince { width: 15rem; padding: 2rem 0; text-align: center; border: 1px dashed var(--color-border); border-radius: 1rem; } @media only screen and (min-width: 1200px) { .about__experince { width: 17rem; padding: 2.5rem 0; } } .about__experince--number { font-size: 4.5rem; line-height: 4rem; font-weight: 700; color: var(--color-hover); } @media only screen and (min-width: 1200px) { .about__experince--number { font-size: 5.5rem; } } .about__experince--text { font-size: 1.4rem; display: block; margin-top: 0.5rem; } @media only screen and (min-width: 1200px) { .about__experince--text { font-size: 1.5rem; } } .living__details--content__list { font-weight: 600; } .living__details--content__list svg { margin-right: 1rem; } .about__content--footer { gap: 3rem; margin-top: 2rem; } @media only screen and (min-width: 576px) { .about__content--footer { margin-top: 0rem; } } .about__video--icon { width: 5rem; height: 5rem; background: var(--color-background); box-shadow: 0 10px 18px 0 rgba(0, 0, 0, 0.08); color: var(--color-hover); display: flex; align-items: center; justify-content: center; border-radius: 50%; } .about__video--icon:hover { background: var(--color-hover); color: var(--color-white); } /* Counter Up section */ .counterup__section { margin-top: -10rem; } @media only screen and (min-width: 992px) { .counterup__section { margin-top: -10rem; } } .counterup__items { width: 100%; text-align: center; position: relative; z-index: 9; } @media only screen and (min-width: 480px) { .counterup__items { width: 47%; } } @media only screen and (min-width: 576px) { .counterup__items { width: 48%; } } @media only screen and (min-width: 768px) { .counterup__items { width: 25%; } } .counterup__items:last-child::before { display: none; } .counterup__items::before { position: absolute; content: ""; width: 0.1rem; height: 10rem; background: var(--color-border); right: 0; top: 50%; transform: translatey(-50%); } @media only screen and (max-width: 767px) { .counterup__items::before { display: none; } .counterup__items { width: 47% !important; } .counterup__number{ font-size: 20pt !important; } .section--padding{ padding-top: 2rem !important; } .bideo__play { top: 50%; left: 52% !important; } .footer__widget--inner.newsletter{ margin-top: 26%; } } .counterup__inner { background: var(--color-background); box-shadow: 0 7px 23px 0 rgba(0, 0, 0, 0.09); border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; -ms-border-radius: 1rem; -o-border-radius: 1rem; padding: 3.5rem 0; position: relative; } @media only screen and (max-width: 767px) { .counterup__inner { flex-wrap: wrap; gap: 2rem; } } @media only screen and (max-width: 479px) { .counterup__inner { gap: 2rem; padding: 3rem 2rem; } } .counterup__number { font-weight: 700; color: #fff; margin-bottom: 1rem; } @media only screen and (min-width: 480px) { .counterup__number { margin-bottom: 1.5rem; } } @media only screen and (min-width: 992px) { .counterup__number { margin-bottom: 2rem; } } @media only screen and (min-width: 1200px) { .counterup__number { font-size: 4.5rem; } } @media only screen and (min-width: 1366px) { .counterup__number { font-size: 5rem; } } .counterup__subtitle { font-size: 1.5rem; text-transform: capitalize; font-weight: 600; line-height: 2rem; } @media only screen and (min-width: 480px) { .counterup__subtitle { font-size: 1.7rem; line-height: 2.5rem; } } .shape__position { position: absolute; bottom: 0; left: 0; } .shape__position { position: absolute; bottom: 0; left: 0; } .shape__position2 { position: absolute; bottom: 0; right: 0; } /* Call action css */ .call__action--info__text span { display: block; font-size: 1.7rem; font-weight: 700; color: var(--color-white); margin-bottom: 0.3rem; } .call__action--info__text a { font-size: 1.5rem; color: var(--color-white); } .call__action--info__text a:hover { color: var(--color-hover); } .call__action--icon { color: var(--color-hover); } .call__action--title { font-size: 2rem; font-weight: 600; color: var(--color-white); } @media only screen and (min-width: 480px) { .call__action--title { font-size: 2.2rem; } } @media only screen and (min-width: 576px) { .call__action--title { font-size: 2.5rem; } } @media only screen and (min-width: 768px) { .call__action--title { font-size: 2.8rem; } } @media only screen and (min-width: 1200px) { .call__action--title { font-size: 3rem; } } .call__action--inner { background: var(--color-background-4); padding: 4rem; border-radius: 1rem; } @media only screen and (max-width: 991px) { .call__action--inner { flex-direction: column; gap: 3rem; } } @media only screen and (max-width: 479px) { .call__action--inner { gap: 2.5rem; padding: 3rem 2rem; text-align: center; } } .call__action--right { gap: 3rem; } @media only screen and (max-width: 479px) { .call__action--right { flex-direction: column; gap: 2rem; } } .call__action--info { gap: 1.2rem; } .call__action--container { padding: 1rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 1rem; } .bideo__play--text { font-size: 1.5rem; text-transform: uppercase; font-weight: 700; transition: none; } .bideo__play.style2 { border: 1px solid var(--color-white); padding: 0.6rem; border-radius: 50%; pointer-events: none; } .bideo__play.style2:hover { border-color: var(--color-hover); } .bideo__play.style2 .bideo__play--icon { width: 7.5rem; height: 7.5rem; } .video__thumbnail { line-height: 1; } .video__thumbnail .video__field { width: 100%; cursor: pointer; } /* home two css */ .about__section { background: #fff; } @media only screen and (max-width: 1199px) { .about__inner.style2 { flex-direction: column; } } .about__thumbnail--slider { width: 100%; } @media only screen and (min-width: 1200px) { .about__thumbnail--slider { width: 60rem; } } @media only screen and (min-width: 1366px) { .about__thumbnail--slider { width: 72rem; } } @media only screen and (min-width: 1600px) { .about__thumbnail--slider { width: 78rem; } } @media only screen and (min-width: 1800px) { .about__thumbnail--slider { width: 83rem; } } .about__content--style { width: 100%; } @media only screen and (min-width: 1200px) { .about__content--style { width: calc(100% - 60rem); padding-left: 4rem; padding-right: 2rem; } } @media only screen and (min-width: 1366px) { .about__content--style { width: calc(100% - 72rem); padding-left: 7rem; padding-right: 2rem; } } @media only screen and (min-width: 1600px) { .about__content--style { width: calc(100% - 78rem); padding-left: 10rem; padding-right: 2rem; } } @media only screen and (min-width: 1800px) { .about__content--style { width: calc(80% - 83rem); padding-right: 0; } } @media only screen and (max-width: 1199px) { .about__content--style { padding: 6rem 2rem 0; } } @media only screen and (max-width: 767px) { .about__content--style { padding: 5rem 2rem 0; } } .about__location--text p { font-weight: 600; color: var(--color-foreground-sub); } .about__location--text p svg { margin-right: 0.5rem; } .about__location--text span { margin-left: 1rem; } .about__location--desc { line-height: 3rem; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .about__location--desc { line-height: 3.2rem; margin-bottom: 3rem; } } .about__price { gap: 2rem; margin-bottom: 2rem; } @media only screen and (min-width: 480px) { .about__price { gap: 3rem; margin-bottom: 2.2rem; } } @media only screen and (min-width: 768px) { .about__price { margin-bottom: 3.2rem; } } .about__price--field { height: 4.2rem; line-height: 4rem; border: 1px solid var(--color-border); background: var(--color-background); font-size: 1.6rem; font-weight: 700; display: inline-block; padding: 0 2rem; border-radius: 0.5rem; } @media only screen and (min-width: 480px) { .about__price--field { font-size: 1.8rem; } } .about__price--field.new { color: var(--color-hover); } .about__price--field.old { text-decoration: line-through; font-size: 1.7rem; color: var(--color-foreground-sub); } .apartment__info { display: inline-block; margin-bottom: 2.5rem; } @media only screen and (min-width: 768px) { .apartment__info { margin-bottom: 3.5rem; } } .apartment__info--wrapper { padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); } @media only screen and (max-width: 479px) { .apartment__info--wrapper { flex-wrap: wrap; gap: 2rem; padding-bottom: 2rem; } } .apartment__info--list { display: flex; align-items: center; gap: 1.2rem; position: relative; margin-right: 2rem; padding-right: 2rem; } @media only screen and (max-width: 479px) { .apartment__info--list { margin-right: 0; padding-right: 0; } } .apartment__info--list:last-child { margin-right: 0; padding-right: 0; } .apartment__info--list:last-child::before { display: none; } .apartment__info--list::before { position: absolute; content: ""; width: 0.1rem; height: 6rem; background: var(--color-border); right: 0; top: 50%; transform: translateY(-50%); } @media only screen and (max-width: 479px) { .apartment__info--list::before { display: none; } } @media only screen and (max-width: 399px) { .apartment__info--icon img { max-width: 4rem; } } .apartment__info--count { width: 2.3rem; height: 2.3rem; text-align: center; line-height: 2.1rem; background: var(--color-background); display: inline-block; border: 1px solid var(--color-border); color: var(--color-hover); font-weight: 700; font-size: 1.5rem; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; margin-bottom: 1rem; } .apartment__info--title { display: block; } .properties__author { gap: 2rem; } .properties__author--name { font-size: 1.8rem; line-height: 2rem; margin-bottom: 1rem; } .properties__author--email { line-height: 2rem; color: var(--color-foreground-sub); } .properties__author--email:hover { color: var(--color-hover); } .swiper__pagination--bullet__style.bottom { bottom: -19px !important; top: auto; left: 50%; transform: translateX(-50%); padding: 0.7rem 2rem; } .swiper__pagination--bullet__style.bottom .swiper-pagination-bullet { display: inline-block; margin: 0 0.9rem !important; } /* Team member css */ @media only screen and (max-width: 991px) { .section__heading.team.mb-40 { margin-bottom: 3rem; } } .team__member--inner { gap: 3rem; padding: 3rem 2rem; box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.06); border-radius: 1rem; background: #eeeeee9c; } @media only screen and (min-width: 576px) { .team__member--inner { padding: 3rem; } } @media only screen and (min-width: 992px) { .team__member--inner { gap: 4rem; padding: 4rem; } } @media only screen and (min-width: 1200px) { .team__member--inner { gap: 8rem; padding: 6rem; } } @media only screen and (max-width: 991px) { .team__member--inner { flex-direction: column; } } .team__content--desc { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; margin-bottom: 2rem; } @media only screen and (min-width: 400px) { .team__content--desc { font-size: 1.7rem; line-height: 3rem; } } @media only screen and (min-width: 992px) { .team__content--desc { font-size: 1.8rem; line-height: 3.2rem; margin-bottom: 3rem; } } .team__all--member__link { font-size: 1.8rem; font-weight: 700; } .team__all--member__link svg { margin-left: 1rem; } .team__member--thumbnail { position: relative; line-height: 1; } .team__member--media__link { overflow: hidden; position: relative; } .team__member--media__link::before { position: absolute; content: ""; width: 100%; height: 100%; background: var(--color-background-2); left: 0; top: 0; opacity: 0; z-index: 9; transition: 0.3s; } .team__content { width: 100%; } @media only screen and (min-width: 992px) { .team__content { width: 48%; } } @media only screen and (max-width: 991px) { .team__content { text-align: center; } } .team__member--wrapper { width: 100%; } @media only screen and (min-width: 992px) { .team__member--wrapper { width: 52%; } } .team__member--items:hover .team__social--share { opacity: 1; } .team__member--items:hover .team__member--media { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .team__member--items:hover .team__member--media__link::before { opacity: 0.3; } .team__social--share { position: absolute; bottom: 3px; left: 0; background: var(--color-background); padding: 0.8rem 1.5rem; gap: 1.3rem; opacity: 0; transition: 0.3s; z-index: 9; } .team__social--share__icon { color: var(--color-foreground-sub); } .team__social--share__icon:hover { color: var(--color-hover); } .team__member--title { margin-bottom: 0.5rem; } .team__member--subtitle { font-size: 1.3rem; line-height: 1.8rem; text-transform: uppercase; color: var(--color-hover); font-weight: 600; } .team__member--content { padding: 1.5rem 1rem 0; } .team__member--link__icon { color: var(--color-hover); } .team__member--link__icon:hover { color: var(--color-foreground); } .map__area { margin-bottom: -8px; } .map__area iframe { height: 25rem; width: 100%; } @media only screen and (min-width: 400px) { .map__area iframe { height: 30rem; } } @media only screen and (min-width: 768px) { .map__area iframe { height: 40rem; } } @media only screen and (min-width: 1200px) { .map__area iframe { height: 45rem; } } @media only screen and (min-width: 1366px) { .map__area iframe { height: 55rem; } } .trending__badge { position: absolute; top: 1rem; left: 0; width: 110px; height: 40px; line-height: 4rem; padding-left: 1.2rem; font-weight: 600; color: var(--color-white); } .trending__badge svg { margin-left: 0.8rem; } @media only screen and (min-width: 768px) { .trending__badge svg { margin-left: 1rem; } } @media only screen and (min-width: 768px) { .trending__badge { width: 152px; padding-left: 2rem; } } @media only screen and (max-width: 767px) { .trending__badge { background-repeat: no-repeat; background-position: center center; background-size: contain; font-size: 1.3rem; } .social__media--area { padding: 4rem 2rem 1rem 6px !important; } .social__media--wrapper{ border-bottom: none !important; } } .about__badge { position: absolute; top: 1rem; right: 1rem; height: 4rem; padding: 0 1.5rem; line-height: 4rem; font-size: 1.4rem; text-transform: uppercase; font-weight: 700; background: var(--color-background); border-radius: 0.5rem; } @media only screen and (max-width: 767px) { .about__badge { background-repeat: no-repeat; background-position: center center; background-size: contain; font-size: 1.3rem; } } /* Home three css */ .about__thumbnail--badge { display: flex; align-items: center; position: absolute; top: -3rem; right: -16px; z-index: 9; } .about__thumbnail--badge::before { position: absolute; content: ""; width: 7rem; height: 7rem; background: var(--color-hover); bottom: -4px; right: -4px; z-index: -1; border-radius: 5px; } .about__thumbnail--badge__inner { background: var(--color-background); gap: 1.2rem; padding: 1.5rem 2.5rem; border-radius: 0.5rem; border:1px solid #0D2552; } .about__thumbnail--badge__years--count { font-size: 5rem; line-height: 4rem; color: var(--color-hover); font-weight: 800; font-family: var(--font-body-family); margin-right: 1rem; } @media only screen and (min-width: 576px) { .about__thumbnail--badge__years--count { font-size: 5rem; line-height: 6rem; } } .about__thumbnail--badge__years--text { font-size: 1.8rem; line-height: 2.5rem; font-weight: 700; } @media only screen and (min-width: 576px) { .about__thumbnail--badge__years--text { font-size: 1.9rem; line-height: 2.2rem; } } .about__content--details__step--title { font-size: 1.8rem; line-height: 2.5rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 576px) { .about__content--details__step--title { font-size: 2.2rem; line-height: 2.8rem; margin-bottom: 2rem; } } @media only screen and (min-width: 992px) { .about__content--details__step--title { font-size: 2.5rem; } } /* home four css */ .about__thumbnail--style4 { position: relative; gap: 2rem; padding-top: 2rem; padding-left: 2rem; z-index: 9; width: 100%; } @media only screen and (min-width: 576px) { .about__thumbnail--style4 { padding-top: 3rem; padding-left: 3rem; width: 90%; } } @media only screen and (min-width: 992px) { .about__thumbnail--style4 { width: 46rem; } } @media only screen and (min-width: 1200px) { .about__thumbnail--style4 { width: 55rem; } } @media only screen and (min-width: 1366px) { .about__thumbnail--style4 { width: 60rem; } } @media only screen and (max-width: 991px) { .about__thumbnail--style4 { margin: 0 auto 4rem; } } .about__content--style4 { width: 100%; padding-left: 0; } @media only screen and (min-width: 992px) { .about__content--style4 { width: calc(100% - 46rem); padding-left: 4rem; } } @media only screen and (min-width: 1200px) { .about__content--style4 { width: calc(100% - 55rem); padding-left: 7rem; } } @media only screen and (min-width: 1366px) { .about__content--style4 { width: calc(100% - 60rem); } } .about__thumbnail--items.two { margin-top: 4rem; } .about__thumbnail--shape { position: absolute; top: 0; left: 0; z-index: -1; } .about__thumbnail--badge__style4 { position: absolute; bottom: 5rem; left: 0; background: var(--color-hover); padding: 1.7rem 1.5rem; text-align: center; } .about__thumbnail--badge__style4--count { font-size: 4rem; line-height: 3rem; font-weight: 800; color: var(--color-white); display: block; margin-bottom: 1rem; } @media only screen and (min-width: 576px) { .about__thumbnail--badge__style4--count { font-size: 5rem; line-height: 4rem; } } .about__thumbnail--badge__style4--text { font-size: 1.4rem; line-height: 1.6rem; color: var(--color-white); } @media only screen and (min-width: 576px) { .about__thumbnail--badge__style4--text { font-size: 1.5rem; } } .bideo__play.style3 { left: 53%; } /* Counter up css */ .counterup__banner--section { padding: 6rem 0; position: relative; } @media only screen and (min-width: 768px) { .counterup__banner--section { padding: 7rem 0; } } @media only screen and (min-width: 992px) { .counterup__banner--section { padding: 8rem 0; } } .counterup__banner--section::before { position: absolute; content: ""; width: 100%; height: 100%; background: #0D2552; left: 0; top: 0; } .counterup__banner--subtitle { color: var(--color-white); font-size: 1.6rem; line-height: 1.8rem; } @media only screen and (max-width: 767px) { .counterup__banner--inner { flex-wrap: wrap; gap: 2rem; } } /* Home five css */ @media only screen and (max-width: 1199px) { .about__style--heading.mb-50 { margin-bottom: 3rem; } } @media only screen and (max-width: 991px) { .about__inner.md-col-reverse { flex-direction: column-reverse; gap: 3rem; } } .about__content--listing { gap: 3rem; } @media only screen and (max-width: 575px) { .about__content--listing { flex-direction: column; gap: 2.5rem; } } @media only screen and (max-width: 479px) { .about__content--listing { gap: 2rem; } } .about__content--listing__step { width: 100%; } @media only screen and (min-width: 576px) { .about__content--listing__step { width: 50%; } } .about__content--listing__items { margin-bottom: 2rem; gap: 2rem; } .about__content--listing__items:last-child { margin-bottom: 0; } @media only screen and (min-width: 480px) { .about__content--listing__items { margin-bottom: 2.5rem; } } @media only screen and (min-width: 1200px) { .about__content--listing__items { margin-bottom: 3.5rem; } } .about__content--listing__icon { min-width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; color: var(--color-hover); background: rgba(22, 163, 74, 0.14); border-radius: 50%; margin-top: 0.6rem; } .about__content--listing__desc { font-size: 1.6rem; line-height: 2.8rem; font-weight: 700; } @media only screen and (min-width: 480px) { .about__content--listing__desc { font-size: 1.8rem; line-height: 3rem; } } .about__gallery { width: 100%; gap: 2rem; } @media only screen and (min-width: 992px) { .about__gallery { width: 40rem; } } @media only screen and (min-width: 1200px) { .about__gallery { width: 50rem; } } @media only screen and (min-width: 1366px) { .about__gallery { width: 58rem; } } .about__content--style5 { width: 100%; } @media only screen and (min-width: 992px) { .about__content--style5 { width: calc(100% - 40rem); padding-right: 4rem; } } @media only screen and (min-width: 1200px) { .about__content--style5 { width: calc(100% - 50rem); padding-right: 5rem; } } @media only screen and (min-width: 1366px) { .about__content--style5 { width: calc(100% - 58rem); padding-right: 6rem; } } /* call action section css */ .call__action--section.margin-bottom-style { margin-bottom: -8rem; position: relative; z-index: 9; } /* 12. Featured css */ .featured__section { } .featured__card { background: var(--color-background); padding: 1.5rem; border-radius: 1rem; border: 1px solid #ababab; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; -ms-border-radius: 1rem; -o-border-radius: 1rem; margin-bottom: 10px; } .featured__card:hover .featured__thumbnail--img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .featured__thumbnail--link { overflow: hidden; border-radius: 1rem; } @media only screen and (max-width: 575px) { .featured__thumbnail--link { display: block; } } .featured__thumbnail--img { border-radius: 1rem; } @media only screen and (max-width: 575px) { .featured__thumbnail--img { width: 100%; } } .featured__content { padding: 0.8rem 0.2rem 0; } @media only screen and (min-width: 1600px) { .featured__content { padding: 0.8rem 0.8rem 0; } } @media only screen and (max-width: 1599px) { .featured__card--title { font-size: 1.8rem; } } .featured__badge { position: absolute; top: 1.5rem; left: 1.5rem; display: flex; gap: 1.2rem; } @media only screen and (min-width: 576px) and (max-width: 767px) { .featured__badge { flex-direction: column; } } .featured__badge.style2 { flex-direction: column; } .badge__field { font-size: 1.2rem; height: 2.5rem; line-height: 2.5rem; padding: 0 1rem; font-weight: 600; background: var(--color-hover); color: var(--color-white); display: inline-block; border-radius: 2rem; cursor: pointer; } .badge__field.style2 { background: var(--color-background); color: var(--color-foreground); } .featured__action { position: absolute; top: 3rem; right: 0; } .featured__action--btn { width: 3.8rem; height: 3.8rem; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-border); color: var(--color-hover); background: var(--color-background); } .featured__action--btn:hover { background: var(--color-hover); color: var(--color-white); } .featured__action--items:last-child .featured__action--btn { border-bottom: 0; } .featured__content--top { margin-bottom: 2rem; } @media only screen and (min-width: 576px) and (max-width: 767px) { .featured__content--top { flex-direction: column; align-items: flex-start !important; gap: 1rem; } } .featured__card--price { font-size: 1.8rem; line-height: 2.4rem; font-weight: 700; color: var(--color-hover); } @media only screen and (min-width: 1600px) { .featured__card--price { font-size: 2.2rem; } } .featured__content--desc { font-size: 1.4rem; color: var(--color-foreground-sub); line-height: 2.2rem; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .featured__content--desc { font-size: 1.5rem; line-height: 2.2rem; margin-bottom: 2.5rem; } } .featured__content--desc svg { margin-right: 0.5rem; } .featured__info--text { display: block; color: var(--color-foreground-sub); margin-top: 0.7rem; } @media only screen and (max-width: 1500px) { .featured__info--text { font-size: 1.5rem; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .featured__info--text { font-size: 1.4rem; } } .featured__info--items { position: relative; margin-right: 1.2rem; padding-right: 1.2rem; } @media only screen and (min-width: 480px) { .featured__info--items { margin-right: 1.5rem; padding-right: 1.5rem; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .featured__info--items { margin-right: 0.8rem; padding-right: 0.8rem; } } .featured__info--items:last-child { margin-right: 0; padding-right: 0; } .featured__info--items:last-child::before { display: none; } .featured__info--items::before { position: absolute; content: ""; width: 0.1rem; height: 3.5rem; background: var(--color-border); right: 0; top: 50%; transform: translatey(-50%); } .featured__info--icon { display: flex; align-items: center; gap: 1rem; font-weight: 600; line-height: 2.2rem; } @media only screen and (max-width: 1500px) { .featured__info--icon { font-size: 1.5rem; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .featured__info--icon { font-size: 1.3rem; gap: 0.5rem; } } .featured__content--footer { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .featured__author { gap: 1rem; } @media only screen and (min-width: 1600px) { .featured__author { gap: 1.5rem; } } .featured__card:hover .featured__author--img::before { background: var(--color-hover); } .featured__author--img::before { position: absolute; content: ""; width: 4.4rem; height: 5.6rem; background: var(--color-background-3); top: -3px; left: -2px; border-radius: 2.2rem 2.2rem 0 0; transition: 0.3s; } .featured__author--img img { position: relative; z-index: 9; } .featured__author--name { font-weight: 700; } @media only screen and (max-width: 1599px) { .featured__author--name { font-size: 1.5rem; } } @media only screen and (max-width: 767px) { .featured__author--name { font-size: 1.3rem; line-height: 2rem; } } .featured__content--share { gap: 1.2rem; } .featured__share--btn { width: 3.5rem; height: 3.5rem; background: var(--color-background-3); display: flex; align-items: center; justify-content: center; color: var(--color-foreground); } .featured__share--btn:hover { background: var(--color-hover); color: var(--color-white); } .share__dropdown--menu { width: 14rem; min-width: 14rem; border: 1px solid var(--color-border); background: var(--color-background); padding: 1.5rem; border-radius: 1rem; } .social__share--link { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .social__share--link span { font-size: 1.5rem; font-weight: 600; } .social__share--list { border-bottom: 1px solid var(--color-border); margin-bottom: 1rem; padding-bottom: 1rem; } .social__share--list:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .featured__navigation { position: absolute; top: -64px; right: 4px; width: 95px; } @media only screen and (max-width: 575px) { .featured__navigation { top: -52px; } } @media only screen and (max-width: 479px) { .featured__navigation { display: none; } } .featured__navigation .swiper__nav--btn { position: inherit; opacity: 1; visibility: visible; } /* Popular featured css */ .popular__featured--section { padding-bottom: 14rem; background-color: #0C369D; background-position: center center; background-size: cover; } @media only screen and (min-width: 992px) { .popular__featured--section { padding-bottom: 16rem; } } .popular__featured--column5 { padding-bottom: 5rem; } .popular__featured--card:hover .popular__featured--badge { opacity: 1; } .popular__featured--card:hover .popular__featured--img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .popular__featured--card:hover .popular__featured--subtitle span { transform: rotate(45deg); } .popular__featured--img { border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; -ms-border-radius: 1rem; -o-border-radius: 1rem; } .popular__featured--link { overflow: hidden; border-radius: 1rem; position: relative; } .popular__featured--link::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62)); transition: 0.3s; z-index: 9; } .popular__featured--content { position: absolute; bottom: 3.5rem; left: 1.5rem; cursor: pointer; z-index: 9; } .popular__featured--badge { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 9; } .popular__featured--thumbnail { line-height: 1; } .popular__featured--title { color: var(--color-white); margin-bottom: 1.5rem; } .popular__featured--subtitle { color: var(--color-white); text-transform: uppercase; } .popular__featured--subtitle span { color: var(--color-hover); margin-left: 1rem; } .popular__featured--badge { width: 4.5rem; height: 4.5rem; background: var(--color-hover); color: var(--color-white); font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .featured__support--desc { font-size: 1.8rem; color: var(--color-white); font-weight: 600; margin-top: 3rem; } @media only screen and (min-width: 992px) { .featured__support--desc { margin-top: 1rem; } } .featured__support--desc a { color: var(--color-hover); } .featured__support--desc a:hover { text-decoration: underline; } /* featured list css */ .featured__card--list { padding: 2rem; background: var(--color-background); box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.06); border-radius: 1rem; } @media only screen and (max-width: 575px) { .featured__card--list { flex-direction: column; } } .featured__card--list__thumbnail { width: 100%; } @media only screen and (min-width: 576px) { .featured__card--list__thumbnail { width: 20rem; } } @media only screen and (min-width: 992px) { .featured__card--list__thumbnail { width: 21rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .featured__card--list__thumbnail { width: 28rem; } } .featured__card--list__thumbnail .media { line-height: 1; } .featured__card--list__content { width: 100%; padding: 2rem 0 0; } @media only screen and (min-width: 576px) { .featured__card--list__content { width: calc(100% - 20rem); padding: 0 0 0 2rem; } } @media only screen and (min-width: 992px) { .featured__card--list__content { width: calc(100% - 21rem); padding: 0 2rem 0 3rem; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .featured__card--list__content { width: calc(100% - 28rem); } } .featured__card--list:hover .featured__list--wishlist__btn.style2 { color: var(--color-hover); border-color: var(--color-hover); } .featured__card--list:hover .featured__thumbnail--img { transform: scale(1.1); } .featured__author--img__style2 { position: absolute; bottom: 2rem; left: 1rem; } .featured__info--list__style { padding: 2rem 0 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--color-border); } .featured__list--wishlist__btn.style2 { width: 3rem; height: 3rem; border: 1px solid var(--color-border); color: #E0E2E9; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 576px) { .featured__list--wishlist__btn.style2 { width: 4rem; height: 4rem; } } .featured__content--list__top { margin-bottom: 0.5rem; } @media only screen and (min-width: 576px) { .featured__content--list__top { margin-bottom: 1rem; } } @media only screen and (max-width: 767px) { .featured__properties--footer.mt-50 { margin-top: 3rem; } } /* featured best selling css */ .featured__best--selling__inner { padding-bottom: 6rem; } @media only screen and (min-width: 768px) { .featured__best--selling__inner { padding-bottom: 7rem; } } @media only screen and (min-width: 992px) { .featured__best--selling__inner { padding-bottom: 8rem; } } .best__selling--advanced__text { font-size: 1.8rem; line-height: 2rem; font-weight: 500; position: relative; margin-top: 2rem; padding-left: 1.5rem; } @media only screen and (min-width: 768px) { .best__selling--advanced__text { font-size: 2rem; line-height: 2.2rem; margin-top: 2.5rem; } } .best__selling--advanced__text::before { position: absolute; content: ""; width: 0.7rem; height: 0.7rem; background: var(--color-hover); left: 0; top: 50%; transform: translatey(-50%); } .best__selling--advanced__text span { color: var(--color-hover); } .best__selling--download__btn { background: var(--color-background); color: var(--color-foreground); padding: 0 2rem; } .best__selling--download__btn svg { margin-left: 0.5rem; } .best__selling--thumbnail { width: 100%; } @media only screen and (min-width: 992px) { .best__selling--thumbnail { width: 80%; } } @media only screen and (min-width: 1200px) { .best__selling--thumbnail { width: 71%; } } .best__selling--thumbnail .swiper__nav--btn { bottom: 0; top: auto; transform: inherit; opacity: 1; visibility: visible; border-radius: 0; background: var(--color-background-2); color: var(--color-white); width: 4.5rem; height: 4rem; } @media only screen and (min-width: 576px) { .best__selling--thumbnail .swiper__nav--btn { width: 5.5rem; height: 5rem; } } .best__selling--thumbnail .swiper__nav--btn:hover { background: var(--color-hover); } .best__selling--thumbnail .swiper__nav--btn.swiper-button-next { left: 4.5rem; right: auto; } @media only screen and (min-width: 576px) { .best__selling--thumbnail .swiper__nav--btn.swiper-button-next { left: 5.5rem; } } .best__selling--thumbnail .swiper__nav--btn.swiper-button-disabled { background: var(--color-hover); } .best__selling--content { position: absolute; bottom: 0; right: 0; background: var(--color-hover); padding: 4rem 3rem; z-index: 9; } @media only screen and (min-width: 992px) { .best__selling--content { width: 45rem; } } @media only screen and (max-width: 991px) { .best__selling--content { position: inherit; margin-top: 3rem; } } .best__selling--subtitle { font-size: 1.4rem; text-transform: uppercase; font-weight: 600; color: var(--color-white); margin-bottom: 1.5rem; } @media only screen and (min-width: 1200px) { .best__selling--subtitle { font-size: 1.5rem; } } .best__selling--subtitle svg { margin-right: 0.5rem; } @media only screen and (max-width: 1199px) { .best__selling--content__heading.mb-50 { margin-bottom: 4rem; } } @media only screen and (max-width: 991px) { .best__selling--content__heading.mb-50 { margin-bottom: 3rem; } } @media only screen and (max-width: 991px) { .best__selling--info.mb-50 { margin-bottom: 3rem; } } .best__selling--title { font-size: 2.2rem; color: var(--color-white); } @media only screen and (min-width: 1200px) { .best__selling--title { font-size: 2.4rem; } } .best__selling--info__list { margin-bottom: 2.5rem; } @media only screen and (min-width: 1200px) { .best__selling--info__list { margin-bottom: 3.5rem; } } @media only screen and (max-width: 399px) { .best__selling--info__list { flex-direction: column; gap: 1.5rem; } } .best__selling--info__list:last-child { margin-bottom: 0; } .best__selling--info__text { font-weight: 500; color: var(--color-white); } .featured__column3 { padding-bottom: 7rem; } .featured-pagination4 .swiper-pagination-bullet { width: 1rem; height: 1rem; } .featured-pagination4 .swiper-pagination-bullet::before { left: -5px; top: -5px; } .featured__section--footer { margin-top: 3rem; } @media only screen and (min-width: 768px) { .featured__section--footer { margin-top: 4rem; } } /* 17. Location css */ .location__section { position: relative; background-position: center center; background-size: cover; } .location__section.section--padding { padding-bottom: 10rem; } @media only screen and (min-width: 1200px) { .location__section.section--padding { padding-bottom: 13.2rem; } } .location__inner { gap: 3rem; position: relative; z-index: 9; } @media only screen and (max-width: 767px) { .location__inner { flex-direction: column; } } .location__step { width: 33.33%; } @media only screen and (max-width: 767px) { .location__step { width: 100%; } } @media only screen and (max-width: 767px) { .location__step.step__img { order: 1; } } .location__list { border: 1px solid rgba(255, 255, 255, 0.09); padding: 1rem; border-radius: 1rem; margin-bottom: 3rem; cursor: pointer; } @media only screen and (min-width: 768px) { .location__list { margin-bottom: 2rem; } } @media only screen and (min-width: 992px) { .location__list { padding: 1.5rem; margin-bottom: 3rem; } } @media only screen and (min-width: 1200px) { .location__list { margin-bottom: 5rem; } } .location__list:last-child { margin-bottom: 0; } .location__list.active { background: #2B2E3A; } .location__thumbnail { text-align: center; } .location__thumbnail img { margin: 0 auto; } .location__name { color: var(--color-white); margin-bottom: 1rem; } @media only screen and (max-width: 991px) { .location__name { font-size: 1.6rem; line-height: 2.2rem; } } .location__properties--count { font-size: 1.4rem; line-height: 2rem; color: var(--color-hover); } .location__map { width: 8rem; } @media only screen and (min-width: 768px) { .location__map { width: 6rem; } } @media only screen and (min-width: 992px) { .location__map { width: 8rem; } } @media only screen and (min-width: 1200px) { .location__map { width: 9rem; } } .location__content { width: calc(100% - 6rem); padding-left: 1.5rem; } @media only screen and (min-width: 992px) { .location__content { width: calc(100% - 8rem); padding-left: 2.5rem; } } @media only screen and (min-width: 1200px) { .location__content { width: calc(100% - 9rem); padding-left: 3.5rem; } } .location__icon { color: var(--color-hover); } .location__btn { margin-top: 3rem; } @media only screen and (min-width: 992px) { .location__btn { margin-top: 5rem; } } .shape__250 { position: absolute; right: 4rem; top: 50%; transform: translatey(-50%); } @media only screen and (max-width: 1599px) { .shape__250 { right: 4rem; top: 10%; max-width: 4rem; } } /* Home three css */ .location__section--style3 { background: var(--color-background-4); position: relative; } .location__section--style3 .location__list.active { background: #113344; } .location__position--map { position: absolute; top: 0; } .section__heading.z-index-9 { z-index: 9; } /* 21. Property css */ .property__type--section { } .property__type--inner { gap: 3rem; } @media only screen and (max-width: 767px) { .property__type--inner { flex-wrap: wrap; } } .property__type--box { width: 25%; } @media only screen and (max-width: 767px) { .property__type--box { width: 47%; } } @media only screen and (max-width: 575px) { .property__type--box { width: 46%; } } @media only screen and (max-width: 479px) { .property__type--box { width: 100%; } } .property__type--box:hover .property__type--badge { background: var(--color-hover); color: var(--color-white); } .property__type--icon { height: 14rem; display: flex; align-items: center; border: 1px solid #c1c1c1; justify-content: center; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05); border-radius: 1rem; position: relative; } @media only screen and (max-width: 991px) { .property__type--icon { height: 17rem; } } @media only screen and (max-width: 991px) { .property__type--icon span svg { width: 5rem; height: 5rem; } } .property__type--content { text-align: center; border-radius: 0.5rem; } .property__type--badge { position: absolute; top: 1.5rem; right: 1.5rem; width: 4.5rem; height: 4.5rem; background: var(--color-background); color: var(--color-hover); box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: 0.3s; } .property__type--content { padding-top: 2rem; } .property__type--title { font-weight: 600; margin-bottom: 1.2rem; line-height: 3.5rem; font-size: 19pt; } .property__type--subtitle { font-weight: 700; color: var(--color-hover); font-size: 1.7rem; } /* Sell property section css */ .sell__property--box { padding: 3rem 1.5rem; background: var(--color-background); box-shadow: 0 6px 24px 0 rgba(122, 122, 122, 0.12); transition: 0.3s; } @media only screen and (min-width: 1200px) { .sell__property--box { padding: 4rem 2.5rem; } } .sell__property--box:hover { transform: translateY(-15px); background: var(--color-hover); } .sell__property--box:hover .sell__property--icon span { background: rgba(255, 255, 255, 0.1); color: var(--color-white); border: 0; } .sell__property--box:hover .sell__property--content__title { color: var(--color-white); } .sell__property--box:hover .sell__property--content__desc { color: var(--color-white); } .sell__property--icon span { width: 8rem; height: 8rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-hover); } @media only screen and (min-width: 1200px) { .sell__property--icon span { width: 9rem; height: 9rem; } } .sell__property--content__title { font-weight: 700; font-size: 2rem; margin-bottom: 1rem; transition: 0.3s; } @media only screen and (min-width: 1200px) { .sell__property--content__title { font-size: 2.2rem; margin-bottom: 1.2rem; } } .sell__property--content__desc { color: var(--color-foreground-sub); transition: 0.3s; } .sell__property--content { width: calc(100% - 8rem); padding-left: 2rem; } @media only screen and (min-width: 1200px) { .sell__property--content { width: calc(100% - 9rem); } } .property__type--section.style2 { background: var(--color-background-8); padding-top: 13.5rem; } @media only screen and (min-width: 768px) { .property__type--section.style2 { padding-top: 15rem; } } @media only screen and (min-width: 992px) { .property__type--section.style2 { padding-top: 17.5rem; } } /* 22. Testimonial css */ .testimonial__section { } .testimonial__inner { padding: 2rem 0 5rem; } @media only screen and (min-width: 992px) { .testimonial__inner { padding: 3rem 0 6rem; } } .testimonial__card { background: var(--color-background); padding: 2rem; border-radius: 1rem; box-shadow: 0 7px 32px 0 rgba(0, 0, 0, 0.08); } @media only screen and (min-width: 480px) { .testimonial__card { padding: 2.5rem 2rem; } } @media only screen and (min-width: 992px) { .testimonial__card { padding: 3rem; } } @media only screen and (min-width: 1200px) { .testimonial__card { padding: 4rem 3.5rem; } } .testimonial__author { gap: 1.5rem; } .testimonial__author--name { margin-bottom: 0.5rem; } .testimonial__author--subtitle { line-height: 2rem; color: var(--color-hover); } .testimonial__card--top { margin-bottom: 2rem; } @media only screen and (max-width: 991px) { .testimonial__card--top span svg { width: 4rem; } } .testimonial__desc { font-size: 1.5rem; line-height: 2.8rem; } @media only screen and (min-width: 992px) { .testimonial__desc { font-size: 1.6rem; line-height: 3rem; } } @media only screen and (min-width: 1200px) { .testimonial__desc { line-height: 3.2rem; font-size: 1.7rem; } } .testimonial__container { padding: 0; } @media only screen and (min-width: 992px) { .testimonial__container { padding: 0 5rem; } } @media only screen and (min-width: 1200px) { .testimonial__container { padding: 0 8rem; } } .testimonial__container .swiper__nav--btn { opacity: 1; visibility: visible; } @media only screen and (max-width: 991px) { .testimonial__container .swiper__nav--btn { opacity: 0; visibility: hidden; } } @media only screen and (max-width: 991px) { .testimonial__container:hover .swiper__nav--btn { opacity: 1; visibility: visible; } } @media only screen and (max-width: 479px) { .testimonial__icon { display: none; } } /* home two css */ .testimonial__section--two { background: var(--color-background-3); } @media only screen and (max-width: 767px) { .testimonial__inner--style2 { flex-direction: column; gap: 3rem; } } .testimonial__thumbnail { width: 28rem; } @media only screen and (min-width: 400px) { .testimonial__thumbnail { width: 32rem; } } @media only screen and (min-width: 480px) { .testimonial__thumbnail { width: 40rem; } } @media only screen and (min-width: 768px) { .testimonial__thumbnail { width: 28rem; } } @media only screen and (min-width: 992px) { .testimonial__thumbnail { width: 40rem; } } @media only screen and (min-width: 1200px) { .testimonial__thumbnail { width: 53rem; } } .testimonial__content { width: 100%; } @media only screen and (min-width: 768px) { .testimonial__content { width: calc(100% - 28rem); padding-left: 3rem; } } @media only screen and (min-width: 992px) { .testimonial__content { width: calc(100% - 40rem); padding-left: 5rem; } } @media only screen and (min-width: 1200px) { .testimonial__content { width: calc(100% - 53rem); padding-left: 6rem; } } @media only screen and (min-width: 1366px) { .testimonial__content { padding-left: 10rem; } } .swiper-pagination.testimonial__pagination--style { position: inherit; width: auto; padding: 0.4rem 1.3rem; border-radius: 3rem; } .testimonial__author--title { margin-bottom: 1rem; } .testimonial__author--style { position: relative; padding-left: 0; margin-left: 2.5rem; } @media only screen and (min-width: 400px) { .testimonial__author--style { padding-left: 7rem; margin-left: 1.5rem; } } @media only screen and (min-width: 992px) { .testimonial__author--style { padding-left: 14.5rem; margin-left: 2rem; } } .testimonial__author--style::before { position: absolute; content: ""; width: 5rem; height: 0.1rem; background: var(--color-border); left: 0; top: 50%; } @media only screen and (min-width: 992px) { .testimonial__author--style::before { width: 12rem; } } @media only screen and (max-width: 399px) { .testimonial__author--style::before { display: none; } } .testimonial__pagination--style { background: var(--color-background); border: 1px solid var(--color-border); } .testimonial__footer { margin-top: 2rem; } @media only screen and (min-width: 992px) { .testimonial__footer { margin-top: 4rem; } } .testimonial__content--desc { font-size: 1.6rem; line-height: 3rem; color: var(--color-foreground); font-weight: 500; } @media only screen and (min-width: 992px) { .testimonial__content--desc { font-size: 1.8rem; line-height: 3.5rem; } } @media only screen and (min-width: 1200px) { .testimonial__content--desc { font-size: 2rem; line-height: 3.7rem; } } .testimonial__content--desc span { color: var(--color-hover); } .testimonial__thumbnail--text { position: absolute; bottom: 54px; right: 35px; font-size: 1.5rem; font-weight: 500; transform: rotate(-30deg); color: var(--color-white); } @media only screen and (min-width: 400px) { .testimonial__thumbnail--text { bottom: 63px; right: 48px; } } @media only screen and (min-width: 480px) { .testimonial__thumbnail--text { bottom: 82px; right: 75px; } } @media only screen and (min-width: 768px) { .testimonial__thumbnail--text { bottom: 53px; right: 33px; } } @media only screen and (min-width: 992px) { .testimonial__thumbnail--text { bottom: 81px; right: 56px; font-size: 2rem; } } @media only screen and (min-width: 1200px) { .testimonial__thumbnail--text { bottom: 113px; right: 98px; } } .testimonial__position--icon { position: absolute; bottom: 4rem; right: 4rem; } @media only screen and (min-width: 1200px) { .testimonial__position--icon { bottom: 8rem; right: 6rem; } } @media only screen and (min-width: 1600px) { .testimonial__position--icon { bottom: 10rem; right: 10rem; } } @media only screen and (max-width: 1199px) { .testimonial__position--icon { max-width: 4rem; } } @media only screen and (max-width: 991px) { .testimonial__position--icon { display: none; } } .testimonial__position--author__img { position: absolute; top: 2rem; left: 2rem; } @media only screen and (min-width: 1200px) { .testimonial__position--author__img { top: 3rem; left: 3rem; } } @media only screen and (min-width: 1600px) { .testimonial__position--author__img { top: 7rem; left: 5rem; } } @media only screen and (max-width: 1199px) { .testimonial__position--author__img { max-width: 7rem; } } @media only screen and (max-width: 991px) { .testimonial__position--author__img { display: none; } } .testimonial__position--author__img2 { position: absolute; top: 2rem; right: 2rem; } @media only screen and (min-width: 1200px) { .testimonial__position--author__img2 { top: 3rem; right: 3rem; } } @media only screen and (min-width: 1600px) { .testimonial__position--author__img2 { top: 7rem; right: 5rem; } } @media only screen and (max-width: 1199px) { .testimonial__position--author__img2 { max-width: 7rem; } } @media only screen and (max-width: 991px) { .testimonial__position--author__img2 { display: none; } } .testimonial__author--wrapper { gap: 1.8rem; } .testimonial__author--small__thumb { border: 3px solid var(--color-white); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .testimonial__gallery { height: 410px; padding-left: 90px; width: 226px; position: absolute; right: 150px; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 1200px) { .testimonial__gallery { right: 200px; } } @media only screen and (min-width: 1366px) { .testimonial__gallery { padding-left: 130px; width: 265px; right: 280px; } } @media only screen and (min-width: 1550px) { .testimonial__gallery { right: 400px; } } @media only screen and (max-width: 991px) { .testimonial__gallery { position: inherit; transform: inherit; right: 0; } } .testimonial__gallery--items { width: 13.5rem; border: 3px solid var(--color-white); cursor: pointer; } .testimonial__section--three { background: var(--color-background-3); } @media only screen and (max-width: 991px) { .testimonial__section--three { padding-bottom: 5rem; } } .testimonial__section--three::before { position: absolute; content: ""; width: 357px; height: 100%; background: var(--color-background-4); right: 0; bottom: 0; } @media only screen and (min-width: 1200px) { .testimonial__section--three::before { width: 407px; } } @media only screen and (min-width: 1366px) { .testimonial__section--three::before { width: 525px; } } @media only screen and (min-width: 1550px) { .testimonial__section--three::before { width: 645px; } } @media only screen and (max-width: 991px) { .testimonial__section--three::before { width: 100%; height: 513px; } } .testimonial__content.style3 { padding-left: 0; } @media only screen and (min-width: 992px) { .testimonial__content.style3 { padding-right: 5rem; } } @media only screen and (min-width: 1200px) { .testimonial__content.style3 { padding-right: 6rem; width: calc(100% - 50rem); } } @media only screen and (min-width: 1366px) { .testimonial__content.style3 { padding-right: 22rem; width: calc(100% - 40rem); } } @media only screen and (max-width: 991px) { .testimonial__content.style3 { padding: 0 0 8rem; width: 100%; } } .testimonial__pagination--style3 { background: var(--color-background); border: 1px solid var(--color-border); padding: 1rem 0.4rem; border-radius: 3rem; width: 4rem !important; text-align: center; left: 0 !important; right: 0 !important; height: 11rem; } .testimonial__pagination--style3 .swiper-pagination-bullet { margin: 1.2rem auto !important; } .testimonial__position--author__img3 { position: absolute; bottom: 2rem; left: 2rem; } @media only screen and (min-width: 1400px) { .testimonial__position--author__img3 { bottom: 6rem; left: 3rem; } } @media only screen and (min-width: 1700px) { .testimonial__position--author__img3 { bottom: 10rem; left: 5rem; } } @media only screen and (max-width: 1699px) { .testimonial__position--author__img3 { max-width: 90px; } } @media only screen and (max-width: 1499px) { .testimonial__position--author__img3 { max-width: 70px; } } .testimonial__position--author__img4 { position: absolute; top: 2rem; right: 43%; } @media only screen and (min-width: 1700px) { .testimonial__position--author__img4 { top: 6rem; right: 40%; } } @media only screen and (max-width: 1699px) { .testimonial__position--author__img4 { max-width: 90px; } } @media only screen and (max-width: 991px) { .testimonial__position--author__img4 { display: none; } } .testimonial__rating { gap: 0.8rem; display: flex; } .testimonial__footer.style3 { gap: 3rem; justify-content: space-between; } @media only screen and (max-width: 479px) { .testimonial__footer.style3 { gap: 2rem; flex-direction: column-reverse; align-items: flex-start !important; } } .testimonial__feedback--badge { position: absolute; top: 0; left: 5rem; background: var(--color-hover); color: var(--color-white); padding: 0.7rem 1.3rem; font-weight: 600; } @media only screen and (max-width: 767px) { .testimonial__feedback--badge { padding: 0.5rem 1rem; } .testimonial__feedback--badge svg { width: 20px; } } @media only screen and (max-width: 1699px) { .testimonial__position--author__img.style3 { top: 6rem; left: 1rem; max-width: 75px; } } @media only screen and (max-width: 1499px) { .testimonial__position--author__img.style3 { display: none; } } .swiper-slide-active .testimonial__gallery--items { position: relative; } .swiper-slide-active .testimonial__gallery--items::before { position: absolute; content: ""; border: 4px solid var(--color-hover); width: 108%; height: 109%; left: -7px; bottom: -7px; border-right: 0; border-top: 0; } /* Home four css */ .testimonial__items { display: flex; align-items: center; } @media only screen and (max-width: 767px) { .testimonial__items { flex-direction: column; gap: 3.5rem; } } .testimonial__items--thumbnail { width: 100%; } @media only screen and (min-width: 576px) { .testimonial__items--thumbnail { width: 80%; } } @media only screen and (min-width: 768px) { .testimonial__items--thumbnail { width: 30rem; } } @media only screen and (min-width: 992px) { .testimonial__items--thumbnail { width: 38rem; } } @media only screen and (min-width: 1200px) { .testimonial__items--thumbnail { width: 45rem; } } .testimonial__items--content { width: 100%; padding-left: 0; } @media only screen and (min-width: 768px) { .testimonial__items--content { width: calc(100% - 30rem); padding-left: 5rem; } } @media only screen and (min-width: 992px) { .testimonial__items--content { width: calc(100% - 38rem); } } @media only screen and (min-width: 1200px) { .testimonial__items--content { width: calc(100% - 45rem); padding-left: 12rem; } } .testimonial__style4--column1 { padding: 0; } /* 9. Amenities css */ .building__amenities--inner { gap: 3rem; flex-wrap: wrap; } .amenities__box { width: 100%; padding: 2.5rem 2rem; border-radius: 1rem; box-shadow: 0 7px 32px 0 rgba(0, 0, 0, 0.08); transition: 0.3s; background: #bbb; } @media only screen and (min-width: 480px) { .amenities__box { width: 46%; } } @media only screen and (min-width: 576px) { .amenities__box { width: 47%; } } @media only screen and (min-width: 768px) { .amenities__box { width: 30%; } } @media only screen and (min-width: 992px) { .amenities__box { width: 31%; padding: 3rem 2.5rem; } } @media only screen and (min-width: 1200px) { .amenities__box { width: 23%; } } @media only screen and (min-width: 1366px) { .amenities__box { width: 23.2%; } } .amenities__box:hover { transform: translateY(-15px) !important; background: var(--color-hover); } .amenities__box:hover .amenities__count--number { color: var(--color-white); } .amenities__box:hover .amenities__title { color: var(--color-white); } .amenities__box:hover .amenities__desc { color: var(--color-white); } .amenities__icone { margin-bottom: 1rem; } @media only screen and (min-width: 992px) { .amenities__icone { margin-bottom: 2rem; } } .amenities__icone span { width: 5rem; height: 5rem; background: var(--color-background); color: var(--color-hover); line-height: 5rem; text-align: center; box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.1); border-radius: 50%; } @media only screen and (min-width: 992px) { .amenities__icone span { width: 7rem; height: 7rem; line-height: 7rem; } } @media only screen and (max-width: 991px) { .amenities__icone span svg { width: 3rem; height: 2.8rem; } } .amenities__count--number { font-weight: 700; font-size: 1.7rem; color: var(--color-hover); font-family: var(--font-heading-family); margin-bottom: 0.5rem; transition: 0.3s; } .amenities__title { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; transition: 0.3s; } .amenities__desc { color: var(--color-foreground-sub); transition: 0.3s; } /* 5. Blog css */ .blog__section { padding-bottom: 4rem; } @media only screen and (min-width: 786px) { .blog__section { padding-bottom: 6rem; } } @media only screen and (min-width: 1200px) { .blog__section { padding-bottom: 8rem; } } .blog__inner { padding: 0 1rem 2rem; } .blog__inner .swiper__nav--btn { top: 32%; } .blog__badge { position: absolute; bottom: 3px; left: 0; height: 3.5rem; line-height: 3.5rem; background: var(--color-hover); color: var(--color-white); text-transform: uppercase; font-weight: 600; padding: 0 1.5rem; font-size: 1.3rem; letter-spacing: 0.1rem; } .blog__items:hover .blog__thumbnail--media { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .blog__thumbnail--media { border-radius: 0.5rem 0.5rem 0 0; } .blog__thumbnail { line-height: 1; } .blog__thumbnail a { overflow: hidden; border-radius: 0.5rem 0.5rem 0 0; } .blog__content { box-shadow: -3px 5px 20px -6px rgba(0, 0, 0, 0.11); padding: 2rem; border-radius: 0 0 0.5rem 0.5rem; } @media only screen and (min-width: 1200px) { .blog__content { padding: 2rem 2.5rem; } } .blog__meta--icon { color: var(--color-hover); } .blog__meta--date { margin-left: 0.8rem; font-size: 1.4rem; color: var(--color-foreground-sub); } @media only screen and (min-width: 1200px) { .blog__meta--date { font-size: 1.5rem; } } .blog__meta--text { margin-left: 0.8rem; font-size: 1.4rem; color: var(--color-foreground-sub); } @media only screen and (min-width: 1200px) { .blog__meta--text { font-size: 1.5rem; } } .blog__meta--list { position: relative; margin-right: 1rem; padding-right: 2rem; } @media only screen and (min-width: 1200px) { .blog__meta--list { margin-right: 2rem; padding-right: 3rem; } } @media only screen and (max-width: 479px) { .blog__meta--list { margin-right: 0; padding-right: 0; } } .blog__meta--list:last-child { margin-right: 0; padding-right: 0; } .blog__meta--list:last-child::before { display: none; } .blog__meta--list::before { position: absolute; content: ""; width: 1rem; height: 0.1rem; background: #676A7D; right: 0; top: 50%; } @media only screen and (max-width: 479px) { .blog__meta--list::before { display: none; } } .blog__meta { margin-bottom: 1.5rem; } @media only screen and (max-width: 479px) { .blog__meta { flex-wrap: wrap; gap: 1.5rem; } } .blog__title { font-size: 1.8rem; line-height: 2.8rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 1200px) { .blog__title { font-size: 2.2rem; line-height: 3rem; } } .blog__desc { color: var(--color-foreground-sub); margin-bottom: 2rem; } .blog__link--btn { line-height: 2rem; font-weight: 700; font-size: 1.8rem; } .blog__link--btn:hover { text-decoration: underline; } .blog__link--btn svg { margin-left: 0.5rem; color: var(--color-hover); } /* blog page css */ .blog__content--title { font-size: 2rem; line-height: 3rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .blog__content--title { font-size: 2.2rem; line-height: 3rem; margin-bottom: 2rem; } } @media only screen and (min-width: 992px) { .blog__content--title { font-size: 2.5rem; line-height: 3.5rem; } } @media only screen and (min-width: 1200px) { .blog__content--title { font-size: 3rem; line-height: 4rem; } } .blog__date--badge { width: 6rem; height: 6rem; display: flex; align-items: center; justify-content: center; background: var(--color-hover); color: var(--color-white); font-weight: 700; line-height: 2.2rem; position: absolute; top: 1.5rem; left: 1.5rem; text-align: center; border-radius: 0.5rem; } .widget__featured--date { font-size: 1.5rem; line-height: 1.8rem; color: #888686; font-weight: 600; margin-bottom: 1rem; } .widget__featured--date svg { margin-right: 0.7rem; } .widget__catagories--link { padding: 1.5rem 2rem; background: var(--color-white); border: 1px solid #EDEDED; border-radius: 0.5rem; font-size: 1.6rem; } @media only screen and (min-width: 768px) { .widget__catagories--link { padding: 1.7rem 2rem; font-size: 1.7rem; } } .widget__catagories--link:hover { background: var(--color-hover); border-color: var(--color-hover); } .widget__catagories--link:hover .widget__catagories--menu__text { color: var(--color-white); } .widget__catagories--menu__text { font-weight: 500; line-height: 2rem; color: var(--color-foreground-sub); } .widget__catagories--items { margin-bottom: 2rem; } .widget__catagories--items:last-child { margin-bottom: 0; } .blog__widget--step { padding: 3rem 2rem; background: var(--color-background-3); border-radius: 1rem; } @media only screen and (min-width: 1200px) { .blog__widget--step { padding: 3rem; } } .blog__widget--step .widget__featured--thumb { padding: 0; background: inherit; } .blog__widget--step .widget__search--input__field { background: var(--color-background); border: 1px solid transparent; } @media only screen and (max-width: 767px) { .blog__widget--step .widget__search--input__field { height: 5.2rem; } } .blog__widget--step .widget__search--input__field:focus { border-color: var(--color-hover); } .widget__admin--profile.blog__admin { padding: 3rem 2rem; background: var(--color-background-3); border-radius: 1rem; border: 0; } .widget__admin--profile.blog__admin .profile__social--icon { background: var(--color-background); } .widget__admin--profile.blog__admin .profile__social--icon:hover { background: var(--color-hover); } .widget__tag { flex-wrap: wrap; gap: 1.5rem; } .widget__tag--link { color: var(--color-foreground-sub); font-weight: 600; padding: 1.2rem 1.7rem; background: var(--color-background); border-radius: 0.5rem; } .widget__tag--link:hover { background: var(--color-hover); color: var(--color-white); } /* Blog details css */ @media only screen and (max-width: 767px) { .blog__details--thumbnail.mb-30 { margin-bottom: 2.5rem; } } @media only screen and (max-width: 767px) { .blog__details--content__top.mb-40 { margin-bottom: 3rem; } } .blog__details--content__desc { color: var(--color-foreground-sub); line-height: 3rem; } @media only screen and (min-width: 1200px) { .blog__details--content__desc { font-size: 1.7rem; line-height: 3.2rem; } } @media only screen and (min-width: 768px) { .blockquote__content { padding: 0 2rem; } } @media only screen and (max-width: 767px) { .blockquote__content.mb-40 { margin-bottom: 5.7rem; } } .blockquote__content blockquote { margin: 0; padding: 2.5rem; background: var(--color-background-3); position: relative; border-left: 2px solid var(--color-hover); } @media only screen and (min-width: 768px) { .blockquote__content blockquote { padding: 3.5rem 3.5rem; } } .blockquote__desc { font-size: 1.8rem; line-height: 2.8rem; font-weight: 600; margin-bottom: 2rem; font-style: italic; } @media only screen and (min-width: 768px) { .blockquote__desc { font-size: 2rem; line-height: 3.2rem; } } @media only screen and (min-width: 1200px) { .blockquote__desc { font-size: 2.2rem; line-height: 3.5rem; } } .blockquote__name { font-size: 1.6rem; line-height: 2rem; font-weight: 500; position: relative; padding-left: 3rem; } .blockquote__name::before { position: absolute; content: ""; width: 2rem; height: 0.2rem; background: var(--color-hover); left: 0; top: 50%; transform: translateY(-50%); } @media only screen and (max-width: 767px) { .blog__ui--content.mb-50 { margin-bottom: 6rem; } } @media only screen and (max-width: 767px) { .blog__ui--content__inner { flex-direction: column-reverse; } } .blog__ui--content__title { font-size: 1.8rem; line-height: 2.5rem; margin-bottom: 2rem; } @media only screen and (min-width: 400px) { .blog__ui--content__title { font-size: 2rem; margin-bottom: 3rem; } } @media only screen and (min-width: 768px) { .blog__ui--content__title { font-size: 2.2rem; line-height: 3rem; } } @media only screen and (min-width: 992px) { .blog__ui--content__title { font-size: 2.5rem; } } .blog__ui--content__thumbnail { width: 100%; } @media only screen and (min-width: 768px) { .blog__ui--content__thumbnail { width: 25rem; } } @media only screen and (min-width: 1200px) { .blog__ui--content__thumbnail { width: 29rem; } } .blog__ui--content__wrapper { width: 100%; padding-right: 0; } @media only screen and (min-width: 768px) { .blog__ui--content__wrapper { width: calc(100% - 25rem); padding-right: 3rem; } } @media only screen and (min-width: 1200px) { .blog__ui--content__wrapper { width: calc(100% - 29rem); padding-right: 5rem; } } @media only screen and (max-width: 767px) { .blog__ui--content__wrapper { padding-top: 3rem; } } .blog__ui--content__list { font-size: 1.6rem; line-height: 2.4rem; color: var(--color-foreground-sub); margin-bottom: 1.8rem; display: flex; gap: 1.5rem; align-items: center; } @media only screen and (min-width: 480px) { .blog__ui--content__list { font-size: 1.7rem; line-height: 2rem; } } @media only screen and (min-width: 768px) { .blog__ui--content__list { margin-bottom: 2.2rem; } } .blog__ui--content__list:last-child { margin-bottom: 0; } .blog__ui--content__list:hover .blog__ui--content__mark--icon { background: var(--color-hover); color: var(--color-white); } .blog__ui--content__mark--icon { width: 2.8rem; height: 2.8rem; background: var(--color-background); box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-hover); transition: 0.3s; } @media only screen and (max-width: 767px) { .related__posts.mb-50 { margin-bottom: 2.5rem; } } .related__posts--inner { gap: 3rem; } @media only screen and (max-width: 767px) { .related__posts--inner.mb-30 { margin-bottom: 2rem; } } .blog__tag--share { padding-bottom: 6rem; margin-bottom: 6rem; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; gap: 2.5rem; } @media only screen and (min-width: 768px) { .blog__tag--share { padding-bottom: 5rem; margin-bottom: 5rem; } } .blog__tag--link { height: 3.5rem; line-height: 3.3rem; border: 1px solid var(--color-border); font-size: 1.4rem; text-transform: uppercase; font-weight: 500; color: var(--color-foreground-sub); padding: 0 1.5rem; border-radius: 0.5rem; } .blog__tag--link:hover { background: var(--color-hover); color: var(--color-white); border-color: var(--color-hover); } .blog__tag--wrapper { gap: 1.2rem; } @media only screen and (max-width: 479px) { .blog__tag--wrapper { flex-wrap: wrap; } } .blog__tag { gap: 1.5rem; } @media only screen and (max-width: 479px) { .blog__tag { flex-direction: column; align-items: flex-start !important; } } .blog__tag--title { font-size: 1.8rem; } .blog__share { gap: 1.5rem; } .blog__share--title { font-size: 1.8rem; } .blog__share--social__icon { width: 3.5rem; height: 3.5rem; background: var(--color-background-3); display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .blog__share--social__icon:hover { background: var(--color-hover); color: var(--color-white); } .blog__share--social { gap: 1rem; } @media only screen and (max-width: 767px) { .blog__review--comment.mb-50 { margin-bottom: 5.5rem; } } .blog__comment--thumbnail { width: 7rem; } .blog__comment--content { width: 100%; padding-left: 0; } @media only screen and (min-width: 576px) { .blog__comment--content { width: calc(100% - 7rem); padding-left: 2rem; } } @media only screen and (min-width: 768px) { .blog__comment--content { padding-left: 3rem; } } @media only screen and (max-width: 575px) { .blog__comment--content { padding-top: 1.5rem; } } .blog__comment--title { font-size: 1.8rem; line-height: 2.4rem; margin-bottom: 2.5rem; } @media only screen and (min-width: 576px) { .blog__comment--title { font-size: 2rem; } } @media only screen and (min-width: 768px) { .blog__comment--title { font-size: 2.2rem; margin-bottom: 4rem; } } .blog__comment--content__top { margin-bottom: 1.2rem; } .blog__comment--content__name { font-size: 1.7rem; line-height: 2rem; margin-bottom: 0.8rem; } @media only screen and (min-width: 768px) { .blog__comment--content__name { font-size: 1.8rem; } } .blog__comment--date { font-size: 1.4rem; line-height: 1.8rem; text-transform: uppercase; font-weight: 500; color: var(--color-foreground-sub); } .blog__comment--content__desc { color: var(--color-foreground-sub); line-height: 3rem; font-size: 1.6rem; } @media only screen and (max-width: 575px) { .blog__comment--list { flex-direction: column; } .blog__comment--list.mb-30 { margin-bottom: 2rem; } } @media only screen and (min-width: 576px) { .blog__comment--list.two { padding-left: 2rem; } } @media only screen and (min-width: 768px) { .blog__comment--list.two { padding-left: 5rem; } } .write__your--comment { padding: 3rem 2rem; background: #F8F8F9; border-radius: 1rem; } @media only screen and (min-width: 768px) { .write__your--comment { padding: 4rem 3rem; } } .blog__comment--input input::-webkit-input-placeholder { color: #838383; } .blog__comment--input input::-moz-placeholder { color: #838383; } .blog__comment--input input:-ms-input-placeholder { color: #838383; } .blog__comment--input input:-moz-placeholder { color: #838383; } .blog__comment--input__field { width: 100%; height: 5rem; border: 1px solid #E5E5E5; background: var(--color-background); padding: 0 1.5rem; border-radius: 0.5rem; } @media only screen and (min-width: 768px) { .blog__comment--input__field { height: 5.5rem; } } .blog__comment--input__field:focus { border-color: var(--color-hover); } .blog__comment--textarea textarea::-webkit-input-placeholder { color: #838383; } .blog__comment--textarea textarea::-moz-placeholder { color: #838383; } .blog__comment--textarea textarea:-ms-input-placeholder { color: #838383; } .blog__comment--textarea textarea:-moz-placeholder { color: #838383; } .blog__comment--textarea__field { width: 100%; height: 15rem; border: 1px solid #E5E5E5; background: var(--color-background); padding: 1.5rem 1.8rem; border-radius: 0.5rem; resize: none; } .blog__comment--textarea__field:focus { border-color: var(--color-hover); } @media only screen and (min-width: 768px) { .blog__comment--textarea__field { height: 20rem; } } .browser__comment--text { margin-top: 2rem; margin-bottom: 0; } .browser__comment--text label { padding-left: 3rem; color: var(--color-foreground-sub); cursor: pointer; } .browser__comment--text .widget__catagories--input { left: 0; right: auto; } .browser__comment--text .widget__catagories--checkmark { left: 0; right: auto; } .blog__comment--btn { margin-top: 3rem; } .blog__sticky--thumbnail { line-height: 1; } .blog__sticky--thumbnail a { overflow: hidden; border-radius: 0.5rem; } .blog__vertical--thumbnail { line-height: 1; } .blog__vertical--thumbnail a { overflow: hidden; border-radius: 0.5rem; } .blog__vertical--thumbnail { width: 100%; } @media only screen and (min-width: 480px) { .blog__vertical--thumbnail { width: 17rem; } } @media only screen and (min-width: 576px) { .blog__vertical--thumbnail { width: 20rem; } } @media only screen and (min-width: 1200px) { .blog__vertical--thumbnail { width: 24rem; } } .blog__vertical--content { background: var(--color-background); box-shadow: 0 3px 10px 0 rgba(57, 106, 191, 0.16); padding: 1.2rem 2rem; width: calc(104% - 17rem); position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-radius: 0.5rem; } @media only screen and (min-width: 576px) { .blog__vertical--content { padding: 1.2rem 3rem; width: calc(104% - 20rem); } } @media only screen and (min-width: 768px) { .blog__vertical--content { padding: 1.8rem 3rem; } } @media only screen and (min-width: 1200px) { .blog__vertical--content { width: calc(104% - 23.5rem); } .blog__vertical--content .blog__title { font-size: 2rem; } } @media only screen and (max-width: 479px) { .blog__vertical--content { position: inherit; transform: inherit; width: 100%; padding: 2rem; } } .blog__vertical--items { position: relative; } @media only screen and (max-width: 479px) { .blog__vertical--items { flex-direction: column; } } .blog__sticky--content { background: var(--color-background); box-shadow: 0 3px 10px 0 rgba(57, 106, 191, 0.16); padding: 3rem; max-width: 93%; margin: -12rem auto 0; border-radius: 0.5rem; position: relative; } @media only screen and (max-width: 479px) { .blog__sticky--content { max-width: 97%; margin: -3rem auto 0; } } @media only screen and (max-width: 479px) { .blog__sticky--content { padding: 3rem 2rem; } } @media only screen and (max-width: 991px) { .blog__sticky--items { margin-bottom: 3rem; } } /* 18. Other css */ @media only screen and (min-width: 768px) { .brand__logo--aera { padding-bottom: 2rem; } } .brand__logo--items img { margin: 0 auto; } .brand__logo--aera.style3 { padding-bottom: 4rem; } @media only screen and (min-width: 480px) { .brand__logo--aera.style3 { padding-bottom: 5rem; } } @media only screen and (min-width: 768px) { .brand__logo--aera.style3 { padding-bottom: 6rem; } } @media only screen and (min-width: 992px) { .brand__logo--aera.style3 { padding-bottom: 6rem; } } .agents__consult--section { margin-bottom: -120px; } .agents__consult--inner { padding: 3rem 0; border-radius: 1rem; } @media only screen and (min-width: 768px) { .agents__consult--inner { padding: 4rem 0; } } @media only screen and (min-width: 1200px) { .agents__consult--inner { padding: 6rem 0; } } .agents__consult--thumb { position: absolute; bottom: 0; right: 1rem; } @media only screen and (max-width: 1199px) { .agents__consult--thumb { max-width: 250px; } } @media only screen and (max-width: 767px) { .agents__consult--thumb { } } .agents__consult__content { padding-left: 3rem; } @media only screen and (min-width: 768px) { .agents__consult__content { padding-left: 5rem; } } @media only screen and (min-width: 1200px) { .agents__consult__content { padding-left: 7rem; } } @media only screen and (max-width: 767px) { .agents__consult__content { padding-right: 3rem; text-align: center; } .agents__consult--thumb { max-width: 88px !important; } } .agents__consult--subtitle { font-size: 1.6rem; line-height: 2.2rem; font-weight: 500; color: var(--color-white); margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .agents__consult--subtitle { font-size: 1.7rem; } } @media only screen and (min-width: 1200px) { .agents__consult--subtitle { font-size: 1.8rem; margin-bottom: 2.5rem; } } .agents__consult--title { font-size: 2.2rem; line-height: 2.8rem; color: var(--color-white); margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .agents__consult--title { font-size: 2.5rem; line-height: 3rem; margin-bottom: 2rem; } } @media only screen and (min-width: 1200px) { .agents__consult--title { font-size: 3.5rem; line-height: 4rem; } } .agents__consult--desc { font-size: 1.6rem; color: var(--color-white); margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .agents__consult--desc { margin-bottom: 2rem; } } @media only screen and (min-width: 1200px) { .agents__consult--desc { font-size: 1.7rem; margin-bottom: 2.5rem; } } .agents__consult--link { font-weight: 700; color: var(--color-white); text-decoration: underline; border-radius: 32px; padding: 15px; background: #030303; } .agents__consult--link:hover { color: var(--color-foreground); text-decoration: underline; } /* contact property css */ @media only screen and (max-width: 991px) { .contact__property--inner { flex-direction: column; gap: 4rem; } } .contact__property--form { background: #F2F6F7; padding: 3rem; border-radius: 1rem; } @media only screen and (min-width: 992px) { .contact__property--form { width: 40rem; } } @media only screen and (min-width: 1200px) { .contact__property--form { width: 50rem; padding: 4rem; } } @media only screen and (min-width: 992px) { .contact__property--content { width: calc(100% - 40rem); padding-right: 5rem; } } @media only screen and (min-width: 1200px) { .contact__property--content { width: calc(100% - 50rem); padding-right: 13rem; } } .contact__property--desc { color: var(--color-foreground-sub); margin-bottom: 2rem; } @media only screen and (min-width: 1366px) { .contact__property--desc { width: 72%; margin-bottom: 2.5rem; } } .contact__property--info { margin-bottom: 2rem; } .contact__property--info__text { font-weight: 600; color: var(--color-background-4); margin-bottom: 1.5rem; } .contact__property--info__text svg { color: var(--color-hover); margin-right: 0.5rem; } .contact__property--form__title { font-size: 2rem; line-height: 2.4rem; font-weight: 700; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .contact__property--form__title { font-size: 2.4rem; line-height: 2.8rem; } } .contact__property--form__input { margin-bottom: 2.5rem; } .contact__property--form__input label { color: var(--color-foreground-sub); margin-bottom: 1rem; line-height: 2rem; } .contact__property--form__input input { width: 100%; height: 5rem; background: var(--color-background); border: 1px solid transparent; padding: 0 1.8rem; border-radius: 0.5rem; } @media only screen and (min-width: 768px) { .contact__property--form__input input { height: 5.5rem; } } .contact__property--form__input input:focus { border-color: var(--color-hover); } .contact__property--form__input textarea { width: 100%; height: 10rem; background: var(--color-background); border: 1px solid transparent; padding: 1rem 1.8rem; border-radius: 0.5rem; resize: none; } @media only screen and (min-width: 768px) { .contact__property--form__input textarea { height: 12rem; } } .contact__property--form__input textarea:focus { border-color: var(--color-hover); } /* social media css */ @media only screen and (max-width: 767px) { .social__media--area { padding: 3rem 0; } } @media only screen and (max-width: 767px) { .social__media--wrapper { flex-wrap: wrap; gap: 2.5rem; border-bottom: 1px solid #cacaca; } } .social__media--list { width: 45%; padding: 0; position: relative; } @media only screen and (min-width: 400px) { .social__media--list { width: 29%; } } @media only screen and (min-width: 576px) { .social__media--list { width: 30%; } } @media only screen and (min-width: 768px) { .social__media--list { width: 16.66%; padding: 2.5rem 0; } } @media only screen and (min-width: 992px) { .social__media--list { padding: 3rem 0; } } .social__media--list:last-child::before { display: none; } .social__media--list::before { position: absolute; content: ""; width: 0.1rem; height: 100%; background: var(--color-border); right: 0; top: 0; } @media only screen and (max-width: 767px) { .social__media--list::before { display: none; } } .social__media--link { display: flex; align-items: center; gap: 1rem; justify-content: center; } @media only screen and (min-width: 992px) { .social__media--link { gap: 1.2rem; } } .social__media--link svg { color: var(--color-hover); } .social__media--link span { font-weight: 700; font-size: 1.5rem; } @media only screen and (min-width: 992px) { .social__media--link span { font-size: 1.7rem; } } .social__media--area.bg__style { background: var(--color-background-3); } /* services details css */ @media only screen and (max-width: 767px) { .services__details--thumbnail { margin-bottom: 2.5rem; } } .services__details--title { font-size: 2rem; line-height: 2.5rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .services__details--title { font-size: 2.5rem; line-height: 3rem; margin-bottom: 2rem; } } @media only screen and (min-width: 1200px) { .services__details--title { font-size: 2.8rem; } } @media only screen and (max-width: 767px) { .services__details--content__step.mb-30 { margin-bottom: 5.2rem; } } .services__details--desc { color: var(--color-foreground-sub); line-height: 3rem; } .services__details--info { gap: 4rem; } @media only screen and (min-width: 1200px) { .services__details--info { gap: 4rem; } } @media only screen and (max-width: 767px) { .services__details--info { flex-direction: column; gap: 2.5rem; } .services__details--info.mb-40 { margin-bottom: 2.5rem; } } .services__details--info__thumbnail { width: 100%; } @media only screen and (min-width: 768px) { .services__details--info__thumbnail { width: 42%; } } .services__details--info__content { width: 100%; } @media only screen and (min-width: 768px) { .services__details--info__content { width: 58%; } } .services__details--info__title { font-size: 1.8rem; text-transform: uppercase; margin-bottom: 1.5rem; } @media only screen and (min-width: 1200px) { .services__details--info__title { font-size: 2.2rem; margin-bottom: 2rem; } } .services__details--info__desc { color: var(--color-foreground-sub); line-height: 2.8rem; margin-bottom: 2rem; } @media only screen and (min-width: 1200px) { .services__details--info__desc { line-height: 3rem; margin-bottom: 3rem; } } .services__details--info__ui-content li { color: var(--color-foreground-sub); font-weight: 500; margin-bottom: 2rem; } @media only screen and (min-width: 1200px) { .services__details--info__ui-content li { margin-bottom: 2.8rem; } } .services__details--info__ui-content li:last-child { margin-bottom: 0; } .services__details--info__ui-content li svg { color: var(--color-hover); margin-right: 1rem; } .services__categories--items { margin-bottom: 1.5rem; } .services__categories--items:last-child { margin-bottom: 0; } .services__categories--link { padding: 1rem 1rem 1rem 2rem; background: var(--color-background-3); border-radius: 0.5rem; transition: inherit; } .services__categories--link:hover .services__categories--arrow__icon { background: var(--color-hover); color: var(--color-white); } .services__categories--text { font-size: 1.7rem; line-height: 2rem; font-weight: 700; } .services__categories--arrow__icon { width: 4.5rem; height: 4.2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; } .services__widget--step { margin-bottom: 4rem; } .services__widget--step:last-child { margin-bottom: 0; } .services__widget--step.timing { padding: 2rem; border: 1px solid var(--color-border); border-radius: 1rem; } @media only screen and (min-width: 576px) { .services__widget--step.timing { padding: 3rem; } } .widget__timing--list { padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); margin-bottom: 3rem; } .widget__timing--list:last-child { margin-bottom: 0; } .widget__timing--text { color: var(--color-foreground-sub); font-size: 1.7rem; line-height: 2rem; } .widget__timing--btn { margin-top: 3rem; } .widget__img--gallery__title { margin-bottom: 1.2rem; } .widget__img--gallery__desc { color: var(--color-foreground-sub); } @media only screen and (max-width: 991px) { .services__widget { margin-top: 7rem; } } @media only screen and (max-width: 767px) { .services__widget { margin-top: 6rem; } } /* Error page css */ .error__img { margin: 0 auto 3rem; } @media only screen and (min-width: 768px) { .error__img { margin: 0 auto 5rem; } } @media only screen and (max-width: 767px) { .error__img { max-width: 35rem; } } @media only screen and (max-width: 479px) { .error__img { max-width: 25rem; } } .error__subtitle { margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .error__subtitle { margin-bottom: 2.5rem; } } .error__subtitle span { color: var(--color-hover); } .error__desc { color: var(--color-foreground-sub); margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .error__desc { margin-bottom: 3rem; } } /* Choose us section css */ .choose__us--box { background: var(--color-white); padding: 3rem 1.5rem; border-radius: 1rem; box-shadow: 0 0 80px 0 rgba(203, 203, 203, 0.25); transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } @media only screen and (min-width: 768px) { .choose__us--box { padding: 3.5rem 2rem; } } .choose__us--box:hover { background: var(--color-hover); transform: translateY(-15px); box-shadow: none; } .choose__us--box:hover .choose__us--title { color: var(--color-white); } .choose__us--box:hover .choose__us--desc { color: var(--color-white); } .choose__us--box:hover .choose__us--link { color: var(--color-white); } .choose__us--icon { width: 7rem; height: 7rem; background: var(--color-white); box-shadow: 0 16px 45px -12px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; border-radius: 1rem; } @media only screen and (min-width: 768px) { .choose__us--icon { margin: 0 auto 3rem; } } .choose__us--title { font-size: 2rem; margin-bottom: 1.2rem; transition: 0.3s; } @media only screen and (min-width: 768px) { .choose__us--title { font-size: 2.2rem; } } .choose__us--desc { color: var(--color-foreground-sub); transition: 0.3s; } .choose__us--link { font-weight: 700; font-size: 1.6rem; } .choose__us--link svg { margin-left: 0.5rem; } /* 10. Categories css */ .categories__box { padding: 2.5rem 2rem; box-shadow: 0 6px 22px 0 rgba(0, 0, 0, 0.05); border-radius: 1rem; position: relative; } @media only screen and (min-width: 768px) { .categories__box { padding: 2.5rem; } } @media only screen and (min-width: 1200px) { .categories__box { padding: 3rem; } } .categories__box:hover .categories__badge { background: var(--color-hover); color: var(--color-white); } .categories__box::before { position: absolute; content: ""; width: 3rem; height: 3.3rem; background: var(--color-hover); right: 0; bottom: 0; border-radius: 100% 0 0; transition: 0.3s; } .categories__thumbnail { min-height: 16.5rem; display: flex; align-items: center; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .categories__thumbnail { margin-bottom: 2.5rem; } } .categories__thumbnail img { margin: 0 auto; } .categories__title { margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .categories__title { margin-bottom: 2rem; } } .categories__desc { font-size: 1.5rem; line-height: 2.8rem; margin-bottom: 1.5rem; color: var(--color-foreground-sub); } @media only screen and (min-width: 768px) { .categories__desc { margin-bottom: 2rem; font-size: 1.6rem; line-height: 3rem; } } .categories__link { font-size: 1.7rem; font-weight: 700; } .categories__link:hover { color: var(--color-hover); } .categories__link svg { margin-left: 1rem; } .categories__badge { position: absolute; top: 1.8rem; right: 1.8rem; width: 4.5rem; height: 4.5rem; background: var(--color-background); color: var(--color-hover); box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; transition: 0.3s; } /* Home three css */ .commercia__categories--box { box-shadow: 0 0 80px 0 rgba(203, 204, 188, 0.25); background: var(--color-background); padding: 3rem 2rem; border-radius: 1rem; transition: 0.3s; } @media only screen and (min-width: 768px) { .commercia__categories--box { padding: 4.5rem 3rem; } } .commercia__categories--box:hover { background: var(--color-hover); transform: translateY(-15px); -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); } .commercia__categories--box:hover .commercia__categories--icon { background: rgba(245, 223, 220, 0.25); color: var(--color-white); } .commercia__categories--box:hover .commercia__categories--title { color: var(--color-white); } .commercia__categories--box:hover .commercia__categories--desc { color: var(--color-white); } .commercia__categories--icon { width: 7rem; height: 7rem; background: rgba(22, 163, 74, 0.15); color: var(--color-hover); display: flex; align-items: center; justify-content: center; margin: 0 auto 2rem; border-radius: 50%; transition: 0.3s; } @media only screen and (min-width: 768px) { .commercia__categories--icon { width: 8rem; height: 8rem; margin: 0 auto 2.5rem; } } .commercia__categories--title { font-size: 2.2rem; line-height: 2.5rem; font-weight: 700; font-family: var(--font-body-family); margin-bottom: 1.5rem; transition: 0.3s; } @media only screen and (min-width: 768px) { .commercia__categories--title { font-size: 2.4rem; line-height: 2.8rem; margin-bottom: 2rem; } } .commercia__categories--desc { color: var(--color-foreground-sub); transition: 0.3s; } /* 13. Footer css */ .footer__section { background: #030303; } .main__footer { padding: 17.5rem 0 3.2rem; } @media only screen and (min-width: 768px) { .main__footer { padding: 19rem 0 4rem; } } @media only screen and (min-width: 1200px) { .main__footer { padding: 20rem 0 8rem; } } .footer__logo { margin-bottom: 2rem; } @media only screen and (max-width: 767px) { .footer__logo { margin-bottom: 1.5rem; } } .footer__logo--img.dark-logo { display: none; } @media only screen and (max-width: 1199px) { .footer__widget { margin-bottom: 3rem; } } @media only screen and (max-width: 767px) { .footer__widget { margin-bottom: 0; margin-top: 19px; } } .footer__widget--title { font-size: 1.7rem; line-height: 2.4rem; position: relative; color: var(--color-white); margin-bottom: 2.4rem; } @media only screen and (min-width: 768px) { .footer__widget--title { margin-bottom: 2rem; font-size: 1.8rem; } } @media only screen and (min-width: 992px) { .footer__widget--title { margin-bottom: 2.5rem; } } @media only screen and (min-width: 1200px) { .footer__widget--title { font-size: 2rem; } } .footer__widget--title.about { display: none; } @media only screen and (max-width: 767px) { .footer__widget--title.about { display: block; } } .footer__widget--title__arrowdown--icon { position: absolute; right: 0; top: 38%; transition: 0.3s; display: none; } @media only screen and (max-width: 767px) { .footer__widget--title__arrowdown--icon { display: block; } } .footer__widget.active { padding-bottom: 3rem; } .footer__widget.active .footer__widget--title__arrowdown--icon { transform: rotate(180deg); } .footer__widget--button { position: absolute; z-index: 9; top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; content: ""; color: transparent; border: 0; background-color: transparent; } @media only screen and (max-width: 767px) { .footer__widget--button { visibility: visible; } } .footer__widget--menu li { margin-bottom: 1.5rem; display: inline-block; } @media only screen and (min-width: 768px) { .footer__widget--menu li { margin-bottom: 2rem; display: inline-block; } } .footer__widget--menu li:last-child { margin-bottom: 0; } .footer__widget--menu li a { font-size: 1.5rem; line-height: 2.5rem; color: #fff; } .footer__widget--menu li a:hover { color: var(--color-hover); } .footer__widget--desc { font-size: 1.5rem; line-height: 2.5rem; margin-bottom: 0; color: #fff; } @media only screen and (max-width: 767px) { .footer__widget--inner { } } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0; } .footer__bottom.section--padding { padding: 5rem 0; } @media only screen and (max-width: 767px) { .footer__bottom.section--padding { padding: 3rem 0; } } .footer__bottom--inner { gap: 2rem; } @media only screen and (max-width: 1199px) { .footer__bottom--inner { flex-direction: column; } } .footer__widget--info { margin-top: 2.5rem; } .footer__widget--info_list { font-size: 1.5rem; display: flex; gap: 1.5rem; margin-bottom: 1.4rem; } .footer__widget--info_list:last-child { margin-bottom: 0; } .footer__widget--info_list svg { color: var(--color-hover); } .footer__widget--info_list p { color: #fff; font-size: 1.5rem; line-height: 2.5rem; } .footer__widget--info_list a { color: #fff; } .footer__widget--info_list a:hover { color: var(--color-hover); } .footer__widget--info_list.mb-20 { margin-bottom: 2rem; } .footer__social { gap: 2rem; } .footer__social--icon { color: var(--color-white); } .footer__social--icon:hover { color: var(--color-hover); } .copyright__content { font-size: 1.5rem; color: #fff; } @media only screen and (max-width: 1199px) { .copyright__content { text-align: center; } } .copyright__content a:hover { color: var(--color-hover); } .footer__bottom--menu li { position: relative; margin-right: 1.5rem; padding-right: 1.5rem; } .footer__bottom--menu li:last-child { margin-right: 0; padding-right: 0; color: #fff; } .footer__bottom--menu li:last-child::before { display: none; } .footer__bottom--menu li::before { position: absolute; content: ""; width: 0.1rem; height: 2rem; background: rgba(255, 255, 255, 0.3); right: 0; top: 50%; transform: translatey(-50%); } .footer__bottom--menu li a { color: #fff; font-size: 1.5rem; } .footer__bottom--menu li a:hover { color: var(--color-hover); } @media only screen and (max-width: 479px) { .footer__bottom--menu li a { font-size: 1.4rem; } } .footer__widget--inner.newsletter { background: #111112; padding: 1rem 2rem 1.5rem 2.5rem; border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; -ms-border-radius: 1rem; -o-border-radius: 1rem; } .email__except { position: relative; margin-bottom: 2.5rem; } .email__except--label { cursor: pointer; display: block; color: var(--color-foreground); padding-left: 3.5rem; font-size: 1.5rem; } .email__except--check__input { position: absolute; left: 0; top: 50%; transform: translatey(-50%); opacity: 0; cursor: pointer; z-index: 999; width: 2.2rem; height: 2.2rem; } .email__except--check__input:checked ~ .email__except--checkmark { background-color: var(--color-hover); border: 1px solid var(--color-hover); } .email__except--check__input:checked ~ .email__except--checkmark::before { display: block; } .email__except--checkmark { height: 2.2rem; width: 2.2rem; border: 1px solid #4E545F; border-radius: 50%; display: block; position: absolute; top: 50%; left: 0; transform: translatey(-50%); transition: var(--transition); } .email__except--checkmark::before { right: 0.7rem; top: 0.4rem; width: 0.6rem; height: 1rem; border: solid white; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; position: absolute; display: none; } .newsletter__subscribe--form { position: relative; border-bottom: 1px solid rgba(242, 242, 242, 0.07); margin-bottom: 2.2rem; padding-bottom: 0.5rem; } .newsletter__subscribe--form label { width: 100%; } .newsletter__subscribe--input { background: inherit; border: 0; height: 4.5rem; width: 100%; font-size: 1.5rem; color: var(--color-foreground); } .newsletter__subscribe--button { position: absolute; right: 0; height: 100%; background: inherit; border: 0; color: var(--color-white); top: 0; font-weight: 700; font-size: 1.5rem; } .newsletter__subscribe--button:hover { color: var(--color-hover); } /* home two footer css */ .main__footer.footer__wrapper { padding: 6rem 0 3rem; } @media only screen and (min-width: 768px) { .main__footer.footer__wrapper { padding: 7rem 0 4rem; } } @media only screen and (min-width: 992px) { .main__footer.footer__wrapper { padding: 8rem 0 5rem; } } @media only screen and (min-width: 1200px) { .main__footer.footer__wrapper { padding: 8rem 0; } } .contact__information--aera { padding-top: 6rem; } @media only screen and (min-width: 768px) { .contact__information--aera { padding-top: 7rem; } } @media only screen and (min-width: 992px) { .contact__information--aera { padding-top: 6rem; } } @media only screen and (max-width: 991px) { .contact__information--aera { flex-direction: column; } } .contact__information--email { width: 100%; background: #0D2552; gap: 2rem; padding: 2rem; } @media only screen and (min-width: 992px) { .contact__information--email { width: 50%; gap: 3rem; padding: 3rem; } } @media only screen and (min-width: 1200px) { .contact__information--email { gap: 4rem; padding: 4rem 3rem; } } .contact__information--email__icon { color: var(--color-white); } @media only screen and (max-width: 575px) { .contact__information--email__icon svg { width: 4.5rem; } } .contact__information--email__text { color: var(--color-white); font-size: 1.7rem; line-height: 2.2rem; font-weight: 600; padding: 1rem 2rem; border: 1px solid var(--color-white); border-radius: 3rem; } @media only screen and (min-width: 576px) { .contact__information--email__text { font-size: 1.8rem; line-height: 2.5rem; } } @media only screen and (min-width: 1200px) { .contact__information--email__text { font-size: 13pt; } } .contact__information--email__text a { color: var(--color-white); text-decoration: underline; } .contact__information--email__text a:hover { color: var(--color-foreground); } .contact__information--phone { width: 100%; background: #343f52; gap: 2rem; padding: 2.5rem; } @media only screen and (min-width: 992px) { .contact__information--phone { width: 50%; gap: 3rem; padding: 3rem; } } @media only screen and (min-width: 1200px) { .contact__information--phone { gap: 4rem; padding: 4rem 3rem; } } @media only screen and (max-width: 575px) { .contact__information--phone__icon svg { width: 4.5rem; } } .contact__information--phone__title { font-size: 1.5rem; text-transform: uppercase; color: var(--color-white); line-height: 2.2rem; font-weight: 600; margin-bottom: 1rem; } @media only screen and (min-width: 576px) { .contact__information--phone__title { font-size: 1.7rem; line-height: 2.8rem; } } @media only screen and (min-width: 1200px) { .contact__information--phone__title { font-size: 1.8rem; } } .contact__information--phone__title span { font-weight: 400; color: #0D2552; } .contact__information--phone__number { color: #0D2552; font-size: 1.6rem; font-weight: 600; } @media only screen and (min-width: 576px) { .contact__information--phone__number { font-size: 1.7rem; } } .contact__information--phone__number:hover { text-decoration: underline; } /* 15. Listing page css */ .breadcrumb__section { background: url('https://rdasankalpsarovar.com/public/front/img/breadcum.webp'); background-position: center center; background-size: cover; } @media only screen and (max-width: 575px) { .breadcrumb__section { padding: 5rem 0; } } .breadcrumb__title { font-weight: 700; margin-bottom: 2rem; font-size: 2.5rem; line-height: 3rem; } @media only screen and (min-width: 480px) { .breadcrumb__title { font-size: 3rem; line-height: 3.5rem; } } @media only screen and (min-width: 768px) { .breadcrumb__title { margin-bottom: 2.5rem; font-size: 3.5rem; line-height: 4rem; } } @media only screen and (min-width: 992px) { .breadcrumb__title { font-size: 4rem; line-height: 4.5rem; } } @media only screen and (min-width: 1200px) { .breadcrumb__title { font-size: 5rem; line-height: 5.5rem; } } .breadcrumb__title span { color: var(--color-hover); } .breadcrumb__menu { gap: 1.5rem; } .breadcrumb__menu--link { color: var(--color-foreground-sub); font-size: 1.7rem; font-weight: 600; } .breadcrumb__menu--link:hover { color: var(--color-hover); } .breadcrumb__menu--text { font-size: 1.7rem; font-weight: 600; } @media only screen and (max-width: 991px) { .listing__widget { margin-top: 7rem; } } @media only screen and (max-width: 767px) { .listing__widget { margin-top: 6rem; } } .widget__search--input input::-webkit-input-placeholder { font-weight: 700; color: var(--color-foreground); } .widget__search--input input::-moz-placeholder { font-weight: 700; color: var(--color-foreground); } .widget__search--input input:-ms-input-placeholder { font-weight: 700; color: var(--color-foreground); } .widget__search--input input:-moz-placeholder { font-weight: 700; color: var(--color-foreground); } .widget__search--input__field { width: 100%; height: 6rem; font-weight: 500; color: var(--color-foreground); border: 0; background: var(--color-background-3); padding: 0 6rem 0 2.5rem; border-radius: 0.5rem; } .widget__search--btn { position: absolute; top: 50%; right: 3rem; border: 0; background: inherit; padding: 0; transform: translateY(-50%); color: var(--color-foreground-sub); } .widget__search--btn:hover { color: var(--color-hover); } .listing__widget--inner { background: var(--color-background-3); padding: 2.5rem 1.5rem; border-radius: 0.5rem; } @media only screen and (min-width: 1200px) { .listing__widget--inner { padding: 2.5rem; } } .widget__title { font-size: 2rem; line-height: 2.4rem; border-bottom: 1px solid var(--color-border); padding-bottom: 1.5rem; } .widget__catagories__list { position: relative; padding: 1.3rem 1.5rem; border-radius: 0.5rem; transition: 0.3s; } @media only screen and (min-width: 1200px) { .widget__catagories__list { padding: 1.3rem 2rem; } } .widget__catagories__list:hover { background: var(--color-background); } .widget__catagories--label { cursor: pointer; display: block; color: var(--color-foreground); padding-right: 4rem; font-weight: 500; line-height: 1.8rem; text-transform: capitalize; } .widget__catagories--label:hover { color: var(--color-hover); } .widget__catagories--input { position: absolute; right: 2rem; top: 50%; transform: translatey(-50%); opacity: 0; cursor: pointer; z-index: 999; width: 1.9rem; height: 1.9rem; } .widget__catagories--input:checked ~ .widget__catagories--checkmark { background-color: var(--color-hover); border: 1px solid var(--color-hover); } .widget__catagories--input:checked ~ .widget__catagories--checkmark::before { display: block; } .widget__catagories--checkmark { height: 1.9rem; width: 1.9rem; border: 1.5px solid var(--color-border); background: var(--color-background); display: block; position: absolute; top: 50%; right: 2rem; transform: translatey(-50%); transition: var(--transition); border-radius: 0.5rem; } .widget__catagories--checkmark::before { right: 0.5rem; top: 0.2rem; width: 0.6rem; height: 1rem; border: solid white; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; position: absolute; display: none; } .widget__thumbnail { line-height: 1; display: inline-block; } .widget__thumbnail:hover .widget__thumbnail--media { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .widget__thumbnail--link { position: relative; overflow: hidden; border-radius: 1rem; } .widget__thumbnail--link::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62)); transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; z-index: 9; } .widget__thumbnail--media { border-radius: 1rem; } .widget__thumbnail--text { position: absolute; bottom: 3rem; left: 2rem; z-index: 9; } .widget__thumbnail--title { font-size: 2.2rem; line-height: 3rem; margin-bottom: 1.5rem; color: var(--color-white); } @media only screen and (min-width: 992px) { .widget__thumbnail--title { font-size: 2.5rem; } } .widget__thumbnail--subtitle { font-size: 1.7rem; font-weight: 600; color: var(--color-white); } .widget__thumbnail--subtitle svg { margin-left: 0.5rem; } .widget__location--list { position: relative; margin-bottom: 2rem; } .widget__location--list:last-child { margin-bottom: 0; } .widget__location .widget__catagories--input { left: 0; right: 0; } .widget__location .widget__catagories--checkmark { right: 0; left: 0; } .widget__location--label { cursor: pointer; display: block; color: var(--color-foreground); padding-left: 3.5rem; font-weight: 500; line-height: 1.8rem; text-transform: capitalize; } .widget__location--label:hover { color: var(--color-hover); } .widget__featured--items { margin-bottom: 2rem; } .widget__featured--items:last-child { margin-bottom: 0; } .widget__featured--thumb { width: 9rem; padding: 0.5rem; background: var(--color-background); line-height: 1; } .widget__featured--thumb:hover .widget__featured--media { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } .widget__featured--thumb__link { overflow: hidden; } .widget__featured--content { width: calc(100% - 9rem); padding-left: 1.5rem; } .widget__featured--title { font-size: 1.6rem; text-transform: capitalize; line-height: 2.2rem; margin-bottom: 0.5rem; } @media only screen and (min-width: 480px) { .widget__featured--title { font-size: 1.7rem; line-height: 2.4rem; margin-bottom: 1rem; } } .widget__featured--price { font-size: 1.4rem; line-height: 1.8rem; color: var(--color-hover); font-weight: 600; } @media only screen and (min-width: 480px) { .widget__featured--price { font-size: 1.5rem; } } /* price slider css */ .price-input { width: 100%; display: flex; margin: 0 0 25px; } .price-input input { width: 10rem; height: 4rem; outline: none; font-size: 16px; font-weight: 700; text-align: center; border: 1px solid var(--color-border); background: inherit; -moz-appearance: textfield; border-radius: 0.5rem; } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } .price-input .separator { width: auto; display: flex; font-size: 22px; align-items: center; justify-content: center; margin: 0 1.2rem; } .price-slider { height: 5px; position: relative; background: var(--color-border); border-radius: 5px; } .price-slider .progress { height: 100%; left: 25%; right: 25%; position: absolute; border-radius: 5px; background: var(--color-hover); } .range-input { position: relative; } .range-input input { position: absolute; width: 100%; height: 5px; top: -5px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; } input[type=range]::-webkit-slider-thumb { height: 17px; width: 17px; border-radius: 50%; background: var(--color-hover); pointer-events: auto; -webkit-appearance: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); } input[type=range]::-moz-range-thumb { height: 17px; width: 17px; border: none; border-radius: 50%; background: var(--color-hover); pointer-events: auto; -moz-appearance: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); } .price__filtering--btn { background: var(--color-background); text-transform: uppercase; font-weight: 700; height: 4.5rem; line-height: 4.5rem; padding: 0 2.5rem; border: 0; margin-top: 2.5rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; } .price__filtering--btn:hover { background: var(--color-hover); color: var(--color-white); } .listing__header { padding: 2rem; border: 1px solid var(--color-border); margin-bottom: 3rem; border-radius: 0.5rem; } @media only screen and (max-width: 575px) { .listing__header { flex-direction: column; gap: 2rem; } } .listing__header--right { gap: 3rem; } @media only screen and (max-width: 399px) { .listing__header--right { flex-direction: column; gap: 2rem; } } .listing__tab--btn { gap: 2rem; } .listing__tab--btn__field { padding: 0; background: inherit; border: 0; } .listing__tab--btn__field:hover { color: var(--color-hover); } .listing__tab--btn__field.active { color: var(--color-hover); } .recently__select { gap: 0.5rem; } .recently__select select { border: 0; padding: 0 1.5rem 0 0.5rem; font-size: 1.5rem; font-weight: 600; -webkit-appearance: none; width: 14rem; } .recently__select .select::before { right: 0.5rem; } .results__cout--text { font-size: 1.6rem; line-height: 2rem; font-weight: 500; } .listing__featured--grid .featured__card { padding: 0; box-shadow: 0 4px 31px 0 rgba(0, 0, 0, 0.06); } .listing__featured--grid .featured__content { padding: 1.7rem 1.5rem 1.5rem; } @media only screen and (min-width: 1200px) { .listing__featured--grid .featured__content { padding: 1.7rem 2.5rem 1.5rem; } } .listing__featured--grid .featured__thumbnail--link { position: relative; } .listing__featured--grid .featured__thumbnail--link::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.23), rgba(0, 0, 0, 0.63)); transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; z-index: 9; } .listing__featured--grid .featured__action { z-index: 9; } .listing__featured--grid .featured__badge { z-index: 9; } .featured__list--action { gap: 1.2rem; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .featured__content--list__footer { flex-direction: column; gap: 1.5rem; } } @media only screen and (max-width: 479px) { .featured__content--list__footer { flex-direction: column; gap: 1.5rem; } } .listing__details--btn { font-weight: 600; height: 4.5rem; line-height: 4.5rem; padding: 0 2rem; background: rgba(250, 74, 74, 0.1); color: var(--color-hover); border-radius: 0.5rem; } .listing__details--btn:hover { background: var(--color-hover); color: var(--color-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .listing__details--btn { width: 140px; text-align: center; } } @media only screen and (max-width: 479px) { .listing__details--btn { padding: 0 1.5rem; width: 130px; text-align: center; } } .listing__featured--info { padding: 2rem 0 2rem; } @media only screen and (min-width: 1200px) { .listing__featured--info { padding: 3rem 0 2.5rem; } } .listing__featured--info__items { display: flex; gap: 1rem; align-items: center; position: relative; margin-right: 1rem; padding-right: 1rem; } .listing__featured--info__items:last-child { margin-right: 0; padding-right: 0; } .listing__featured--info__items:last-child::before { display: none; } .listing__featured--info__items::before { position: absolute; content: ""; width: 0.1rem; height: 1.5rem; background: #D9D9D9; top: 50%; right: 0; transform: translateY(-50%); } @media only screen and (max-width: 399px) { .listing__featured--info__icon svg { width: 2rem; } } .listing__featured--info__text { color: var(--color-foreground-sub); font-weight: 600; font-size: 1.4rem; } @media only screen and (min-width: 400px) { .listing__featured--info__text { font-size: 1.5rem; } } .featured__content--desc.listing__style { padding-top: 1.5rem; border-top: 1px solid var(--color-border); } @media only screen and (min-width: 1200px) { .featured__content--desc.listing__style { padding-top: 2.2rem; } } @media only screen and (max-width: 767px) { .listing__featured--list .featured__card--list { flex-direction: column; align-items: flex-start !important; } } .listing__featured--thumbnail { width: auto; line-height: 1; } @media only screen and (min-width: 768px) { .listing__featured--thumbnail { width: 22.5rem; } } .listing__featured--content { width: 100%; padding-left: 0; } @media only screen and (min-width: 768px) { .listing__featured--content { width: calc(100% - 22.5rem); padding-left: 3rem; } } @media only screen and (max-width: 767px) { .listing__featured--content { padding-top: 2rem; } } @media only screen and (max-width: 479px) { .listing__featured--content .featured__content--list__top { flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; } } .page__pagination--area { margin-top: 3rem; } @media only screen and (min-width: 992px) { .page__pagination--area { margin-top: 5rem; } } .page__pagination--wrapper { gap: 1.2rem; } @media only screen and (min-width: 768px) { .page__pagination--wrapper { gap: 1.5rem; } } .page__pagination--link { width: 3.5rem; height: 3.5rem; border: 1px solid var(--color-border); font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } @media only screen and (min-width: 768px) { .page__pagination--link { width: 4.5rem; height: 4.5rem; } } .page__pagination--link.active { background: var(--color-hover); border-color: var(--color-hover); color: var(--color-white); pointer-events: none; } .page__pagination--link:hover { background: var(--color-hover); border-color: var(--color-hover); color: var(--color-white); } /* 16. listing details css */ .listing__small--hero__slider { position: absolute; bottom: 3rem; right: 4rem; max-width: 35rem; padding: 0 3rem; } @media only screen and (min-width: 480px) { .listing__small--hero__slider { max-width: 40rem; } } @media only screen and (min-width: 768px) { .listing__small--hero__slider { max-width: 33rem; } } @media only screen and (min-width: 992px) { .listing__small--hero__slider { bottom: 4rem; right: 5rem; max-width: 38rem; } } @media only screen and (min-width: 1200px) { .listing__small--hero__slider { bottom: 5rem; right: 10rem; max-width: 50rem; } } .listing__small--hero__slider .swiper__nav--btn { opacity: 1; visibility: visible; } @media only screen and (max-width: 767px) { .listing__small--hero__slider { position: inherit; left: auto; right: auto; margin: 0 auto; bottom: inherit; margin-top: 3rem; } } .listing__hero--slider__media { -o-object-fit: cover; object-fit: cover; height: 25rem; } @media only screen and (min-width: 480px) { .listing__hero--slider__media { height: 30rem; } } @media only screen and (min-width: 576px) { .listing__hero--slider__media { height: 32rem; } } @media only screen and (min-width: 768px) { .listing__hero--slider__media { height: 40rem; } } @media only screen and (min-width: 992px) { .listing__hero--slider__media { height: 45rem; } } @media only screen and (min-width: 1200px) { .listing__hero--slider__media { height: 53rem; } } @media only screen and (min-width: 1600px) { .listing__hero--slider__media { height: 67rem; } } .listing__hero--slider__container { position: absolute; left: 0; right: 0; } @media only screen and (min-width: 768px) { .listing__hero--slider__container { bottom: 10rem; } } @media only screen and (max-width: 767px) { .listing__hero--slider__container { top: 50%; transform: translateY(-50%); } } .listing__small--hero__slider--items { background: var(--color-background); border-radius: 0.5rem; } @media only screen and (min-width: 768px) { .listing__small--hero__slider--items { padding: 0.5rem; } } .listing__hero--slider__content { background: rgba(0, 0, 0, 0.7); max-width: 33rem; padding: 2rem; border-radius: 1rem; } @media only screen and (min-width: 992px) { .listing__hero--slider__content { max-width: 38rem; padding: 3rem; } } @media only screen and (min-width: 1200px) { .listing__hero--slider__content { max-width: 47rem; padding: 4rem; } } .listing__hero--slider__title { color: var(--color-white); } .listing__hero--slider__price { font-size: 1.8rem; font-weight: 700; color: var(--color-hover); } .listing__hero--slider__content--top { margin-bottom: 2rem; } @media only screen and (min-width: 992px) { .listing__hero--slider__content--top { margin-bottom: 3rem; } } .listing__hero--slider__text { margin-bottom: 0; color: var(--color-white); opacity: 0.8; font-weight: 500; } @media only screen and (max-width: 991px) { .listing__hero--slider__text { font-size: 1.5rem; } } @media only screen and (max-width: 479px) { .listing__hero--slider__text { font-size: 1.4rem; } } .widget__admin--profile { padding: 3rem 2rem; border: 1px solid var(--color-border); border-radius: 1rem; } @media only screen and (min-width: 1200px) { .widget__admin--profile { padding: 4rem 3rem; } } .admin__profile--thumbnail img { margin: 0 auto; } .admin__profile--content { padding-top: 2rem; } .admin__profile--name { font-size: 1.8rem; line-height: 2.2rem; margin-bottom: 1rem; } .admin__profile--subtitle { font-size: 1.5rem; line-height: 1.8rem; color: var(--color-foreground-sub); margin-bottom: 1.5rem; } .admin__profile--rating { gap: 0.5rem; margin-bottom: 2rem; } .admin__profile--rating li span { color: var(--color-hover); } .admin__profile--desc { font-size: 1.6rem; font-weight: 500; color: var(--color-foreground-sub); } .admin__profile--email { font-weight: 700; font-size: 1.7rem; margin-bottom: 2rem; } .profile__social { gap: 1.5rem; } .profile__social--icon { width: 3.3rem; height: 3.3rem; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-foreground-sub); border-radius: 0.5rem; } .profile__social--icon:hover { background: var(--color-hover); border-color: var(--color-hover); color: var(--color-white); } .widget__step { padding: 3rem 2rem; border: 1px solid var(--color-border); border-radius: 1rem; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; -ms-border-radius: 1rem; -o-border-radius: 1rem; } @media only screen and (min-width: 1200px) { .widget__step { padding: 3rem; } } .widget__step--title { font-size: 2rem; line-height: 2.2rem; padding-left: 1.5rem; border-left: 2px solid var(--color-hover); margin-bottom: 2rem; } @media only screen and (min-width: 992px) { .widget__step--title { margin-bottom: 3rem; } } .widget__form--input input::-webkit-input-placeholder { font-weight: 500; color: #838383; } .widget__form--input input::-moz-placeholder { font-weight: 500; color: #838383; } .widget__form--input input:-ms-input-placeholder { font-weight: 500; color: #838383; } .widget__form--input input:-moz-placeholder { font-weight: 500; color: #838383; } .widget__form--input textarea::-webkit-input-placeholder { font-weight: 500; color: #838383; } .widget__form--input textarea::-moz-placeholder { font-weight: 500; color: #838383; } .widget__form--input textarea:-ms-input-placeholder { font-weight: 500; color: #838383; } .widget__form--input textarea:-moz-placeholder { font-weight: 500; color: #838383; } .widget__form--input__field { width: 100%; height: 5rem; border: 1px solid transparent; background: #F5F8FB; color: var(--color-foreground); padding: 0 2.5rem; border-radius: 0.5rem; } @media only screen and (min-width: 1200px) { .widget__form--input__field { height: 5.5rem; } } .widget__form--input__field:focus { border-color: var(--color-hover); } .widget__form--textarea__field { width: 100%; height: 15rem; border: 0; background: #F5F8FB; color: var(--color-foreground); padding: 1.5rem 2.5rem; border-radius: 0.5rem; resize: none; border: 1px solid transparent; } .widget__form--textarea__field:focus { border-color: var(--color-hover); } .widget__form--btn { width: 100%; text-align: center; margin-top: 3rem; } .widget__form.calculator .widget__form--input { position: relative; } .widget__form.calculator .widget__form--input__field { padding: 0 2rem 0 4.5rem; } .widget__form.calculator .widget__form--textarea__field { padding: 1.5rem 2.5rem 1.5rem 4.5rem; } .widget__form--input__position--icon { position: absolute; top: 50%; left: 2rem; color: #838383; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .widget__form--textarea__position--icon { position: absolute; top: 1.5rem; left: 2rem; color: #838383; } .widget__step .widget__featured--thumb { padding: 0; } .widget__featured--properties__content--top { margin-bottom: 1.5rem; } .widget__featured--properties__author { box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.09); border-radius: 50%; } .widget__featured--properties__author img { border-radius: 50%; } .widget__featured--properties__share { gap: 1.5rem; } .widget__featured--properties__share--btn { width: 3.6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; background: var(--color-background); box-shadow: 0 3px 18px 0 rgba(0, 0, 0, 0.1); } .widget__featured--properties__share--btn:hover { background: var(--color-hover); color: var(--color-white); } .widget__featured--properties__thumbnail::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.23), rgba(0, 0, 0, 0.63)); transition: 0.3s; } .widget__featured--properties__desc { font-size: 1.5rem; color: var(--color-foreground-sub); margin-bottom: 1rem; } .widget__featured--properties__desc svg { margin-right: 0.5rem; } @media only screen and (min-width: 400px) { .widget__featured--properties__desc { font-size: 1.6rem; } } .widget__featured--properties__title { margin-bottom: 1.5rem; } .widget__featured--propertie__price { gap: 2rem; } .new__price { font-size: 1.8rem; line-height: 2rem; font-weight: 700; color: var(--color-hover); } @media only screen and (min-width: 480px) { .new__price { font-size: 2rem; } } .old__price { font-size: 1.7rem; line-height: 2rem; font-weight: 500; color: var(--color-foreground-sub); text-decoration: line-through; } @media only screen and (min-width: 480px) { .old__price { font-size: 1.8rem; } } .widget__featured--properties__content { padding: 0 1.5rem; margin-top: -22px; position: relative; } @media only screen and (min-width: 1200px) { .listing__details--wrapper { padding-right: 5rem; } } .listing__details--action { gap: 1.2rem; } .listing__details--action__btn { width: 3.5rem; height: 3.5rem; background: var(--color-background-3); display: flex; align-items: center; justify-content: center; color: var(--color-foreground); border-radius: 0.5rem; } .listing__details--action__btn:hover { background: var(--color-hover); color: var(--color-white); } .listing__details--meta__wrapper { gap: 2rem; } @media only screen and (max-width: 479px) { .listing__details--meta__wrapper { flex-wrap: wrap; } } .listing__details--wishlist__btn { width: 3.5rem; height: 3.5rem; border: 1px solid var(--color-border); background: var(--color-background); display: flex; align-items: center; justify-content: center; color: var(--color-hover); border-radius: 0.5rem; } .listing__details--wishlist__btn:hover { border-color: var(--color-hover); } .listing__details--badge { font-size: 1.5rem; font-weight: 600; height: 3rem; line-height: 3rem; background: var(--color-hover); color: var(--color-white); padding: 0 1.5rem; border-radius: 0.5rem; } .listing__details--badge.two { background: var(--color-background); color: var(--color-foreground); box-shadow: -1px 4px 10px 0 rgba(0, 0, 0, 0.06); } .listing__details--meta__text { color: var(--color-foreground-sub); font-weight: 600; line-height: 2.4rem; } .listing__details--meta__icon { color: var(--color-hover); margin-right: 0.5rem; } .listing__details--title { font-size: 2.2rem; line-height: 2.6rem; } @media only screen and (min-width: 400px) { .listing__details--title { font-size: 2.3rem; } } @media only screen and (min-width: 480px) { .listing__details--title { font-size: 2.5rem; line-height: 2.8rem; } } @media only screen and (min-width: 768px) { .listing__details--title { font-size: 2.8rem; line-height: 3.2rem; } } @media only screen and (min-width: 992px) { .listing__details--title { font-size: 3rem; line-height: 3.5rem; } } @media only screen and (min-width: 1200px) { .listing__details--title { font-size: 3.5rem; line-height: 4rem; } } @media only screen and (max-width: 767px) { .listing__details--title { margin-bottom: 2rem; } } .listing__details--price { gap: 1rem; } .listing__details--price__new { color: var(--color-hover); font-weight: 700; font-size: 2rem; line-height: 2.2rem; } @media only screen and (min-width: 768px) { .listing__details--price__new { font-size: 2.2rem; } } .listing__details--price__old { color: var(--color-foreground-sub); text-decoration: line-through; font-weight: 600; font-size: 1.7rem; line-height: 2.2rem; } @media only screen and (min-width: 768px) { .listing__details--price__old { font-size: 1.8rem; } } .listing__details--price__id { gap: 3rem; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .listing__details--price__id { margin-bottom: 2.5rem; } } @media only screen and (min-width: 992px) { .listing__details--price__id { margin-bottom: 3rem; } } .listing__details--property__id { font-weight: 600; } .listing__details--location__text { font-weight: 600; color: var(--color-foreground-sub); line-height: 2.5rem; } .listing__details--main__content { padding: 6rem 0 0; } @media only screen and (min-width: 768px) { .listing__details--main__content { padding: 7rem 0 0 2rem; } } @media only screen and (min-width: 992px) { .listing__details--main__content { padding: 4rem 0 0 2rem; } } @media only screen and (min-width: 1200px) { .listing__details--main__content { padding: 5rem 0rem 0; } } @media only screen and (max-width: 991px) { .listing__details--content__top { flex-direction: column; align-items: flex-start !important; gap: 2rem; } } .listing__details--content__title { font-size: 2rem; line-height: 2.2rem; border-left: 2px solid var(--color-hover); padding-left: 1.5rem; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .listing__details--content__title { font-size: 2.2rem; line-height: 2.4rem; } } @media only screen and (min-width: 1366px) { .listing__details--content__title { font-size: 2.4rem; } } .listing__details--content__desc { font-size: 1.6rem; line-height: 3rem; font-weight: 500; color: var(--color-foreground-sub); margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .listing__details--content__desc { font-size: 1.8rem; line-height: 3.2rem; margin-bottom: 3rem; } } .listing__d--info { margin-bottom: 0; } .listing__d--info .apartment__info--wrapper { padding-bottom: 0; } @media only screen and (max-width: 479px) { .listing__d--info .apartment__info--wrapper { padding-bottom: 2rem; } } .listing__d--info .apartment__info--list { padding-bottom: 3rem; } @media only screen and (max-width: 479px) { .listing__d--info .apartment__info--list { padding-bottom: 0; } } .listing__d--info .apartment__info--list::after { position: absolute; content: ""; width: 0; height: 0.1rem; background: var(--color-hover); left: 0; bottom: -1px; transition: 0.3s; } @media only screen and (max-width: 479px) { .listing__d--info .apartment__info--list::after { display: none; } } .listing__d--info .apartment__info--list:hover::after { width: 100%; } .properties__details--info__wrapper { gap: 3rem; flex-wrap: wrap; } @media only screen and (min-width: 768px) { .properties__details--info__wrapper { gap: 3.5rem; } } @media only screen and (min-width: 992px) { .properties__details--info__wrapper { gap: 4.5rem; } } @media only screen and (max-width: 575px) { .properties__details--info__wrapper { flex-direction: column; gap: 2rem; } } .properties__details--info__list { width: 100%; border-bottom: 1px solid var(--color-border); } @media only screen and (min-width: 576px) { .properties__details--info__list { width: 46%; } } .properties__details--info__title { font-size: 1.7rem; line-height: 2.5rem; font-weight: 700; } .properties__details--info__subtitle { line-height: 2.5rem; font-weight: 500; color: var(--color-foreground-sub); } .properties__details--info__list { padding: 0 1rem 1.2rem; } .listing__details--content__title.mb-40 { margin-bottom: 2.5rem; } @media only screen and (min-width: 400px) { .listing__details--content__title.mb-40 { margin-bottom: 3rem; } } @media only screen and (min-width: 768px) { .listing__details--content__title.mb-40 { margin-bottom: 4rem; } } .properties__amenities--list { gap: 1.5rem; margin-bottom: 2rem; } @media only screen and (min-width: 576px) { .properties__amenities--list { margin-bottom: 2.5rem; } } .properties__amenities--list:last-child { margin-bottom: 0; } .properties__amenities--mark__icon { color: var(--color-hover); } .properties__amenities--text { font-weight: 500; color: var(--color-foreground-sub); line-height: 2rem; } .properties__amenities--wrapper { gap: 2rem; } @media only screen and (min-width: 400px) { .properties__amenities--wrapper { gap: 4rem; } } @media only screen and (min-width: 1200px) { .properties__amenities--wrapper { gap: 7rem; } } @media only screen and (max-width: 575px) { .properties__amenities--wrapper { flex-wrap: wrap; } } @media only screen and (max-width: 399px) { .properties__amenities--wrapper { justify-content: space-between; } } @media only screen and (max-width: 767px) { .properties__floor--plans__info { display: flex; flex-wrap: wrap; gap: 2rem; } } @media only screen and (max-width: 399px) { .properties__floor--plans__info { gap: 1rem; } } .properties__floor--plans__info li { padding: 1rem 1.5rem; display: inline-block; transition: 0.3s; cursor: pointer; border-radius: 0.5rem; } @media only screen and (min-width: 768px) { .properties__floor--plans__info li { margin-bottom: 2.5rem; } } .properties__floor--plans__info li:last-child { margin-bottom: 0; } .properties__floor--plans__info li img { display: inline-block; } .properties__floor--plans__info li:hover { background: var(--color-background-3); } .properties__floor--plans__info li span { font-size: 1.6rem; line-height: 2rem; font-weight: 600; margin-left: 1.2rem; } @media only screen and (min-width: 1200px) { .properties__floor--plans__info li span { font-size: 1.7rem; margin-left: 1.5rem; } } .floor__plans--tab__btn { gap: 1.8rem; margin-bottom: 3rem; } .floor__plans--tab__btn--field { font-weight: 600; height: 3rem; line-height: 3rem; width: 10rem; text-align: center; background: var(--color-background); color: var(--color-foreground); box-shadow: -1px 4px 10px 0 rgba(0, 0, 0, 0.06); border: 0; border-radius: 0.5rem; } .floor__plans--tab__btn--field:hover { background: var(--color-hover); color: var(--color-white); } .floor__plans--tab__btn--field.active { background: var(--color-hover); color: var(--color-white); } .properties__floor--plans { gap: 3rem; } @media only screen and (min-width: 1200px) { .properties__floor--plans { gap: 4rem; } } @media only screen and (max-width: 767px) { .properties__floor--plans { flex-direction: column; } } .properties__floor--plans__content { width: 100%; } @media only screen and (min-width: 768px) { .properties__floor--plans__content { width: 37%; } } @media only screen and (min-width: 1200px) { .properties__floor--plans__content { width: 40%; } } .properties__floor--plans__gallery { width: 100%; } @media only screen and (min-width: 768px) { .properties__floor--plans__gallery { width: 63%; } } @media only screen and (min-width: 1200px) { .properties__floor--plans__gallery { width: 60%; } } .listing__details--content__step { gap: 3rem; } @media only screen and (max-width: 991px) { .listing__details--content__step.mb-80 { margin-bottom: 7rem; } } @media only screen and (max-width: 767px) { .listing__details--content__step.mb-80 { margin-bottom: 6rem; } } @media only screen and (max-width: 767px) { .listing__details--location__header { flex-direction: column; gap: 3rem; margin-bottom: 3rem; } } .listing__details--location__header--left { width: 100%; padding-right: 0; } @media only screen and (min-width: 768px) { .listing__details--location__header--left { width: 50%; padding-right: 3rem; } } .location__google--maps { width: 100%; } @media only screen and (min-width: 768px) { .location__google--maps { width: 50%; } } .location__google--maps summary { outline: none; width: 100%; height: 4.5rem; line-height: 4.5rem; background: var(--color-hover); color: var(--color-white); text-align: center; font-weight: 500; border-radius: 0.5rem; font-size: 1.6rem; } .location__google--maps summary:hover { background: var(--color-foreground); } .location__google--maps summary::marker { display: none; } .location__google--maps summary::-webkit-details-marker { display: none; } .location__google--maps iframe { width: 100%; height: 30rem; margin-top: 3rem; } .location__google--maps__info { gap: 3rem; } @media only screen and (max-width: 479px) { .location__google--maps__info { flex-direction: column; gap: 2rem; } } .location__google--maps__info--step { width: 100%; } @media only screen and (min-width: 480px) { .location__google--maps__info--step { width: 50%; } } .location__google--maps__info--title { font-size: 1.7rem; line-height: 2rem; font-weight: 700; min-width: 10rem; } @media only screen and (min-width: 768px) { .location__google--maps__info--title { font-size: 1.8rem; line-height: 2rem; min-width: 13rem; } } .location__google--maps__info--list { gap: 2rem; margin-bottom: 2rem; } .location__google--maps__info--list:last-child { margin-bottom: 0; } .location__google--maps__info--subtitle { line-height: 2.5rem; font-weight: 500; color: var(--color-foreground-sub); } @media only screen and (max-width: 767px) { .listing__details--review { flex-direction: column; gap: 3rem; } } .details__review--box { text-align: center; width: 100%; position: relative; } @media only screen and (min-width: 768px) { .details__review--box { width: 15rem; padding-right: 2.5rem; } } @media only screen and (min-width: 1200px) { .details__review--box { width: 17rem; padding-right: 3rem; } } .details__review--box::before { position: absolute; content: ""; width: 0.1rem; height: 100%; background: var(--color-border); right: 0; top: 0; } @media only screen and (max-width: 767px) { .details__review--box::before { display: none; } } .details__review--wrapper { width: 100%; gap: 3rem; } @media only screen and (min-width: 768px) { .details__review--wrapper { width: calc(100% - 15rem); padding-left: 2.5rem; } } @media only screen and (min-width: 1200px) { .details__review--wrapper { width: calc(100% - 17rem); padding-left: 5rem; gap: 4rem; padding-left: 3rem; } } @media only screen and (max-width: 399px) { .details__review--wrapper { flex-wrap: wrap; } } .details__review--box__point { font-size: 3.5rem; line-height: 3.5rem; font-weight: 700; margin-bottom: 2rem; } @media only screen and (min-width: 1200px) { .details__review--box__point { font-size: 4rem; line-height: 4rem; } } .details__review--box__subtitle { font-size: 1.8rem; line-height: 2.2rem; font-weight: 700; margin-bottom: 2.5rem; } @media only screen and (min-width: 1200px) { .details__review--box__subtitle { font-size: 2rem; line-height: 2.2rem; margin-bottom: 3rem; } } .details__review--box__subtitle span { color: #00BA74; } .details__review--box__rating img { margin: 0 auto; } .details__review--step { width: 100%; } @media only screen and (min-width: 400px) { .details__review--step { width: 50%; } } .details__review--list { margin-bottom: 3rem; position: relative; padding-bottom: 2rem; } @media only screen and (min-width: 768px) { .details__review--list { margin-bottom: 4rem; } } @media only screen and (min-width: 1200px) { .details__review--list { margin-bottom: 5rem; } } .details__review--list:last-child { margin-bottom: 0; } .details__review--list::before { position: absolute; content: ""; width: 100%; height: 0.5rem; background: #D9D9D9; bottom: 0; left: 0; border-radius: 2rem; } .details__review--list::after { position: absolute; content: ""; width: 75%; height: 0.5rem; background: #00BA74; bottom: 0; left: 0; border-radius: 2rem; } .review__list--title { font-weight: 700; line-height: 2.2rem; } .listing__details--rating { gap: 0.2rem; } @media only screen and (max-width: 479px) { .reviews__comment--step { flex-direction: column; gap: 2rem; } } .reviews__comment--thumb { width: 7rem; } .reviews__comment--content { width: 100%; padding-left: 0; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); } @media only screen and (min-width: 480px) { .reviews__comment--content { width: calc(100% - 7rem); padding-left: 2rem; margin-bottom: 3rem; padding-bottom: 3rem; } } @media only screen and (min-width: 768px) { .reviews__comment--content { padding-left: 3rem; } } .reviews__comment--content.last__content { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .reviews__comment--top { gap: 3rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 400px) { .reviews__comment--top { gap: 5rem; } } .reviews__comment--author__name { font-size: 1.7rem; line-height: 2.2rem; margin-bottom: 0.7rem; } @media only screen and (min-width: 400px) { .reviews__comment--author__name { font-size: 1.8rem; } } .reviews__comment--rating { gap: 0.4rem; } .reviews__comment--author__date { font-size: 1.4rem; text-transform: uppercase; color: var(--color-foreground-sub); font-weight: 500; } .reviews__comment--desc { color: var(--color-foreground-sub); font-size: 1.5rem; } @media only screen and (min-width: 768px) { .reviews__comment--desc { font-size: 1.6rem; } } .listing__details--content__title.mb-30 { margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .listing__details--content__title.mb-30 { margin-bottom: 3rem; } } .reviews__comment--write { font-weight: 500; color: var(--color-hover); text-decoration: underline; } .reviews__comment--write:hover { color: var(--color-foreground); text-decoration: underline; } .reviews__comment--input input::-webkit-input-placeholder { color: var(--color-foreground-sub); } .reviews__comment--input input::-moz-placeholder { color: var(--color-foreground-sub); } .reviews__comment--input input:-ms-input-placeholder { color: var(--color-foreground-sub); } .reviews__comment--input input:-moz-placeholder { color: var(--color-foreground-sub); } .reviews__comment--input__field { width: 100%; height: 5rem; background: inherit; border: 1px solid var(--color-border); color: var(--color-foreground); font-size: 1.5rem; font-weight: 400; padding: 0 1.5rem; border-radius: 0.5rem; } @media only screen and (min-width: 768px) { .reviews__comment--input__field { height: 5.5rem; } } .reviews__comment--input__field:focus { border-color: var(--color-hover); } .reviews__comment--textarea__field { width: 100%; height: 15rem; padding: 1.2rem 1.5rem; background: inherit; border: 1px solid var(--color-border); color: var(--color-foreground); font-size: 1.5rem; font-weight: 500; border-radius: 0.5rem; resize: none; } @media only screen and (min-width: 768px) { .reviews__comment--textarea__field { height: 20rem; } } .reviews__comment--textarea__field:focus { border-color: var(--color-hover); } .reviews__comment--btn { margin-top: 2rem; } @media only screen and (min-width: 480px) { .reviews__comment--btn { margin-top: 3rem; } } .reviews__comment--btn svg { margin-left: 0.5rem; } @media only screen and (max-width: 399px) { .properties__reviews--comment__display { flex-direction: column; align-items: flex-start !important; gap: 1rem; } } @media only screen and (max-width: 767px) { .properties__reviews--comment__display.mb-50 { margin-bottom: 3rem; } } @media only screen and (max-width: 991px) { .properties__reviews--comment.mb-80 { margin-bottom: 7rem; } } @media only screen and (max-width: 767px) { .properties__reviews--comment.mb-80 { margin-bottom: 6rem; } } .reviews__comment--display__text { font-weight: 700; } .reviews__comment--display__left { gap: 1.2rem; } .reviews__comment--display__rating { gap: 0.3rem; } /* 8. Add listing css */ @media only screen and (max-width: 767px) { .add__listing--header { margin-bottom: 3rem; } } .add__listing--tab__btn { gap: 2.5rem; } @media only screen and (min-width: 768px) { .add__listing--tab__btn { gap: 4rem; } } @media only screen and (min-width: 992px) { .add__listing--tab__btn { gap: 5rem; } } .add__listing--tab__btn--field { font-size: 1.8rem; line-height: 2.4rem; font-weight: 700; border: 0; background: inherit; padding: 0; position: relative; padding-bottom: 0.7rem; } @media only screen and (min-width: 768px) { .add__listing--tab__btn--field { font-size: 2rem; } } @media only screen and (min-width: 992px) { .add__listing--tab__btn--field { font-size: 2.2rem; } } .add__listing--tab__btn--field:hover { color: var(--color-hover); } .add__listing--tab__btn--field:hover::before { width: 100%; } .add__listing--tab__btn--field.active { color: var(--color-hover); } .add__listing--tab__btn--field.active::before { width: 100%; } .add__listing--tab__btn--field::before { position: absolute; content: ""; width: 0; height: 0.1rem; background: var(--color-hover); bottom: 0; left: 0; transition: 0.3s; } @media only screen and (max-width: 575px) { .add__listing--form__step { margin-bottom: 2rem; } } @media only screen and (max-width: 767px) { .add__listing--form__step.last.mb-30 { margin-bottom: 1rem; } } .add__listing--title { font-size: 1.7rem; line-height: 2.4rem; position: relative; padding-left: 1.5rem; } @media only screen and (min-width: 576px) { .add__listing--title { font-size: 1.8rem; } } @media only screen and (min-width: 768px) { .add__listing--title { font-size: 2rem; } } @media only screen and (max-width: 767px) { .add__listing--title.mb-30 { margin-bottom: 2rem; } } .add__listing--title::before { position: absolute; content: ""; width: 0.2rem; height: 2rem; background: var(--color-hover); left: 0; top: 50%; transform: translateY(-50%); } .add__listing--input__box input::-webkit-input-placeholder { color: #838383; font-weight: 500; } .add__listing--input__box input::-moz-placeholder { color: #838383; font-weight: 500; } .add__listing--input__box input:-ms-input-placeholder { color: #838383; font-weight: 500; } .add__listing--input__box input:-moz-placeholder { color: #838383; font-weight: 500; } .add__listing--input__field { width: 100%; height: 5rem; border: 1px solid var(--color-border); padding: 0 1.5rem; font-size: 1.5rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; font-weight: 500; } .add__listing--input__field:focus { border-color: var(--color-hover); } .add__listing--input__label { font-weight: 700; margin-bottom: 1.4rem; line-height: 1.8rem; } .add__listing--textarea__box textarea::-webkit-input-placeholder { color: #838383; font-weight: 500; } .add__listing--textarea__box textarea::-moz-placeholder { color: #838383; font-weight: 500; } .add__listing--textarea__box textarea:-ms-input-placeholder { color: #838383; font-weight: 500; } .add__listing--textarea__box textarea:-moz-placeholder { color: #838383; font-weight: 500; } .add__listing--textarea__field { width: 100%; height: 15rem; border: 1px solid var(--color-border); padding: 1rem 1.5rem; font-size: 1.5rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; resize: none; } .add__listing--textarea__field:focus { border-color: var(--color-hover); } @media only screen and (min-width: 768px) { .add__listing--textarea__field { height: 20rem; } } .add__listing--form__select { width: 100%; height: 5rem; border: 1px solid var(--color-border); padding: 0 1.5rem; font-size: 1.5rem; border-radius: 0.5rem; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; -ms-border-radius: 0.5rem; -o-border-radius: 0.5rem; color: var(--color-foreground-sub); -webkit-appearance: none; cursor: pointer; } .add__listing--form__select:focus { border-color: var(--color-hover); } .browse__file--area { border: 1px solid var(--color-border); padding: 4rem 3rem; border-radius: 1rem; transition: 0.3s; } @media only screen and (min-width: 768px) { .browse__file--area { padding: 5rem 3rem; } } .browse__file--input__field { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .browse__file--area:hover { border-color: var(--color-hover); } .browse__file--area:hover .browse__file--btn { border-color: var(--color-hover); color: var(--color-hover); } .browse__file--btn { background: inherit; border: 1px solid var(--color-border); color: var(--color-foreground); font-size: 1.6rem; line-height: 4.8rem; } @media only screen and (min-width: 768px) { .browse__file--btn { font-size: 1.7rem; line-height: 5.3rem; } } .browse__file--title { font-size: 1.8rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .browse__file--title { font-size: 2.2rem; margin-bottom: 2rem; } } .browse__file--desc { font-size: 1.6rem; font-weight: 600; color: var(--color-foreground-sub); margin-bottom: 2.5rem; } .add__listing--google__map h3 { font-size: 1.7rem; line-height: 2rem; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .add__listing--google__map h3 { font-size: 1.8rem; margin-bottom: 2.5rem; } } .add__listing--google__map iframe { width: 100%; height: 30rem; } @media only screen and (min-width: 768px) { .add__listing--google__map iframe { height: 50rem; } } /* 11. Contact css */ .contact__wrapper { gap: 2rem; } @media only screen and (min-width: 768px) { .contact__wrapper { gap: 3rem; } } @media only screen and (min-width: 992px) { .contact__wrapper { gap: 5rem; } } @media only screen and (max-width: 767px) { .contact__wrapper { flex-direction: column-reverse; } } @media only screen and (max-width: 991px) { .contact__wrapper.mb-80 { margin-bottom: 7rem; } } @media only screen and (max-width: 767px) { .contact__wrapper.mb-80 { margin-bottom: 6rem; } } .contact__us--info { width: 100%; } @media only screen and (min-width: 768px) { .contact__us--info { width: 35%; } } @media only screen and (min-width: 992px) { .contact__us--info { width: 35%; } } .contact__us--map { width: 100%; } @media only screen and (min-width: 768px) { .contact__us--map { width: 100%; } } @media only screen and (min-width: 992px) { .contact__us--map { width: 100%; } } .contact__us--map iframe { width: 100%; height: 25rem; } @media only screen and (min-width: 480px) { .contact__us--map iframe { height: 30rem; } } @media only screen and (min-width: 768px) { .contact__us--map iframe { height: 40rem; } } @media only screen and (min-width: 992px) { .contact__us--map iframe { height: 47rem; } } .contact__us--info__list { gap: 2.5rem; padding: 2rem 2.5rem; border-radius: 1rem; background: var(--color-background); transition: 0.3s; margin-bottom: 1rem; border:1px solid #cecece; } @media only screen and (min-width: 992px) { .contact__us--info__list { gap: 3rem; padding: 3rem; } } .contact__us--info__list:hover { background: var(--color-hover); box-shadow: inherit; } .contact__us--info__list:hover .contact__us--info__title { color: var(--color-white); } .contact__us--info__list:hover .contact__us--info__text { color: var(--color-white); } .contact__us--info__list:hover .contact__us--info__text a { color: var(--color-white); } .contact__us--info__list:hover .contact__us--info__icon { color: var(--color-white); } .contact__us--info__icon { color: var(--color-hover); } @media only screen and (max-width: 479px) { .contact__us--info__icon svg { width: 4rem; } } .contact__us--info__title { margin-bottom: 1.5rem; line-height: 2rem; transition: 0.3s; } .contact__us--info__text { font-size: 1.5rem; color: var(--color-foreground-sub); line-height: 2.5rem; font-weight: 500; } .contact__us--info__text.desc { transition: 0.3s; } .contact__us--info__text a { color: var(--color-foreground-sub); } .contact__form { background: #FAFAFA; padding: 3rem; border-radius: 1rem; } @media only screen and (min-width: 1200px) { .contact__form { padding: 4rem; } } .contact__form--input__field { width: 100%; height: 5rem; background: var(--color-background); border: 1px solid var(--color-border); padding: 0 4.5rem 0 1.5rem; border-radius: 0.5rem; } @media only screen and (min-width: 768px) { .contact__form--input__field { height: 5.5rem; } } .contact__form--input__field:focus { border-color: var(--color-hover); } .contact__form--input__icon { position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); color: var(--color-hover); } .contact__form--textarea__field { width: 100%; height: 15rem; background: var(--color-background); border: 1px solid var(--color-border); padding: 2rem 4.5rem 1.5rem 1.5rem; border-radius: 0.5rem; resize: none; } @media only screen and (min-width: 768px) { .contact__form--textarea__field { height: 20rem; } } .contact__form--textarea__field:focus { border-color: var(--color-hover); } .contact__form--textarea__icon { position: absolute; top: 2rem; right: 1.5rem; color: var(--color-hover); } .contact__form--btn { margin-top: 2.5rem; } .contact__form--title { font-size: 2.5rem; line-height: 2.8rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 768px) { .contact__form--title { font-size: 3rem; line-height: 3.2rem; margin-bottom: 2rem; } } .contact__form--desc { color: var(--color-foreground-sub); } .contact__form--select { width: 100%; height: 5rem; background: var(--color-background); border: 1px solid var(--color-border); padding: 0 4.5rem 0 1.5rem; border-radius: 0.5rem; color: var(--color-foreground-sub); -webkit-appearance: none; } @media only screen and (min-width: 768px) { .contact__form--select { height: 5.5rem; } } .contact__form--select:focus { border-color: var(--color-hover); } .contact__form--input.select::before { border-bottom: 3px solid var(--color-hover); border-right: 3px solid var(--color-hover); height: 10px; margin-top: -6px; right: 20px; width: 10px; } /* 20. Project css */ .project__items:hover .project__thumbnail--media { transform: scale(1.07); -webkit-transform: scale(1.07); -moz-transform: scale(1.07); -ms-transform: scale(1.07); -o-transform: scale(1.07); } .project__thumbnail { line-height: 1; } .project__thumbnail--link { overflow: hidden; } .project__content { margin: 0 1.5rem; padding: 2rem 1.5rem; background: var(--color-background); box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.08); border-radius: 1rem; margin-top: -4rem; position: relative; z-index: 9; } @media only screen and (min-width: 576px) { .project__content { margin: 0 2rem; padding: 2rem; margin-top: -7rem; } } @media only screen and (min-width: 992px) { .project__content { margin: 0 2.5rem; padding: 3rem; } } .project__content--meta__tag { font-size: 1.4rem; text-transform: uppercase; font-weight: 500; color: var(--color-foreground-sub); line-height: 1.8rem; margin-bottom: 1rem; } .project__content--title { font-size: 1.8rem; margin-bottom: 1rem; } @media only screen and (min-width: 576px) { .project__content--title { font-size: 2rem; margin-bottom: 1.2rem; } } @media only screen and (min-width: 992px) { .project__content--title { font-size: 2.2rem; margin-bottom: 1.5rem; } } .project__content--link { font-size: 1.5rem; font-weight: 600; color: var(--color-hover); } .project__content--link:hover { color: var(--color-foreground); } .project__content--link svg { margin-left: 1rem; } /* Project details css */ .project__details--content__top { gap: 2rem; flex-wrap: wrap; } @media only screen and (max-width: 991px) { .project__details--content__top.mb-50 { margin-bottom: 3rem; } } .project__details--info { padding: 3rem 2rem; background: var(--color-background); box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08); border-radius: 1rem; } @media only screen and (min-width: 1200px) { .project__details--info { padding: 4rem 3rem; } } .project__details--meta__list { gap: 1.5rem; } .project__details--meta { gap: 2.5rem; } @media only screen and (min-width: 768px) { .project__details--meta { gap: 3rem; } } @media only screen and (min-width: 992px) { .project__details--meta { gap: 5rem; } } @media only screen and (max-width: 767px) { .project__details--meta { flex-wrap: wrap; } } .project__details--meta__icon { color: var(--color-hover); } .project__details--info__title { font-size: 1.7rem; line-height: 2.2rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 576px) { .project__details--info__title { font-size: 1.8rem; } } .project__details--info__title span { color: var(--color-hover); margin-right: 1rem; } .project__details--info__desc { color: var(--color-foreground-sub); line-height: 3rem; } .project__details--info__desc a { color: var(--color-foreground-sub); } .project__details--info__desc a:hover { color: var(--color-hover); } .project__details--info__list { padding: 0 1.5rem; margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--color-border); } .project__details--info__contacting span { color: var(--color-hover); margin-right: 1.5rem; } .project__details--info__timing { gap: 1.5rem; } .project__details--info__timing--icon { width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; background: var(--color-hover); color: var(--color-white); border-radius: 0.5rem; } @media only screen and (min-width: 480px) { .project__details--info__timing--icon { width: 6rem; height: 6rem; } } @media only screen and (min-width: 1200px) { .project__details--info__timing--icon { width: 7rem; height: 7rem; } } .project__details--info__timing--title { font-size: 1.8rem; line-height: 2rem; text-transform: uppercase; margin-bottom: 1rem; } .project__details--info__timing--desc { font-size: 1.4rem; color: var(--color-foreground-sub); line-height: 2rem; } .project__info--social { gap: 1.5rem; margin-top: 3rem; } .project__info--social__icon { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: var(--color-background-3); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } @media only screen and (min-width: 480px) { .project__info--social__icon { width: 4.5rem; height: 4.5rem; } } .project__info--social__icon:hover { background: var(--color-hover); color: var(--color-white); } @media only screen and (min-width: 1200px) { .project__details--content__left { padding-right: 2rem; } } .project__details--meta__title { font-size: 1.6rem; line-height: 1.8rem; margin-bottom: 0.7rem; } .project__details--meta__subtitle { font-size: 1.4rem; color: var(--color-foreground-sub); line-height: 1.8rem; } .project__details--title { font-size: 2rem; line-height: 2.2rem; margin-bottom: 1.5rem; } @media only screen and (min-width: 480px) { .project__details--title { font-size: 2.2rem; line-height: 2.5rem; margin-bottom: 1.5rem; } } @media only screen and (min-width: 768px) { .project__details--title { font-size: 2.5rem; line-height: 2.8rem; margin-bottom: 2rem; } } @media only screen and (min-width: 992px) { .project__details--title { font-size: 3rem; line-height: 3.2rem; margin-bottom: 2rem; } } .project__details--desc { font-size: 1.6rem; line-height: 2.8rem; color: var(--color-foreground-sub); } @media only screen and (min-width: 992px) { .project__details--desc { line-height: 3rem; } } .project__details--ui__content { margin-top: 3rem; } @media only screen and (min-width: 992px) { .project__details--ui__content { margin-top: 4rem; } } .project__details--ui__content--title { font-size: 2rem; line-height: 2.5rem; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .project__details--ui__content--title { font-size: 2.2rem; line-height: 2.6rem; margin-bottom: 2.5rem; } } .project__details--ui__desc { font-size: 1.6rem; color: var(--color-foreground-sub); margin-bottom: 1.5rem; line-height: 2.2rem; } @media only screen and (min-width: 576px) { .project__details--ui__desc { margin-bottom: 2rem; } } .project__details--ui__desc:last-child { margin-bottom: 0; } .project__details--ui__desc svg { margin-right: 1rem; color: var(--color-hover); } @media only screen and (max-width: 991px) { .project__details--info { margin-top: 7rem; } } @media only screen and (max-width: 767px) { .project__details--info { margin-top: 6rem; } } /* 7. Account css */ .account__section--inner { max-width: 100%; margin: 0 auto; } @media only screen and (min-width: 576px) { .account__section--inner { max-width: 52rem; } } .account__form--wrapper { border: 1px solid var(--color-border); padding: 4rem 2rem 3rem; border-radius: 0.5rem; } @media only screen and (min-width: 576px) { .account__form--wrapper { padding: 6rem 4rem 5rem; } } .account__tab--btn { margin-bottom: -1rem; } .account__tab--btn__field { width: 12rem; height: 5rem; text-align: center; line-height: 4.8rem; border: 1px solid var(--color-border); background: var(--color-background); font-size: 1.6rem; font-weight: 600; } @media only screen and (min-width: 576px) { .account__tab--btn__field { width: 17rem; height: 5.5rem; line-height: 5.3rem; font-size: 1.8rem; } } .account__tab--btn__field:hover { background: var(--color-hover); color: var(--color-white); border-color: var(--color-hover); } .account__tab--btn__field.active { background: var(--color-hover); color: var(--color-white); border-color: var(--color-hover); } .account__title { font-size: 2rem; line-height: 2.2rem; margin-bottom: 2rem; } @media only screen and (min-width: 576px) { .account__title { font-size: 2.2rem; line-height: 2.5rem; } } .account__desc { font-size: 1.6rem; color: var(--color-foreground-sub); } .account__form--input__field { width: 100%; height: 5rem; border: 1px solid var(--color-border); padding: 0 1.5rem; font-size: 1.4rem; border-radius: 0.5rem; } @media only screen and (min-width: 576px) { .account__form--input__field { height: 5.5rem; } } .account__form--input__field:focus { border-color: var(--color-hover); } .account__form--input__label { line-height: 2rem; font-weight: 600; } .account__form--forgot__password { line-height: 2rem; font-weight: 600; color: var(--color-hover); } .account__form--forgot__password:hover { color: var(--color-foreground); } .account__sing-in__google { gap: 1.5rem; } @media only screen and (max-width: 575px) { .account__sing-in__google.mb-50 { margin-bottom: 3rem; } } @media only screen and (max-width: 399px) { .account__sing-in__google { flex-wrap: wrap; } } .account__sing-in__google--link { width: 100%; background: #1A73E8; padding: 0.7rem; border-radius: 0.5rem; color: var(--color-white); font-weight: 600; } .account__sing-in__google--link:hover { background: var(--color-hover); color: var(--color-white); } .account__sing-in__google--icon { width: 4.5rem; height: 4rem; background: var(--color-background); display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .account__sing-in__google--text { transition: inherit; transition: inherit; margin-left: 2rem; } .account__form--twitter__btn { width: 5.4rem; min-width: 5.4rem; height: 5.4rem; display: flex; align-items: center; justify-content: center; background: #F3F4F6; color: #1DA1F2; border-radius: 0.5rem; } .account__form--twitter__btn:hover { background: var(--color-hover); color: var(--color-white); } .account__form--condition__label { cursor: pointer; display: block; color: var(--color-foreground-sub); padding-left: 3rem; font-weight: 500; line-height: 2.4rem; text-transform: capitalize; } .account__form--condition__label span { color: var(--color-hover); } .account__form--condition__input { position: absolute; left: 0; top: 50%; transform: translatey(-50%); opacity: 0; cursor: pointer; z-index: 999; width: 1.9rem; height: 1.9rem; } .account__form--condition__input:checked ~ .account__form--condition__checkmark { background-color: var(--color-hover); border: 1px solid var(--color-hover); } .account__form--condition__input:checked ~ .account__form--condition__checkmark::before { display: block; } .account__form--condition__checkmark { height: 1.9rem; width: 1.9rem; border: 1.5px solid var(--color-border); background: var(--color-background); display: block; position: absolute; top: 50%; left: 0; transform: translatey(-50%); transition: var(--transition); border-radius: 0.5rem; } .account__form--condition__checkmark::before { right: 0.5rem; top: 0.2rem; width: 0.6rem; height: 1rem; border: solid white; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-width: 0 2px 2px 0; transform: rotate(45deg); content: ""; position: absolute; display: none; } .account__form--btn { width: 100%; margin-top: 3rem; } @media only screen and (min-width: 576px) { .account__form--btn { margin-top: 5rem; } } .account__form--password__show--icon { position: absolute; padding: 0; border: 0; background: inherit; right: 2rem; top: 50%; transform: translateY(-50%); } .account__form--create__password .account__form--input__field { padding-right: 5rem; } /* 6. Banner css */ .banner__content { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); z-index: 9; text-align: center; } @media only screen and (min-width: 768px) { .banner__content { bottom: 4rem; } } .banner__thumbnail { line-height: 1; } .banner__thumbnail--link { overflow: hidden; position: relative; } .banner__thumbnail--link::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.99)); transition: 0.3s; z-index: 9; } .banner__step { gap: 2.8rem; } @media only screen and (max-width: 575px) { .banner__step { flex-direction: column; gap: 0; } } .banner__items:hover .banner__thumbnail--media { transform: scale(1.03); } .banner__content--title { font-size: 2rem; line-height: 2.5rem; color: var(--color-white); margin-bottom: 1rem; } @media only screen and (min-width: 768px) { .banner__content--title { font-size: 2.5rem; line-height: 3rem; margin-bottom: 1.8rem; } } @media only screen and (min-width: 1200px) { .banner__content--title { font-size: 3rem; line-height: 3.5rem; } } .banner__content--subtitle { font-size: 1.6rem; line-height: 2.2rem; color: var(--color-white); opacity: 0.6; } @media only screen and (min-width: 768px) { .banner__content--subtitle { font-size: 1.8rem; } } @media only screen and (min-width: 1200px) { .banner__content--subtitle { font-size: 2rem; } } /* 14. Gallery css */ @media only screen and (min-width: 1200px) { .internal__gallery--inner { padding: 0 12rem; } } @media only screen and (min-width: 1366px) { .internal__gallery--inner { padding: 0 17rem; } } @media only screen and (min-width: 1600px) { .internal__gallery--inner { padding: 0 27rem; } } @media only screen and (min-width: 1800px) { .internal__gallery--inner { padding: 0 31rem; } } .internal__gallery--wrapper { align-items: center; } .internal__gallery--thumbnail { position: relative; border-radius: 0.5rem; overflow: hidden; } .internal__gallery--items:hover .internal__gallery--media { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); } .internal__gallery--items:hover .internal__gallery--content { bottom: 2rem; opacity: 1; visibility: visible; } @media only screen and (min-width: 992px) { .internal__gallery--items:hover .internal__gallery--content { bottom: 3rem; } } .internal__gallery--items:hover .internal__gallery--badge { opacity: 1; visibility: visible; } .internal__gallery--media { border-radius: 0.5rem; } .internal__gallery--content { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; background: var(--color-background); padding: 1.5rem; border-radius: 0.5rem; opacity: 0; visibility: hidden; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } @media only screen and (min-width: 992px) { .internal__gallery--content { bottom: 2rem; left: 3rem; right: 3rem; padding: 2rem 2.5rem; } } .internal__gallery--title { font-weight: 700; margin-bottom: 0.8rem; } .internal__gallery--title span { color: var(--color-hover); } @media only screen and (min-width: 992px) { .internal__gallery--title { margin-bottom: 1.2rem; } } .internal__gallery--link { text-transform: uppercase; font-weight: 700; font-size: 1.3rem; line-height: 2.2rem; } @media only screen and (min-width: 992px) { .internal__gallery--link { font-size: 1.4rem; line-height: 2.4rem; } } .internal__gallery--link svg { margin-left: 1rem; } .internal__gallery--badge { width: 4rem; height: 4rem; background: var(--color-background); color: var(--color-hover); position: absolute; top: 1rem; right: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) { .internal__gallery--badge { width: 4.8rem; height: 4.8rem; top: 1.5rem; right: 1.5rem; } }/*# sourceMappingURL=style.css.map */ .footer__logo img{ border-radius: 17px; } .testimonial__author--content li { display: inline-block; } .marque{ background: #343f52; } .marque p{ padding: 8px 7px 0px 10px; color:white; } .property__type--section .section__heading{ text-align: center; } .property__type--icon i{ font-size: 30pt; } .section--padding2 { padding-top: 10rem; padding-bottom: 10rem; } .center-image { display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; } .listing__hero--slider__items { display: flex; justify-content: center; align-items: center; } .listing__hero--slider__media { max-width: 100%; height: auto; display: block; } .listing__hero--slider__content { display: flex; flex-direction: column; align-items: center; /* Horizontal center */ justify-content: center; /* Vertical center */ text-align: center; /* Center text if needed */ height: 100%; /* Ensure full height for vertical centering */ } .listing__hero--slider__content { margin-left: auto; margin-right: auto; text-align: center; } .social__media--list span{ text-transform: capitalize; } .pipe{ color: white; } .footer__widget--info_list i{ color:white; } .agents__consult--inner { background: #0D2552; } .section--padding{ padding-top: 10rem; } .social__media--wrapper{ border-bottom: 1px solid #cacaca; } .section--padding3{ padding-top: 7rem; padding-bottom: 1rem; } .material-symbols-outlined { font-size: 34px; } #player .ytp-impression-link { display: none !important; } .brand__logo--items img{ border: 1px solid #c9c9c9; padding: 5px; } .img-rounded{ border-radius: 50%; } .more_about{ margin-top:5% } .more_about p{ color:white; font-size:11pt } .shadow{ box-shadow: 0 0 10px 0 rgba(0,0,0,.1); padding: 29px; background: #f7f7f7; } .footer__bottom--menu a{ color:#1c08a4 !important; } .float2 { position: fixed; width: 40px; height: 40px; bottom: 92px; left: 9px; background-color: #0D2552; color: #FFF; border-radius: 50px; text-align: center; font-size: 20px!important; box-shadow: 2px 2px 3px #999; z-index: 100; } .float { position: fixed; width: 40px; height: 40px; bottom: 44px; left: 9px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 20px!important; box-shadow: 2px 2px 3px #999; z-index: 100; } .my-float2 { margin-top: 10px; } .my-float { margin-top: 10px; }