/* ============================================================
   color-theme.css
   ------------------------------------------------------------
   Emaar Serenity Hills — OBEROI REALTY Color Theme
   
   PURPOSE:
   This file ONLY changes colors. It does NOT touch any layout,
   spacing, sizing, or positioning. Include it AFTER your main
   stylesheet so it overrides the original colors.
   
   PALETTE INSPIRED BY: oberoirealty.com
   - Deep charcoal black + warm champagne/beige gold
   - Classic luxury real-estate brand styling
   
   HOW TO CHANGE COLORS LATER:
   Edit the variables in the :root block below.
   The whole site recolors automatically.
   ============================================================ */


/* ---------- 1. BRAND COLOR VARIABLES ---------- */
/* Oberoi Realty inspired palette */

:root {
    --brand-primary:       #0f172a;  /* deep charcoal — header, footer, headings */
    --brand-primary-dark:  #0d0d0d;  /* darker shade for hover on primary */
    --brand-accent:        #c9a96e;  /* warm champagne/beige gold — buttons, accents */
    --brand-accent-dark:   #a8895a;  /* darker gold for accent hover */
    --brand-light-bg:      #f5f1ea;  /* cream/off-white section background */
    --brand-text-on-dark:  #ffffff;  /* text on dark backgrounds */
    --brand-text-on-light: #FAFAFA;  /* text on light backgrounds */
    --brand-text-muted:    #666666;  /* body paragraph text */
}


/* ---------- 2. BACKGROUND COLOR OVERRIDES ---------- */

/* Primary brand background — Highlights section, table header */
.bg-primary,
.table-pricing thead th.bg-primary {
    background-color: var(--brand-primary) !important;
}

/* Light section background — Price list, schedule */
.bg-light {
    background-color: var(--brand-light-bg) !important;
}

/* Gradient sections (FAQ band, "Unlock the Door" strip) */
.bg-grad {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)) !important;
    color: var(--brand-text-on-dark) !important;
}

.bg-grad h2,
.bg-grad p {
    color: var(--brand-text-on-dark) !important;
}

.bg-grad .text-primary,
.bg-grad h4.text-primary {
    color: var(--brand-accent) !important;
}


/* ---------- 3. TEXT COLOR OVERRIDES ---------- */

/* Accent (gold) text */
.text-primary,
.heading h4.text-primary,
.locBox .text-primary,
.locBox .text-primary b {
    color: var(--brand-accent) !important;
}

/* Text inside dark sections should stay readable */
.bg-primary,
.bg-primary p,
.bg-primary h2,
.bg-primary h3 {
    color: var(--brand-text-on-dark) !important;
}

.bg-primary .text-dark {
    color: var(--brand-accent) !important;
}

/* Highlight number counters (01, 02, 03 ...) — gold accent */
.highlightBox .count {
    color: var(--brand-accent) !important;
}

/* Section heading accent bar (if your .heading uses ::after) */
.heading h2:not(.bg-none)::after,
.heading h3:not(.bg-none)::after {
    background-color: var(--brand-accent) !important;
}


/* ---------- 4. BUTTON OVERRIDES ---------- */
/* All CTAs use the gold accent — Oberoi style */

.button,
.visitBtn a,
.get-in-touch a,
.footer-enquiryBtn a {
    background-color: var(--brand-accent) !important;
    color: var(--brand-text-on-dark) !important;
    border-color: var(--brand-accent) !important;
}

.button:hover,
.visitBtn a:hover,
.get-in-touch a:hover,
.footer-enquiryBtn a:hover {
    background-color: var(--brand-accent-dark) !important;
    border-color: var(--brand-accent-dark) !important;
    color: var(--brand-text-on-dark) !important;
}


/* ---------- 5. HEADER & FOOTER ---------- */

.header {
    background-color: var(--brand-primary) !important;
}

.header .navi ul li a {
    color: var(--brand-text-on-dark) !important;
}

.header .navi ul li a:hover {
    color: var(--brand-accent) !important;
}

.footer-area {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-on-dark) !important;
}

.footer-area a {
    color: var(--brand-text-on-dark) !important;
}

.footer-area a:hover {
    color: var(--brand-accent) !important;
}


/* ---------- 6. FORM ACCENTS ---------- */

#enquiryForm .form-control:focus,
#contactform  .form-control:focus,
#modal_form   .form-control:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 0.15rem rgba(201, 169, 110, 0.25) !important;
}

.fixed-form .slide_form_btn1 {
    background-color: var(--brand-accent) !important;
    color: var(--brand-text-on-dark) !important;
}

.form-group label {
    color: var(--brand-text-on-light) !important;
}


/* ---------- 7. ACCORDION (FAQ) ACTIVE STATE ---------- */

.accordion-button:not(.collapsed),
.accordion-header[aria-expanded="true"] .accordion-button {
    color: var(--brand-accent) !important;
}

.accordion-header .accordion-button {
    color: var(--brand-primary) !important;
}


/* ---------- 8. ICONS & MISC ACCENTS ---------- */

.scrollDown i,
.fa-map-marker-alt {
    color: var(--brand-accent) !important;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--brand-accent) !important;
}

.counter-window .coun-data .title {
    color: var(--brand-accent) !important;
}

.counter-window .coun-data div span {
    color: var(--brand-primary) !important;
}


/* ---------- 9. ARTISTIC IMPRESSION BADGE ---------- */

.artistic {
    background-color: var(--brand-primary) !important;
    color: var(--brand-accent) !important;
}


/* ============================================================
   END OF FILE
   Layout, fonts, and spacing remain exactly as defined in
   your original stylesheet.
   ============================================================ */