/*! * Theme Variables * ----------------------------------------------- */ :root { --primary: #a71b28; --primary-rgb: 167, 27, 40; --light: #dfdfdf; --light-rgb: 223, 223, 223; --dark: #2b2b2b; --dark-rgb: 43, 43, 43; --body-font-family: 'Inter', sans-serif; --body-font-size: 14px; --body-font-weight: 400; --body-bg: #ffffff; --body-color: #5a5a5a; --body-line-height: 1.45; --heading-font-size-base: 1rem; --heading-font-family: 'Cormorant Garamond', serif; --heading-font-weight: 600; --heading-color: var(--dark); --heading-margin-bottom: 16px; --heading-line-height: 1.25; --link-color: #5a5a5a; --link-hover-color: var(--primary); --btn-font-family: var(--body-font-family); --btn-font-size: var(--body-font-size); --btn-font-weight: var(--body-font-weight); --btn-line-height: 40px; --btn-padding: 0 16px; --btn-bg: transparent; --btn-border-width: 1px; --btn-color: var(--body-color); --btn-border-color: transparent; --btn-hover-bg: transparent; --btn-hover-color: var(--body-color); --btn-hover-border-color: transparent; --btn-border-radius: 4px; --form-control-font-family: var(--body-font-family); --form-control-font-size: var(--body-font-size); --form-control-font-weight: 300; --form-control-line-height: 1.15; --form-control-padding: 8px 0; --form-control-min-height: 40px; --form-control-bg: transparent; --form-control-border-color: #d9d9d9; --form-control-border-radius: 0; --form-control-placeholder-color: #5a5a5a; --form-control-arrow: url('data:image/svg+xml,'); --hamburger-line-bg: var(--dark); --header-height: 80px; --paragraph-margin-bottom: 24px; --section-padding-y: 64px; --container-width: ; --gutter-y: ; --gutter-x: 32px; --animation-timing-function: ease; --animation-duration: 1s; --animation-delay: ; --animation-name: ; } /*! * Reset Styles * ----------------------------------------------- */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } [tabindex='-1']:focus:not(:focus-visible) { outline: 0 !important; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } body { margin: 0; padding: 0; font-family: var(--body-font-family); font-size: var(--body-font-size); color: var(--body-color); line-height: var(--body-line-height); font-weight: var(--body-font-weight); background-color: var(--body-bg); text-align: left; } img { max-width: 100%; height: initial; } a { color: var(--link-color); text-decoration: none; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } a:hover { color: var(--link-hover-color); } p { margin-top: 0; margin-bottom: var(--paragraph-margin-bottom); } p:last-child { margin-bottom: 0; } abbr[title], abbr[data-original-title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; } address { margin-bottom: 16px; font-style: normal; line-height: inherit; } ol, ul, dl { margin-top: 0; margin-bottom: 1rem; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } dt { font-weight: 700; } dd { margin-bottom: 0.5rem; margin-left: 0; } blockquote { margin: 0 0 1rem; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } pre, code, kbd, samp { font-size: 1em; } pre { margin-top: 0; margin-bottom: 16px; overflow: auto; -ms-overflow-style: scrollbar; } figure { margin: 0 0 16px; } img { vertical-align: middle; border-style: none; } svg { overflow: hidden; vertical-align: middle; } table { border-collapse: collapse; } caption { padding-top: 12px; padding-bottom: 12px; text-align: left; caption-side: bottom; } th { text-align: inherit; text-align: -webkit-match-parent; } label { display: inline-block; margin-bottom: 0.5rem; } button { border-radius: 0; } button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } input, button, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; outline: none !important; } button, input { overflow: visible; } button, select { text-transform: none; } [role='button'] { cursor: pointer; } select { word-wrap: normal; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } button:not(:disabled), [type='button']:not(:disabled), [type='reset']:not(:disabled), [type='submit']:not(:disabled) { cursor: pointer; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { padding: 0; border-style: none; } input[type='radio'], input[type='checkbox'] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } textarea { overflow: auto; resize: vertical; } fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: 8px; font-size: 24px; line-height: inherit; color: inherit; white-space: normal; } progress { vertical-align: baseline; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { outline-offset: -2px; -webkit-appearance: none; } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } output { display: inline-block; } summary { display: list-item; cursor: pointer; } template { display: none; } [hidden] { display: none !important; } code { font-size: 87.5%; color: #e83e8c; word-wrap: break-word; } a > code { color: inherit; } kbd { padding: 4px 8px; font-size: 87.5%; color: #fff; background-color: #212529; border-radius: 2px; } kbd kbd { padding: 0; font-size: 100%; font-weight: 700; } pre { display: block; font-size: 87.5%; color: #212529; } pre code { font-size: inherit; color: inherit; word-break: normal; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--heading-font-family); color: var(--heading-color); font-weight: var(--heading-font-weight); margin-top: 0; margin-bottom: var(--heading-margin-bottom); line-height: var(--heading-line-height); text-transform: uppercase; } h1, .h1 { font-size: calc(1.425rem + 2.1vw); } h2, .h2 { font-size: calc(1.4rem + 1.5vw); } h3, .h3 { font-size: calc(1.325rem + 0.9vw); } h4, .h4 { font-size: calc(1.275rem + 0.3vw); } h5, .h5 { font-size: calc(1rem + 0.25vw); } h6, .h6 { font-size: calc(var(--heading-font-size-base) * 1.125); } /*! * Common * ----------------------------------------------- */ #wrapper { position: relative; min-height: 100vh; } .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } .section.section--core-value { background: rgba(223, 223, 223, 0.27); } .overflow-hidden { overflow: hidden !important; } .fs-16 { font-size: 16px !important; } .fs-18 { font-size: 18px !important; } .fw-light { font-weight: 300 !important; } .fw-medium { font-weight: 500 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } .fw-bolder { font-weight: 800 !important; } .text-uppercase { text-transform: uppercase; } .text-center { text-align: center !important; } .text-primary { color: var(--primary) !important; } .bg-white { background-color: #fff; } .bg-light { background-color: var(--light); } .bg-light-2 { background-color: rgba(var(--light-rgb), 0.25); } .bg-primary { --heading-color: #fff; background-color: var(--primary); color: #fff; } .bg-gradient { background: -o-linear-gradient(top, #ffffff 0%, var(--light) 100%); background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(var(--light))); background: linear-gradient(180deg, #ffffff 0%, var(--light) 100%); } .object-fit { overflow: hidden; position: relative; display: block; z-index: 2; } .object-fit > * { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .ratio, .title-line { position: relative; } .ratio > * { position: absolute; top: 0; left: 0; } .ratio:before { content: ''; display: block; padding-bottom: var(--ratio); } .ratio.ratio--40 { --ratio: 40%; } .ratio.ratio--50 { --ratio: 50%; } .ratio.ratio--95 { --ratio: 95%; } .ratio.ratio--140 { --ratio: 140%; } .ratio.ratio--4x3 { --ratio: calc(3 / 4 * 100%); } .title-line { display: inline-block; } .title-line:after { content: ''; position: absolute; left: 100%; bottom: 5px; width: 100px; height: 1px; background-color: var(--primary); } .pattern { position: absolute; z-index: 1; } .btn-link { --link-color: #000000; position: relative; display: inline-block; padding-bottom: 2px; text-transform: uppercase; } .btn-link:after, .btn-link:before { content: ''; position: absolute; bottom: 0; height: 1px; width: 50%; background-color: var(--primary); -webkit-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; } .btn-link:after { left: 50%; } .btn-link:before { right: 50%; } .btn-link:hover:after, .btn-link:hover:before { width: 0; } /*! * Spacing * ----------------------------------------------- */ .ml-auto, .mx-auto { margin-left: auto !important; } .mr-auto, .mx-auto { margin-right: auto !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mb-8 { margin-bottom: 8px !important; } .mb-16 { margin-bottom: 16px !important; } .mb-24 { margin-bottom: 24px !important; } .mb-32 { margin-bottom: 32px !important; } .pb-32 { padding-bottom: 32px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-48 { margin-bottom: 48px !important; } .mb-64 { margin-bottom: 64px !important; } .mb-80 { margin-bottom: 64px !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .pt-0, .py-0 { padding-top: 0 !important; } .pb-0, .py-0 { padding-bottom: 0 !important; } /*! * Grid System * ----------------------------------------------- */ .container, .container-fluid { width: 100%; padding-left: 24px; padding-right: 24px; } .container *, .container-fluid * { -webkit-box-sizing: border-box; box-sizing: border-box; } .container { max-width: var(--container-width); margin-left: auto; margin-right: auto; } .row { margin-top: calc(-1 * var(--gutter-y)); margin-left: calc(-0.5 * var(--gutter-x)); margin-right: calc(-0.5 * var(--gutter-x)); display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; min-height: 1px; margin-top: var(--gutter-y); padding-left: calc(var(--gutter-x) * 0.5); padding-right: calc(var(--gutter-x) * 0.5); } .row.row--xl { --gutter-x: 64px; } .row.row--lg { --gutter-x: 48px; } .row.row--sm { --gutter-x: 24px; } .gap { --gutter-y: var(--gutter-x); } .col-1 { width: 8.33333333%; } .col-2 { width: 16.66666667%; } .col-3 { width: 25%; } .col-4 { width: 33.33333333%; } .col-5 { width: 41.66666667%; } .col-6 { width: 50%; } .col-7 { width: 58.33333333%; } .col-8 { width: 66.66666667%; } .col-9 { width: 75%; } .col-10 { width: 83.33333333%; } .col-11 { width: 91.66666667%; } .col-12 { width: 100%; } .no-gutter { --gutter-x: 0; } .d-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .align-items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .align-items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .align-self-end { -ms-flex-item-align: end; align-self: flex-end; } .justify-content-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /*! * Form Styling * ----------------------------------------------- */ .btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--btn-padding); color: var(--btn-color); background-color: var(--btn-bg); font-family: var(--btn-font-family); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); border: var(--btn-border-width) solid var(--btn-border-color); border-radius: var(--btn-border-radius); cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; line-height: calc(var(--btn-line-height) - (var(--btn-border-width) * 2)); text-align: center; } .btn:hover { background-color: var(--btn-hover-bg); color: var(--btn-hover-color); border-color: var(--btn-hover-border-color); } .btn > *:not(:first-child) { margin-left: 4px; } .btn.btn--lg { --btn-font-size: 16px; --btn-padding: 0 24px; --btn-line-height: 48px; } .btn.btn--icon { padding: 0; width: var(--btn-line-height); height: var(--btn-line-height); } .btn.btn--primary { --btn-bg: var(--primary); --btn-color: #ffffff; --btn-hover-bg: var(--primary); --btn-hover-color: #ffffff; } .btn.btn--dark { --btn-bg: var(--dark); --btn-color: #ffffff; --btn-hover-bg: #000000; --btn-hover-color: #ffffff; } .btn.btn--dark-outline { --btn-color: var(--dark); --btn-border-color: var(--dark); --btn-hover-bg: var(--dark); --btn-hover-border-color: var(--dark); --btn-hover-color: #ffffff; } .btn.btn--link { --btn-border-radius: 0; --btn-padding: 2px 0; --btn-color: #000000; --btn-hover-color: var(--primary); --btn-line-height: 16px; --btn-font-weight: 300; border-bottom: 1px solid var(--primary); text-transform: uppercase; } .form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; border: none; border-bottom: 1px solid var(--form-control-border-color); min-height: var(--form-control-min-height); padding: var(--form-control-padding); background-color: var(--form-control-bg); font-family: var(--form-control-font-family); font-size: var(--form-control-font-size); color: var(--body-color); border-radius: var(--form-control-border-radius); } .form-control:focus { --form-control-border-color: var(--primary); } .form-control::-webkit-input-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::-moz-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control:-ms-input-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::-ms-input-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::placeholder { color: var(--form-control-placeholder-color); opacity: 1; } .form-control::-ms-placeholder { color: var(--form-control-placeholder-color); opacity: 1; } select.form-control { background-image: var(--form-control-arrow); background-position: center right 16px; background-repeat: no-repeat; padding-right: 42px; } .form-group:not(:last-child) { margin-bottom: 32px; } .form-label { font-size: 16px; color: var(--dark); } .select-control { display: none; } .select-box { position: relative; } .select-box .select-box__control { cursor: pointer; position: relative; padding-right: 32px; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; min-width: 0; line-height: 22px; } .select-box .select-box__control:after { content: ''; display: block; position: absolute; right: 0; top: 50%; margin-top: -10px; width: 24px; height: 24px; background: var(--form-control-arrow) center no-repeat; } .select-box .select-box__options { position: absolute; display: none; left: 0; top: 100%; width: 100%; margin: 0; padding: 12px 0; list-style: none; z-index: 999; background-color: #fff; font-size: 14px; -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1); max-height: 280px; overflow: auto; text-align: left; } .select-box .select-box__options.show { display: block; } .select-box .select-box__options li { padding: 8px 16px; cursor: pointer; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; color: var(--dark); } .select-box .select-box__options li:hover { background-color: rgba(var(--light-rgb), 0.25); } .file-upload { display: -webkit-box; display: -ms-flexbox; display: flex; } .file-upload input[type='file'] { border: 0; clip: rect(0, 0, 0, 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; } .file-upload label { margin-bottom: 0; cursor: pointer; } .file-upload .file-upload__name { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; min-width: 0; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-transform: uppercase; padding-bottom: 4px; padding-right: 8px; border-bottom: 1px solid var(--form-control-border-color); } .file-upload .file-upload__name:empty:before { content: attr(data-text); } .file-upload .file-upload__upload { padding-bottom: 4px; border-bottom: 1px solid var(--primary); -ms-flex-negative: 0; flex-shrink: 0; } /*! * Component * ----------------------------------------------- */ /* Accordion */ .accordion .accordion__item:not(:last-child) { border-bottom: 1px solid rgba(106, 106, 106, 0.31); } .accordion .accordion__head { display: block; padding: 24px 0; text-transform: uppercase; font-weight: 500; } .accordion .accordion__body { margin-top: -8px; padding-bottom: 24px; display: none; } /* Modal */ .modal-open { overflow: hidden; /* padding-right: 17px; */ } .modal.show, .modal .modal__dialog.show { visibility: visible; opacity: 1; } .modal .modal__dialog.show { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; visibility: hidden; opacity: 0; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; padding: 0 16px; overflow: auto; } .modal .modal__container, .modal .modal__dialog .close { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modal .modal__container { margin: 40px 0; min-height: calc(100% - 80px); } .modal .modal__dialog { max-width: 520px; width: 100%; position: relative; visibility: hidden; opacity: 0; -webkit-transform: translateY(64px); -ms-transform: translateY(64px); transform: translateY(64px); -webkit-transition: all 0.25s ease-in-out 0.15s; -o-transition: all 0.25s ease-in-out 0.15s; transition: all 0.25s ease-in-out 0.15s; max-height: 100%; background-color: #fff; padding: 64px 16px; } .modal .modal__dialog .close { position: absolute; top: 24px; right: 16px; width: 32px; height: 32px; border-radius: 40px; text-align: center; font-size: 24px; line-height: 12px; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid currentColor; } .modal.modal--lg .modal__dialog { background-color: #f6f6f6; max-width: 1280px; } .modal.modal--lg .modal__dialog .close { top: 16px; right: 12px; border: none; } /* Swiper */ .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -8px; --swiper-navigation-color: var(--primary); } .swiper-button-next:after, .swiper-button-prev:after { display: none; } .swiper-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; margin-top: 32px; position: relative; } .swiper-button .swiper-button-next, .swiper-button .swiper-button-prev { position: relative; top: initial; left: initial; right: initial; margin-top: initial; height: initial; width: initial; } .swiper-slide.swiper-slide-hidden { opacity: 0 !important; } /* Tabs */ .tab { margin: -4px -12px 0; padding: 0; list-style: none; display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tab .tab__item { padding: 4px 12px; width: 50%; flex: 0 0 auto; } .tab .tab__link { display: block; font-size: 16px; font-family: var(--heading-font-family); font-weight: 600; text-align: center; padding-bottom: 2px; border-bottom: 1px solid transparent; } .tab .tab__link.active { border-color: var(--link-hover-color); } .tab-pane { display: none; -webkit-transition: opacity 0.25s linear; -o-transition: opacity 0.25s linear; transition: opacity 0.25s linear; } .tab-pane.active { display: block; } .tab-pane:not(.show) { opacity: 0; } /*! * Header * ----------------------------------------------- */ #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 16px; -webkit-transition: background-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-backdrop-filter 0.35s ease; transition: background-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-backdrop-filter 0.35s ease; -o-transition: transform 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease; transition: transform 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease; transition: transform 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease, -webkit-transform 0.35s ease, -webkit-backdrop-filter 0.35s ease; background-color: #fff; border-bottom: 1px solid var(--light); will-change: transform, opacity; } #header.hide { -webkit-transform: translateY(-105%); -ms-transform: translateY(-105%); transform: translateY(-105%); } #header.fixed-header { background-color: rgba(255, 255, 255, 0.15); border-bottom-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .header-container { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .navbar { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #ffffff; padding-top: 32px; padding-bottom: 32px; z-index: 100; border-top: 1px solid #dedede; max-height: calc(100vh - var(--header-height)); overflow: auto; } .navbar > ul { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: var(--container-width); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; padding: 0 calc(0.5 * var(--gutter-x)); list-style: none; } .navbar > ul > li:not(:first-child) { margin-top: 24px; } .navbar > ul > li > a { font-family: var(--heading-font-family); font-weight: 700; display: inline-block; position: relative; padding-bottom: 2px; font-size: 16px; } .navbar > ul > li > a:after, .navbar > ul > li > a:before { content: ''; position: absolute; bottom: 0; height: 1px; width: 50%; background-color: var(--primary); -webkit-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; display: none; } .navbar > ul > li > a:after { left: 50%; } .navbar > ul > li > a:before { right: 50%; } .navbar > ul > .current-menu-item > a:after, .navbar > ul > .current-menu-item > a:before { display: block; } .navbar > ul > li > a:hover:after, .navbar > ul > li > a:hover:before { /*width: 10%;*/ width: 0; display: block; } .menu-item-has-children, .menu-item-has-children > a { position: relative; } .menu-item-has-children { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; cursor: pointer; } .menu-item-has-children:hover > a { color: var(--primary); } .sub-menu-handler { margin-left: auto; display: block; width: 20px; height: 20px; background-image: url('data:image/svg+xml,'); } .menu-item-has-children > .sub-menu-handler.active { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sub-menu { display: none; padding-top: 16px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; padding: 16px 0 0; margin: 0; list-style: none; } .sub-menu li a { display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px 16px; border-radius: 8px; font-size: 14px; color: rgba(0, 0, 0, 0.7); white-space: nowrap; } .sub-menu li a:hover { background-color: rgba(var(--primary-rgb), 0.03); } .header-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; gap: 16px; } #hamburger { background-color: transparent; border: none; position: relative; margin-left: auto; width: 20px; height: 18px; cursor: pointer; padding: 0; } #hamburger span:before, #hamburger span:after { content: ''; } #hamburger span, #hamburger span:before, #hamburger span:after { position: absolute; width: 20px; height: 2px; background-color: var(--hamburger-line-bg); display: block; } #hamburger span, #hamburger span:after { top: 8px; } #hamburger span:before { top: -8px; } #hamburger.active span { background-color: transparent; } #hamburger.active span:after, #hamburger.active span:before { top: 0; } #hamburger.active span:before { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #hamburger.active span:after { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .brand { display: inline-block; max-width: 84px; } #search { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; opacity: 0; visibility: hidden; } #search:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12.5px); -webkit-backdrop-filter: blur(12.5px); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 450ms; transition: -webkit-transform 450ms; -o-transition: transform 450ms; transition: transform 450ms; transition: transform 450ms, -webkit-transform 450ms; } #search.show, #search.active #search_close, #search.active .search-container { opacity: 1; visibility: visible; } #search.active:before, #search.active .search-container { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #search_close { position: absolute; top: 120px; right: 24px; z-index: 10; opacity: 0; visibility: hidden; -webkit-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; } .search-container { --heading-color: #ffffff; --link-color: #ffffff; max-width: 780px; margin-top: 200px; position: relative; z-index: 10; color: #ffffff; padding-left: 16px; padding-right: 16px; opacity: 0; visibility: hidden; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 350ms, -webkit-transform 350ms; transition: opacity 350ms, -webkit-transform 350ms; -o-transition: transform 350ms, opacity 350ms; transition: transform 350ms, opacity 350ms; transition: transform 350ms, opacity 350ms, -webkit-transform 350ms; } .search-form { position: relative; margin-bottom: 32px; } .search-form .form-control { --form-control-placeholder-color: #a9a2a2; color: #ffffff; padding-right: 48px; min-height: 48px; font-size: 20px; font-weight: 300; } #top_footer .form-control::-webkit-input-placeholder { text-transform: uppercase; } #top_footer .form-control::-moz-placeholder { text-transform: uppercase; } #top_footer .form-control:-ms-input-placeholder { text-transform: uppercase; } #top_footer .form-control::-ms-input-placeholder { text-transform: uppercase; } #top_footer .form-control::placeholder { text-transform: uppercase; } #top_footer .form-control::-ms-placeholder { text-transform: uppercase; } .search-form .btn { position: absolute; top: 0; right: 0; width: 48px; height: 48px; padding: 0; text-indent: -100000px; background: url('data:image/svg+xml,') center no-repeat; } .search-links { font-family: var(--heading-font-family); margin: -4px -16px; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .search-links li { padding: 4px 16px; } .enquiry-form { max-width: 400px; } #intro { position: -webkit-sticky; position: sticky; z-index: -1; top: 0; margin-top: 75px; } #intro .object-fit { height: 100%; } #intro .intro-text { position: absolute; top: 140px; left: 0; width: 100%; z-index: 2; } #intro .intro-text .h5 { color: #ffffff; text-transform: none; font-style: italic; } .text-left { position: relative; padding-left: calc(2.75rem + 1.4vw); margin: 0 auto 64px; max-width: 280px; } .text-left .text-left__title, .text-right .text-right__title { position: absolute; top: 50%; font-weight: 600; line-height: 1; white-space: nowrap; } .text-left .text-left__title { font-size: calc(2.75rem + 2.7vw); left: 0; -webkit-transform: rotate(-90deg) translateX(-50%); -ms-transform: rotate(-90deg) translateX(-50%); transform: rotate(-90deg) translateX(-50%); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; color: rgba(223, 223, 223, 0.4); } .vision { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .vision .vision__title { margin-bottom: 40px; } .vision .vision__hero { position: relative; } .vision .vision__hero .pattern { top: -24px; right: -24px; } .foot-content { margin-top: 40px; } .project { --project-max-width: 530px; color: inherit !important; display: block; } .project.project--sm { --project-max-width: 310px; } .project.project--lg { --project-max-width: 100%; } .project .ratio, .insight .ratio { --ratio: calc(3 / 4 * 100%); } .project .object-fit img, .insight .object-fit img { -webkit-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; } .project:hover .object-fit img, .insight:hover .object-fit img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .project .project__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-top: 12px; } .project .project__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .project .project__title { margin-bottom: 0; text-transform: none; } .text-right { position: relative; padding-right: 24px; } .text-right .text-right__title { /*font-size: calc(3.5rem + 2.6vw);*/ font-size: calc(2.25rem + 2.6vw); /*right: -30px;*/ right: -15px; -webkit-transform: rotate(90deg) translateX(50%); -ms-transform: rotate(90deg) translateX(50%); transform: rotate(90deg) translateX(50%); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; color: rgba(38, 38, 38, 0.07); } .commitment-row { --gutter-y: 64px; margin-bottom: 80px; } #commitment { display: none; } #commitment [data-image] { -webkit-transition: opacity 350ms; -o-transition: opacity 350ms; transition: opacity 350ms; } #commitment [data-image]:not(.show) { opacity: 0; } #commitment_accordion .pattern-hero { max-width: 280px; margin-left: auto; margin-right: auto; } .pattern-hero { max-width: 458px; position: relative; margin-left: auto; margin-right: auto; } .pattern-hero .pattern-hero__img { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; position: absolute; top: 24px; left: 0; width: 100%; z-index: 1; } .pattern-hero .pattern-hero__img img { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .pattern-hero .pattern-hero__img img:nth-child(odd) { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .pattern-hero .ratio { --ratio: 122%; border-top-left-radius: 250px; border-top-right-radius: 250px; position: relative; z-index: 2; } .insight-row { --gutter-y: 64px; } .insight { --insight-max-width: 356px; } a.insight { display: block; } .insight.insight--sm { --insight-max-width: 260px; } .insight.insight--lg { --insight-max-width: 440px; } .insight .insight__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; margin-top: 12px; margin-bottom: 16px; } .insight .insight__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .insight .insight__content .insight__content__text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 16px; } .insight .insight__content .btn-link { text-transform: none; font-size: 12px; color: inherit; } .insight .insight__content .h5 { text-transform: none; } /*! * Pages * ----------------------------------------------- */ .under-header { margin-top: 72px; } /* About */ .about-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about-right .h4 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .about-right .about-right__text { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-bottom: 32px; } .about-right .object-fit { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-bottom: 16px; } .core-value-title { margin-bottom: 32px; } .core-value { padding-left: 6px; position: relative; -webkit-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; } .core-value:before { content: ''; position: absolute; top: 0; left: -1px; height: 30px; width: 2px; background-color: var(--primary); } .core-value .core-value__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; font-weight: 500; color: var(--dark); margin-bottom: 16px; gap: 12px; } .core-value .core-value__head img { -ms-flex-negative: 0; flex-shrink: 0; max-width: 24px; } .core-value-hero { position: relative; } .core-value-hero .core-value-hero__pattern { position: absolute; left: -32px; bottom: -16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 50%; } .member { max-width: 270px; } .member .member__hero { display: inline-block; position: relative; } .member .member__hero:before { content: ''; position: absolute; left: 0; bottom: 0; height: 180px; width: 170px; border-top-left-radius: 100px; border-top-right-radius: 100px; background-color: var(--primary); z-index: 1; } .member .member__hero > * { position: relative; z-index: 2; } .about-footer-step .about-footer-step__btns { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; } .about-footer-step .about-footer-step__btns > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 148px; } /* Contact */ .contact-hero { position: relative; } .contact-hero .contact-hero__collage { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 24px -4px 0; } .contact-hero .contact-hero__collage .contact-hero__collage__item { --ratio: 100%; padding-left: 4px; padding-right: 4px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; } .contact-info { max-width: 1240px; padding: var(--section-padding-y) 0; background: rgba(223, 223, 223, 0.27) url('../images/svg/contact.svg') bottom right 24px no-repeat; } .contact-info .row .row { --gutter-y: 32px; } .contact-info .social { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-top: 0; } .contact-info .contact-info__call a, .contact-info .contact-info__email a { text-decoration: underline; } .enquire-title .title-line:nth-child(1):after { right: 100%; left: initial; width: 80px; } .enquire-title .title-line:nth-child(2):after { width: 80px; } .enquiry { background-color: #f6f6f6; padding: var(--section-padding-y) 24px; } .enquiry .enquiry__form { max-width: 400px; } .tab.tab--enquiry { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 48px; } .map { max-width: 1240px; } /* Listing */ .listing { background: -o-linear-gradient(268.56deg, rgba(255, 255, 255, 0.27) 56.7%, rgba(121, 121, 121, 0.27) 97.4%); background: linear-gradient(181.44deg, rgba(255, 255, 255, 0.27) 56.7%, rgba(121, 121, 121, 0.27) 97.4%); } .listing .listing__sidebar { position: -webkit-sticky; position: sticky; top: 90px; margin-bottom: 40px; } .listing .listing__sidebar .listing__sidebar__links { margin: 32px 0 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .listing .listing__sidebar .listing__sidebar__links li:not(:first-child) { margin-left: 24px; } .listing .listing__sidebar .listing__sidebar__links li a { --link-color: #000000; display: inline-block; border-bottom: 1px solid transparent; text-transform: uppercase; } .listing .listing__sidebar .listing__sidebar__links li a.active { border-bottom-color: var(--primary); } .listing .listing__row { --gutter-y: 64px; --gutter-x: 16px; } /* .listing .listing__card { max-width: 260px; } */ .listing a.listing__card { display: block; color: inherit; } .listing .listing__card .ratio { --ratio: 68%; } .listing .listing__card img { -webkit-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; } .listing .listing__card:hover img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .listing .listing__card .listing__card__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; margin-top: 12px; margin-bottom: 16px; } .listing .listing__card .listing__card__content { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; justify-content: flex-start; } .listing .listing__card .listing__card__content .h5 { text-transform: none; } .listing .listing__card .listing__card__content .ml-auto { margin-left: initial !important; text-align: right; } /* Details */ .details-head { position: relative; } .details-head .details-head__back { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } .details-head .details-head__title .title-line:before { content: ''; position: absolute; right: 100%; bottom: 5px; height: 1px; background-color: var(--primary); } .details-head .details-head__title .title-line:after, .details-head .details-head__title .title-line:before { width: 84px; } .details-head .row { --gutter-y: var(--gutter-x); } .details-info .details-info__list { margin: -8px -16px; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .details-info .details-info__list li { padding: 8px 16px; } .details-hero.ratio { --ratio: 65%; } /* Project details */ .project-title { text-transform: none; color: var(--primary); } .project-info .project-info__list { margin: 0; padding: 0; list-style: none; } .swiper-container { max-width: 1080px; width: 100%; padding-left: 16px; padding-right: 16px; } .project-swiper-title-1 { margin-bottom: 48px; width: 65%; } .project-swiper .ratio { --ratio: 120%; } .project-swiper .project-swiper__card { position: relative; padding-top: 16px; padding-left: 16px; } .project-swiper .project-swiper__card .gallery-image img { display: block; margin: 0 auto; max-height: 600px; } .project-swiper .project-swiper__card > img { -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); position: absolute; top: 0; left: 0; -webkit-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; } .amenity { -webkit-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; } .amenity .amenity__icon { height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 16px; color: #a6adb0; -webkit-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; } /* .amenity:hover { -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } */ /* .amenity:hover .amenity__icon { color: var(--primary); } */ .amenity:hover .amenity__icon svg path { stroke: var(--primary); } .project-plan { position: relative; padding: 48px 16px 0; } .project-plan .project-plan__title { position: absolute; top: 0; left: 50%; width: 100%; text-align: center; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: rgba(var(--dark-rgb), 0.05); font-weight: 600; font-size: calc(2.5rem + 3vw); } #specification_swiper .swiper-slide { height: initial; } .specification-card { padding: 20px 16px 32px; background-color: rgba(var(--light-rgb), 0.25); height: 100%; border-radius: 4px; } .specification-card .specification-card__body { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.09); text-align: center; } .specification-card .specification-card__icon { height: 40px; margin-bottom: 12px; color: #b0b6b9; -webkit-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; } .specification-card:hover .specification-card__icon { color: var(--primary); } .specification-card ul { margin: 0; padding: 0 0 0 20px; } .map-container { width: 100%; max-width: 1200px; padding-left: 16px; padding-right: 16px; } .map-container .ratio > iframe { border: none; } .address-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .address-info a { text-decoration: underline; } .project-swiper-title-2 { margin-bottom: 48px; width: 70%; } .rera { position: relative; } .rera .rera__hero { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rera .rera__content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 120px; padding-bottom: 120px; z-index: 10; text-align: center; background-color: rgba(var(--dark-rgb), 0.65); min-height: 500px; } .rera .rera__content h2 { font-family: var(--body-font-family); font-weight: 600; color: var(--light); text-transform: none; } .rera .rera__content .btn-link { --link-color: #ffffff; font-size: 16px; font-weight: 500; } .sticky-info { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; -webkit-box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.13); box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.13); background-color: rgba(255, 255, 255, 0.85); padding: 24px 16px; text-align: center; -webkit-transition: all 350ms; -o-transition: all 350ms; transition: all 350ms; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .sticky-info.show { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .sticky-info h4 { text-transform: none; } .sticky-info .sticky-info__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .sticky-info .sticky-info__left { display: none; } /* Insight details */ #blog_swiper { position: relative; padding-left: 24px; padding-right: 24px; } .content h2 { font-family: var(--body-font-family); font-weight: 400; font-size: calc(1rem + 0.25vw); text-transform: none; } .recent-blog .recent-blog__card { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .recent-blog .recent-blog__card .h4 { margin-bottom: 32px; } .recent-blog .insight { --insight-max-width: initial; } .recent-blog .insight .ratio { --ratio: 70%; } /* Careers */ .job-search-control { position: relative; } .job-search-control .btn { --btn-padding: 0; position: absolute; right: 0; top: 11px; line-height: 1; text-indent: -10000px; width: 18px; height: 18px; background-image: url('data:image/svg+xml,'); } .job-search-control .form-control { padding-right: 24px; } .career-card { padding: 24px 16px; } .career-card .career-card__item { padding: 16px; border-radius: 12px; border: 1px solid var(--light); } .career-card .career-card__item:not(:first-child) { margin-top: 16px; } .career-card .career-card__title { font-size: 16px; color: var(--dark); margin-bottom: 4px; } .career-card .career-card__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .career-card .career-card__content { margin-top: 12px; } .career-card .career-card__group:not(:first-child) { margin-top: 24px; } .career-card .career-card__group-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--dark); margin-bottom: 16px; } .career-card__group { border-bottom: 1px solid rgba(106, 106, 106, 0.31); padding-bottom: 32px; margin-bottom: 32px; } .career-card__group:last-child { border-bottom: none; padding-bottom: 0 !important; } .career-card__group--noborder { border-bottom: none; } .career-card__cat-title { text-transform: uppercase; font-weight: 500; font-family: var(--body-font-family); font-size: var(--body-font-size); color: var(--link-color); } .feature .feature__content { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .feature .feature__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 44px; height: 36px; padding-left: 8px; margin-right: 16px; border-left: 2px solid var(--primary); } .feature .feature__hero { position: relative; overflow: hidden; } .feature .feature__hero .feature__hero__content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 24px 12px; z-index: 2; background-color: rgba(255, 255, 255, 0.7); color: #000000; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 350ms; transition: -webkit-transform 350ms; -o-transition: transform 350ms; transition: transform 350ms; transition: transform 350ms, -webkit-transform 350ms; } .feature:hover .feature__hero .feature__hero__content { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .career-gallery-title { max-width: 200px; } .ratio.career-gallery-image { --ratio: 360px; } .job .job__title { text-transform: none; font-family: var(--body-font-family); font-weight: 400; } .job .job__form { padding: 16px; background-color: #fff; } .job .job__form .job__form__head { margin-bottom: 32px; } .job h6.job__title { font-size: 14px; } .job .job__content .job__content__item { --link-color: var(--primary); font-weight: 300; } .job .job__content .job__content__item:not(:last-child) { margin-bottom: 32px; } .job .job__content .job__content__item ul { margin: 0; padding: 0 0 0 20px; } .job .job__content ul, .job .job__content ol { margin-top: 0; margin-bottom: var(--paragraph-margin-bottom); } /*! * Footer * ----------------------------------------------- */ #footer { --footer-bg: rgba(223, 223, 223, 0.27); padding-top: var(--section-padding-y); } .top-footer { position: relative; pointer-events: none; } .top-footer:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: var(--footer-bg); } .top-footer .top-footer__title { --heading-font-family: 'Inter', sans-serif; color: rgba(38, 38, 38, 0.15); text-transform: none; font-size: calc(1rem + 2.4vw); text-align: center; pointer-events: all; margin-top: 24px; } .top-footer .top-footer__logo { text-align: center; padding-top: 48px; padding-bottom: 32px; pointer-events: all; } .top-footer .top-footer__logo .brand { max-width: 120px; } .middle-footer { background-color: var(--footer-bg); text-align: center; padding-bottom: 48px; } .newsletter { --form-control-bg: var(--dark); --form-control-padding: 8px 24px; --form-control-min-height: 48px; --form-control-border-radius: 6px; --form-control-placeholder-color: #ffffff; } .newsletter .form-control { color: #ffffff; font-size: 12px; border: none; } .newsletter .form-control:focus { --form-control-bg: #000000; } .footer-content { margin-top: 48px; } .footer-link { margin: 0 -12px; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; text-align: left; } .footer-link li { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 50%; padding: 12px; text-align: center; } .footer-link a { text-transform: uppercase; } .social { --link-color: var(--dark); margin: 24px 0 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .social li:not(:first-child) { margin-left: 16px; } .last-footer { background-color: var(--footer-bg); text-align: center; padding: 12px 0; border-top: 1px solid rgba(106, 106, 106, 0.45); } .last-footer .footer-left img { width: 16px; height: 16px; margin-left: 4px; } #sticky-quick-enquiry { position: fixed; bottom: 16px; right: 16px; z-index: 1000; } #sticky-quick-enquiry .btn { padding: 0; align-items: center; width: 40px; height: 40px; } #sticky-quick-enquiry .btn span { display: none; } /*! * Animation * ----------------------------------------------- */ [data-animate] { -webkit-animation-name: var(--animation-name); animation-name: var(--animation-name); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: var(--animation-duration); animation-duration: var(--animation-duration); -webkit-animation-timing-function: var(--animation-timing-function); animation-timing-function: var(--animation-timing-function); -webkit-animation-delay: var(--animation-delay); animation-delay: var(--animation-delay); opacity: 0; } [data-animate='image-reveal'] { opacity: 1; -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } .fade-up { --animation-name: fade-up; } @-webkit-keyframes fade-up { from { opacity: 0; -webkit-transform: translateY(80px); transform: translateY(80px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fade-up { from { opacity: 0; -webkit-transform: translateY(80px); transform: translateY(80px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } .fade-left { --animation-name: fade-left; } @-webkit-keyframes fade-left { from { opacity: 0; -webkit-transform: translateX(-200px); transform: translateX(-200px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fade-left { from { opacity: 0; -webkit-transform: translateX(-200px); transform: translateX(-200px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } .fade-right { --animation-name: fade-right; } @-webkit-keyframes fade-right { from { opacity: 0; -webkit-transform: translateX(200px); transform: translateX(200px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fade-right { from { opacity: 0; -webkit-transform: translateX(200px); transform: translateX(200px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } .image-reveal { --animation-name: reveal; } @-webkit-keyframes reveal { from { -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes reveal { from { -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } .brochure-rera-row { gap: 16px; } .rera-number { word-break: break-all; } /*! * Responsive * ----------------------------------------------- */ @media (min-width: 480px) { .col-xs-1 { width: 8.33333333%; } .col-xs-2 { width: 16.66666667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333333%; } .col-xs-5 { width: 41.66666667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333333%; } .col-xs-8 { width: 66.66666667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333333%; } .col-xs-11 { width: 91.66666667%; } .col-xs-12 { width: 100%; } .header-right { gap: 20px; } .text-left { padding-left: 80px; max-width: initial; } .text-left .text-left__title { font-size: 96px; } .text-right .text-right__title { font-size: 50px; /*font-size: 72px;*/ } .contact-hero .contact-hero__collage { margin-left: -8px; margin-right: -8px; } .contact-hero .contact-hero__collage .contact-hero__collage__item { padding-left: 8px; padding-right: 8px; } .details-info .details-info__list { margin: -16px -32px; } .details-info .details-info__list li { padding: 16px 32px; } .career-card { padding: 40px 32px; } .career-card .career-card__item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .career-card .career-card__content { margin-top: 0; padding-right: 16px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .listing .listing__card .listing__card__content { flex-direction: row; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .tab .tab__item { width: initial; } .tab .tab__item:not(:first-child) { border-left: 1px solid var(--primary); } } @media (min-width: 576px) { body { --container-width: 540px; } .container, .container-fluid { padding-left: calc(var(--gutter-x) * 0.5); padding-right: calc(var(--gutter-x) * 0.5); } .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333333%; } .col-sm-5 { width: 41.66666667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333333%; } .col-sm-8 { width: 66.66666667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333333%; } .col-sm-11 { width: 91.66666667%; } .col-sm-12 { width: 100%; } .mb-80 { margin-bottom: 80px !important; } .career-card .career-card__item { padding: 24px; } .career-card .career-card__item:not(:first-child) { margin-top: 20px; } #intro { height: 100vh; margin-top: 0; } } @media (min-width: 768px) { body { --container-width: 620px; --section-padding-y: 100px; } .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333333%; } .col-md-5 { width: 41.66666667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333333%; } .col-md-8 { width: 66.66666667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333333%; } .col-md-11 { width: 91.66666667%; } .col-md-12 { width: 100%; } .core-value-title { max-width: 170px; } .core-value-hero .core-value-hero__pattern { bottom: -32px; } .team-title { max-width: 240px; } .contact-info .contact-info__call { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .contact-info .contact-info__location { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .contact-info .contact-info__email { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .contact-info .contact-info__social { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .listing .listing__row { --gutter-y: 48px; --gutter-x: 32px; } .details-head .details-head__back { position: absolute; top: 0; left: -14%; margin-bottom: 0; } .tab.tab--plan { margin-left: -40px; margin-right: -40px; } .tab.tab--plan .tab__item { padding-left: 40px; padding-right: 40px; } .project-plan { padding: 0 0 0 48px; max-width: calc(var(--container-width) + (100vw - var(--container-width) - 24px) / 2); margin-left: auto; } .project-plan .project-plan__title { left: 0; top: 50%; width: initial; -webkit-transform: rotate(-90deg) translateX(-50%); -ms-transform: rotate(-90deg) translateX(-50%); transform: rotate(-90deg) translateX(-50%); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; line-height: 1; font-size: calc(2rem + 3vw); } #blog_swiper { padding-left: 0; padding-right: 0; } #blog_swiper .swiper-button-next, #blog_swiper .swiper-button-prev { --swiper-navigation-sides-offset: -48px; } .modal.modal--lg .modal__dialog { padding: 64px; } .job .job__form { padding: 40px; } .sticky-info .sticky-info__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: left; } .sticky-info .sticky-info__action { -webkit-column-gap: 64px; -moz-column-gap: 64px; column-gap: 64px; } #sticky-quick-enquiry .btn span, .sticky-info .sticky-info__left { display: block; } #sticky-quick-enquiry { bottom: 24px; right: 24px; } #sticky-quick-enquiry .btn { padding: var(--btn-padding); width: initial; height: initial; } #sticky-quick-enquiry .btn .svg { display: none; } } @media (min-width: 992px) { body { --container-width: 920px; } .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333333%; } .col-lg-5 { width: 41.66666667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333333%; } .col-lg-8 { width: 66.66666667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333333%; } .col-lg-11 { width: 91.66666667%; } .col-lg-12 { width: 100%; } .text-lg-end { text-align: right; } #header { padding-left: 40px; padding-right: 40px; } .navbar { margin-top: 0; margin-left: auto; position: relative; top: initial; width: initial; background-color: transparent; padding: 0; border: none; display: block; max-height: initial; overflow: visible; border-radius: 0; } .navbar > ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; margin: 0; max-width: initial; } .navbar > ul > li:not(:first-child) { margin-left: 48px; margin-top: initial; } /* .navbar > ul > li > a { padding-top: 16px; padding-bottom: 16px; } */ .sub-menu-handler { margin-left: 4px; } .menu-item-has-children:hover .sub-menu { opacity: 1; visibility: visible; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .sub-menu { position: absolute; top: 100%; left: 50%; width: 220px; -webkit-box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1); background-color: #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 16px; border-radius: 4px; opacity: 0; visibility: hidden; display: block; } #hamburger { display: none; } #search_close { right: 40px; } #intro .intro-text { top: initial; bottom: 80px; } #intro video { display: block; } .text-left { margin-bottom: 0; } .foot-content { margin-top: 80px; } .project { max-width: var(--project-max-width); } .project.project--sm .ratio { --ratio: 95%; } .project.project--lg .ratio { --ratio: 40%; } .insight-row { --gutter-y: 12px; } .insight { max-width: var(--insight-max-width); } .insight .ratio { --ratio: 102%; } .insight.insight--sm .ratio { --ratio: 160%; } .insight.insight--lg .ratio { --ratio: 72%; } .commitment-row { --gutter-y: 32px; margin-bottom: 40px; } #commitment { display: block; } #commitment_accordion .pattern-hero { display: none; } #commitment_accordion .accordion__body p:nth-last-child(2) { margin-bottom: 0; } .about-left { max-width: 450px; } .about-right { display: block; max-width: 270px; margin-left: auto; } .about-right .object-fit { margin-bottom: 0; } .core-value-title { margin-left: 164px; } .about-footer-step .about-footer-step__title { max-width: var(--title-max-width, 200px); } .about-footer-step .about-footer-step__btns > * { width: 160px; } .contact-hero .contact-hero__content { position: absolute; bottom: 32px; right: 0; max-width: 400px; } .contact-hero .contact-hero__collage { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .contact-hero .contact-hero__collage .contact-hero__collage__item:nth-child(1) { --ratio: 110%; width: 420px; } .contact-hero .contact-hero__collage .contact-hero__collage__item:nth-child(2) { --ratio: 87%; width: 200px; margin-top: 32px; } .contact-info .row .row { --gutter-y: 64px; } .listing .listing__sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; margin-bottom: 0; } .listing .listing__sidebar .listing__sidebar__links { margin-top: 0; margin-bottom: 48px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .listing .listing__sidebar .listing__sidebar__links li:not(:first-child) { margin-left: 0; margin-top: 16px; } .listing .listing__foot { max-width: 64%; } .details-head .row { --gutter-y: ; } .details-head .details-head__back { left: -72px; } .details-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .details-info .details-info__list { margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .details-info .details-info__list li { padding: 0; } .details-info .details-info__list li:not(:first-child) { margin-top: 12px; } .recent-blog .recent-blog__card { max-width: 320px; margin-left: auto; } .recent-blog .insight { --insight-max-width: 520px; } .project-info, .swiper-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .project-swiper-title-1, .project-swiper-title-2 { margin-bottom: 0; position: relative; width: initial; } .project-swiper-title-1 .h4 { position: absolute; top: 24px; right: 0; width: 26%; } .project-swiper .swiper { overflow: visible; } .project-swiper .ratio { --ratio: 135%; } .project-swiper .project-swiper__card > img { opacity: 0; -webkit-transition: opacity 250ms; -o-transition: opacity 250ms; transition: opacity 250ms; } .project-swiper .swiper-slide.swiper-slide-visible.swiper-slide-active .project-swiper__card > img { opacity: 1; } .project-swiper.project-swiper--1 .swiper-button { padding-right: 64px; } .project-swiper.project-swiper--2 .swiper-button { margin-top: 0; } .project-plan { padding-left: 64px; } .address-info { max-width: 230px; margin-left: auto; } .project-swiper-title-2 .h4 { position: absolute; top: 24px; left: 0; width: 26%; } .career-card .career-card__list { margin-right: -16px; padding-right: 16px; overflow-y: auto; overflow-x: hidden; max-height: 570px; scrollbar-width: thin; scrollbar-color: #6a6a6a73 var(--light); } .career-card .career-card__list::-webkit-scrollbar { width: 6px; height: 6px; } .career-card .career-card__list::-webkit-scrollbar-track { background: var(--light); } .career-card .career-card__list::-webkit-scrollbar-thumb { background-color: #6a6a6a73; border-radius: 4px; } .career-content { margin-left: auto; max-width: 360px; } .feature { max-width: 415px; } .career-gallery-title, .feature-list *:nth-child(even) .feature { margin-left: auto; } .sticky-info { padding-left: 48px; padding-right: 48px; } .top-footer:before { height: 30%; } .top-footer .pattern-hero { margin-right: initial; max-width: 400px; } .top-footer .top-footer__title { position: absolute; bottom: calc(30% - 10px); right: calc(((100vw - var(--container-width)) / 2) + 410px); text-align: left; white-space: nowrap; } .top-footer .top-footer__logo { text-align: left; position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 64px; padding-bottom: 64px; } .middle-footer { text-align: left; } .footer-content { margin-top: 40px; margin-left: auto; max-width: 400px; } .footer-link li { padding-top: 8px; padding-bottom: 8px; } #footer { margin-top: calc(-1 * var(--top-footer-height)); } } @media (min-width: 1200px) { body { --container-width: 1010px; } h1, .h1 { font-size: calc(var(--heading-font-size-base) * 4); } h2, .h2 { font-size: calc(var(--heading-font-size-base) * 3); } h3, .h3 { font-size: calc(var(--heading-font-size-base) * 2); } h4, .h4 { font-size: calc(var(--heading-font-size-base) * 1.5); } h5, .h5, .content h2 { font-size: calc(var(--heading-font-size-base) * 1.25); } .col-xl-1 { width: 8.33333333%; } .col-xl-2 { width: 16.66666667%; } .col-xl-3 { width: 25%; } .col-xl-4 { width: 33.33333333%; } .col-xl-5 { width: 41.66666667%; } .col-xl-6 { width: 50%; } .col-xl-7 { width: 58.33333333%; } .col-xl-8 { width: 66.66666667%; } .col-xl-9 { width: 75%; } .col-xl-10 { width: 83.33333333%; } .col-xl-11 { width: 91.66666667%; } .col-xl-12 { width: 100%; } .title-line:after { width: var(--line-width); } #header { padding-left: 64px; padding-right: 64px; } #search_close { right: 64px; } .text-left .object-fit { max-width: 384px; } .vision { max-width: 356px; margin-left: auto; } .text-right .object-fit { max-width: 356px; } .about-right .h4 { margin-bottom: 32px; } .about-right .about-right__text { margin-bottom: 56px; } .contact-hero .contact-hero__collage .contact-hero__collage__item:nth-child(1) { width: 536px; } .contact-hero .contact-hero__collage .contact-hero__collage__item:nth-child(2) { width: 246px; } .listing .listing__foot { max-width: 60%; } .details-head .details-head__back { left: -11%; } .tab { margin-left: -16px; margin-right: -16px; } .tab .tab__item { padding-left: 16px; padding-right: 16px; } .project-plan { padding-left: 80px; } .project-plan .project-plan__title { font-size: 92px; } .map-container .ratio { margin-right: -44px; } .rera .rera__content h2 { font-size: 40px; } .career-gallery-title { max-width: 264px; } .job .job__content { max-width: 490px; } .job .job__form { margin-left: -32px; } .job .job__form .row { --gutter-x: 48px; } .sticky-info { padding-left: 100px; padding-right: 100px; } .core-value:hover { -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); } } @media (min-width: 1400px) { .details-head .details-head__back { left: -17%; } } @media (max-width: 576px) { .last-footer .container > .d-flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } .last-footer .footer-left { margin-bottom: 8px; } }