/* ===================================================== ROOT ===================================================== */ html { font-size: 62.5%; scroll-behavior: smooth; } :root { --black: #080808; --dark: #111111; --dark-2: #181818; --gold: #f0bd2e; --gold-dark: #c99b00; --white: #ffffff; --text-light: #c8c8c8; --text-muted: #777777; --container-width: 128rem; --font-heading: "DM Sans", sans-serif; --font-body: "Mulish", sans-serif; } /* ===================================================== RESET ===================================================== */ * { margin: 0; padding: 0; box-sizing: border-box;} body { background: var(--black); color: var(--white); font-family: var(--font-body); font-size: 16px; overflow-x: hidden;} a { color: inherit; text-decoration: none;} button { border: none; outline: none; background: none;} .location-map-holder {border: solid 1px #4e4e4e; padding: 10px;} .d-flex { display: flex;} .align-items-center { align-items: center;} .justify-content-center { justify-content: center;} /* COMMON CONTAINER */ .container, .top_bar_container {width: min(92%, var(--container-width)); margin: 0 auto;} .pt-100 { padding-top: 10rem;} .pb-100 { padding-bottom: 10rem;} .py-100 { padding-top: 10rem; padding-bottom: 10rem;} .mb-10 { margin-bottom: 10px;} .mb-20 { margin-bottom: 20px;} .mb-30 { margin-bottom: 3rem;} .mb-40 { margin-bottom: 4rem;} .mb-60 { margin-bottom: 6rem;} .mb-70 { margin-bottom: 7rem;} .mb-80 { margin-bottom: 8rem;} .mb-90 { margin-bottom: 9rem;} .mt-10 { margin-top: 10px;} .mt-20 { margin-top: 20px;} .mt-30 { margin-top: 3rem;} .mt-40 { margin-top: 4rem;} .mt-50 { margin-top: 5rem;} /* ===================================================== SECTION HEADING ===================================================== */ .section__heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; margin-bottom: 8rem;} .section__eyebrow { margin-bottom: 1rem; font-size: clamp(16px, 2rem, 2rem); font-weight: 500; letter-spacing: .05rem; color: #818181; display: flex; align-items: center; gap: 10px;} .section__eyebrow::before { content: ''; width: 8rem; height: 1px; background-color: #818181; display: block;} .section__title { margin: 0; font-size: 3.2rem; font-weight: 1000; line-height: 1.25; color: #fff; text-transform: uppercase;} .section__heading-right { display: flex; justify-content: flex-end;} .section__heading-right p { max-width: 53rem; margin: 0; font-size: clamp(16px, 1.8rem, 1.9rem); font-weight: 400; line-height: 1.7; text-align: right; color: #888888;} .text { font-size: clamp(16px, 1.8rem, 1.9rem); font-weight: 400; line-height: 1.7; color: #888888;} .top-bar { background: #0E0E0E; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.06); padding: 8px 0; font-family: var(--font-heading); color: rgba(255, 255, 255, 0.70); justify-content: center;} .top_bar_container { display: flex; justify-content: space-between; align-items: center;} .top-bar__viewport { max-width: 500px; overflow: hidden;} .top-bar__track { width: max-content; display: flex; align-items: center; animation: topBarMarquee 10s linear infinite; will-change: transform;} .top-bar__item {flex-shrink: 0; display: flex; align-items: center; padding-right: 8rem; white-space: nowrap; font-size: 15px; font-weight: 500; letter-spacing: 0.04rem; color: rgba(255, 255, 255, 0.65);} .top-bar__item span { margin: 0 1.5rem; color: var(--gold);} /* MARQUEE */ @keyframes topBarMarquee { from { transform: translateX(0); } to { transform: translateX(-25%); } } .top-bar:hover .top-bar__track { animation-play-state: paused; } .social-icons { display: flex; align-items: center; gap: 3rem;} .social-icons a { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;} .social-icons a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-0.3rem);} .social-icons i { font-size: 13px;} /* HEADER */ .header { position: absolute; width: 100%; z-index: 100; padding: 10px 0; background: rgba(25, 25, 26, 0.8); backdrop-filter: blur(5px); border-bottom: 0.1rem solid rgba(255, 255, 255, 0.04); transition: transform .4s ease, background .4s ease, box-shadow .4s ease;} .header__inner {height: 100%; display: flex; align-items: center; justify-content: space-between;} .header__logo { display: flex; align-items: center; max-width: 358px; width: 100%;} .header__logo img {display: block; width: 100%; height: auto; object-fit: contain;} /* ===================================================== HEADER FIXED ON SCROLL ===================================================== */ .header.is-fixed { position: fixed; top: 0; left: 0; width: 100%; background: rgb(0 0 0 / 81%); backdrop-filter: blur(1rem); box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .2); animation: headerSlideDown .4s ease forwards;} @keyframes headerSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* NAVIGATION */ .header__nav { display: flex; align-items: center; gap: 3.2rem; margin-left: auto; margin-right: 4rem;} .header__link { position: relative; display: flex; align-items: center; gap: .5rem; font-family: var(--font-heading); font-size: 18px; font-weight: 400; color: #888888; transition: color .3s ease;} .header__link:hover, .header__link.active { color: var(--gold); } /* DROPDOWN WRAPPER */ .header__dropdown { position: relative; height: 100%; display: flex; align-items: center;} .header__dropdown-toggle {cursor: pointer;} .header__dropdown-toggle .material-symbols-outlined { font-size: 1.8rem; transition: transform .3s ease;} /* DROPDOWN MENU */ .header__dropdown-menu { position: absolute; top: calc(100% + 1.8rem); left: -2rem; width: 27rem; padding: 1rem; background: #101010; border: .1rem solid rgba(255, 255, 255, .08); box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity .3s ease, visibility .3s ease, transform .3s ease;} /* Small gold line */ .header__dropdown-menu::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: .2rem; background: var(--gold);} /* DROPDOWN LINKS */ .header__dropdown-menu a { position: relative; display: flex; align-items: center; gap: 1rem; padding: 14px 1.4rem; font-weight: 500; color: #888888; transition: color .3s ease, background .3s ease, padding-left .3s ease;} .header__dropdown-menu a span { color: var(--gold); opacity: 0; transform: translateX(-.5rem); transition: opacity .3s ease, transform .3s ease;} .header__dropdown-menu a:hover {color: var(--gold); background: rgba(245, 197, 24, .05); padding-left: 1.8rem;} .header__dropdown-menu a:hover span { opacity: 1;transform: translateX(0);} /* SHOW DROPDOWN */ .header__dropdown:hover .header__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0);} .header__dropdown:hover .header__dropdown-toggle .material-symbols-outlined { transform: rotate(180deg);} .header__call { display: flex; align-items: center; justify-content: center; gap: 0.8rem; background: var(--gold); color: #111111; padding: 7px 15px; font-weight: 600; border-radius: 5px; transition: background 0.3s ease, transform 0.3s ease;} .header__call:hover {background: #ffd83d; transform: translateY(-0.2rem);} .header__call-icon {display: flex; align-items: center; justify-content: center; font-size: 14px;} .header__menu { display: none; color: var(--gold); font-size: 2.4rem; cursor: pointer;} /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 90rem) { .header__nav { gap: 2.2rem; margin-right: 2rem; } .header__call { min-width: 14rem;} .social-icons { display: none;} } @media (max-width: 70rem) { .header__nav, .header__call { display: none;} .header__menu { display: block; } .header__nav.is-open { display: block; position: absolute; top: 100%; width: 100%; background: rgb(55 53 48); left: 0; padding: 2rem 3rem; } .header__nav.is-open .header__link { margin-bottom: 20px;} .header__dropdown:hover .header__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* ===================================================== DROPDOWN - CLICK TO OPEN ===================================================== */ .header__dropdown-menu { opacity: 1; visibility: visible; position: static; display: none; transform: translateY(-1rem); pointer-events: none; transition: opacity .3s ease, visibility .3s ease, transform .3s ease; } .header__dropdown { align-items: flex-start; flex-direction: column;} .header__dropdown.is-open .header__dropdown-menu { display: block; margin-bottom: 2rem; pointer-events: inherit;} } @media (max-width: 48rem) { .header { height: 6.5rem; } .header__logo { width: 24rem;} } /* SLIDER----------------------------------------------------------------------------------------------------------------------------------------------------------- */ .hero { position: relative; height: calc(100vh - 10rem); min-height: 65rem; overflow: hidden; background: #080808;} .hero__slides { position: relative; width: 100%; height: 100%;} .hero__slide {position: absolute; inset: 0; visibility: hidden; pointer-events: none; overflow: hidden;} .hero__slide--active { visibility: visible; pointer-events: auto;} /* IMAGE */ .hero__image { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 0); transform: scale(1.08);} .hero__image img {width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 1.6s cubic-bezier(.22, .61, .36, 1);} .hero__slide--active .hero__image img { transform: scale(1);} /* DARK OVERLAY */ .hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .78) 30%,rgba(5, 5, 5, .25) 65%, rgba(5, 5, 5, .08) 100% ); z-index: 1;} /* CONTENT */ .hero__content {position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 5rem;} .hero__eyebrow {display: flex; align-items: center; gap: 10px; margin-bottom: 2rem; font-family: var(--font-heading); font-size: 2rem; font-weight: 600; color: #A7A4A4; opacity: 0; transform: translateY(3rem);} .hero__eyebrow > span {display: block; width: 3.5rem; height: .1rem; background: var(--gold);} /* TITLE */ .hero_tagline { font-size: 3rem; color: var(--gold); margin: 0; letter-spacing: normal;} .hero__title { max-width: 80rem; margin-bottom: 20px; font-family: var(--font-body); font-size: clamp(5rem, 6.5vw, 8.8rem); font-weight: 1000; text-transform: uppercase; line-height: .98; color: var(--white); opacity: 0; transform: translateY(6rem);} .hero__title strong { color: var(--gold); font-weight: 1000;} /* DESCRIPTION */ .hero__description { max-width: 67rem; margin-bottom: 3.5rem; font-family: var(--font-body); font-weight: 400; line-height: 1.7; color: #BAB9B9; opacity: 0; transform: translateY(3rem);} /* BUTTON */ .buttons_controls { position: absolute; top: 50%; z-index: 99; width: 95%; display: flex; justify-content: space-between; left: 0; right: 0; margin: auto;} .hero__button, .primary_btn { width: fit-content; padding: 10px 18px; display: flex; align-items: center; gap: 1.5rem; background: var(--gold); color: #111; font-family: var(--font-heading); font-size: 18px; font-weight: 400; transition: gap .3s ease, background .3s ease; opacity: 0; transform: translateY(3rem); border-radius: 4px; text-transform: uppercase; min-height: 4rem;} .hero__button:hover, .primary_btn:hover { gap: 2.2rem; background: #ffd52f;} .hero__button .material-symbols-outlined, .primary_btn .material-symbols-outlined { font-size: 2rem;} .primary_btn { opacity: 1;} /* ACTIVE SLIDE CONTENT ANIMATION */ .hero__slide--active .hero__eyebrow { animation: heroReveal .8s .25s forwards; } .hero__slide--active .hero__title { animation: heroReveal .9s .35s forwards; } .hero__slide--active .hero__description { animation: heroReveal .8s .5s forwards; } .hero__slide--active .hero__button { animation: heroReveal .8s .65s forwards; } @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } } /* SLIDE TRANSITION */ .hero__slide--leaving .hero__image { animation: imageLeave .9s cubic-bezier(.77, 0, .18, 1) forwards; } .hero__slide--entering .hero__image { animation: imageEnter .9s cubic-bezier(.77, 0, .18, 1) forwards; } @keyframes imageLeave { 0% { clip-path: inset(0 0 0 0); transform: translateX(0); } 100% { clip-path: inset(0 100% 0 0); transform: translateX(-5rem); } } @keyframes imageEnter { 0% { clip-path: inset(0 0 0 100%); transform: translateX(6rem); } 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } } /* ===================================================== CONTROLS ===================================================== */ .hero__controls {position: absolute; z-index: 10; left: 50%; bottom: 9rem; transform: translateX(-50%); display: flex; align-items: center; gap: 2rem;} .hero__arrow { width: 4.5rem; height: 4.5rem; background: #2f2f2f; border-radius: 4.5rem; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease;} .hero__arrow:hover {background: var(--gold); border-color: var(--gold); color: #000;} .hero__arrow .material-symbols-outlined { font-size: 2rem;} .hero__counter {display: flex; align-items: center; gap: 14px; font-family: var(--font-heading); font-size: 14px;} .hero__counter-current { color: var(--gold);} .hero__counter-total {color: rgba(255, 255, 255, .4);} .hero__counter-line { width: 4rem; height: .1rem; background: rgba(255, 255, 255, .25);} /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 70rem) { .hero { min-height: 62rem;} .hero__title { font-size: 6rem;} .hero__controls { bottom: 4rem;} } @media (max-width: 48rem) { .hero { height: calc(70vh - 9.3rem); min-height: 60rem; } .hero__overlay { background: linear-gradient( 90deg, rgba(5, 5, 5, .9) 0%, rgba(5, 5, 5, .55) 100% ); } .hero__content { padding-bottom: 8rem;} .hero__title { max-width: 100%; font-size: 4.8rem; letter-spacing: -.2rem; } .hero__description { max-width: 36rem; } } /* HOME location Ticker-------------------------------------------------------------------------------------------------------------------------- */ .location-ticker { position: relative; z-index: 20; width: calc(100% + 4rem); height: 4.8rem; margin-left: -2rem; overflow: hidden; background: var(--gold); transform: rotate(-2deg); transform-origin: center; display: flex; align-items: center; margin-top: -15px;} .location-ticker__track { display: flex; align-items: center; width: max-content; white-space: nowrap; animation: locationMarquee 28s linear infinite; will-change: transform;} .location-ticker__item { flex-shrink: 0; display: flex; align-items: center; padding: 0 3.5rem; font-size: clamp(16px, 1.8rem, 1.9rem); font-weight: 600; letter-spacing: .20rem; text-transform: uppercase; color: #090909;} .location-ticker__item span { margin-left: 3.5rem; font-size: 18px; font-weight: 700;} /* MARQUEE */ @keyframes locationMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .location-ticker:hover .location-ticker__track { animation-play-state: paused; } @media (max-width: 48rem) { .location-ticker { height: 4rem; width: calc(100% + 2rem); margin-left: -1rem; transform: rotate(-1.5deg); } .location-ticker__item { padding: 0 2.5rem; letter-spacing: .12rem; } .location-ticker__item span { margin-left: 2.5rem;} } /* HOME (REAL ESTATE CONSULTANT) section-------------------------------------------------------------------------------------------------------------------------- */ .consultant { position: relative; width: 100%; overflow: hidden;} /* ===================================================== SWIPER ===================================================== */ .consultant__cards {width: 100%; overflow: hidden;} .consultant__cards .swiper-wrapper { align-items: stretch; gap: 3rem;} /* CARD */ .consultant__card {flex-shrink: 0; padding: 24px 30px 4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;border-radius: 14px; background: #211f1f; transition: background .3s ease, transform .3s ease; } .consultant__card:hover {background: #272525; transform: translateY(-.5rem);} .consultant__icon { margin-bottom: 1.5rem; font-size: 4.5rem; color: var(--gold);} .consultant__card h3 { margin: 0; font-size: clamp(18px, 2rem, 2rem); font-weight: 800; line-height: 1.55; color: #777;} .center__cta {display: flex; justify-content: center; margin-top: 4rem;} /* ===================================================== TABLET ===================================================== */ @media (max-width: 70rem) { .consultant__container { width: min(100% - 5rem, 124rem); } .consultant__heading { gap: 4rem; } } @media (max-width: 48rem) { .consultant__heading { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; } .consultant__title {font-size: 2.1rem;} .consultant__heading-right { justify-content: flex-start; } .consultant__heading-right p { max-width: 100%; text-align: left; font-size: 14px; } } /* HOME (ABOUT BHAGWAT DHAM)----------------------------------------------------------------------------------------------------------------------------------------------------- */ .about-realestate { position: relative; width: 100%; display: flex; align-items: center; overflow: hidden;} .about-realestate .container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; justify-content: center; align-items: center;} .about-realestate .section__heading { grid-template-columns: 1fr; margin-bottom: 2rem;} .about-realestate__bg { position: absolute; inset: 0; overflow: hidden;} .about-realestate__bg img {width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.06); transition: transform 2s cubic-bezier(.16, 1, .3, 1);} .about-realestate.is-visible .about-realestate__bg img { transform: scale(1);} .about-realestate__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 32%, rgba(0, 0, 0, .48) 65%, rgba(0, 0, 0, .60) 100%);} .about-realestate__content {max-width: 52rem; opacity: 0; transform: translate3d(-6rem, 0, 0); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);} .about-realestate.is-visible .about-realestate__content { opacity: 1; transform: translate3d(0, 0, 0);} /* ===================================================== READ MORE ===================================================== */ .readmore__link { display: inline-flex; align-items: center; gap: 12px; margin-top: 2.8rem; font-size: 15px; font-weight: 600; color: var(--gold); transition: gap .3s ease;} .readmore__link:hover {gap: 1.8rem;} .readmore__link .material-symbols-outlined {width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: #111; font-size: 1.7rem;} .about-realestate__visual { position: relative; min-height: 65rem; display: flex; align-items: center; justify-content: center;} .about-realestate__circle { position: relative; width: 39rem; height: 39rem; flex-shrink: 0; border: .35rem solid var(--gold); border-radius: 50%; overflow: hidden; opacity: 0; transform: translate3d(5rem, 2rem, 0) scale(.72) rotate(8deg); box-shadow: 0 0 0 1rem rgba(255, 193, 7, .04), 0 2rem 7rem rgba(0, 0, 0, .55); transition: opacity 1s ease .2s, transform 1.3s cubic-bezier(.16, 1, .3, 1) .2s;} /* Circle entrance */ .about-realestate.is-visible .about-realestate__circle {opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); animation: aboutCircleFloat 6s ease-in-out 1.6s infinite;} .about-realestate__circle img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.12); transition:transform 1.8s cubic-bezier(.16, 1, .3, 1);} .about-realestate.is-visible .about-realestate__circle img { transform: scale(1);} /* BADGE */ .about-realestate__badge {position: absolute; left: 20%; bottom: 12rem; z-index: 5; min-width: 16rem; padding: 1.5rem 2rem; display: flex; flex-direction: column; background: rgba(20, 20, 20, .92); border: .1rem solid var(--gold); border-radius: 1rem; backdrop-filter: blur(.8rem); -webkit-backdrop-filter: blur(.8rem); opacity: 0; transform: translate3d(-5rem, 4rem, 0) scale(.8);transition: opacity .8s ease .9s, transform .9s cubic-bezier(.16, 1, .3, 1) .9s;} .about-realestate.is-visible .about-realestate__badge { opacity: 1; transform: translate3d(-5rem, 0, 0) scale(1);} .about-realestate__badge strong { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--gold);} .about-realestate__badge span { margin-top: .5rem; font-size: 12px; font-weight: 400; color: #fff;} /* ===================================================== FLOAT ANIMATION ===================================================== */ @keyframes aboutCircleFloat { 0%, 100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(0, -1rem, 0) scale(1) rotate(1deg); } } /* ===================================================== BADGE FLOAT ===================================================== */ .about-realestate.is-visible .about-realestate__badge { animation: aboutBadgeFloat 5s ease-in-out 2s infinite; } @keyframes aboutBadgeFloat { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: .8rem; } } /* ===================================================== TABLET ===================================================== */ @media (max-width: 70rem) { .about-realestate__circle { width: 34rem; height: 34rem; } .about-realestate__visual { min-height: 50rem; } .about-realestate__title { font-size: 2.7rem; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .about-realestate__overlay {background: linear-gradient(180deg,rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .72) 100%);} .about-realestate__content { max-width: 100%;} .about-realestate__visual { min-height: 38rem;} .about-realestate__circle { width: 28rem; height: 28rem; transform: translate3d(0, 3rem, 0) scale(.75) rotate(6deg);} .about-realestate__badge { bottom: 2rem;} .about-realestate.is-visible .about-realestate__badge { transform: translate3d(-3rem, 0, 0) scale(1);} } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 30rem) { .about-realestate__circle { width: 25rem; height: 25rem; } .about-realestate__badge { min-width: 14rem; padding: 14px 16px; } .about-realestate__badge strong { font-size: 2.2rem; } .about-realestate__badge span { font-size: 12px; } } /* ===================================================== ACCESSIBILITY ===================================================== */ @media (prefers-reduced-motion: reduce) { .about-realestate__bg img, .about-realestate__content, .about-realestate__circle, .about-realestate__circle img, .about-realestate__badge { transition: none; animation: none; } } /* HOME (SERVICES)------------------------------------------------------------------------------------------------------------------------------- */ /* SOLUTIONS CARD */ .solutions__card { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 61rem; background: #211f1f; overflow: visible; } /* ===================================================== YELLOW CORNERS ===================================================== */ .solutions__visual::before { content: ""; position: absolute; left: -16px; top: -16px; width: 10rem; height: 10rem; background: var(--gold); clip-path: polygon(100% 0, 100% 100%, 0 100%, 20% 0); z-index: 5; transform: rotate(180deg); } .solutions__visual::after { content: ""; position: absolute; right: -16px; bottom: -16px; width: 10rem; height: 10rem; background: var(--gold); clip-path: polygon(100% 0, 100% 100%, 0 100%, 20% 0); z-index: 5; } /* ===================================================== CONTENT ===================================================== */ .solutions__content { display: flex; flex-direction: column; justify-content: center; padding: 8rem 7rem; } .solutions__card_reverse .solutions__content { order: 2;} /* ===================================================== NUMBER ===================================================== */ .solutions__number { display: flex; align-items: center; gap: 1.8rem; margin-bottom: 2.8rem; } .solutions__number span { width: 8rem; height: .1rem; background: #656161; } .solutions__number small { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: #777; } /* ===================================================== TITLE ===================================================== */ .solutions__title { margin: 0 0 2rem; font-size: 3rem; font-weight: 1000; line-height: 1.2; letter-spacing: -.06rem; text-transform: uppercase; color: #fff; letter-spacing: 8%; } /* ===================================================== DESCRIPTION ===================================================== */ /* ===================================================== IMAGE AREA ===================================================== */ .solutions__visual { position: relative; min-width: 0; height: 61rem; } .solution_content { position: absolute; z-index: 8; top: 0; padding: 2rem 4rem; width: 100%; background: linear-gradient(45deg, #000000a6, transparent); display: flex; justify-content: space-between; align-items: center; } .solution_content h4 { font-size: clamp(20px, 2.5rem, 2.8rem);} .solution_content > div span { opacity: 0.8;} .solution_content .solution_pricing { background: var(--gold); padding: 8px 16px; color: #080808; font-size: clamp(18px, 2.1rem, 2.5rem); font-weight: 700; border-radius: 4px; display: none; } .solutions__visual .readmore__link { margin-top: 0; } .solutions__visual .action_btn { position: absolute; bottom: 0%; z-index: 99; width: 100%; text-align: center; background: linear-gradient(1deg, black, transparent); padding: 4rem 0; } /* ===================================================== SWIPER ===================================================== */ .solutions__swiper { width: 100%; height: 100%; position: relative; z-index: 7; } .solutions__swiper .swiper-slide { width: 100%; height: 100%; } .solutions__swiper .swiper-slide img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ===================================================== PAGINATION ===================================================== */ .solutions__swiper .swiper-pagination { top: 50%; left: 87%; width: 50px; /* transform: translateX(-50%); */ display: flex; align-items: end; gap: 1rem; flex-direction: column } .solutions__swiper .swiper-pagination-bullet { width: .8rem; height: .8rem; margin: 0 !important; border-radius: 50%; background: #fff; opacity: .45; transition: width .3s ease, opacity .3s ease, background .3s ease; } .solutions__swiper .swiper-pagination-bullet-active { height: 2.2rem; border-radius: 1rem; background: var(--gold); opacity: 1; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 70rem) { .solutions__card { min-height: 52rem; } .solutions__content { padding: 6rem 4rem; } .solutions__visual { height: 52rem; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .solutions__card { grid-template-columns: 1fr; min-height: auto; } .solutions__card::before { top: -1rem; right: 15%; width: 7rem; height: 1rem; } .solutions__card::after { right: -1rem; bottom: -1rem; width: 6rem; height: 6rem; } .solutions__content { padding: 5rem 3rem 4rem; } .solutions__number { margin-bottom: 2rem; } .solutions__number span { width: 5rem; } .solutions__visual { height: 35rem; } .solutions__swiper .swiper-pagination { bottom: 2rem; } } /* HOME (PROPERTY LOCATION)------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ===================================================== PROPERTY LOCATIONS ===================================================== */ .property-locations { position: relative; overflow: clip; background: linear-gradient(180deg, #212121 0%, #000000 100%); border-radius: 100px 100px 0px 0px; padding: 10rem 0 20rem; } .property-locations__container { position: relative; min-height: 100%; display: flex; } .property-locations__label { position: sticky; top: 50%; z-index: 10; width: 5rem; height: 30rem; margin-left: 0; transform: translateY(-50%); writing-mode: vertical-rl; rotate: 180deg; font-family: var(--font-heading); font-size: clamp(3.8rem, 4vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: .1rem; color: transparent; -webkit-text-stroke: .1rem #fff; pointer-events: none; } .property-locations__content { width: calc(100% - 10rem); margin-left: 10rem; } .property-locations__cards { position: relative; height: 300rem; } /* ===================================================== PROPERTY CARD ===================================================== */ .property-location-card { position: sticky; width: 100%; height: 52rem; margin: 0; overflow: hidden; background: #211f1f; transform-origin: center top; } /* Each card gets its own sticky position. This keeps every card header visible while stacking. */ .property-location-card:nth-child(1) { top: 20rem; z-index: 1; } .property-location-card:nth-child(2) { top: 27rem; z-index: 2; } .property-location-card:nth-child(3) { top: 34rem; z-index: 3; } .property-location-card:nth-child(4) { top: 41rem; z-index: 4; } /* ===================================================== CARD HEADER ===================================================== */ .property-location-card__top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 7rem; padding: 0 2rem; display: flex; align-items: center; gap: 2rem; background: linear-gradient( 180deg, rgba(5, 8, 15, .96) 0%, rgba(5, 8, 15, .72) 100% ); } .property-location-card__top > span { flex: 0 0 auto; font-size: clamp(1.4rem, 1vw, 1.7rem); font-weight: 500; color: #aaa; } .property-location-card__top h3 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 1.3vw, 2rem); font-weight: 700; line-height: 1.2; color: #fff; } .property-location-card__link { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; font-size: clamp(14px, 1vw, 16px); font-weight: 600; color: var(--gold); text-decoration: none; } .property-location-card__link .material-symbols-outlined { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: #111; font-size: 1.7rem; } /* ===================================================== CARD IMAGE ===================================================== */ .property-location-card__image { position: absolute; inset: 0; z-index: 1; } .property-location-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, .2) 0%, transparent 35% ); pointer-events: none; } .property-location-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .property-locations__label { position: absolute; top: 12rem; left: 0; width: 3rem; height: 18rem; transform: none; font-size: clamp(2.8rem, 9vw, 3.8rem); } .property-locations__content { width: 100%; margin-left: 0; padding-top: 0; } .property-locations__cards { height: 230rem; } .property-location-card { height: 38rem; } .property-location-card:nth-child(1) { top: 6rem; } .property-location-card:nth-child(2) { top: 9.5rem; } .property-location-card:nth-child(3) { top: 13rem; } .property-location-card:nth-child(4) { top: 16.5rem; } .property-location-card__top { height: 6rem; padding: 0 1.5rem; gap: 1rem; } .property-location-card__top > span { font-size: 1.4rem; } .property-location-card__link { gap: .6rem; font-size: 14px; } .property-location-card__link .material-symbols-outlined { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; } } /* FOOTER------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* ===================================================== FOOTER ===================================================== */ .footer { position: relative; overflow: hidden; background: #050505; color: #fff; } .footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: .1rem; background: linear-gradient( 90deg, transparent, var(--gold), transparent ); opacity: .6; } /* ===================================================== FOOTER TOP ===================================================== */ .footer__top { position: relative; padding: 9rem 0 8rem; } .footer__container { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1.2fr; gap: 6rem; } /* ===================================================== BRAND ===================================================== */ .footer__brand { max-width: 42rem; } .footer__logo { display: inline-block; font-family: var(--font-heading); font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.1rem; color: #fff; text-decoration: none; } .footer__logo span { color: var(--gold); } .footer__tagline { margin: 1.8rem 0 0; font-weight: 600; color: var(--gold); } .footer__description { max-width: 38rem; margin: 2rem 0 0; font-weight: 400; line-height: 1.7; } .footer__cta { width: 16rem; height: 5rem; margin-top: 3rem; padding: 0 1.5rem 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--gold); color: #080808; font-size: 14px; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: transform .3s ease, gap .3s ease; } .footer__cta:hover { gap: 2.2rem; transform: translateY(-.3rem); } .footer__cta .material-symbols-outlined { font-size: 2rem; } /* ===================================================== COLUMNS ===================================================== */ .footer__column { padding-top: .5rem; } .footer__label { margin: 0 0 2.5rem; font-size: clamp(18px, 2rem, 2.1rem); font-weight: 700; letter-spacing: .12rem; color: #666; } .footer__links { margin: 0; padding: 0; list-style: none; } .footer__links li { margin-bottom: 1.5rem; } .footer__links a { position: relative; display: inline-block; font-weight: 500; color: #aaa; text-decoration: none; transition: color .3s ease, transform .3s ease; } .footer__links a::before { content: "/"; margin-right: .7rem; color: #444; transition: color .3s ease; } .footer__links a:hover { color: var(--gold); transform: translateX(.4rem); } .footer__links a:hover::before { color: var(--gold); } /* ===================================================== CONTACT ===================================================== */ .footer__contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 1.7rem; font-weight: 500; line-height: 1.5; color: #aaa; text-decoration: none; transition: color .3s ease; } .footer__contact-item:hover { color: var(--gold); } .footer__contact-item .material-symbols-outlined { flex: 0 0 auto; font-size: 1.9rem; color: var(--gold); } /* ===================================================== SOCIAL ===================================================== */ .footer__socials { display: flex; align-items: center; gap: .8rem; margin-top: 2.5rem; } .footer__socials a { width: 3.8rem; height: 3.8rem; display: flex; align-items: center; justify-content: center; border: .1rem solid #292929; border-radius: 50%; color: #777; font-size: 1.5rem; text-decoration: none; transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease; } .footer__socials a:hover { border-color: var(--gold); background: var(--gold); color: #080808; transform: translateY(-.3rem); } /* ===================================================== BOTTOM ===================================================== */ .footer__bottom { border-top: .1rem solid #2c2c2c; } .footer__bottom-inner { min-height: 7rem; display: flex; align-items: center; justify-content: space-between; gap: 3rem; } .footer__bottom p { margin: 0; font-weight: 400; color: #767676; } .footer__legal { display: flex; align-items: center; gap: 1rem; } .footer__legal a { color: #767676; text-decoration: none; transition: color .3s ease; } .footer__legal a:hover { color: var(--gold); } .footer__legal span { color: #767676; } .footer__back-top { display: flex; align-items: center; gap: 1rem; font-weight: 700; letter-spacing: .05rem; color: #777; text-decoration: none; transition: color .3s ease; } .footer__back-top:hover { color: var(--gold); } .footer__back-top .material-symbols-outlined { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border: .1rem solid #333; border-radius: 50%; font-size: 16px; transition: border-color .3s ease, transform .3s ease; } .footer__back-top:hover .material-symbols-outlined { border-color: var(--gold); transform: translateY(-.2rem); } /* ===================================================== TABLET ===================================================== */ @media (max-width: 70rem) { .footer__top { padding: 7rem 0; } .footer__container { grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; } .footer__brand { grid-row: span 2; } .footer__contact { grid-column: 2 / -1; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .footer__top { padding: 6rem 0 5rem; } .footer__container { grid-template-columns: 1fr; gap: 4rem 2.5rem; } .footer__brand { grid-column: 1 / -1; grid-row: auto; max-width: 100%; } .footer__column { padding-top: 0; } .footer__contact { grid-column: 1 / -1; } .footer__links li { margin-bottom: 14px; } .footer__links a { font-size: 15px; } .footer__contact-item { font-size: 15px; } .footer__bottom-inner { min-height: auto; padding: 2rem 0; flex-direction: column; align-items: flex-start; gap: 1.8rem; } .footer__legal { order: 2; } .footer__back-top { order: 1; } .footer__bottom p { order: 3; font-size: 1rem; } } /* HOME PAGE END HERE------------------------------------------------------------------------------------------------------------ */ /* ---------------------- ------------------------------------------------------ RESIDENTIAL PROJECT PAGE ---------------------------------------------------------------------------- */ /* ===================================================== RESIDENTIAL BANNER ===================================================== */ .residential-banner { position: relative; width: 100%; overflow: hidden; background: #050505; } .residential-banner__slider { width: 100%; height: 45rem; } .residential-banner__slide { position: relative; overflow: hidden; } .residential-banner__slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); } .residential-banner__slide.swiper-slide-active > img { transform: scale(1); } .residential-banner__overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .2) 100% ); } .residential-banner__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .residential-banner__content .section-eyebrow { margin-bottom: 1.5rem; } .section-eyebrow { opacity: 0.7;} .residential-banner__content h1, .residential-banner__content h2 { max-width: 65rem; margin: 0; font-family: var(--font-heading); font-size: clamp(3.5rem, 5vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -.12rem; color: #fff; } .residential-banner__content h1 strong, .residential-banner__content h2 strong { color: var(--gold); font-weight: 800; } .residential-banner__content > p:last-child { max-width: 52rem; margin: 2rem 0 0; font-size: 1.5rem; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .65); } /* ===================================================== BANNER NAVIGATION ===================================================== */ .residential-banner__navigation { position: absolute; right: 4rem; bottom: 3rem; z-index: 5; display: flex; align-items: center; gap: 1rem; } .residential-banner__arrow { min-width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; border: .1rem solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease; } .residential-banner__arrow:hover { border-color: var(--gold); background: var(--gold); color: #111; } .residential-banner__arrow .material-symbols-outlined { font-size: 1.8rem; } .residential-banner__pagination { display: flex; align-items: center; gap: .6rem; } .residential-banner__pagination .swiper-pagination-bullet { width: .7rem; height: .7rem; margin: 0 !important; border-radius: 50%; background: #fff; opacity: .35; } .residential-banner__pagination .swiper-pagination-bullet-active { width: 2.5rem; border-radius: 1rem; background: var(--gold); opacity: 1; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .residential-banner__slider { height: 42rem; } .residential-banner__content > p:last-child { max-width: 90%; font-size: 1.35rem; } .residential-banner__navigation { right: 2rem; bottom: 2rem; } .residential-banner__arrow { width: 4rem; height: 4rem; } } /* ===================================================== RESIDENTIAL ABOUT ===================================================== */ .residential-about { position: relative; padding: 10rem 0; overflow: hidden; background: #050505; } .residential-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10rem; align-items: start; } .residential-about__heading { position: sticky; top: 10rem; } .residential-about__heading h2 { margin: 1.5rem 0 0; font-family: var(--font-heading); font-size: clamp(3rem, 4vw, 5rem); font-weight: 800; letter-spacing: -.1rem; color: #fff; } .residential-about__heading h2 strong { color: var(--gold); } .residential-about__content { padding-top: 4rem; } .residential-about__line { display: flex; align-items: center; gap: 1.5rem; margin-top: 4rem; } .residential-about__line span { width: 5rem; height: .1rem; background: var(--gold); } .residential-about__line strong { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; letter-spacing: .08rem; color: #aaa; } @media (max-width: 48rem) { .residential-about { padding: 7rem 0; } .residential-about__grid { grid-template-columns: 1fr; gap: 3rem; } .residential-about__heading { position: relative; top: auto; } .residential-about__content { padding-top: 0; } } /* ===================================================== ONGOING RESIDENTIAL PROJECTS ===================================================== */ .residential-projects { position: relative; overflow: hidden; background: linear-gradient(180deg, #212121 0%, #000000 100%); border-radius: 0rem 10rem 0 0; } /* ===================================================== HEADING ===================================================== */ .residential-projects__heading { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6rem; margin-bottom: 6rem; } .residential-projects__title { max-width: 55rem; margin: 1rem 0 0; font-family: var(--font-heading); font-size: clamp(3rem, 3.5vw, 4.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.08rem; color: #fff; } .residential-projects__title span { color: var(--gold); } /* ===================================================== GRID ===================================================== */ .residential-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } /* ===================================================== CARD ===================================================== */ .residential-project-card { position: relative; overflow: hidden; background: #171717; border: .1rem solid rgba(255, 255, 255, .06); transform: translateY(5rem); opacity: 0; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s ease, border-color .4s ease; } .residential-project-card:nth-child(2) { transition-delay: .12s; } .residential-project-card:nth-child(3) { transition-delay: .24s; } .residential-projects.is-visible .residential-project-card { transform: translateY(0); opacity: 1; } .residential-project-card:hover { border-color: rgba(212, 175, 55, .45); } /* ===================================================== IMAGE ===================================================== */ .residential-project-card__image { position: relative; height: 42rem; overflow: hidden; } .residential-project-card__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 40%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, .9) 100% ); z-index: 1; } .residential-project-card__image img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.05); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); } .residential-project-card:hover .residential-project-card__image img { transform: scale(1.12); } /* ===================================================== IMAGE TITLE ===================================================== */ .residential-project-card__overlay { position: absolute; right: 2.5rem; bottom: 2.5rem; left: 2.5rem; z-index: 2; } .residential-project-card__overlay span { display: block; margin-bottom: .8rem; font-size: 14px; font-weight: 500; letter-spacing: .12rem; color: var(--gold); } .residential-project-card__overlay h3 { max-width: 32rem; margin: 0; font-family: var(--font-heading); font-size: clamp(2rem, 2vw, 2.4rem); font-weight: 500; line-height: 1.05; color: #fff; } /* ===================================================== CARD BODY ===================================================== */ .residential-project-card__body { padding: 2.5rem; } /* ===================================================== PROJECT INFO ===================================================== */ .residential-project-card__info { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: .1rem solid rgba(255, 255, 255, .08); } .residential-project-card__info div { display: flex; flex-direction: column; gap: .7rem; } .residential-project-card__info span { font-size: 12px; font-weight: 500; letter-spacing: .08rem; color: #a1a1a1; } .residential-project-card__info strong { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #fff; } /* ===================================================== ACTIONS ===================================================== */ .residential-project-card__actions { display: flex; align-items: center; gap: 14px; padding-top: 2.5rem; } .residential-project-card__view { flex: 1; min-height: 4.8rem; padding: 0 14px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 13; font-weight: 500; color: #111; background: var(--gold); transition: gap .3s ease, background .3s ease; } .residential-project-card__view:hover { gap: 1.5rem; background: #fff; } .residential-project-card__view .material-symbols-outlined { width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #111; color: var(--gold); font-size: 16px; } .residential-project-card__enquiry { min-height: 4.8rem; padding: 0 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: #fff; border: .1rem solid rgba(255, 255, 255, .2); transition: background .3s ease, border-color .3s ease, color .3s ease; } .residential-project-card__enquiry:hover { color: #111; background: var(--gold); border-color: var(--gold); } /* ===================================================== TABLET ===================================================== */ @media (max-width: 70rem) { .residential-projects { padding: 9rem 0; } .residential-projects__heading { gap: 4rem; } .residential-projects__grid { grid-template-columns: repeat(2, 1fr); } .residential-project-card__image { height: 38rem; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .residential-projects { padding: 7rem 0; } .residential-projects__heading { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 4rem; } .residential-projects__grid { grid-template-columns: 1fr; gap: 2rem; } .residential-project-card__image { height: 36rem; } .residential-project-card__body { padding: 2rem; } .residential-project-card__actions { flex-direction: column; } .residential-project-card__view, .residential-project-card__enquiry { width: 100%; } } /* ===================================================== ENQUIRY MODAL ===================================================== */ .enquiry-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .4s ease, visibility .4s ease; } .enquiry-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; } /* ===================================================== BACKDROP ===================================================== */ .enquiry-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); backdrop-filter: blur(.8rem); } /* ===================================================== MODAL BOX ===================================================== */ .enquiry-modal__box { position: relative; z-index: 2; width: min(100%, 62rem); max-height: 90vh; overflow-y: auto; padding: 4.5rem; background: rgb(36, 36, 36); border: .1rem solid rgba(255, 255, 255, .1); box-shadow: 0 3rem 8rem rgba(0, 0, 0, .5); transform: translateY(4rem) scale(.96); transition: transform .5s cubic-bezier(.16, 1, .3, 1); } .enquiry-modal.is-open .enquiry-modal__box { transform: translateY(0) scale(1); } /* ===================================================== CLOSE ===================================================== */ .enquiry-modal__close { position: absolute; top: 2rem; right: 2rem; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border: .1rem solid rgba(255, 255, 255, .15); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; } .enquiry-modal__close:hover { background: var(--gold); color: #111; transform: rotate(90deg); } .enquiry-modal__close .material-symbols-outlined { font-size: 2rem; } /* ===================================================== HEADING ===================================================== */ .enquiry-modal__heading { max-width: 48rem; margin-bottom: 3.5rem; } .enquiry-modal__heading h2 { margin: 1rem 0 1.5rem; font-family: var(--font-heading); font-size: clamp(3rem, 4vw, 4rem); font-weight: 800; line-height: 1; color: #fff; } .enquiry-modal__heading h2 span { color: var(--gold); } .enquiry-modal__heading > p:last-child { margin: 0; font-size: 1.5rem; line-height: 1.6; color: #777; } /* ===================================================== FORM ===================================================== */ .enquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; } .enquiry-form__field { display: flex; flex-direction: column; gap: .8rem; } .enquiry-form__field--full { grid-column: 1 / -1; } .enquiry-form__field label { font-size: 1.1rem; font-weight: 600; letter-spacing: .08rem; color: #777; } /* ===================================================== INPUT / SELECT / TEXTAREA ===================================================== */ .enquiry-form__field input, .enquiry-form__field select, .enquiry-form__field textarea { width: 100%; padding: 1.4rem 1.5rem; border: .1rem solid rgba(255, 255, 255, .12); outline: none; border-radius: 0; background: #191919; color: #fff; font-size: 14px; font-weight: 400; transition: border-color .3s ease, background .3s ease; } /* ===================================================== PROJECT SELECT - FIX ===================================================== */ .enquiry-form__field select { width: 100%; height: 4.7rem; padding: 0 1.5rem; border: .1rem solid rgba(255, 255, 255, .12); border-radius: 0; outline: none; background-color: #191919 !important; color: #ffffff !important; font-size: 14px; font-weight: 400; cursor: pointer; /* Native browser dropdown */ appearance: auto; -webkit-appearance: auto; /* Force dark native controls */ color-scheme: dark; opacity: 1; } /* Placeholder */ .enquiry-form__field select:required:invalid { color: #777 !important; } /* Selected project */ .enquiry-form__field select:valid { color: #fff !important; } /* Dropdown */ .enquiry-form__field select option { background-color: #191919 !important; color: #fff !important; font-size: 14px; } /* Disabled placeholder */ .enquiry-form__field select option[value=""] { color: #777 !important; } /* ===================================================== FOCUS ===================================================== */ .enquiry-form__field input:focus, .enquiry-form__field select:focus, .enquiry-form__field textarea:focus { border-color: var(--gold); background: #1d1d1d; } /* ===================================================== TEXTAREA ===================================================== */ .enquiry-form__field textarea { min-height: 11rem; resize: vertical; } /* ===================================================== FOOTER / SUBMIT ===================================================== */ .enquiry-form__footer { margin-top: .5rem; } .enquiry-form__submit { min-height: 5.2rem; width: 100%; padding: 0 1.8rem 0 2.2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border: 0; background: var(--gold); color: #111; font-size: 14px; font-weight: 700; cursor: pointer; transition: gap .3s ease, background .3s ease; } .enquiry-form__submit:hover { gap: 2.8rem; background: #fff; } .enquiry-form__submit .material-symbols-outlined { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #111; color: var(--gold); font-size: 1.8rem; } .enquiry-form__status { min-height: 2rem; margin: 1rem 0 0; font-size: 14px; text-align: center; color: #888; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .enquiry-modal { padding: 1.5rem; } .enquiry-modal__box { padding: 3.5rem 2rem 2.5rem; max-height: 92vh; } .enquiry-modal__heading { margin-bottom: 2.5rem; } .enquiry-modal__heading h2 { font-size: 3rem; } .enquiry-form { grid-template-columns: 1fr; gap: 1.8rem; } .enquiry-form__field--full { grid-column: auto; } .enquiry-form__field select { height: 4.7rem; } } /* PROJECT DETAIL PAGE--------------------------------------------------------------------------------------------------------------------------- */ /* ===================================================== PROJECT BANNER ===================================================== */ .project-banner { position: relative; min-height: 45rem; display: flex; align-items: center; overflow: hidden; background: #050505; } .project-banner__image { position: absolute; inset: 0; } .project-banner__image img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.05); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); } .project-banner:hover .project-banner__image img { transform: scale(1); } .project-banner__overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .58) 55%, rgba(0, 0, 0, .35) 100% ); } .project-banner__container { position: relative; z-index: 2; } .project-banner__content { max-width: 65rem; padding: 8rem 0; animation: projectBannerContent 1s cubic-bezier(.16, 1, .3, 1) both; } .project-banner__title { max-width: 70rem; margin: 1.5rem 0 2rem; font-family: var(--font-heading); font-size: clamp(4rem, 5vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.1rem; color: #fff; } .project-banner__text { max-width: 55rem; margin: 0; line-height: 1.7; color: rgba(255, 255, 255, .65); } @keyframes projectBannerContent { from { opacity: 0; transform: translateY(4rem); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== PROJECT INTRO ===================================================== */ .project-intro { padding: 11rem 0; background: #050505; } .project-intro__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; } .project-intro__heading h2 { max-width: 55rem; margin: 1.5rem 0 0; font-family: var(--font-heading); font-size: clamp(3rem, 4vw, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.08rem; color: #fff; } .project-intro__heading h2 span, .project-showcase__content h2 span { color: var(--gold); } .project-intro__description { line-height: 1.75; color: #707070; } /* ===================================================== PROJECT INFO ===================================================== */ .project-info { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; border-top: .1rem solid rgba(255, 255, 255, .12); border-bottom: .1rem solid rgba(255, 255, 255, .12); background: #211f1f; } .project-info__item { padding: 2rem 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; border-right: .1rem solid rgba(255, 255, 255, .12); } .project-info__item:last-child { border-right: 0; } .project-info__item span { font-size: 14px; font-weight: 600; letter-spacing: .1rem; color: #8d8d8d; } .project-info__item strong { font-family: var(--font-heading); font-size: clamp(16px, 1.3vw, 1.8rem); font-weight: 700; line-height: 1.4; color: #fff; } /* ===================================================== PROJECT SHOWCASE ===================================================== */ .project-showcase { padding: 5rem 0 12rem; background: #050505; } .project-showcase__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8rem; align-items: center; } .project-showcase__image { position: relative; overflow: hidden; aspect-ratio: 1.25 / 1; } .project-showcase__image img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.08); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); } .project-showcase__image:hover img { transform: scale(1); } .project-showcase__content { max-width: 48rem; } .project-showcase__content h2 { margin: 1.5rem 0 2.5rem; font-family: var(--font-heading); font-size: clamp(3rem, 3.5rem, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.08rem; color: #fff; } .project-showcase__content p:not(.section-eyebrow) { margin: 0 0 2rem; line-height: 1.75; color: #707070; } .project-showcase__button { min-height: 5rem; margin-top: 1.5rem; padding: 0 1.5rem 0 2rem; display: inline-flex; align-items: center; gap: 2rem; background: var(--gold); color: #111; font-size: 14px; font-weight: 700; transition: gap .3s ease, background .3s ease; } .project-showcase__button:hover { gap: 2.8rem; background: #fff; } .project-showcase__button .material-symbols-outlined { width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #111; color: var(--gold); } /* ===================================================== REVERSE SHOWCASE ===================================================== */ .project-showcase--reverse { padding-top: 0; } .project-showcase--reverse .project-showcase__grid { grid-template-columns: .85fr 1.15fr; } .project-showcase--reverse .project-showcase__content { order: -1; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .project-banner { min-height: 42rem; } .project-banner__content { padding: 7rem 0; } .project-intro { padding: 7rem 0; } .project-intro__heading { grid-template-columns: 1fr; gap: 2.5rem; } .project-intro__heading h2 { font-size: clamp(2.8rem, 9vw, 4rem); } .project-intro__description { margin: 0; max-width: none; } .project-info { margin-top: 5rem; grid-template-columns: 1fr 1fr; } .project-info__item { min-height: 11rem; padding: 2rem 1.5rem; } .project-info__item:nth-child(2) { border-right: 0; } .project-info__item:nth-child(-n + 2) { border-bottom: .1rem solid rgba(255, 255, 255, .12); } .project-showcase { padding: 2rem 0 7rem; } .project-showcase__grid, .project-showcase--reverse .project-showcase__grid { grid-template-columns: 1fr; gap: 4rem; } .project-showcase--reverse .project-showcase__content { order: 0; } } /* ===================================================== PROJECT AMENITIES ===================================================== */ .project-amenities { position: relative; overflow: hidden; background: linear-gradient(180deg, #212121 0%, #000000 100%); border-radius: 10rem 10rem 0 0; } /* ===================================================== HEADING ===================================================== */ .project-amenities__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: end; margin-bottom: 7rem; } .project-amenities__heading h2 { max-width: 55rem; margin: 1.5rem 0 0; font-family: var(--font-heading); font-size: clamp(3rem, 4rem, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.08rem; color: #fff; } .project-amenities__heading h2 span { color: var(--gold); } .project-amenities__heading > p { max-width: 48rem; margin: 0 0 1rem auto; line-height: 1.75; text-align: right; color: #707070; } /* ===================================================== GRID ===================================================== */ .project-amenities__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: .1rem solid rgba(255, 255, 255, .1); border-left: .1rem solid rgba(255, 255, 255, .1); } /* ===================================================== AMENITY CARD ===================================================== */ .project-amenity { position: relative; min-height: 28rem; padding: 3.5rem; overflow: hidden; border-right: .1rem solid rgba(255, 255, 255, .1); border-bottom: .1rem solid rgba(255, 255, 255, .1); background: #0a0a0a; transition: background .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1); } .project-amenity:hover { background: #222; transform: translateY(-.6rem); } /* ===================================================== NUMBER ===================================================== */ .project-amenity__number { position: absolute; top: 2.5rem; right: 3rem; font-family: var(--font-heading); font-size: 14px; font-weight: 600; letter-spacing: .08rem; color: #777; transition: color .3s ease; } .project-amenity:hover .project-amenity__number { color: var(--gold); } /* ===================================================== ICON ===================================================== */ .project-amenity__icon { width: 5.5rem; height: 5.5rem; margin-bottom: 3.5rem; display: flex; align-items: center; justify-content: center; border: .1rem solid rgba(255, 255, 255, .12); border-radius: 50%; color: var(--gold); transition: background .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1); background: #282828; } .project-amenity:hover .project-amenity__icon { background: var(--gold); color: #111; transform: rotate(8deg) scale(1.08); } .project-amenity__icon .material-symbols-outlined { font-size: 2.5rem; } /* ===================================================== TITLE ===================================================== */ .project-amenity h3 { margin: 0 0 14px; font-family: var(--font-heading); font-size: clamp(18px, 1.5vw, 2rem); font-weight: 700; line-height: 1.3; color: #fff; } /* ===================================================== TEXT ===================================================== */ .project-amenity p { max-width: 32rem; margin: 0; font-family: var(--font-mulish); font-size: clamp(15px, 1.1vw, 1.8rem); line-height: 1.7; color: #888; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 70rem) { .project-amenities__heading { gap: 4rem; } .project-amenities__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 48rem) { .project-amenities__heading { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 5rem; } .project-amenities__heading > p { margin: 0; text-align: left; } .project-amenities__grid { grid-template-columns: 1fr; } .project-amenity { min-height: 23rem; padding: 2.5rem; } .project-amenity__icon { margin-bottom: 2.5rem; } } /* ===================================================== PROJECT GALLERY ===================================================== */ .project-gallery { position: relative; margin-bottom: 10rem; overflow: hidden; background: #050505; } /* ===================================================== HEADING ===================================================== */ .project-gallery__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: end; margin-bottom: 6rem; } .project-gallery__heading h2 { margin: 1.5rem 0 0; font-size: clamp(3rem, 4vw, 5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.08rem; color: #fff; } .project-gallery__heading h2 span { color: var(--gold); } .project-gallery__heading > p { max-width: 48rem; margin: 0 0 1rem auto; font-family: var(--font-mulish); font-size: clamp(1.5rem, 1.3vw, 1.8rem); line-height: 1.75; text-align: right; color: #707070; } /* ===================================================== CONTINUOUS GALLERY ===================================================== */ .project-gallery__slider { width: 100%; overflow: visible; } .project-gallery__slider .swiper-wrapper { transition-timing-function: linear !important; } .project-gallery__slide { width: min(70rem, 62vw); flex-shrink: 0; } /* ===================================================== IMAGE ===================================================== */ .project-gallery__item { position: relative; display: block; width: 100%; aspect-ratio: 1.5 / 2; padding: 0; overflow: hidden; border: 0; background: #111; cursor: zoom-in; } .project-gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 55%, rgba(0, 0, 0, .45) ); opacity: 0; transition: opacity .4s ease; } .project-gallery__item img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.03); transition: transform 1s cubic-bezier(.16, 1, .3, 1); } .project-gallery__item:hover img { transform: scale(1); } .project-gallery__item:hover::after { opacity: 1; } /* ===================================================== ZOOM ICON ===================================================== */ .project-gallery__zoom { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: #111; opacity: 0; transform: scale(.7); transition: opacity .4s ease, transform .4s cubic-bezier(.16, 1, .3, 1); } .project-gallery__item:hover .project-gallery__zoom { opacity: 1; transform: scale(1); } .project-gallery__zoom .material-symbols-outlined { font-size: 2rem; } /* ===================================================== LIGHTBOX ===================================================== */ .project-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 4rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .4s ease, visibility .4s ease; } .project-lightbox.is-open { visibility: visible; opacity: 1; pointer-events: auto; } /* ===================================================== BACKDROP ===================================================== */ .project-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .94); backdrop-filter: blur(1rem); } /* ===================================================== CONTENT ===================================================== */ .project-lightbox__content { position: relative; z-index: 2; width: min(120rem, 90vw); height: min(75rem, 85vh); display: flex; align-items: center; justify-content: center; } /* ===================================================== IMAGE ===================================================== */ .project-lightbox__image { max-width: 100%; max-height: 100%; display: block; object-fit: contain; user-select: none; } /* ===================================================== CLOSE ===================================================== */ .project-lightbox__close { position: absolute; top: -2rem; right: -2rem; z-index: 5; width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; border: .1rem solid rgba(255, 255, 255, .2); border-radius: 50%; background: #111; color: #fff; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; } .project-lightbox__close:hover { background: var(--gold); color: #111; transform: rotate(90deg); } .project-lightbox__close .material-symbols-outlined { font-size: 2rem; } /* ===================================================== PREV / NEXT ===================================================== */ .project-lightbox__prev, .project-lightbox__next { position: absolute; top: 50%; z-index: 5; width: 5rem; height: 5rem; display: flex; align-items: center; justify-content: center; border: .1rem solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(20, 20, 20, .8); color: #fff; cursor: pointer; transform: translateY(-50%); transition: background .3s ease, color .3s ease, transform .3s ease; } .project-lightbox__prev { left: -7rem; } .project-lightbox__next { right: -7rem; } .project-lightbox__prev:hover, .project-lightbox__next:hover { background: var(--gold); color: #111; } .project-lightbox__prev:hover { transform: translateY(-50%) translateX(-.4rem); } .project-lightbox__next:hover { transform: translateY(-50%) translateX(.4rem); } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .project-gallery__heading { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; } .project-gallery__heading h2 { font-size: clamp(2.8rem, 9vw, 4rem); } .project-gallery__heading > p { margin: 0; text-align: left; } .project-gallery__slide { width: 82vw; } .project-gallery__zoom { width: 4rem; height: 4rem; right: 1.5rem; bottom: 1.5rem; opacity: 1; transform: scale(1); } .project-lightbox { padding: 2rem; } .project-lightbox__content { width: 100%; height: 80vh; } .project-lightbox__close { top: -1rem; right: 0; } .project-lightbox__prev, .project-lightbox__next { top: auto; bottom: -6rem; width: 4.5rem; height: 4.5rem; transform: none; } .project-lightbox__prev { left: calc(50% - 5.5rem); } .project-lightbox__next { right: calc(50% - 5.5rem); } .project-lightbox__prev:hover, .project-lightbox__next:hover { transform: none; } } /* ABOUT US PAGE------------------------------------------------------------------------------------------------------ */ /* ===================================================== ABOUT PAGE ===================================================== */ .about-page { position: relative; overflow: hidden; background: #050505; color: #fff; } /* ===================================================== ABOUT INTRO ===================================================== */ .about-intro { position: relative; padding: 14rem 0 12rem; } .about-intro__container { display: grid; grid-template-columns: 1fr 1fr; gap: 10rem; align-items: center; } .about-intro__heading h1 { max-width: 70rem; margin: 1.5rem 0 0; font-size: clamp(3rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.15rem; } .about-intro__heading h1 span { display: block; color: var(--gold); } .about-intro__content { max-width: 58rem; margin-left: auto; } .about-intro__content p { margin: 0 0 2.5rem; font-size: clamp(16px, 1.3vw, 1.8rem); line-height: 1.8; color: #858585; } .about-intro__content p:last-child { margin-bottom: 0; } .about-intro__content strong { color: #fff; font-weight: 600; } /* ===================================================== KEY LOCATIONS ===================================================== */ .about-locations { position: relative; padding: 12rem 0 14rem; background: linear-gradient(180deg, #212121 0%, #000000 100%); border-radius: 100px 100px 0px 0px; } .about-locations__heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: end; margin-bottom: 7rem; } .about-locations__heading h2 { margin: 1.5rem 0 0; font-size: clamp(3rem, 4.5vw, 4rem); font-weight: 800; letter-spacing: -.12rem; } .about-locations__heading h2 span { display: block; color: var(--gold); } .about-locations__heading > p { max-width: 50rem; margin: 0 0 1rem auto; font-size: clamp(16px, 1.3vw, 1.8rem); line-height: 1.75; text-align: right; color: #707070; } .about-locations__list { border-top: .1rem solid rgba(255, 255, 255, .12); } .about-location { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; padding: 2rem 0; border-bottom: .1rem solid rgba(255, 255, 255, .12); transition: padding .4s ease, background .4s ease; } .about-location span { font-size: 14px; color: #666; } .about-location h3 { margin: 0; font-size: clamp(2rem, 2.5vw, 2.5rem); font-weight: 600; line-height: 1; transition: color .4s ease, transform .4s ease; } .about-location:hover h3 { color: var(--gold); transform: translateX(1rem); } .about-location:hover::after { background: var(--gold); color: #111; transform: rotate(45deg); } .about-locations__description { max-width: 80rem; margin-top: 6rem; } .about-locations__description p { margin: 0; font-size: clamp(16px, 1.4vw, 2rem); line-height: 1.8; color: #777; } /* ===================================================== WHY CHOOSE US ===================================================== */ .about-why { position: relative; padding: 5rem 0; background: var(--dark-2); } .about-why__container { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12rem; align-items: center; } .about-why__heading h2 { margin: 1.5rem 0 0; font-size: clamp(3rem, 4.5vw, 4rem); font-weight: 800; letter-spacing: -.12rem; } .about-why__heading h2 span { display: block; color: var(--gold); } .about-why__content { max-width: 65rem; padding-top: 3rem; } .about-why__content p { margin: 0 0 3rem; font-size: clamp(16px, 1.4vw, 2rem); line-height: 1.8; color: #777; } .about-why__content p:last-child { margin-bottom: 0; } .about-why__content strong { color: #fff; font-weight: 600; } /* ===================================================== CUSTOMERS ===================================================== */ .about-customers { position: relative; } .about-customers__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: center; padding: 8rem; background: #101010; border: .1rem solid rgba(255, 255, 255, .08); margin: 10rem 0; } .about-customers__number { position: relative; } .about-customers__number span { display: block; font-size: clamp(7rem, 10vw, 10rem); font-weight: 800; line-height: .8; letter-spacing: -.5rem; color: var(--gold); } .about-customers__number p { margin: 2rem 0 0; font-size: 14px; font-weight: 700; letter-spacing: .2rem; color: #fff; } .about-customers__content { max-width: 55rem; margin-left: auto; } .about-customers__content p { margin: 0 0 2.5rem; font-size: clamp(1.5rem, 1.3vw, 1.8rem); line-height: 1.8; color: #777; } .about-customers__content p:last-child { margin-bottom: 0; } /* ===================================================== VISION & MISSION ===================================================== */ .about-vision-mission { position: relative; margin-bottom: 8rem; } .about-vision-mission__heading { max-width: 80rem; margin-bottom: 7rem; } .about-vision-mission__heading h2 { margin: 1.5rem 0 0; font-size: clamp(3rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.15rem; } .about-vision-mission__heading h2 span { color: var(--gold); } .about-vision-mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .about-vm-card { position: relative; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: #111; border: .1rem solid rgba(255, 255, 255, .08); transition: transform .5s ease, border-color .5s ease; } .about-vm-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: .2rem; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .about-vm-card:hover { transform: translateY(-1rem); border-color: rgba(255, 255, 255, .18); } .about-vm-card:hover::before { transform: scaleX(1); } .about-vm-card__top { display: flex; align-items: center; justify-content: space-between; } .about-vm-card__top span { font-size: 14px; color: #666; } .about-vm-card__top p { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: .2rem; color: var(--gold); } .about-vm-card__content { max-width: 65rem; margin-top: 3rem; } .about-vm-card__content h3 { margin: 0 0 2rem; font-size: clamp(2.5rem, 3vw, 3rem); font-weight: 700; line-height: 1; } .about-vm-card__content p { margin: 0; font-size: clamp(1.5rem, 1.3vw, 1.8rem); line-height: 1.8; color: #777; } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .about-intro { padding: 9rem 0 8rem; } .about-intro__container { grid-template-columns: 1fr; gap: 5rem; } /* LOCATIONS */ .about-locations { padding: 5rem 0; } .about-locations__heading { grid-template-columns: 1fr; gap: 3rem; margin-bottom: 5rem; } .about-locations__heading > p { margin: 0; text-align: left; } .about-location { grid-template-columns: 4rem 1fr auto; min-height: 8rem; } .about-location h3 { font-size: 1.8rem; } .about-location::after { width: 3.5rem; height: 3.5rem; font-size: 16px; } .about-location:hover { padding: 0; } .about-location:hover h3 { transform: none; } .about-locations__description { margin-top: 4rem; } /* WHY */ .about-why { padding: 9rem 0; } .about-why__container { grid-template-columns: 1fr; gap: 4rem; } .about-why__content { padding-top: 0; } .about-why__content p { font-size: 16px; } /* CUSTOMERS */ .about-customers { padding-bottom: 9rem; } .about-customers__inner { grid-template-columns: 1fr; gap: 5rem; padding: 4rem 2.5rem; } .about-customers__number span { font-size: clamp(6rem, 18vw, 9rem); letter-spacing: -.3rem; } .about-customers__content { margin-left: 0; } .about-customers__content p { font-size: 16px; } /* VISION MISSION */ .about-vision-mission { padding: 9rem 0; } .about-vision-mission__heading { margin-bottom: 5rem; } .about-vision-mission__grid { grid-template-columns: 1fr; } .about-vm-card { min-height: 35rem; padding: 2.5rem; } .about-vm-card__content h3 { font-size: 2.8rem; } .about-vm-card__content p { font-size: 16px; } } /* ===================================================== CONTACT PAGE ===================================================== */ .contact-page { position: relative; background: #050505; color: #fff; overflow: hidden; } /* ===================================================== CONTACT HERO ===================================================== */ .contact-hero { position: relative; padding: 10rem 0 5rem; background: #050505; } .contact-hero__container { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 8rem; } .contact-hero__heading h1 { margin: 1.5rem 0 0; font-size: clamp(3rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.15rem; color: #fff; } .contact-hero__heading h1 span { color: var(--gold); } .contact-hero__intro { max-width: 45rem; margin: 0 0 1rem auto; font-family: var(--font-mulish); font-size: clamp(1.5rem, 1.3vw, 1.8rem); line-height: 1.7; color: #777; } /* ===================================================== CONTACT INFORMATION ===================================================== */ .contact-information { padding: 4rem 0 14rem; background: #050505; } .contact-information__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); } .contact-info-card { position: relative; min-height: 25rem; padding: 3rem; background: #0b0b0b; overflow: hidden; transition: background .4s ease, transform .4s ease; } .contact-info-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: .2rem; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .contact-info-card:hover { background: #101010; } .contact-info-card:hover::before { transform: scaleX(1); } /* ===================================================== CARD TOP ===================================================== */ .contact-info-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7rem; } .contact-info-card__number { font-family: var(--font-mulish); font-size: 1.2rem; color: #555; } .contact-info-card__top > .material-symbols-outlined { width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; color: var(--gold); font-size: 2rem; transition: background .3s ease, color .3s ease, transform .3s ease; } .contact-info-card:hover .contact-info-card__top > .material-symbols-outlined { background: var(--gold); color: #111; transform: rotate(10deg); } /* ===================================================== CARD CONTENT ===================================================== */ .contact-info-card__content { position: relative; z-index: 2; } .contact-info-card__content .section-eyebrow { margin-bottom: 1.5rem; } .contact-info-card__content a { display: inline-flex; align-items: center; gap: .8rem; font-size: clamp(1.8rem, 2vw, 2.5rem); font-weight: 700; line-height: 1.2; color: #fff; text-decoration: none; word-break: break-word; transition: color .3s ease; } .contact-info-card__content a:hover { color: var(--gold); } .contact-info-card__content address { max-width: 42rem; margin: 0; font-family: var(--font-mulish); font-size: 16px; font-style: normal; line-height: 1.7; color: #aaa; } /* ===================================================== MAP CARD ===================================================== */ .contact-info-card--map { background: radial-gradient( circle at 80% 20%, rgba(255, 193, 7, .08), transparent 35% ), #0b0b0b; } .contact-info-card--map .contact-info-card__content a { color: var(--gold); font-size: 1.5rem; } .contact-info-card--map .contact-info-card__content a .material-symbols-outlined { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: #111; font-size: 1.7rem; } /* ===================================================== CONTACT BOTTOM ===================================================== */ .contact-bottom__container { display: grid; grid-template-columns: 1fr .8fr; gap: 12rem; } /* ===================================================== CONTACT FORM ===================================================== */ .contact-form-section h2, .contact-team h2 { margin: 1.5rem 0 5rem; font-size: clamp(3rem, 4vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.08rem; } .contact-form-section h2 span, .contact-team h2 span { color: var(--gold); } .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } .contact-form__field { display: flex; flex-direction: column; gap: .8rem; } .contact-form__field--full { grid-column: 1 / -1; } .contact-form__field label { font-family: var(--font-mulish); font-size: 15px; font-weight: 600; letter-spacing: .08rem; color: #777; } .contact-form__field input, .contact-form__field textarea { width: 100%; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, .12); outline: none; border-radius: 0; background: #111; color: #fff; font-family: var(--font-mulish); font-size: 14px; transition: border-color .3s ease, background .3s ease; } .contact-form__field input { height: 5rem; } .contact-form__field textarea { min-height: 15rem; resize: vertical; } .contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: #555; } .contact-form__field input:focus, .contact-form__field textarea:focus { border-color: var(--gold); background: #151515; } /* ===================================================== SUBMIT BUTTON ===================================================== */ .contact-form__footer { grid-column: 1 / -1; margin-top: .5rem; } .contact-form__submit { width: 100%; min-height: 5.5rem; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; border: 0; background: var(--gold); color: #111; font-family: var(--font-mulish); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .3s ease, padding .3s ease; } .contact-form__submit:hover { background: #fff; padding-left: 2.5rem; } .contact-form__submit .material-symbols-outlined { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #111; color: var(--gold); font-size: 1.8rem; } .contact-form__status { min-height: 2rem; margin: 1rem 0 0; font-family: var(--font-mulish); font-size: 1.2rem; text-align: center; color: #777; } /* ===================================================== TEAM ===================================================== */ .contact-team { padding-top: .5rem; } .contact-team__list { border-top: 1px solid rgba(255, 255, 255, .12); } .contact-team__group { padding: 2.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); } .contact-team__role { margin: 0 0 1.2rem; font-family: var(--font-mulish); font-size: 1.1rem; font-weight: 600; letter-spacing: .1rem; text-transform: uppercase; color: var(--gold); } .contact-team__group h3 { margin: .5rem 0; font-size: 1.8rem; font-weight: 600; line-height: 1.3; color: #fff; transition: color .3s ease; } .contact-team__group:hover h3 { color: var(--gold); } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .contact-hero { padding: 11rem 0 7rem; } .contact-hero__container { grid-template-columns: 1fr; gap: 3rem; } .contact-hero__intro { margin: 0; font-size: 1.4rem; } /* INFORMATION */ .contact-information { padding: 2rem 0 8rem; } .contact-information__grid { grid-template-columns: 1fr; } .contact-info-card { min-height: 22rem; padding: 2rem; } .contact-info-card__top { margin-bottom: 5rem; } .contact-info-card__content a { font-size: 1.8rem; } .contact-info-card__content address { font-size: 1.4rem; } /* SOCIAL */ .contact-social { padding: 8rem 0; } .contact-social__heading { grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 4rem; } .contact-social__heading h2 { font-size: clamp(3rem, 10vw, 4.5rem); } .contact-social__heading > p { margin: 0; text-align: left; font-size: 1.4rem; } .contact-social__link { min-height: 7rem; padding: 0 1rem; } .contact-social__link:hover { padding-left: 1rem; } .contact-social__link > span:first-child { font-size: 2rem; } .contact-social__link .material-symbols-outlined { width: 3.8rem; height: 3.8rem; } /* BOTTOM */ .contact-bottom { padding: 8rem 0; } .contact-bottom__container { grid-template-columns: 1fr; gap: 8rem; } .contact-form { grid-template-columns: 1fr; gap: 1.8rem; } .contact-form__field--full { grid-column: auto; } .contact-form__footer { grid-column: auto; } .contact-form__submit { min-height: 5.2rem; } .contact-team__group { padding: 2rem 0; } .contact-team__group h3 { font-size: 16px; } } /* ===================================================== GOOGLE MAP ===================================================== */ /* ===================================================== GOOGLE MAP ===================================================== */ .contact__map { margin-top: 8rem; } .contact__map-header { margin-bottom: 3rem; } .contact__map-header h2 { margin: 1rem 0 0; font-size: clamp(3rem, 4vw, 4rem); font-weight: 800; line-height: 1.05; color: #fff; } .contact__map-header h2 span { color: var(--gold); } .contact__map-frame { width: 100%; height: 50rem; overflow: hidden; background: #111; } .contact__map-frame iframe { width: 100%; height: 100%; display: block; border: 0; } .contact__map-link { margin-top: 2rem; display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-mulish); font-size: 14px; font-weight: 700; color: var(--gold); text-decoration: none; } .contact__map-link .material-symbols-outlined { width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gold); color: #111; font-size: 1.8rem; transition: transform .3s ease; } .contact__map-link:hover .material-symbols-outlined { transform: translate(.3rem, -.3rem); } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 48rem) { .contact__map { margin-top: 6rem; } .contact__map-frame { height: 35rem; } }