/* ============================================
   PROFESSIONAL THEME - Corporate Luxury
   ============================================ */

/* Typography - DM Sans + Cormorant Garamond */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    --accent-color: #b8860b;
    --primary-color: #0f172a;
    --secondary-color: #f8fafc;
    --gold-light: #d4a84b;
    --gold-dark: #9a7209;
    --charcoal: #1e293b;
    --Playfair: "Cormorant Garamond", "Georgia", serif;
    --pro-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --pro-heading: "Cormorant Garamond", "Georgia", serif;
    --pro-nav: #0f172a;
    --pro-nav-light: #1e293b;
    --pro-accent: #b8860b;
    --pro-accent-light: #d4a84b;
    --pro-accent-muted: rgba(184, 134, 11, 0.12);
    --pro-text: #334155;
    --pro-text-muted: #64748b;
    --pro-bg: #f8fafc;
    --pro-card: #ffffff;
    --pro-border: #e2e8f0;
}

/* Base overrides */
body {
    font-family: var(--pro-body) !important;
    color: var(--pro-text) !important;
    background-color: var(--pro-bg) !important;
    font-size: 1rem;
    line-height: 1.65;
}

/* Professional header */
header {
    background: rgba(15, 23, 42, 0.95) !important;
    border-top: 3px solid var(--pro-accent) !important;
    backdrop-filter: blur(12px);
}

header:not(.fixed) {
    background: transparent !important;
}

header .menu a {
    color: #fff !important;
}

header.fixed {
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

header .menu a {
    font-family: var(--pro-body) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

header .menu a:hover {
    color: var(--pro-accent-light) !important;
}

/* Brand logo - cleaner */
.brand_logo {
    padding: 8px 14px !important;
    background: #fff !important;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Hero - professional overlay */
.hero::before {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.75) 70%, rgba(15, 23, 42, 0.9) 100%) !important;
}

/* Mobile - lighter overlay so banner image is more visible */
@media (max-width: 767px) {
    .hero::before {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.75) 85%, rgba(15, 23, 42, 0.9) 100%) !important;
    }
}

.hero-list ul {
    font-size: 1rem !important;
}

.hero-list ul li {
    opacity: 0.95;
}

/* Hero caption stats - refined cards */
.hero-caption .small-icon > div {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 1rem !important;
}

.hero-caption .small-icon i {
    border: none;
}

/* Hero form - professional card */
.hero .bg-dark.bg-opacity-75 {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(184, 134, 11, 0.25) !important;
}

/* Section titles - refined typography */
.section_title h6 {
    font-family: var(--pro-body) !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    color: var(--pro-accent) !important;
}

.section_title h2 {
    font-family: var(--pro-heading) !important;
    font-weight: 600 !important;
    color: var(--pro-nav) !important;
    letter-spacing: -0.02em;
}

.section_title h2::after {
    background: linear-gradient(90deg, var(--pro-accent), var(--pro-accent-light)) !important;
}

/* Dark sections */
.bg-primary, .bg-primary-half, .bg-silhouette {
    background-color: var(--pro-nav) !important;
}

.bg-primary .section_title h2,
.bg-primary-half .section_title h2 {
    color: #fff !important;
}

.bg-primary .section_title h6,
.bg-primary-half .section_title h6 {
    color: var(--pro-accent-light) !important;
}

.text-accent {
    color: var(--pro-accent-light) !important;
}

.bg-primary p,
.bg-primary-half p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Secondary/light background */
.secondary-color,
.bg-secondary {
    background-color: var(--pro-bg) !important;
}

/* Overview section */
#overview {
    background: var(--pro-nav) !important;
}

