/* =============================================
           CSS VARIABLES
        ============================================= */
        :root {
            --gold:        #C9A84C;
            --gold-dark:   #A8872D;
            --navy:        #1A1A2E;
            --dark:        #0D0D1A;
            --cream:       #F8F5F0;
            --white:       #FFFFFF;
            --muted:       #6B7280;
            --font-serif:  'Playfair Display', Georgia, serif;
            --font-sans:   'Raleway', sans-serif;
            --ease:        0.35s cubic-bezier(.4,0,.2,1);
            --shadow-sm:   0 4px 20px rgba(0,0,0,.07);
            --shadow-md:   0 10px 40px rgba(0,0,0,.11);
            --shadow-lg:   0 22px 60px rgba(0,0,0,.18);
        }

        /* =============================================
           RESET / BASE
        ============================================= */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-sans);
            color: var(--navy);
            overflow-x: hidden;
            background: var(--white);
        }

        h1, h2, h3, h4, h5 { font-family: var(--font-serif); }

        img { display: block; max-width: 100%; }

        a { text-decoration: none; }

        /* =============================================
           UTILITIES
        ============================================= */
        .sec-pad    { padding: 96px 0; }

        .label-tag {
            display: inline-block;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 14px;
            font-family: var(--font-sans);
        }

        .sec-title {
            font-size: clamp(1.9rem, 3.5vw, 2.75rem);
            font-weight: 700;
            color: var(--navy);
            line-height: 1.22;
            margin-bottom: 14px;
        }

        .sec-sub {
            font-size: 1rem;
            color: var(--muted);
            max-width: 560px;
            font-family: var(--font-sans);
        }

        .gold-rule {
            width: 52px; height: 3px;
            background: var(--gold);
            margin: 18px auto 32px;
        }
        .gold-rule.left { margin-left: 0; }

        /* --- Buttons --- */
        .btn-gold {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--gold);
            color: var(--white);
            border: 2px solid var(--gold);
            padding: 13px 34px;
            font-family: var(--font-sans);
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border-radius: 0;
            transition: background var(--ease), color var(--ease);
        }
        .btn-gold:hover { background: transparent; color: var(--gold); }

        .btn-outline-white {
            display: inline-flex; align-items: center; gap: 8px;
            background: transparent;
            color: var(--white);
            border: 2px solid var(--white);
            padding: 13px 34px;
            font-family: var(--font-sans);
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border-radius: 0;
            transition: background var(--ease), color var(--ease);
        }
        .btn-outline-white:hover { background: var(--white); color: var(--navy); }

        .btn-dark-custom {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--navy);
            color: var(--white);
            border: 2px solid var(--navy);
            padding: 12px 26px;
            font-family: var(--font-sans);
            font-size: .79rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border-radius: 0;
            transition: background var(--ease), border-color var(--ease);
        }
        .btn-dark-custom:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

        /* =============================================
           NAVIGATION
        ============================================= */
        #mainNav {
            background: rgba(13,13,26,.96) !important;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            padding: 2px 0;
            transition: padding var(--ease), box-shadow var(--ease);
        }
        #mainNav.scrolled {
            padding: 11px 0;
            box-shadow: 0 4px 30px rgba(0,0,0,.35);
        }

        .navbar-brand-text {
            font-family: var(--font-serif);
            font-size: 1.55rem;
            font-weight: 700;
            color: var(--white);
            letter-spacing: .5px;
        }
        .navbar-brand-text em { font-style: normal; color: var(--gold); }

        .nav-link {
            color: rgba(255,255,255,.82) !important;
            font-family: var(--font-sans);
            font-weight: 500;
            font-size: .85rem;
            letter-spacing: .5px;
            text-transform: uppercase;
            padding: 6px 12px !important;
            position: relative;
            transition: color var(--ease);
        }
        .nav-link::after {
            content: '';
            position: absolute; bottom: 0; left: 12px;
            width: 0; height: 2px;
            background: var(--gold);
            transition: width var(--ease);
        }
        .nav-link:hover,
        .nav-link.active { color: var(--gold) !important; }
        .nav-link:hover::after,
        .nav-link.active::after { width: calc(100% - 24px); }

        .nav-cta-btn {
            background: var(--gold) !important;
            color: var(--white) !important;
            padding: 8px 22px !important;
            margin-left: 8px;
            font-weight: 700 !important;
            transition: background var(--ease) !important;
        }
        .nav-cta-btn::after { display: none !important; }
        .nav-cta-btn:hover { background: var(--gold-dark) !important; color: var(--white) !important; }

        .navbar-toggler { border-color: rgba(255,255,255,.25); }
        .navbar-toggler-icon { filter: invert(1); }

        /* =============================================
           HERO BANNER
        ============================================= */
        #home { display: block; }
        #carouselExampleFade img { display: block; width: 100%; }

        /* =============================================
           ABOUT SECTION
        ============================================= */
        .about-img-wrap {
            position: relative;
            overflow: hidden;
        }
        .about-img-wrap img {
            width: 100%;
            height: 520px;
            object-fit: cover;
            transition: transform .55s ease;
        }
        .about-img-wrap:hover img { transform: scale(1.05); }

        .about-badge {
            position: absolute;
            bottom: 28px;
            left: -6px;
            background: var(--gold);
            color: var(--white);
            padding: 22px 30px;
            text-align: center;
            box-shadow: 0 8px 30px rgba(0,0,0,.24);
        }
        .about-badge .big {
            font-family: var(--font-serif);
            font-size: 2.6rem;
            font-weight: 700;
            line-height: 1;
        }
        .about-badge .small {
            font-family: var(--font-sans);
            font-size: .7rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: .92;
        }

        .about-text { padding-left: 44px; }

        .check-list { list-style: none; padding: 0; margin: 18px 0 28px; }
        .check-list li {
            display: flex; align-items: flex-start; gap: 12px;
            font-size: .93rem;
            color: var(--navy);
            margin-bottom: 11px;
            line-height: 1.5;
            font-family: var(--font-sans);
        }
        .check-list li i { color: var(--gold); font-size: .95rem; margin-top: 2px; flex-shrink: 0; }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 28px 0 36px;
        }
        .stat-box {
            background: var(--cream);
            padding: 24px 16px;
            text-align: center;
            border-bottom: 3px solid var(--gold);
            transition: background var(--ease), transform var(--ease);
            cursor: default;
        }
        .stat-box:hover { background: var(--gold); transform: translateY(-5px); }
        .stat-box:hover .s-num,
        .stat-box:hover .s-lbl { color: var(--white); }
        .s-num {
            font-family: var(--font-serif);
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--gold);
            display: block;
            transition: color var(--ease);
        }
        .s-lbl {
            font-family: var(--font-sans);
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--muted);
            margin-top: 4px;
            transition: color var(--ease);
        }

        /* =============================================
           FEATURED PROJECTS
        ============================================= */
        .projects-section { background: var(--cream); }

        .proj-card {
            background: var(--white);
            box-shadow: var(--shadow-md);
            transition: transform var(--ease), box-shadow var(--ease);
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .proj-card:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); }

        .proj-img-wrap {
            overflow: hidden;
            height: 255px;
            position: relative;
            flex-shrink: 0;
        }
        .proj-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform .55s ease;
        }
        .proj-card:hover .proj-img-wrap img { transform: scale(1.1); }

        .proj-tag {
            position: absolute; top: 18px; left: 18px;
            background: var(--gold);
            color: var(--white);
            font-family: var(--font-sans);
            font-size: .66rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 5px 14px;
        }

        .proj-body {
            padding: 28px 30px 30px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .proj-loc {
            font-family: var(--font-sans);
            font-size: .76rem;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 9px;
            display: flex; align-items: center; gap: 6px;
        }

        .proj-name {
            font-size: 1.42rem;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 11px;
            line-height: 1.25;
        }

        .proj-desc {
            font-family: var(--font-sans);
            font-size: .9rem;
            color: var(--muted);
            line-height: 1.75;
            flex: 1;
            margin-bottom: 24px;
        }

        /* Project detail info */
        .proj-size {
            font-family: var(--font-sans);
            font-size: .85rem;
            color: var(--navy);
            margin-bottom: 14px;
        }
        .proj-size strong { color: var(--navy); }

        .proj-divider {
            border: none;
            border-top: 1px solid rgba(0,0,0,.1);
            margin: 14px 0 18px;
        }

        .proj-specs {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 10px;
            margin-bottom: 22px;
        }

        .spec-item {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .spec-item i {
            font-size: .9rem;
            color: var(--gold);
            margin-bottom: 2px;
        }
        .spec-label {
            font-family: var(--font-sans);
            font-size: .72rem;
            color: var(--gold);
            font-weight: 600;
            letter-spacing: .3px;
        }
        .spec-val {
            font-family: var(--font-sans);
            font-size: .88rem;
            color: var(--navy);
            font-weight: 600;
        }

        .proj-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: auto;
            flex-wrap: wrap;
        }

        .proj-price {
            display: inline-block;
            background: var(--navy);
            color: var(--white);
            font-family: var(--font-sans);
            font-size: .8rem;
            font-weight: 700;
            padding: 10px 16px;
            letter-spacing: .5px;
            flex: 1;
            text-align: center;
            white-space: nowrap;
        }

        .btn-know-more {
            display: inline-block;
            background: var(--gold);
            color: var(--white);
            font-family: var(--font-sans);
            font-size: .8rem;
            font-weight: 700;
            padding: 10px 18px;
            letter-spacing: .5px;
            text-align: center;
            transition: background var(--ease);
            white-space: nowrap;
        }
        .btn-know-more:hover {
            background: var(--gold-dark);
            color: var(--white);
        }

        /* =============================================
           WHY CHOOSE VAJRAM
        ============================================= */
        .feat-card {
            padding: 36px 24px;
            text-align: center;
            border: 1px solid rgba(0,0,0,.06);
            height: 100%;
            position: relative;
            overflow: hidden;
            transition: transform var(--ease), box-shadow var(--ease);
            background: var(--white);
        }
        .feat-card::after {
            content: '';
            position: absolute; bottom: 0; left: 0;
            width: 0; height: 3px;
            background: var(--gold);
            transition: width var(--ease);
        }
        .feat-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-md); }
        .feat-card:hover::after { width: 100%; }

        .feat-icon {
            width: 76px; height: 76px;
            border-radius: 50%;
            background: var(--cream);
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 22px;
            transition: background var(--ease);
        }
        .feat-icon i { font-size: 1.85rem; color: var(--gold); transition: color var(--ease); }
        .feat-card:hover .feat-icon { background: var(--gold); }
        .feat-card:hover .feat-icon i { color: var(--white); }

        .feat-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 10px;
        }
        .feat-desc {
            font-family: var(--font-sans);
            font-size: .88rem;
            color: var(--muted);
            line-height: 1.75;
        }

        /* =============================================
           CTA SECTION
        ============================================= */
        .cta-section {
            position: relative;
            padding: 120px 0;
            text-align: center;
            overflow: hidden;
        }
        .cta-bg {
            position: absolute; inset: 0;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }
        .cta-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(160deg, rgba(13,13,26,.87) 0%, rgba(13,13,26,.72) 100%);
        }
        .cta-inner { position: relative; z-index: 2; }
        .cta-title {
            font-size: clamp(1.8rem, 4vw, 3.1rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: 18px;
        }
        .cta-sub {
            font-family: var(--font-sans);
            font-size: 1.1rem;
            color: rgba(255,255,255,.85);
            font-weight: 300;
            margin-bottom: 42px;
        }

        /* =============================================
           DISCLAIMER
        ============================================= */
        .disclaimer-sec {
            background: #f0ede8;
            padding: 26px 0;
            border-top: 1px solid rgba(0,0,0,.09);
        }
        .disclaimer-sec p {
            font-family: var(--font-sans);
            font-size: .8rem;
            color: #777;
            line-height: 1.75;
            margin: 0;
        }

        /* =============================================
           FOOTER
        ============================================= */
        .footer { background: var(--dark); padding: 82px 0 0; color: rgba(255,255,255,.7); }

        .footer-logo-text {
            font-family: var(--font-serif);
            font-size: 1.7rem;
            font-weight: 700;
            color: var(--white);
            display: inline-block;
            margin-bottom: 18px;
        }
        .footer-logo-text em { font-style: normal; color: var(--gold); }

        .footer-desc {
            font-family: var(--font-sans);
            font-size: .88rem;
            line-height: 1.85;
            margin-bottom: 24px;
            color: rgba(255,255,255,.6);
        }

        .footer-h {
            font-family: var(--font-serif);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 24px;
            padding-bottom: 14px;
            position: relative;
        }
        .footer-h::after {
            content: '';
            position: absolute; bottom: 0; left: 0;
            width: 38px; height: 2px;
            background: var(--gold);
        }

        .footer-list { list-style: none; padding: 0; margin: 0; }
        .footer-list li { margin-bottom: 11px; }
        .footer-list a {
            font-family: var(--font-sans);
            color: rgba(255,255,255,.6);
            font-size: .88rem;
            display: inline-flex; align-items: center; gap: 9px;
            transition: color var(--ease), padding-left var(--ease);
        }
        .footer-list a::before {
            content: '\f054';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            font-size: .58rem;
            color: var(--gold);
        }
        .footer-list a:hover { color: var(--gold); padding-left: 6px; }

        .contact-row {
            display: flex; align-items: flex-start; gap: 13px;
            margin-bottom: 17px;
        }
        .contact-row i { color: var(--gold); font-size: .95rem; margin-top: 3px; flex-shrink: 0; }
        .contact-row span {
            font-family: var(--font-sans);
            font-size: .88rem;
            color: rgba(255,255,255,.6);
            line-height: 1.6;
        }

        .socials { display: flex; gap: 10px; margin-top: 26px; }
        .socials a {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1);
            display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,.65);
            font-size: .88rem;
            transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
        }
        .socials a:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--white);
            transform: translateY(-3px);
        }

        .footer-bar {
            background: rgba(0,0,0,.28);
            margin-top: 62px;
            padding: 22px 0;
            border-top: 1px solid rgba(255,255,255,.05);
        }
        .footer-bar p {
            font-family: var(--font-sans);
            font-size: .78rem;
            color: rgba(255,255,255,.38);
            margin: 0;
        }

        /* =============================================
           SCROLL-TO-TOP
        ============================================= */
        #scrollTop {
            position: fixed;
            bottom: 28px; right: 28px;
            width: 46px; height: 46px;
            background: var(--gold);
            color: var(--white);
            border: none;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .95rem;
            cursor: pointer;
            opacity: 0; visibility: hidden;
            transition: opacity var(--ease), visibility var(--ease), transform var(--ease), background var(--ease);
            z-index: 9999;
            box-shadow: 0 4px 20px rgba(201,168,76,.42);
        }
        #scrollTop.show { opacity: 1; visibility: visible; }
        #scrollTop:hover { background: var(--gold-dark); transform: translateY(-3px); }

        /* =============================================
           RESPONSIVE
        ============================================= */
        @media (max-width: 991.98px) {
            .about-text { padding-left: 0; margin-top: 50px; }
            .about-badge { left: 14px; }
        }
        @media (max-width: 767.98px) {
            .sec-pad { padding: 64px 0; }
            .about-img-wrap img { height: 320px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
            .cta-bg { background-attachment: scroll; }
        }