.home-overview--content p {
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* Highlights / By Numbers - clean cards */
.who-we-are {
    background: var(--pro-bg) !important;
}

.by_numbersBox .inner {
    background: var(--pro-card) !important;
    border: 1px solid var(--pro-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.swiper-slide.swiper-slide-active.by_numbersBox .inner {
    border-color: rgba(184, 134, 11, 0.35) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

.by_numbersBox .by_numbers-num {
    color: var(--pro-accent) !important;
}

/* Architecture section */
.new-wrapper {
    background: var(--pro-card) !important;
}

/* Amenities */
.bg-primary-half {
    background: var(--pro-nav) !important;
}

.facilityBox .inner {
    background: var(--pro-card) !important;
    border: 1px solid var(--pro-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.facilityBox .small-icon small {
    color: var(--pro-accent) !important;
}

.amenities-wrapper {
    background: var(--pro-bg) !important;
}

.amenities-wrapper .section_title p {
    color: var(--pro-text) !important;
}

/* Price list - clean table */
.pricelist-wrapper {
    background: var(--pro-nav) !important;
}

.pricelist-wrapper .table {
    border-radius: 12px;
    overflow: hidden;
    border: none;
}

.pricelist-wrapper .table thead th {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--pro-accent-light) !important;
    font-family: var(--pro-body) !important;
    font-weight: 600;
}

.pricelist-wrapper .table td {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Floor plans */
.floorplan-wrapper {
    background: var(--pro-bg) !important;
}

.fpBox .inner {
    background: var(--pro-card) !important;
    border: 1px solid var(--pro-border) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fpBox .inner:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Gallery */
.gallery-wrapper {
    background: var(--pro-nav) !important;
}

.gallery-wrapper .badge,
.slide-caption {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    font-weight: 500;
}

/* Location */
.location-wrapper {
    background: var(--pro-card) !important;
}

.connectivity {
    background: var(--pro-card) !important;
}

.accordion-button {
    font-family: var(--pro-body) !important;
}

.accordion-button:not(.collapsed) {
    background: var(--pro-accent-muted) !important;
}

/* Virtual tour */
.virtual-box {
    border-radius: 12px;
}

/* About / Stats */
.about-company {
    background: var(--pro-nav) !important;
}

.intro_numbers .sun-num h5 {
    font-family: var(--pro-heading) !important;
}

.intro_numbers .sun-num p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Buttons - refined */
.cta .button {
    font-family: var(--pro-body) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.cta .button.accent {
    background: linear-gradient(135deg, var(--pro-accent) 0%, var(--pro-accent-light) 100%) !important;
}

.cta .button.reverse {
    background: #fff !important;
}

/* Keep In Touch section - dark background area */
.about-company .keepintouch-form {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.about-company .keepintouch-form .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
}

.about-company .keepintouch-form .form-control:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff !important;
}

.about-company .keepintouch-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.about-company .keepintouch-form .form-control:-webkit-autofill,
.about-company .keepintouch-form .form-control:-webkit-autofill:hover,
.about-company .keepintouch-form .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.3) inset !important;
}

.about-company .keepintouch-form .form-check-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Footer cards */
footer .text-left[style*="background: #1a1a1a"] {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px;
}

/* Mobile footer CTA */
.footer-enquiryBtn {
    background: var(--pro-nav) !important;
}

.footer-enquiryBtn a {
    font-weight: 600 !important;
}

/* Modal */
.modal-content {
    border-radius: 16px;
}

.modal-header .close {
    color: #fff;
}

/* Swiper nav - minimal */
div[class^="swiper-button"] {
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--pro-nav) !important;
}

/* Back to top */
.back_to_top {
    background: var(--pro-nav) !important;
}

/* RERA link color */
a[href*="haryanarera"] {
    color: var(--pro-accent-light) !important;
}

/* Mobile - Prevent header/logo from overlapping content */
@media (max-width: 767px) {
    main {
        padding-top: 60px;
    }
    .brand_logo {
        max-width: 140px;
    }
    .brand_logo img {
        max-height: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 400px) {
    .brand_logo {
        max-width: 120px;
    }
    .brand_logo img {
        max-height: 32px !important;
        height: 32px !important;
    }
}

/* Responsive - Hero banner mobile */
@media (max-width: 767px) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .hero-banner-bg {
        background-position: center center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
    .hero .hero-caption {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        padding: 1.5rem 1rem;
        width: 100%;
    }
    .hero .hero-caption .row.g-4 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
    .hero-caption .small-icon {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .hero-caption .small-icon > div {
        padding: 0.6rem 0.5rem !important;
        gap: 0.5rem !important;
    }
    .hero-caption .small-icon small {
        font-size: 0.7rem !important;
    }
    .hero-caption .small-icon small b {
        font-size: 0.75rem !important;
    }
    .hero-caption .small-icon i svg {
        width: 18px;
        height: 18px;
    }
    .hero-caption .small-icon small .d-block[style*="font-size: 10px"] {
        font-size: 9px !important;
    }
    .hero-enquiry-form .form-control,
    .hero .bg-dark.bg-opacity-75 {
        font-size: 14px;
    }
    .hero .bg-dark.bg-opacity-75 {
        padding: 1rem !important;
    }
    .hero-enquiry-form .form-control:focus {
        scroll-margin-top: 70px;
    }
    .hero-enquiry-form .form-check-label {
        font-size: 10px !important;
    }
}

@media (max-width: 575px) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
    }
    .hero .hero-caption {
        padding: 1rem 0.75rem 1rem;
    }
    .hero-caption .col-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .hero .hero-caption .row.mt-4 {
        margin-top: 1rem !important;
    }
    .hero-caption .small-icon small b {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 400px) {
    .hero-caption .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}