/*------------------header section--------------------------*/

    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
    --green:#0B6B3A;
    --gold:#D4AF37;
    --white:#ffffff;
    --dark:#222222;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8f8f8;
}

/*==========================
        PREMIUM NAVBAR
==========================*/

.custom-navbar{
    background:#ffffff;
    height:72px;
    border-bottom:2px solid var(--gold);
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/*==========================
        LOGO
==========================*/

.navbar-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    line-height:1;
}

.navbar-brand img{
    height:48px;
    width:auto;
}

.company-name{
    margin-top:3px;
    color:var(--green);
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
}

/*==========================
        MENU
==========================*/

.navbar-nav .nav-link{
    color:var(--green)!important;
    font-size:15px;
    font-weight:600;
    margin:0 6px;
    text-transform:uppercase;
    position:relative;
    transition:.3s;
}

.navbar-nav .nav-link::before{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{
    color:var(--gold)!important;
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before{
    width:100%;
}

/*==========================
        BUTTON
==========================*/

.btn-jrb{
    background:linear-gradient(135deg,#D4AF37,#C4952F);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 24px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.btn-jrb:hover{
    background:var(--green);
    color:#fff;
    transform:translateY(-2px);
}

/*==========================
        TOGGLER
==========================*/

.navbar-toggler{
    border:1px solid var(--gold);
}

.navbar-toggler:focus{
    box-shadow:none;
}

/*==========================
        MOBILE
==========================*/

@media(max-width:991px){

.custom-navbar{
    height:auto;
    padding:8px 0;
}

.navbar-brand img{
    height:42px;
}

.company-name{
    font-size:10px;
}

.navbar-nav{
    padding-top:15px;
    text-align:center;
}

.navbar-nav .nav-link{
    padding:10px 0;
}

.btn-jrb{
    width:100%;
    margin-top:10px;
}

}


/*------------------hero section--------------------------*/

/* --- BRAND THEME DESIGN SYSTEM --- */
        :root {
            --jrb-green: #005A36;
            --jrb-gold: #C59B4E;
            --jrb-gold-rgb: 197, 155, 78;
            --jrb-white: #FFFFFF;
            --font-heading: 'Poppins', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        body {
            font-family: var(--font-body);
            overflow-x: hidden;
            background-color: #0b1511;
        }

        /* --- HERO SLIDER BASE STYLING --- */
        .jrb-hero-slider {
            height: 100vh;
            height: 100svh; /* Dynamic viewport resolution sync for mobile */
            width: 100%;
            position: relative;
            background-color: #000;
            overflow: hidden; /* Restricts any inner vertical break */
        }

        .jrb-hero-slider .carousel-inner,
        .jrb-hero-slider .carousel-item {
            height: 100vh;
            height: 100svh;
            overflow: hidden;
        }

        /* Premium Dark Gradient Overlay */
        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(0, 40, 24, 0.85) 0%, rgba(11, 21, 17, 0.75) 50%, rgba(0, 0, 0, 0.6) 100%);
            z-index: 2;
        }

        /* --- BACKGROUND PARALLAX & KEN BURNS EFFECT --- */
        .slide-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
            transform: scale(1);
            transition: transform 0.5s ease-out;
        }

        .carousel-item.active .slide-bg {
            animation: kenBurnsZoom 10s ease-out forwards;
        }

        @keyframes kenBurnsZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.12); }
        }

        /* --- CONTENT WRAPPER --- */
        .slide-content-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            display: flex;
            align-items: center;
        }

        /* --- TYPOGRAPHY & LAYER ANIMATIONS --- */
        .tagline-badge {
            font-family: var(--font-heading);
            color: var(--jrb-gold);
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 3px;
            border-left: 3px solid var(--jrb-gold);
            padding-left: 12px;
            margin-bottom: 24px;
            opacity: 0;
        }

        .main-heading {
            font-family: var(--font-heading);
            color: var(--jrb-white);
            font-size: 56px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 24px;
            max-width: 850px;
            opacity: 0;
        }

        .main-heading span {
            color: var(--jrb-gold);
            background: linear-gradient(120deg, #ffe0a3 0%, var(--jrb-gold) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .slide-desc {
            color: rgba(255, 255, 255, 0.85);
            font-size: 18px;
            line-height: 1.6;
            max-width: 650px;
            margin-bottom: 40px;
            opacity: 0;
        }

        .slider-btn-group {
            opacity: 0;
        }

        /* --- TIMED TIMELINE ANIMATIONS --- */
        .carousel-item.active .tagline-badge {
            animation: fadeUpIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.3s;
        }
        
        .carousel-item.active .main-heading {
            animation: textRevealIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.6s;
        }

        .carousel-item.active .slide-desc {
            animation: fadeUpIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.9s;
        }

        .carousel-item.active .slider-btn-group {
            animation: scaleUpIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards 1.2s;
        }

        @keyframes fadeUpIn {
            0% { opacity: 0; transform: translateY(30px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes textRevealIn {
            0% { opacity: 0; transform: translateX(-40px); }
            100% { opacity: 1; transform: translateX(0); }
        }

        @keyframes scaleUpIn {
            0% { opacity: 0; transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* --- PREMIUM BUTTONS --- */
        .btn-jrb {
            font-family: var(--font-heading);
            font-weight: 600;
            font-size: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 16px 36px;
            border-radius: 4px;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            white-space: nowrap;
        }

        .btn-jrb-primary {
            background-color: var(--jrb-gold);
            color: #05140e;
            border: 1px solid var(--jrb-gold);
        }

        .btn-jrb-primary:hover {
            background-color: transparent;
            color: var(--jrb-gold);
            box-shadow: 0 0 20px rgba(197, 155, 78, 0.4);
        }

        .btn-jrb-secondary {
            background-color: transparent;
            color: var(--jrb-white);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .btn-jrb-secondary:hover {
            border-color: var(--jrb-gold);
            color: var(--jrb-gold);
            background-color: rgba(197, 155, 78, 0.05);
        }

        .ripple {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: rippleEffect 0.6s linear;
            pointer-events: none;
        }

        @keyframes rippleEffect {
            to { transform: scale(4); opacity: 0; }
        }

        /* --- NAVIGATION CONTROLS --- */
        .jrb-nav-btn {
            width: 60px;
            height: 60px;
            background: rgba(0, 40, 24, 0.4);
            border: 1px solid rgba(197, 155, 78, 0.3);
            border-radius: 50%;
            opacity: 0.8;
            transition: all 0.3s ease;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
        }

        .jrb-nav-btn i {
            color: var(--jrb-gold);
            font-size: 20px;
        }
        .jrb-nav-btn:hover i {
            color: #05140e;
        }

        /* --- PAGINATION DOTS --- */
        .jrb-indicators {
            bottom: 30px;
            z-index: 10;
            gap: 12px;
            margin-bottom: 0;
        }

        .jrb-indicators [data-bs-target] {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: transparent;
            border: 2px solid rgba(255, 255, 255, 0.4);
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .jrb-indicators .active {
            background-color: var(--jrb-gold);
            border-color: var(--jrb-gold);
            transform: scale(1.3);
        }

        /* --- HIGHLY OPTIMIZED RESPONSIVE BREAKPOINTS --- */
        @media (max-width: 991.98px) {
            .main-heading { font-size: 38px; }
            .slide-desc { font-size: 16px; margin-bottom: 30px; }
        }

        @media (max-width: 767.98px) {
            /* Forced layout sizing locks to stop dynamic vertical overflow */
            .jrb-hero-slider,
            .jrb-hero-slider .carousel-inner,
            .jrb-hero-slider .carousel-item {
                height: 100vh !important;
                height: 100svh !important;
                max-height: 100vh !important;
            }

            /* Extra spaces completely compressed for tight and proper vertical centering */
            .slide-content-wrap {
                padding-top: 10px !important;
                padding-bottom: 10px !important;
                height: 100%;
                display: flex;
                align-items: center; 
            }

            /* Container padding reset to tighten elements gaps */
            .slide-content-wrap .container {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                margin-top: auto;
                margin-bottom: auto;
            }

            /* Tight typography margins for a compact mobile layout */
            .tagline-badge { 
                font-size: 11px; 
                margin-bottom: 6px; 
                letter-spacing: 2px;
            }
            
            .main-heading { 
                font-size: 24px; 
                margin-bottom: 8px; 
                line-height: 1.25;
            }
            
            .slide-desc { 
                font-size: 13px; 
                margin-bottom: 16px; 
                line-height: 1.4;
                color: rgba(255, 255, 255, 0.75);
            }

            /* Mobile buttons layout decks */
            .slider-btn-group {
                flex-direction: row !important;
                gap: 8px !important;
                width: 100%;
                margin-bottom: 0px !important;
            }
            
            .btn-jrb { 
                padding: 10px 12px; 
                font-size: 12px; 
                flex: 1;
                letter-spacing: 0.1px;
            }

            .jrb-nav-btn { display: none; }
            
            .jrb-indicators { 
                bottom: 16px;
            }
        }

        /* Extra tight safety guard for short screen mobile devices */
        @media (max-width: 767.98px) and (max-height: 650px) {
            .main-heading { font-size: 20px; margin-bottom: 4px; }
            .slide-desc { font-size: 12px; margin-bottom: 10px; line-height: 1.35; }
            .btn-jrb { padding: 8px 10px; font-size: 11.5px; }
            .jrb-indicators { bottom: 12px; }
        }
/*----about us page start------------------------------------------------------------*/

  #jrb-about{
    background:#FFFFFF;
    color:#20291F;
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    position:relative;
  }

  #jrb-about h1, #jrb-about h2, #jrb-about h3, #jrb-about h4,
  #jrb-about .jrb-heading{
    font-family:'Poppins', sans-serif;
    font-weight:700;
    font-size:40px;
    color:#0B3722;
    letter-spacing:-0.01em;
    margin-bottom:16px;
  }

  #jrb-about p, #jrb-about li, #jrb-about span, #jrb-about a{
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:14px;
    line-height:1.8;
    color:#5E6B60;
  }

  #jrb-about section{padding:104px 0; position:relative;}
  @media (max-width:767.98px){
    #jrb-about section{padding:64px 0;}
    #jrb-about h1, #jrb-about h2, #jrb-about h3, #jrb-about .jrb-heading{font-size:28px;}
  }

  #jrb-about .jrb-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Poppins', sans-serif;
    font-size:12.5px; font-weight:600; letter-spacing:.22em;
    text-transform:uppercase; color:#9C7A2E;
    margin-bottom:14px;
  }
  #jrb-about .jrb-eyebrow::before{
    content:""; width:30px; height:1px; background:#9C7A2E; display:inline-block;
  }
  #jrb-about .jrb-eyebrow.jrb-on-dark{color:#EAD9A0;}
  #jrb-about .jrb-eyebrow.jrb-on-dark::before{background:#EAD9A0;}

  /* Luxury divider using font-awesome icon */
  #jrb-about .jrb-title-divider{
    display:flex; align-items:center; gap:10px; color:#C6A44E; margin:0 0 22px; font-size: 14px;
  }
  #jrb-about .jrb-title-divider::after{
    content:""; width:50px; height:2px; background: linear-gradient(90deg, #C6A44E, transparent); display:inline-block;
  }
  #jrb-about .jrb-title-divider.jrb-center{justify-content:center; margin-left:auto; margin-right:auto;}
  #jrb-about .jrb-title-divider.jrb-center::before{
    content:""; width:50px; height:2px; background: linear-gradient(270deg, #C6A44E, transparent); display:inline-block;
  }

  /* Horizontal rule with building icon */
  .jrb-icon-divider-wrap{
    display:flex; align-items:center; justify-content:center; position:relative; padding:30px 0; background: #0B3722; color: #1C7248;
  }
  .jrb-icon-divider-line{
    position:absolute; top:50%; left:0; right:0; height:1px; background: rgba(234,217,160,0.15); z-index: 1;
  }
  .jrb-icon-divider-center{
    position:relative; z-index: 2; background: #0B3722; padding: 0 20px; font-size: 24px; color: #C6A44E;
  }

  /* ==========================================================
     BUTTONS (Pure CSS Premium Animation - No jQuery)
  ========================================================== */
  #jrb-about .jrb-btn{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Poppins', sans-serif;
    font-weight:600; font-size:13px; letter-spacing:.05em;
    text-transform:uppercase;
    padding:15px 34px; border-radius:6px;
    transition:all .4s cubic-bezier(.22,1,.36,1);
    text-decoration:none;
    cursor:pointer;
    z-index: 1;
  }
  #jrb-about .jrb-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
    z-index: -1;
  }
  #jrb-about .jrb-btn:hover::before {
    left: 100%;
  }
  #jrb-about .jrb-btn-outline-green{
    background:transparent; border:1px solid #145C38; color:#145C38;
  }
  #jrb-about .jrb-btn-outline-green:hover{
    background:#145C38; color:#fff; transform:translateY(-3px);
    box-shadow: 0 10px 20px rgba(20,92,56,0.15);
  }

  /* ==========================================================
     PURE CSS SCROLL REVEAL ANIMATIONS 
  ========================================================== */
  @keyframes jrbFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes jrbFadeLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes jrbFadeRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes jrbScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }

  @supports (animation-timeline: view()) {
    .jrb-fade-up, .jrb-fade-left, .jrb-fade-right, .jrb-scale-in {
      animation-timing-function: cubic-bezier(.22,1,.36,1);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .jrb-fade-up { animation-name: jrbFadeUp; }
    .jrb-fade-left { animation-name: jrbFadeLeft; }
    .jrb-fade-right { animation-name: jrbFadeRight; }
    .jrb-scale-in { animation-name: jrbScaleIn; }
  }

  @media (prefers-reduced-motion: no-preference) {
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-fade-up,
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-fade-left,
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-fade-right,
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-scale-in {
      opacity: 1;
      transform: none;
    }
    .jrb-fade-up, .jrb-fade-left, .jrb-fade-right, .jrb-scale-in {
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }
  }

  /* ==========================================================
     COMPANY PROFILE
  ========================================================== */
  .jrb-profile-section{
    padding-top:80px; /* Reduced to align nicely after removing the top tag */
    position:relative;
    background:#FFFFFF;
    overflow:hidden;
  }
  .jrb-profile-section::before{
    content:"";
    position:absolute; top:0; right:0; width:46%; height:100%;
    background-image:radial-gradient(rgba(198,164,78,.22) 1.4px, transparent 1.4px);
    background-size:22px 22px;
    -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, transparent);
    mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, transparent);
    pointer-events:none;
  }
  @media (max-width:767.98px){ .jrb-profile-section{ padding-top:64px; } }

  .jrb-profile-img-wrap{ position:relative; }
  .jrb-profile-img-wrap .jrb-ring{
    position:absolute; top:-24px; left:-24px; width:120px; height:120px;
    border:1.5px solid #C6A44E; border-radius:50%; z-index:0;
  }
  .jrb-profile-img-frame{
    overflow:hidden; border-radius:26px;
    box-shadow:0 22px 48px rgba(11,55,34,0.12); position:relative; z-index:1; height:540px;
  }
  .jrb-profile-img-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
  .jrb-profile-img-frame:hover img{ transform:scale(1.08); }

  .jrb-exp-badge{
    position:absolute; bottom:-26px; right:-20px; z-index:2;
    background:linear-gradient(135deg, #145C38 0%, #0B3722 100%);
    color:#fff; border-radius:16px; padding:26px 30px;
    box-shadow:0 22px 48px rgba(11,55,34,0.12); text-align:center; min-width:156px;
  }
  .jrb-exp-badge .num{ font-family:'Poppins', sans-serif; font-weight:700; font-size:34px; color:#EAD9A0; line-height:1; display:block; margin-bottom:6px; }
  .jrb-exp-badge .lbl{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.78); }
  @media (max-width:991.98px){
    .jrb-profile-img-frame{ height:380px; }
    .jrb-exp-badge{ right:10px; bottom:-20px; padding:18px 20px; }
  }

  .jrb-highlight-row{ display:flex; gap:16px; margin-top:22px; flex-wrap:wrap; }
  .jrb-highlight-item{
    display:flex; align-items:center; gap:12px;
    background:#FAF7EF; border:1px solid #E4E0D2;
    border-radius:12px; padding:14px 18px; flex:1 1 210px;
    transition:all .35s cubic-bezier(.22,1,.36,1);
  }
  .jrb-highlight-item:hover{ border-color:#C6A44E; box-shadow:0 10px 26px rgba(11,55,34,0.08); transform:translateY(-3px); }
  .jrb-highlight-item i{ color:#9C7A2E; font-size:18px; }
  .jrb-highlight-item span{ font-family:'Poppins', sans-serif; font-size:13px; font-weight:600; color:#0B3722; }

  /* ==========================================================
     VISION & MISSION
  ========================================================== */
  .jrb-vm-section{
    background:linear-gradient(160deg, #0B3722 0%, #082B1A 100%);
    position:relative;
  }
  .jrb-vm-section::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 12% 18%, rgba(198,164,78,.10), transparent 42%),
      radial-gradient(circle at 88% 82%, rgba(198,164,78,.10), transparent 42%);
    pointer-events:none;
  }
  .jrb-vm-card{
    position:relative; z-index:1;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    border:1px solid rgba(234,217,160,.22);
    border-radius:26px;
    padding:46px 40px; height:100%;
    overflow:hidden;
    transition:transform .45s cubic-bezier(.22,1,.36,1), background .45s cubic-bezier(.22,1,.36,1);
  }
  .jrb-vm-card::after{
    content:""; position:absolute; inset:0; border-radius:26px;
    padding:1px;
    background:linear-gradient(135deg, #C6A44E, transparent 40%, transparent 60%, #C6A44E);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1);
  }
  .jrb-vm-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,.09); }
  .jrb-vm-card:hover::after{ opacity:1; }
  .jrb-vm-icon{
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg, #C6A44E, #9C7A2E);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:26px;
  }
  #jrb-about .jrb-vm-card h3{ color:#EAD9A0; font-size:19px; margin-bottom:14px; }
  .jrb-vm-card p{ color:rgba(255,255,255,.72); }
  .jrb-vm-mark{
    position:absolute; top:24px; right:30px; z-index:0;
    font-family:'Poppins', sans-serif; font-weight:700; font-size:46px;
    color:rgba(234,217,160,.14); letter-spacing:0;
  }

  /* ==========================================================
     DIRECTOR'S MESSAGE
  ========================================================== */
  .jrb-director-img-wrap{ position:relative; }
  .jrb-director-frame{
    border-radius:26px; overflow:hidden; height:520px;
    box-shadow:0 22px 48px rgba(11,55,34,0.12);
  }
  .jrb-director-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
  .jrb-director-img-wrap:hover .jrb-director-frame img{ transform:scale(1.06); }
  .jrb-director-dot{
    position:absolute; width:170px; height:170px; border-radius:50%;
    background:#EEF4F0; z-index:-1; top:-30px; left:-30px;
  }

  .jrb-quote-panel{
    background:linear-gradient(135deg, #FAF7EF 0%, #FFFFFF 100%);
    border:1px solid #E4E0D2; border-left:3px solid #C6A44E;
    border-radius:0 16px 16px 0;
    padding:30px 32px; margin-bottom:26px;
  }
  .jrb-quote-mark{
    width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle, #EAD9A0 0%, #C6A44E 100%);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
    margin-bottom:22px;
    animation:jrb-glow 3.2s ease-in-out infinite;
  }
  @keyframes jrb-glow{
    0%,100%{ box-shadow:0 0 0 0 rgba(198,164,78,.45); }
    50%{ box-shadow:0 0 0 14px rgba(198,164,78,0); }
  }
  .jrb-director-quote{
    font-family:'Poppins', sans-serif; font-size:19px; font-weight:600;
    color:#0B3722; line-height:1.6; margin-bottom:22px;
  }
  .jrb-director-name{ font-family:'Parisienne', cursive; font-size:34px; color:#9C7A2E; margin-bottom:2px; line-height:1; }
  .jrb-director-role{
    font-family:'Poppins', sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:#5E6B60; display:block; margin-top:6px;
  }

  /* ==========================================================
     COMPANY INFORMATION
  ========================================================== */
  .jrb-info-section{ background:#FAF7EF; position:relative; overflow:hidden; }
  .jrb-info-section::before{
    content:"";
    position:absolute; left:0; bottom:0; width:38%; height:70%;
    background-image:radial-gradient(rgba(20,92,56,.10) 1.4px, transparent 1.4px);
    background-size:24px 24px;
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 85%);
    mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 85%);
    pointer-events:none;
  }
  .jrb-info-card{
    background:#fff; border:1px solid #E4E0D2; border-radius:16px;
    padding:32px 26px; height:100%; text-align:left; position:relative; overflow:hidden;
    transition:all .4s cubic-bezier(.22,1,.36,1);
  }
  .jrb-info-card::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:3px;
    background:linear-gradient(90deg, #C6A44E, #145C38);
    transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,1,.36,1);
  }
  .jrb-info-card:hover{ transform:translateY(-6px); box-shadow:0 10px 26px rgba(11,55,34,0.08); }
  .jrb-info-card:hover::before{ transform:scaleX(1); }
  .jrb-info-icon{
    width:50px; height:50px; border-radius:12px;
    background:#EEF4F0; color:#145C38;
    display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:18px;
    transition:all .35s cubic-bezier(.22,1,.36,1);
  }
  .jrb-info-card:hover .jrb-info-icon{ background:#145C38; color:#fff; }
  .jrb-info-icon-alt{ background:#EAD9A0; color:#9C7A2E; }
  .jrb-info-card:hover .jrb-info-icon-alt{ background:#C6A44E; color:#fff; }
  #jrb-about .jrb-info-card h4{ font-size:15.5px; font-weight:600; color:#0B3722; margin-bottom:6px; font-family:'Poppins',sans-serif; }
  .jrb-info-card .jrb-info-value{ font-size:13.5px; color:#5E6B60; margin-bottom:0; }
  .jrb-info-card .jrb-count-number{ font-family:'Poppins', sans-serif; font-weight:700; font-size:22px; color:#9C7A2E; }


/*----whychoose page start------------------------------------------------------------*/

        /* --- GLOBAL SECTION RESET --- */
        .jrb-why-choose-section {
            background-color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            color: #1C2B24;
            padding: 140px 0;
            position: relative;
            overflow: hidden;
        }

        /* --- BACKGROUND FLOATING LIGHT ORNAMENTS (CSS ONLY) --- */
        .jrb-bg-glow {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(197, 155, 78, 0.04) 0%, rgba(255,255,255,0) 70%);
            top: -10%;
            right: -10%;
            z-index: 1;
            pointer-events: none;
            animation: subtlePulse 8s ease-in-out infinite alternate;
        }

        .jrb-bg-glow-left {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 90, 54, 0.03) 0%, rgba(255,255,255,0) 70%);
            bottom: -5%;
            left: -5%;
            z-index: 1;
            pointer-events: none;
            animation: subtlePulse 10s ease-in-out infinite alternate-reverse;
        }

        @keyframes subtlePulse {
            0% { transform: translateY(0) scale(1); opacity: 0.8; }
            100% { transform: translateY(-30px) scale(1.05); opacity: 1; }
        }

        /* --- TYPOGRAPHY & INTRO HEADER --- */
        .jrb-section-intro {
            position: relative;
            z-index: 2;
            margin-bottom: 80px;
        }

        .jrb-tagline {
            font-family: 'Poppins', sans-serif;
            color: #C59B4E;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 4px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .jrb-tagline::after {
            content: '';
            width: 40px;
            height: 1.5px;
            background-color: #C59B4E;
            display: inline-block;
        }

        .jrb-main-title {
            font-family: 'Poppins', sans-serif;
            color: #005A36;
            font-size: 40px;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.5px;
            max-width: 700px;
            margin-bottom: 24px;
        }

        .jrb-main-title span {
            color: #C59B4E;
            font-weight: 600;
        }

        .jrb-desc-text {
            font-size: 15px;
            color: #5A6E65;
            line-height: 1.8;
            max-width: 750px;
            margin-bottom: 0;
        }

        /* --- ARCHITECTURAL PLOT CARD CONFIGURATIONS --- */
        .jrb-grid-container {
            position: relative;
            z-index: 2;
        }

        .jrb-plot-card {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 90, 54, 0.06);
            border-radius: 12px;
            padding: 40px 35px;
            height: 100%;
            box-shadow: 0 15px 40px rgba(0, 90, 54, 0.05);
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(40px);
            animation: cssFadeUpIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        /* Pure CSS Staggered Entry Pipeline */
        .jrb-card-1 { animation-delay: 0.1s; }
        .jrb-card-2 { animation-delay: 0.2s; }
        .jrb-card-3 { animation-delay: 0.3s; }
        .jrb-card-4 { animation-delay: 0.4s; }
        .jrb-card-5 { animation-delay: 0.5s; }
        .jrb-card-6 { animation-delay: 0.6s; }
        .jrb-card-7 { animation-delay: 0.7s; }
        .jrb-card-8 { animation-delay: 0.8s; }

        @keyframes cssFadeUpIn {
            to { opacity: 1; transform: translateY(0); }
        }

        /* Premium Micro-Interactive Hover Actions */
        .jrb-plot-card:hover {
            transform: translateY(-10px);
            border-color: rgba(197, 155, 78, 0.4);
            box-shadow: 0 25px 55px rgba(0, 90, 54, 0.12);
        }

        /* Card Inner Accent Line Graphic */
        .jrb-plot-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #005A36, #C59B4E);
            transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-plot-card:hover::before {
            width: 100%;
        }

        /* --- PREMIUM ICON SPHERE DESIGN --- */
        .jrb-icon-wrapper {
            width: 65px;
            height: 65px;
            background-color: #F4F7F5;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
            position: relative;
            transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-icon-wrapper i {
            color: #005A36;
            font-size: 26px;
            transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Interactive Icon Choreography on Hover */
        .jrb-plot-card:hover .jrb-icon-wrapper {
            background-color: #005A36;
            transform: rotateY(180deg);
        }

        .jrb-plot-card:hover .jrb-icon-wrapper i {
            color: #C59B4E;
            transform: scale(1.1) rotateY(180deg);
        }

        /* --- CARD DATA SCALE TYPOGRAPHY --- */
        .jrb-card-title {
            font-family: 'Poppins', sans-serif;
            font-size: 19px;
            font-weight: 600;
            color: #005A36;
            margin-bottom: 14px;
            letter-spacing: -0.2px;
            transition: color 0.3s ease;
        }

        .jrb-plot-card:hover .jrb-card-title {
            color: #C59B4E;
        }

        .jrb-card-text {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: #5A6E65;
            line-height: 1.8;
            margin-bottom: 0;
        }

        /* --- THEMEFOREST CALL-TO-ACTION BUTTON SYSTEM --- */
        .jrb-action-footer {
            margin-top: 60px;
            position: relative;
            z-index: 2;
        }

        .btn-jrb-luxury {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 16px 42px;
            border-radius: 4px;
            background-color: #005A36;
            color: #FFFFFF !important;
            border: 1px solid #005A36;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 25px rgba(0, 90, 54, 0.15);
        }

        .btn-jrb-luxury i {
            transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            font-size: 12px;
        }

        .btn-jrb-luxury:hover {
            background-color: transparent;
            color: #005A36 !important;
            box-shadow: 0 15px 30px rgba(0, 90, 54, 0.2);
            transform: translateY(-2px);
        }

        .btn-jrb-luxury:hover i {
            transform: translateX(6px);
        }

        /* --- HIGH RESPONSIVENESS MEDIA PIPELINES --- */
        @media (max-width: 1199.98px) {
            .jrb-why-choose-section { padding: 110px 0; }
            .jrb-main-title { font-size: 36px; }
            .jrb-plot-card { padding: 35px 25px; }
        }

        @media (max-width: 991.98px) {
            .jrb-why-choose-section { padding: 90px 0; }
            .jrb-main-title { font-size: 32px; }
            .jrb-section-intro { margin-bottom: 60px; }
        }

        @media (max-width: 767.98px) {
            .jrb-why-choose-section { padding: 75px 0; }
            .jrb-main-title { font-size: 26px; }
            .jrb-desc-text { font-size: 14px; }
            .jrb-section-intro { margin-bottom: 45px; }
            .jrb-plot-card { padding: 30px 25px; text-align: left; }
            .jrb-icon-wrapper { margin-bottom: 22px; width: 55px; height: 55px; }
            .jrb-icon-wrapper i { font-size: 22px; }
            .jrb-action-footer { margin-top: 40px; }
            .btn-jrb-luxury { width: 100%; justify-content: center; padding: 14px 24px; }
        }
/*-----------     --testtimoniol----------------------------------------------------- */

        /* --- GLOBAL TESTIMONIAL BLOCK STRUCTURE --- */
        .jrb-testimonial-section {
            background-color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            color: #1C2B24;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        /* Ambient Ornaments Layer */
        .jrb-testi-glow-right {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(197, 155, 78, 0.03) 0%, rgba(255,255,255,0) 70%);
            bottom: -20%;
            right: -10%;
            z-index: 1;
            pointer-events: none;
        }

        .jrb-testi-glow-left {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 90, 54, 0.02) 0%, rgba(255,255,255,0) 70%);
            top: -10%;
            left: -10%;
            z-index: 1;
            pointer-events: none;
        }

        /* --- TYPOGRAPHY HEADER MAPPING --- */
        .jrb-testi-intro {
            position: relative;
            z-index: 2;
            margin-bottom: 50px;
        }

        .jrb-testi-tagline {
            font-family: 'Poppins', sans-serif;
            color: #C59B4E;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 4px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .jrb-testi-tagline::after {
            content: '';
            width: 40px;
            height: 1.5px;
            background-color: #C59B4E;
            display: inline-block;
        }

        .jrb-testi-main-title {
            font-family: 'Poppins', sans-serif;
            color: #005A36;
            font-size: 36px;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.5px;
            max-width: 600px;
            margin-bottom: 15px;
        }

        .jrb-testi-main-title span {
            color: #C59B4E;
            font-weight: 600;
        }

        .jrb-testi-desc {
            font-size: 14px;
            color: #5A6E65;
            line-height: 1.7;
            max-width: 650px;
            margin-bottom: 0;
        }

        /* --- PREMIUM CARD FRAMEWORK --- */
        .jrb-slider-container {
            position: relative;
            z-index: 2;
            padding: 10px 0;
        }

        .jrb-testimonial-card {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 90, 54, 0.06);
            border-radius: 16px;
            padding: 30px 25px;
            box-shadow: 0 12px 40px rgba(0, 90, 54, 0.03);
            position: relative;
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin: 15px 5px; 
        }

        /* Hover Mechanics */
        .jrb-testimonial-card:hover {
            transform: translateY(-8px);
            border-color: rgba(197, 155, 78, 0.4);
            box-shadow: 0 20px 50px rgba(0, 90, 54, 0.08);
        }

        /* Decorative Quote Signet */
        .jrb-quote-signet {
            position: absolute;
            top: 25px;
            right: 25px;
            color: rgba(0, 90, 54, 0.03);
            font-size: 40px;
            transition: color 0.4s ease;
            line-height: 1;
        }

        .jrb-testimonial-card:hover .jrb-quote-signet {
            color: rgba(197, 155, 78, 0.1);
        }

        /* --- CARD INTERNAL COMPONENT STYLING --- */
        .jrb-stars-container {
            margin-bottom: 15px;
            display: flex;
            gap: 4px;
        }

        .jrb-stars-container i {
            color: #C59B4E;
            font-size: 12px;
            transition: transform 0.3s ease;
        }

        .jrb-testimonial-card:hover .jrb-stars-container i {
            transform: scale(1.15);
        }

        .jrb-review-statement {
            font-family: 'Inter', sans-serif;
            font-size: 13.5px;
            line-height: 1.6;
            color: #5A6E65;
            margin-bottom: 20px;
            min-height: 70px; /* Adjusted for short content text balance */
        }

        /* Verified Badge Element */
        .jrb-buyer-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background-color: rgba(0, 90, 54, 0.05);
            color: #005A36;
            font-size: 10px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 50px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 15px;
        }

        /* --- TWO WORD NAME INITIALS AVATAR --- */
        .jrb-profile-block {
            display: flex;
            align-items: center;
            gap: 12px;
            border-top: 1px solid rgba(0, 90, 54, 0.06);
            padding-top: 15px;
        }

        .jrb-name-initials {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: linear-gradient(135deg, #005A36, #003F25);
            color: #C59B4E;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #FFFFFF;
            box-shadow: 0 0 0 2px rgba(0, 90, 54, 0.1);
            transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
        }

        .jrb-testimonial-card:hover .jrb-name-initials {
            transform: scale(1.08);
            box-shadow: 0 0 0 2px #C59B4E;
            background: linear-gradient(135deg, #005A36, #C59B4E);
            color: #FFFFFF;
        }

        .jrb-profile-info h4 {
            font-family: 'Poppins', sans-serif;
            font-size: 14.5px;
            font-weight: 600;
            color: #005A36;
            margin-bottom: 1px;
        }

        .jrb-profile-info p {
            font-size: 11px;
            color: #8A9E95;
            margin-bottom: 0;
        }

        /* Card Top Accent bar */
        .jrb-testimonial-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #005A36, #C59B4E);
            transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .jrb-testimonial-card:hover::before {
            width: 100%;
        }

        /* --- OWL CAROUSEL SYSTEM NAVIGATION & DOTS --- */
        .jrb-owl-nav-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }

        .btn-jrb-slider-arrow {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 90, 54, 0.1);
            color: #005A36;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            cursor: pointer;
        }

        .btn-jrb-slider-arrow:hover {
            background-color: #005A36;
            border-color: #005A36;
            color: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 90, 54, 0.15);
        }

        .owl-theme .owl-dots {
            margin-top: 25px !important;
        }

        .owl-theme .owl-dots .owl-dot span {
            width: 7px !important;
            height: 7px !important;
            background: rgba(0, 90, 54, 0.15) !important;
            transition: all 0.3s ease;
        }

        .owl-theme .owl-dots .owl-dot.active span,
        .owl-theme .owl-dots .owl-dot:hover span {
            background: #C59B4E !important;
            width: 18px !important;
            border-radius: 4px !important;
        }

        /* --- RESPONSIVE MEDIA BREAKPOINTS --- */
        @media (max-width: 1199.98px) {
            .jrb-testimonial-section { padding: 80px 0; }
            .jrb-testi-main-title { font-size: 32px; }
        }

        @media (max-width: 991.98px) {
            .jrb-testimonial-section { padding: 70px 0; }
            .jrb-testi-main-title { font-size: 28px; }
            .jrb-review-statement { min-height: auto; }
        }

        @media (max-width: 767.98px) {
            .jrb-testimonial-section { padding: 60px 0; }
            .jrb-testi-main-title { font-size: 24px; }
            .jrb-testi-desc { font-size: 13.5px; }
            .jrb-testi-intro { margin-bottom: 35px; }
            .jrb-testimonial-card { padding: 25px 20px; }
        }


/*----projuect------------------------------------------------------------------------------*/

<style>
/* =========================================================================
   JRB GROUP — PREMIUM PROJECTS PAGE
   Design tokens derived from the JRB Group logo:
   - Antique Gold  (crest, wordmark strokes)
   - Emerald Green (skyline / roof motif, "JRB" wordmark)
   - Ivory / Cream (negative space of the mark)
   ========================================================================= */

:root{
  --gold:        #C9A227;
  --gold-light:  #EAD08C;
  --gold-dark:   #96721A;
  --green:       #145C3C;
  --green-dark:  #0B3D28;
  --green-soft:  #E8F0EA;
  --cream:       #FBF7EF;
  --ivory:       #F4EFE3;
  --charcoal:    #211E1A;
  --stone:       #6E685C;
  --white:       #FFFFFF;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --shadow-soft: 0 20px 45px -20px rgba(18,81,58,0.25);
  --shadow-gold: 0 12px 30px -10px rgba(184,137,46,0.35);
  --radius-lg: 22px;
  --radius-md: 14px;
}

*{box-sizing:border-box;}

body{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--charcoal);
  background: var(--cream);
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-head{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

.section-heading{ font-size: 40px; line-height: 1.15; }
@media (max-width:767px){ .section-heading{ font-size: 30px; } }

.eyebrow{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:28px; height:2px;
  background: var(--gold);
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--gold-light); }

p{ color: var(--stone); }

.btn{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing:.03em;
  border-radius: 50px;
  padding: 14px 32px;
  position: relative;
  overflow: hidden;
  transition: all .35s ease;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: var(--white);
  border:none;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(184,137,46,.5); color:#fff; }
.btn-outline-green{
  background: transparent;
  border: 1.5px solid var(--green);
  color: var(--green);
}
.btn-outline-green:hover{ background: var(--green); color: #fff; transform: translateY(-3px); }
.btn-outline-gold-dark{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
}
.btn-outline-gold-dark:hover{ background: var(--gold); border-color: var(--gold); color:#fff; transform: translateY(-3px);}

/* ripple */
.ripple-span{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: rippleAnim .6s linear;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3); opacity:0; } }

img{ max-width:100%; }

/* ---------- Signature Divider (echoes the gold arc under the JRB wordmark) --- */
.jrb-divider{ width:100%; height:70px; display:block; }
.jrb-divider path{ fill:none; stroke:var(--gold); stroke-width:2; opacity:.55; }
.jrb-divider.on-dark path{ stroke: var(--gold-light); opacity:.4; }

/* ---------- Reveal Animations (driven by jQuery toggling classes) ---------- */
.reveal{ opacity:0; transition: all .9s cubic-bezier(.19,1,.22,1); }
.fade-up{ transform: translateY(50px); }
.fade-left{ transform: translateX(-60px); }
.fade-right{ transform: translateX(60px); }
.fade-scale{ transform: scale(.92); }
.reveal.in-view{ opacity:1; transform: translate(0,0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================ PROJECT CARDS ============================= */
.project-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 10px 30px -18px rgba(18,20,15,.25);
  transition: transform .5s ease, box-shadow .5s ease;
  height:100%;
  border: 1px solid rgba(184,137,46,.08);
}
.project-card:hover{
  transform: translateY(-10px);
  box-shadow: var(--shadow-soft);
}
.project-card .img-wrap{
  position:relative; overflow:hidden; height:230px;
}
.project-card .img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s cubic-bezier(.19,1,.22,1);
}
.project-card:hover .img-wrap img{ transform: scale(1.12); }
.badge-status{
  position:absolute; top:16px; left:16px;
  font-family: var(--font-head); font-size:11px; font-weight:600;
  padding:6px 14px; border-radius:50px; letter-spacing:.03em;
  background: rgba(255,255,255,.92); color: var(--green);
}
.badge-price{
  position:absolute; bottom:-1px; right:16px; transform: translateY(50%);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#fff; font-family: var(--font-head); font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:12px 12px 4px 12px;
  box-shadow: var(--shadow-gold);
}
.project-card .body-wrap{ padding: 34px 24px 24px; }
.project-card .p-type{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dark);
  font-family: var(--font-head); font-weight:600;
}
.project-card h3{ font-size:21px; margin: 6px 0 10px; }
.project-card .meta-row{
  display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color: var(--stone); margin-bottom:12px;
}
.project-card .meta-row span{ display:flex; align-items:center; gap:6px; }
.project-card .meta-row i{ color: var(--green); }
.project-card p.desc{ font-size:13px; margin-bottom:18px; }
.link-explore{
  font-family: var(--font-head); font-weight:600; font-size:13px;
  color: var(--green); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.link-explore i{ transition: transform .3s ease; }
.link-explore:hover i{ transform: translateX(6px); }
.link-explore:hover{ color: var(--gold-dark); }

/* ============================ PROJECT DETAILS ============================ */
.detail-row{ padding: 60px 0; }
.detail-row .img-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft);
}
.detail-row .img-frame img{ width:100%; height:460px; object-fit:cover; transition: transform .8s ease;}
.detail-row .img-frame:hover img{ transform: scale(1.06); }
.detail-tag{
  position:absolute; bottom:20px; left:20px;
  background: rgba(18,20,15,.55); backdrop-filter: blur(6px);
  color:#fff; padding:8px 16px; border-radius:10px; font-family: var(--font-head); font-size:12px;
}
.mini-cat-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  height:100%;
  border: 1px solid rgba(18,81,58,.08);
  transition: all .35s ease;
}
.mini-cat-card:hover{ border-color: var(--gold); box-shadow: 0 14px 26px -18px rgba(184,137,46,.5); transform: translateY(-4px); }
.mini-cat-card i{ font-size:20px; color: var(--gold); margin-bottom:8px; display:block; }
.mini-cat-card h6{ font-family: var(--font-head); font-weight:600; font-size:13px; margin-bottom:6px; color:var(--charcoal); }
.mini-cat-card p{ font-size:12px; margin:0; line-height:1.6; }

/* ============================ PLOT INFO CARDS ============================ */
.plot-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 22px;
  text-align:center;
  height:100%;
  border: 1px solid rgba(184,137,46,.1);
  transition: all .4s ease;
}
.plot-card:hover{
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
}
.plot-card .icon-circle{
  width:58px; height:58px; border-radius:50%;
  background: var(--green-soft);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px; transition: all .4s ease;
}
.plot-card .icon-circle i{ font-size:22px; color: var(--green); transition: color .4s ease; }
.plot-card:hover .icon-circle{ background: rgba(255,255,255,.15); }
.plot-card:hover .icon-circle i{ color: var(--gold-light); }
.plot-card h6{ font-family: var(--font-head); font-size:14px; font-weight:600; margin-bottom:6px; }
.plot-card p{ font-size:12px; margin:0; }
.plot-card:hover h6{ color:#fff; }
.plot-card:hover p{ color: rgba(255,255,255,.75); }

/* ============================ LOCATION ============================ */
.location-section{ background: var(--green-dark); color:#fff; position:relative; overflow:hidden; }
.location-section::before{
  content:""; position:absolute; inset:0; opacity:.06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 26px 26px;
}
.map-illustration{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid rgba(227,199,126,.25); min-height:420px;
  background: linear-gradient(145deg, rgba(227,199,126,.08), rgba(255,255,255,.03));
  display:flex; align-items:center; justify-content:center;
}
.location-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.location-item:last-child{ border-bottom:none; }
.location-item .li-left{ display:flex; align-items:center; gap:14px; }
.location-item i{ font-size:18px; color: var(--gold-light); width:26px; text-align:center; }
.location-item h6{ font-family: var(--font-head); font-size:14px; font-weight:600; color:#fff; margin:0; }
.distance-badge{
  font-family: var(--font-head); font-size:11.5px; font-weight:600;
  border: 1px solid rgba(227,199,126,.5); color: var(--gold-light);
  padding:6px 14px; border-radius:50px; white-space:nowrap;
}

/* ============================ GALLERY (masonry) ============================ */
.masonry{ column-count:3; column-gap: 18px; }
@media (max-width:991px){ .masonry{ column-count:2; } }
@media (max-width:575px){ .masonry{ column-count:1; } }
.masonry-item{
  break-inside: avoid; margin-bottom:18px; position:relative; overflow:hidden;
  border-radius: var(--radius-md); box-shadow: 0 10px 24px -16px rgba(0,0,0,.3);
}
.masonry-item img{ width:100%; display:block; transition: transform .7s ease; }
.masonry-item:hover img{ transform: scale(1.1); }
.masonry-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(10,20,15,.85), transparent 60%);
  display:flex; align-items:flex-end; padding:16px;
  opacity:0; transition: opacity .4s ease;
}
.masonry-item:hover .masonry-overlay{ opacity:1; }
.masonry-overlay span{ font-family: var(--font-head); color:#fff; font-weight:600; font-size:14px; }

/* ============================ AMENITIES ============================ */
.amenity-card{
  text-align:center; padding: 26px 14px; border-radius: var(--radius-md);
  background: var(--white); border:1px solid rgba(18,81,58,.08); height:100%;
  transition: all .35s ease;
}
.amenity-card:hover{ box-shadow: var(--shadow-gold); transform: translateY(-6px); border-color: var(--gold); }
.amenity-card i{ font-size:26px; color: var(--green); margin-bottom:10px; display:block; }
.amenity-card h6{ font-family:var(--font-head); font-size:12.5px; font-weight:600; margin:0; }

/* ============================ WHY INVEST ============================ */
.invest-card{
  background: var(--white); border-radius: var(--radius-lg); padding: 34px 26px;
  height:100%; position:relative; border: 1px solid rgba(184,137,46,.1);
  transition: all .4s ease;
}
.invest-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.invest-card .num{
  font-family: var(--font-head); font-size:13px; font-weight:700; color: var(--gold);
  letter-spacing:.05em;
}
.invest-card h4{ font-size:19px; margin: 10px 0 10px; }
.invest-card p{ font-size:13px; margin:0; }

/* ============================ HIGHLIGHTS (dark counters) ============================ */
.highlights-section{
  background: linear-gradient(160deg, var(--green-dark), var(--green) 120%);
  color:#fff; position:relative; overflow:hidden;
}
.highlights-section::after{
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  border:1px solid rgba(227,199,126,.12); top:-200px; right:-200px;
}
.counter-box{ text-align:center; padding: 20px 10px; }
.counter-box .count{
  font-family: var(--font-head); font-weight:800; font-size:52px; color: var(--gold-light);
  line-height:1;
}
.counter-box .count sup{ font-size: 26px; }
.counter-box p{ color: rgba(255,255,255,.7); margin:10px 0 0; font-size:13px; letter-spacing:.03em; }

/* ============================ CTA ============================ */
.cta-inquiry{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,20,15,.55), rgba(10,20,15,.85)),
    url('https://images.unsplash.com/photo-1500916434205-0c77489c6cf7?auto=format&fit=crop&w=1920&q=80') center/cover fixed;
  padding: 110px 0;
  text-align:center;
}
.cta-inquiry h2{ color:#fff; max-width:720px; margin:0 auto 18px; }
.cta-inquiry p{ color: rgba(255,255,255,.78); max-width:560px; margin:0 auto 40px; }
.cta-btn-group{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* Glassmorphism accent chip used across cards */
.glass-chip{
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
}

/* scrollbar accent (non essential nicety) */
::selection{ background: var(--gold-light); color: var(--charcoal); }
/* ============================ PROJECT DETAIL PAGE ============================ */
:root{
  --jrb-green:#006738;
  --jrb-green-dark:#004b28;
  --jrb-gold:#A87631;
  --jrb-gold-light:#ECC98F;
  --jrb-cream:#FBF8F2;
  --jrb-text:#2B2620;
  --jrb-mute:#6B6355;
}

body.project-detail-page{background:var(--jrb-cream); color:var(--jrb-text);}
.project-detail-page h1, .project-detail-page h2, .project-detail-page h3, .project-detail-page h4, .project-detail-page h5{font-family:'Poppins',sans-serif; font-weight:700;}

/* ---------- NAVBAR (simple, just identity) ---------- */
.navbar-jrb{background:#fff; border-bottom:3px solid var(--jrb-gold); box-shadow:0 2px 8px rgba(0,0,0,.05);}
.navbar-jrb img{height:42px;}
.navbar-jrb .brand-name{color:var(--jrb-green-dark); font-weight:700; font-size:1.05rem; line-height:1.1;}
.navbar-jrb .brand-sub{color:var(--jrb-gold); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;}
.btn-enquire{background:var(--jrb-green); border-color:var(--jrb-green); color:#fff; font-weight:600; font-size:.88rem;}
.btn-enquire:hover{background:var(--jrb-green-dark); border-color:var(--jrb-green-dark); color:#fff;}

/* ---------- green breadcrumb bar ---------- */
.green-crumb-bar{background:linear-gradient(90deg,var(--jrb-green-dark),var(--jrb-green)); padding:24px 0; margin-bottom:30px; box-shadow:0 4px 16px rgba(0,75,40,.15);}
.breadcrumb-jrb-green{font-size:1.05rem; margin:0; font-weight:500;}
.breadcrumb-jrb-green a{color:#cfe6d8; text-decoration:none;}
.breadcrumb-jrb-green a:hover{color:#fff;}
.breadcrumb-jrb-green .sep{margin:0 10px; color:rgba(255,255,255,.4);}
.breadcrumb-jrb-green .cur{color:#fff; font-weight:700;}
.green-crumb-bar .badge-status{background:var(--jrb-gold); color:#fff; font-weight:700; font-size:.9rem; padding:.55em 1.2em; border-radius:22px; letter-spacing:.03em;}

/* ---------- title block ---------- */
.title-block{margin-bottom:8px;}
.proj-title{font-size:clamp(1.7rem,3.4vw,2.4rem); color:var(--jrb-green-dark); font-weight:800; margin-bottom:6px;}
.loc-line{color:var(--jrb-mute); font-size:1rem; display:flex; align-items:center; gap:8px;}
.loc-line svg{color:var(--jrb-gold); flex:none;}

.switcher-row{padding:18px 0 6px; display:flex; justify-content:flex-end;}
.switcher .btn{font-weight:600; font-size:.9rem; padding:.5rem 1.1rem;}
.switcher .btn-outline-jrb{border:1.5px solid var(--jrb-green); color:var(--jrb-green-dark);}
.switcher .btn-outline-jrb.active,.switcher .btn-outline-jrb:hover{background:var(--jrb-green); color:#fff;}

/* ---------- sidebar ---------- */
.side-card{background:#fff; border:1px solid #eee2c9; border-radius:14px; padding:28px; position:sticky; top:80px; box-shadow:0 6px 24px rgba(0,75,40,.06);}
.side-card .price-big{font-size:2.1rem; font-weight:800; color:var(--jrb-gold); line-height:1.15;}
.side-card .price-label{font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--jrb-mute);}
.qf-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed #e8dfcd; font-size:.95rem;}
.qf-row:last-child{border-bottom:none;}
.qf-row .k{color:var(--jrb-mute);}
.qf-row .v{font-weight:600; color:var(--jrb-text);}
.side-card .btn-gold{background:var(--jrb-gold); border-color:var(--jrb-gold); color:#fff; font-weight:600; padding:.65rem 1rem;}
.side-card .btn-gold:hover{background:#8f6224; border-color:#8f6224; color:#fff;}
.side-card .form-control{font-size:.92rem; padding:.65rem .9rem;}
.side-card h6{font-size:1rem;}

/* ---------- sequential detail sections ---------- */
.detail-sec{padding:28px 0; border-bottom:1px solid #eee2c9;}
.detail-sec:first-child{padding-top:6px;}
.detail-sec:last-child{border-bottom:none;}
.detail-sec h5{font-size:1.25rem; color:var(--jrb-green-dark); font-weight:700; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem;}
.detail-sec h5::before{content:""; width:5px; height:20px; background:var(--jrb-gold); border-radius:3px; display:inline-block;}
.opt-tag{font-size:.72rem; font-weight:500; color:var(--jrb-mute); text-transform:none;}
.loc-detail{font-size:.98rem; color:var(--jrb-text); line-height:1.7; background:#fff; border:1px solid #eee2c9; border-radius:10px; padding:16px 20px;}
.loc-detail a{color:var(--jrb-gold); font-weight:600; text-decoration:none;}
.loc-detail a:hover{text-decoration:underline;}

/* price table */
.table-jrb{font-size:1rem;}
.table-jrb thead{background:var(--jrb-green); color:#fff;}
.table-jrb thead th{font-weight:600; font-size:.9rem; padding:14px 18px;}
.table-jrb td{padding:16px 18px;}
.table-jrb .amt{color:var(--jrb-gold); font-weight:700; font-size:1.05rem;}

.chip-jrb{border:1.5px solid var(--jrb-green); color:var(--jrb-green-dark); border-radius:30px; padding:.6rem 1.2rem; font-weight:500; font-size:.95rem; display:inline-flex; gap:.4rem;}
.amenity-item{background:#fff; border:1px solid #eee2c9; border-radius:10px; padding:.9rem 1.1rem; font-size:.95rem; display:flex; align-items:center; gap:.6rem; height:100%; transition:box-shadow .15s;}
.amenity-item:hover{box-shadow:0 4px 14px rgba(0,75,40,.08);}
.amenity-item .ic{color:var(--jrb-gold); flex:none;}
.spec-check{padding-left:0; list-style:none;}
.spec-check li{padding-left:1.7rem; position:relative; margin-bottom:.7rem; font-size:.97rem;}
.spec-check li::before{content:"?"; position:absolute; left:0; color:var(--jrb-green); font-weight:700;}

.card-jrb{border:1px solid #eee2c9; border-radius:12px; background:#fff;}
.card-jrb .card-header{background:var(--jrb-green); color:#fff; font-weight:600; border-radius:12px 12px 0 0!important; font-size:.95rem; padding:14px 18px;}
.card-jrb .card-body{padding:20px;}
.badge-tag{background:var(--jrb-gold-light); color:var(--jrb-green-dark); font-weight:600; font-size:.85rem; padding:.55em .9em; border-radius:6px;}
.placeholder-box{border:1.5px dashed #cbb98a; border-radius:10px; padding:1.1rem 1.2rem; background:repeating-linear-gradient(135deg,#fff,#fff 8px,#f3ecd9 8px,#f3ecd9 9px); color:var(--jrb-mute); font-size:.92rem;}

.accordion-jrb .accordion-button{font-weight:600; color:var(--jrb-green-dark); font-size:1rem; padding:1.1rem 1.3rem;}
.accordion-jrb .accordion-body{font-size:.95rem; padding:1.1rem 1.3rem;}
.accordion-jrb .accordion-button:not(.collapsed){background:var(--jrb-gold-light); color:var(--jrb-green-dark);}
.accordion-jrb .accordion-button:focus{box-shadow:none;}
.map-frame{border-radius:12px; overflow:hidden; border:1px solid #eee2c9;}
.map-frame iframe{width:100%; height:360px; border:0; display:block;}

/* ---------- footer ---------- */
footer.jrb-footer{background:var(--jrb-green-dark); color:#cfe0d5; padding:36px 0 16px; margin-top:40px; font-size:.88rem;}
footer.jrb-footer h6{color:#fff; font-weight:700; letter-spacing:.04em; margin-bottom:14px; font-size:.82rem; text-transform:uppercase;}
footer.jrb-footer a{color:#cfe0d5; text-decoration:none;}
footer.jrb-footer a:hover{color:var(--jrb-gold-light);}
footer.jrb-footer .f-logo{height:34px; margin-bottom:10px;}
footer.jrb-footer hr{border-color:rgba(255,255,255,.15); margin:20px 0 12px;}
footer.jrb-footer small{color:#8fab9c;}
/* ==========================================================================
   FOOTER BASE
   ========================================================================== */
.jrb-footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0) 45%),
    linear-gradient(160deg, var(--jrb-green) 0%, var(--jrb-green-dark) 45%, var(--jrb-green-black) 100%);
  color:var(--jrb-cream-soft);
  padding-top:90px;
  font-family:var(--font-body);
}

/* Gold hairline that "continues" the header's dark border */
.footer-gold-line{
  position:absolute;
  top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--jrb-gold-dark) 15%,
    var(--jrb-gold-light) 50%,
    var(--jrb-gold-dark) 85%,
    transparent 100%);
  opacity:.9;
}

/* Soft ambient glows (mesh-gradient feel) */
.footer-bg-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}
.footer-bg-glow--left{
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(212,175,55,0.22) 0%, rgba(212,175,55,0) 70%);
  top:-120px; left:-140px;
}
.footer-bg-glow--right{
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
  bottom:-220px; right:-160px;
}

/* Faint skyline silhouette echoing the logo's building marks */
.footer-skyline{
  position:absolute;
  bottom:0; left:0; width:100%; height:120px;
  background-repeat:repeat-x;
  background-position:bottom;
  background-size:340px 120px;
  opacity:.05;
  pointer-events:none;
  z-index:0;
  background-image: linear-gradient(transparent 55%, transparent 55%),
    repeating-linear-gradient(90deg,
      var(--jrb-cream) 0 18px,
      transparent 18px 46px,
      var(--jrb-cream) 46px 60px,
      transparent 60px 100px,
      var(--jrb-cream) 100px 112px,
      transparent 112px 160px);
  clip-path: polygon(
    0% 100%, 0% 70%, 5% 70%, 5% 40%, 10% 40%, 10% 55%, 16% 55%, 16% 20%,
    22% 20%, 22% 60%, 28% 60%, 28% 35%, 34% 35%, 34% 50%, 40% 50%, 40% 15%,
    46% 15%, 46% 65%, 52% 65%, 52% 30%, 58% 30%, 58% 45%, 64% 45%, 64% 10%,
    70% 10%, 70% 55%, 76% 55%, 76% 25%, 82% 25%, 82% 60%, 88% 60%, 88% 40%,
    94% 40%, 94% 65%, 100% 65%, 100% 100%
  );
}

.jrb-footer .container{
  position:relative;
  z-index:1;
}

/* ==========================================================================
   COLUMN 1 ? BRAND
   ========================================================================== */
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.footer-logo-wrap{
  position:relative;
  width:56px;height:56px;
  flex:0 0 auto;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--jrb-gold-light), var(--jrb-gold) 55%, var(--jrb-gold-dark));
  box-shadow:0 0 0 1px rgba(241,212,138,0.35), 0 8px 20px rgba(0,0,0,0.35);
  transition:box-shadow .4s var(--ease-premium), transform .4s var(--ease-premium);
}
.footer-logo-glow{
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(241,212,138,0.55) 0%, rgba(241,212,138,0) 70%);
  opacity:0;
  transition:opacity .4s var(--ease-premium);
  z-index:-1;
}
.footer-brand:hover .footer-logo-wrap{
  transform:translateY(-3px);
  box-shadow:0 0 0 1px rgba(241,212,138,0.6), 0 12px 26px rgba(0,0,0,0.45);
}
.footer-brand:hover .footer-logo-glow{ opacity:1; }
.footer-logo-initials{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:16px;
  letter-spacing:.5px;
  color:var(--jrb-green-black);
}
.footer-brand-name{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:22px;
  color:var(--jrb-cream);
  margin:0;
  letter-spacing:.3px;
}
.footer-desc{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  line-height:1.8;
  color:var(--jrb-cream-soft);
  max-width:320px;
  margin-bottom:22px;
}

/* Social Icons ? glass + gold outline, scale/rotate on hover */
.social-icon{
  width:40px;height:40px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--jrb-gold-light);
  font-size:16px;
  text-decoration:none;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(212,175,55,0.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .35s var(--ease-premium),
             background .35s var(--ease-premium),
             color .35s var(--ease-premium),
             border-color .35s var(--ease-premium),
             box-shadow .35s var(--ease-premium);
}
.social-icon:hover{
  color:var(--jrb-green-black);
  background:linear-gradient(135deg,var(--jrb-gold-light),var(--jrb-gold) 60%,var(--jrb-gold-dark));
  border-color:var(--jrb-gold-light);
  transform:translateY(-4px) scale(1.08) rotate(-6deg);
  box-shadow:0 10px 22px rgba(212,175,55,0.35);
}

/* ==========================================================================
   COLUMN HEADINGS (shared)
   ========================================================================== */
.footer-heading{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:22px;
  color:var(--jrb-cream);
  margin-bottom:12px;
}
.footer-heading-rule{
  display:block;
  width:42px;
  height:3px;
  border-radius:3px;
  margin-bottom:22px;
  background:linear-gradient(90deg,var(--jrb-gold-light),var(--jrb-gold-dark));
  position:relative;
}
.footer-heading-rule::after{
  content:"";
  position:absolute;
  top:-2px; left:0;
  width:8px;height:7px;
  border-radius:2px;
  background:var(--jrb-gold-light);
  box-shadow:0 0 8px rgba(241,212,138,0.7);
}

/* ==========================================================================
   COLUMN 2 & 3 ? LINK LISTS
   ========================================================================== */
.footer-links li{
  margin-bottom:12px;
}
.footer-links a{
  font-family:var(--font-body);
  font-weight:400;
  font-size:14px;
  color:var(--jrb-cream-soft);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
  transition:color .3s var(--ease-premium), transform .3s var(--ease-premium), gap .3s var(--ease-premium);
}
.footer-links a i{
  font-size:10px;
  color:var(--jrb-gold);
  transition:transform .3s var(--ease-premium);
}
.footer-links a span{
  position:relative;
}
.footer-links a span::after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:0%; height:1px;
  background:var(--jrb-gold-light);
  transition:width .35s var(--ease-premium);
}
.footer-links a:hover{
  color:var(--jrb-cream);
  transform:translateX(4px);
}
.footer-links a:hover i{
  transform:translateX(2px);
}
.footer-links a:hover span::after{
  width:100%;
}

/* ==========================================================================
   COLUMN 4 ? CONTACT INFO
   ========================================================================== */
.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.contact-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:var(--jrb-gold-light);
  background:rgba(212,175,55,0.10);
  border:1px solid rgba(212,175,55,0.30);
  font-size:14px;
  transition:background .35s var(--ease-premium), transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
.footer-contact li:hover .contact-icon{
  background:linear-gradient(135deg,var(--jrb-gold-light),var(--jrb-gold-dark));
  color:var(--jrb-green-black);
  transform:scale(1.08);
  box-shadow:0 6px 16px rgba(212,175,55,0.3);
}
.contact-text{
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.8;
  color:var(--jrb-cream-soft);
}
.contact-text a{
  color:var(--jrb-cream-soft);
  text-decoration:none;
  transition:color .3s var(--ease-premium);
}
.contact-text a:hover{
  color:var(--jrb-gold-light);
}

/* Google Map Button ? mirrors header CTA pill/gold style */
.map-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:11px 22px;
  border-radius:var(--jrb-radius-pill);
  font-family:var(--font-heading);
  font-weight:600;
  font-size:13px;
  letter-spacing:.3px;
  color:var(--jrb-green-black);
  text-decoration:none;
  background:linear-gradient(135deg,var(--jrb-gold-light),var(--jrb-gold) 55%,var(--jrb-gold-dark));
  background-size:200% 100%;
  background-position:0% 0%;
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
  position:relative;
  overflow:hidden;
  transition:background-position .5s var(--ease-premium), transform .35s var(--ease-premium), box-shadow .35s var(--ease-premium);
}
.map-btn::before{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);
  transition:left .6s var(--ease-premium);
}
.map-btn:hover{
  background-position:100% 0%;
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(212,175,55,0.4);
}
.map-btn:hover::before{
  left:120%;
}

/* ==========================================================================
   DIVIDER
   ========================================================================== */
.footer-divider{
  position:relative;
  height:1px;
  margin:60px 0 26px;
  background:linear-gradient(90deg,
    rgba(212,175,55,0) 0%,
    rgba(212,175,55,0.55) 50%,
    rgba(212,175,55,0) 100%);
}
.footer-divider-diamond{
  position:absolute;
  top:50%; left:50%;
  width:9px; height:9px;
  background:var(--jrb-gold-light);
  transform:translate(-50%,-50%) rotate(45deg);
  box-shadow:0 0 10px rgba(241,212,138,0.8);
}

/* ==========================================================================
   BOTTOM FOOTER
   ========================================================================== */
.footer-bottom{
  padding-bottom:26px;
}
.footer-copy{
  font-family:var(--font-body);
  font-size:13px;
  color:var(--jrb-cream-faint);
}
.footer-copy span{
  color:var(--jrb-cream-soft);
  font-weight:500;
}
.footer-bottom-links{
  font-size:13px;
}
.footer-bottom-links a{
  color:var(--jrb-cream-faint);
  text-decoration:none;
  transition:color .3s var(--ease-premium);
}
.footer-bottom-links a:hover{
  color:var(--jrb-gold-light);
}
.footer-bottom-links .dot{
  color:rgba(212,175,55,0.5);
  font-size:10px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px){
  .jrb-footer{ padding-top:70px; }
  .footer-heading{ font-size:20px; }
}

@media (max-width: 767.98px){
  .jrb-footer{ padding-top:56px; text-align:left; }
  .footer-desc{ max-width:100%; }
  .footer-divider{ margin:44px 0 20px; }
  .footer-bottom{ text-align:center; }
  .footer-bottom-links{ flex-wrap:wrap; justify-content:center; }
}

@media (max-width: 575.98px){
  .footer-brand-name{ font-size:20px; }
  .footer-logo-wrap{ width:48px; height:48px; }
  .map-btn{ width:100%; justify-content:center; }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
  }
}

/* CSS extracted from about.php */

  #jrb-about{
    background:#FFFFFF;
    color:#20291F;
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    position:relative;
  }

  #jrb-about h1, #jrb-about h2, #jrb-about h3, #jrb-about h4,
  #jrb-about .jrb-heading{
    font-family:'Poppins', sans-serif;
    font-weight:700;
    font-size:40px;
    color:#0B3722;
    letter-spacing:-0.01em;
    margin-bottom:16px;
  }

  #jrb-about p, #jrb-about li, #jrb-about span, #jrb-about a{
    font-family:'Inter', sans-serif;
    font-weight:400;
    font-size:14px;
    line-height:1.8;
    color:#5E6B60;
  }

  #jrb-about section{padding:104px 0; position:relative;}
  @media (max-width:767.98px){
    #jrb-about section{padding:64px 0;}
    #jrb-about h1, #jrb-about h2, #jrb-about h3, #jrb-about .jrb-heading{font-size:28px;}
  }

  #jrb-about .jrb-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Poppins', sans-serif;
    font-size:12.5px; font-weight:600; letter-spacing:.22em;
    text-transform:uppercase; color:#9C7A2E;
    margin-bottom:14px;
  }
  #jrb-about .jrb-eyebrow::before{
    content:""; width:30px; height:1px; background:#9C7A2E; display:inline-block;
  }
  #jrb-about .jrb-eyebrow.jrb-on-dark{color:#EAD9A0;}
  #jrb-about .jrb-eyebrow.jrb-on-dark::before{background:#EAD9A0;}

  /* Luxury divider using font-awesome icon */
  #jrb-about .jrb-title-divider{
    display:flex; align-items:center; gap:10px; color:#C6A44E; margin:0 0 22px; font-size: 14px;
  }
  #jrb-about .jrb-title-divider::after{
    content:""; width:50px; height:2px; background: linear-gradient(90deg, #C6A44E, transparent); display:inline-block;
  }
  #jrb-about .jrb-title-divider.jrb-center{justify-content:center; margin-left:auto; margin-right:auto;}
  #jrb-about .jrb-title-divider.jrb-center::before{
    content:""; width:50px; height:2px; background: linear-gradient(270deg, #C6A44E, transparent); display:inline-block;
  }

  /* Horizontal rule with building icon */
  .jrb-icon-divider-wrap{
    display:flex; align-items:center; justify-content:center; position:relative; padding:30px 0; background: #0B3722; color: #1C7248;
  }
  .jrb-icon-divider-line{
    position:absolute; top:50%; left:0; right:0; height:1px; background: rgba(234,217,160,0.15); z-index: 1;
  }
  .jrb-icon-divider-center{
    position:relative; z-index: 2; background: #0B3722; padding: 0 20px; font-size: 24px; color: #C6A44E;
  }

  /* ==========================================================
     BUTTONS (Pure CSS Premium Animation - No jQuery)
  ========================================================== */
  #jrb-about .jrb-btn{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Poppins', sans-serif;
    font-weight:600; font-size:13px; letter-spacing:.05em;
    text-transform:uppercase;
    padding:15px 34px; border-radius:6px;
    transition:all .4s cubic-bezier(.22,1,.36,1);
    text-decoration:none;
    cursor:pointer;
    z-index: 1;
  }
  #jrb-about .jrb-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
    z-index: -1;
  }
  #jrb-about .jrb-btn:hover::before {
    left: 100%;
  }
  #jrb-about .jrb-btn-outline-green{
    background:transparent; border:1px solid #145C38; color:#145C38;
  }
  #jrb-about .jrb-btn-outline-green:hover{
    background:#145C38; color:#fff; transform:translateY(-3px);
    box-shadow: 0 10px 20px rgba(20,92,56,0.15);
  }

  /* ==========================================================
     PURE CSS SCROLL REVEAL ANIMATIONS 
  ========================================================== */
  @keyframes jrbFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes jrbFadeLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes jrbFadeRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes jrbScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
  }

  @supports (animation-timeline: view()) {
    .jrb-fade-up, .jrb-fade-left, .jrb-fade-right, .jrb-scale-in {
      animation-timing-function: cubic-bezier(.22,1,.36,1);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .jrb-fade-up { animation-name: jrbFadeUp; }
    .jrb-fade-left { animation-name: jrbFadeLeft; }
    .jrb-fade-right { animation-name: jrbFadeRight; }
    .jrb-scale-in { animation-name: jrbScaleIn; }
  }

  @media (prefers-reduced-motion: no-preference) {
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-fade-up,
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-fade-left,
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-fade-right,
    #jrb-about:not(:supports(animation-timeline: view())) .jrb-scale-in {
      opacity: 1;
      transform: none;
    }
    .jrb-fade-up, .jrb-fade-left, .jrb-fade-right, .jrb-scale-in {
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }
  }

  /* ==========================================================
     COMPANY PROFILE
  ========================================================== */
  .jrb-profile-section{
    padding-top:80px; /* Reduced to align nicely after removing the top tag */
    position:relative;
    background:#FFFFFF;
    overflow:hidden;
  }
  .jrb-profile-section::before{
    content:"";
    position:absolute; top:0; right:0; width:46%; height:100%;
    background-image:radial-gradient(rgba(198,164,78,.22) 1.4px, transparent 1.4px);
    background-size:22px 22px;
    -webkit-mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, transparent);
    mask-image:linear-gradient(180deg, transparent, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, transparent);
    pointer-events:none;
  }
  @media (max-width:767.98px){ .jrb-profile-section{ padding-top:64px; } }

  .jrb-profile-img-wrap{ position:relative; }
  .jrb-profile-img-wrap .jrb-ring{
    position:absolute; top:-24px; left:-24px; width:120px; height:120px;
    border:1.5px solid #C6A44E; border-radius:50%; z-index:0;
  }
  .jrb-profile-img-frame{
    overflow:hidden; border-radius:26px;
    box-shadow:0 22px 48px rgba(11,55,34,0.12); position:relative; z-index:1; height:540px;
  }
  .jrb-profile-img-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
  .jrb-profile-img-frame:hover img{ transform:scale(1.08); }

  .jrb-exp-badge{
    position:absolute; bottom:-26px; right:-20px; z-index:2;
    background:linear-gradient(135deg, #145C38 0%, #0B3722 100%);
    color:#fff; border-radius:16px; padding:26px 30px;
    box-shadow:0 22px 48px rgba(11,55,34,0.12); text-align:center; min-width:156px;
  }
  .jrb-exp-badge .num{ font-family:'Poppins', sans-serif; font-weight:700; font-size:34px; color:#EAD9A0; line-height:1; display:block; margin-bottom:6px; }
  .jrb-exp-badge .lbl{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.78); }
  @media (max-width:991.98px){
    .jrb-profile-img-frame{ height:380px; }
    .jrb-exp-badge{ right:10px; bottom:-20px; padding:18px 20px; }
  }

  .jrb-highlight-row{ display:flex; gap:16px; margin-top:22px; flex-wrap:wrap; }
  .jrb-highlight-item{
    display:flex; align-items:center; gap:12px;
    background:#FAF7EF; border:1px solid #E4E0D2;
    border-radius:12px; padding:14px 18px; flex:1 1 210px;
    transition:all .35s cubic-bezier(.22,1,.36,1);
  }
  .jrb-highlight-item:hover{ border-color:#C6A44E; box-shadow:0 10px 26px rgba(11,55,34,0.08); transform:translateY(-3px); }
  .jrb-highlight-item i{ color:#9C7A2E; font-size:18px; }
  .jrb-highlight-item span{ font-family:'Poppins', sans-serif; font-size:13px; font-weight:600; color:#0B3722; }

  /* ==========================================================
     VISION & MISSION
  ========================================================== */
  .jrb-vm-section{
    background:linear-gradient(160deg, #0B3722 0%, #082B1A 100%);
    position:relative;
  }
  .jrb-vm-section::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 12% 18%, rgba(198,164,78,.10), transparent 42%),
      radial-gradient(circle at 88% 82%, rgba(198,164,78,.10), transparent 42%);
    pointer-events:none;
  }
  .jrb-vm-card{
    position:relative; z-index:1;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    border:1px solid rgba(234,217,160,.22);
    border-radius:26px;
    padding:46px 40px; height:100%;
    overflow:hidden;
    transition:transform .45s cubic-bezier(.22,1,.36,1), background .45s cubic-bezier(.22,1,.36,1);
  }
  .jrb-vm-card::after{
    content:""; position:absolute; inset:0; border-radius:26px;
    padding:1px;
    background:linear-gradient(135deg, #C6A44E, transparent 40%, transparent 60%, #C6A44E);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1);
  }
  .jrb-vm-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,.09); }
  .jrb-vm-card:hover::after{ opacity:1; }
  .jrb-vm-icon{
    width:64px; height:64px; border-radius:50%;
    background:linear-gradient(135deg, #C6A44E, #9C7A2E);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:26px;
  }
  #jrb-about .jrb-vm-card h3{ color:#EAD9A0; font-size:19px; margin-bottom:14px; }
  .jrb-vm-card p{ color:rgba(255,255,255,.72); }
  .jrb-vm-mark{
    position:absolute; top:24px; right:30px; z-index:0;
    font-family:'Poppins', sans-serif; font-weight:700; font-size:46px;
    color:rgba(234,217,160,.14); letter-spacing:0;
  }

  /* ==========================================================
     DIRECTOR'S MESSAGE
  ========================================================== */
  .jrb-director-img-wrap{ position:relative; }
  .jrb-director-frame{
    border-radius:26px; overflow:hidden; height:520px;
    box-shadow:0 22px 48px rgba(11,55,34,0.12);
  }
  .jrb-director-frame img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
  .jrb-director-img-wrap:hover .jrb-director-frame img{ transform:scale(1.06); }
  .jrb-director-dot{
    position:absolute; width:170px; height:170px; border-radius:50%;
    background:#EEF4F0; z-index:-1; top:-30px; left:-30px;
  }

  .jrb-quote-panel{
    background:linear-gradient(135deg, #FAF7EF 0%, #FFFFFF 100%);
    border:1px solid #E4E0D2; border-left:3px solid #C6A44E;
    border-radius:0 16px 16px 0;
    padding:30px 32px; margin-bottom:26px;
  }
  .jrb-quote-mark{
    width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle, #EAD9A0 0%, #C6A44E 100%);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
    margin-bottom:22px;
    animation:jrb-glow 3.2s ease-in-out infinite;
  }
  @keyframes jrb-glow{
    0%,100%{ box-shadow:0 0 0 0 rgba(198,164,78,.45); }
    50%{ box-shadow:0 0 0 14px rgba(198,164,78,0); }
  }
  .jrb-director-quote{
    font-family:'Poppins', sans-serif; font-size:19px; font-weight:600;
    color:#0B3722; line-height:1.6; margin-bottom:22px;
  }
  .jrb-director-name{ font-family:'Parisienne', cursive; font-size:34px; color:#9C7A2E; margin-bottom:2px; line-height:1; }
  .jrb-director-role{
    font-family:'Poppins', sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color:#5E6B60; display:block; margin-top:6px;
  }

  /* ==========================================================
     COMPANY INFORMATION
  ========================================================== */
  .jrb-info-section{ background:#FAF7EF; position:relative; overflow:hidden; }
  .jrb-info-section::before{
    content:"";
    position:absolute; left:0; bottom:0; width:38%; height:70%;
    background-image:radial-gradient(rgba(20,92,56,.10) 1.4px, transparent 1.4px);
    background-size:24px 24px;
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 85%);
    mask-image:linear-gradient(90deg, rgba(0,0,0,.6), transparent 85%);
    pointer-events:none;
  }
  .jrb-info-card{
    background:#fff; border:1px solid #E4E0D2; border-radius:16px;
    padding:32px 26px; height:100%; text-align:left; position:relative; overflow:hidden;
    transition:all .4s cubic-bezier(.22,1,.36,1);
  }
  .jrb-info-card::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:3px;
    background:linear-gradient(90deg, #C6A44E, #145C38);
    transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,1,.36,1);
  }
  .jrb-info-card:hover{ transform:translateY(-6px); box-shadow:0 10px 26px rgba(11,55,34,0.08); }
  .jrb-info-card:hover::before{ transform:scaleX(1); }
  .jrb-info-icon{
    width:50px; height:50px; border-radius:12px;
    background:#EEF4F0; color:#145C38;
    display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:18px;
    transition:all .35s cubic-bezier(.22,1,.36,1);
  }
  .jrb-info-card:hover .jrb-info-icon{ background:#145C38; color:#fff; }
  .jrb-info-icon-alt{ background:#EAD9A0; color:#9C7A2E; }
  .jrb-info-card:hover .jrb-info-icon-alt{ background:#C6A44E; color:#fff; }
  #jrb-about .jrb-info-card h4{ font-size:15.5px; font-weight:600; color:#0B3722; margin-bottom:6px; font-family:'Poppins',sans-serif; }
  .jrb-info-card .jrb-info-value{ font-size:13.5px; color:#5E6B60; margin-bottom:0; }
  .jrb-info-card .jrb-count-number{ font-family:'Poppins', sans-serif; font-weight:700; font-size:22px; color:#9C7A2E; }


/* CSS extracted from contect.php */

        /* ==========================================================================
           JRB GROUP - PREMIUM CONTACT PAGE STYLESHEET
           Branding Profile (from image_6e285c.png):
             - Deep Emerald Green : #0B3722 / #145C38
             - Luxury Metallic Gold: #C6A44E / #9C7A2E
             - Neutral Foundation : #FFFFFF / #F8F9FA / #5E6B60
           ========================================================================== */

        /* --- Typography & Global Setup --- */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght=400;500;600&family=Poppins:wght=500;600;700;800&display=swap');

        body {
            background-color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            color: #20291F;
            overflow-x: hidden;
        }

        /* --- Core Section Structure --- */
        .jrb-contact-section {
            padding: 100px 0;
            position: relative;
            background-color: #FFFFFF;
        }

        .jrb-bg-shapes {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .jrb-shape {
            position: absolute;
            background: radial-gradient(circle, rgba(198, 164, 78, 0.06) 0%, transparent 70%);
            border-radius: 50%;
            animation: floatingGlow 8s ease-in-out infinite alternate;
        }

        .jrb-shape-1 { width: 500px; height: 500px; top: -10%; left: -10%; }
        .jrb-shape-2 { width: 600px; height: 600px; bottom: -15%; right: -10%; animation-delay: -3s; }

        /* --- Typography & Headings --- */
        .jrb-contact-section h1, 
        .jrb-contact-section h2, 
        .jrb-contact-section h3, 
        .jrb-contact-section h4 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            color: #0B3722;
        }

        .jrb-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #9C7A2E;
            margin-bottom: 12px;
        }

        .jrb-eyebrow::before {
            content: "";
            width: 24px;
            height: 1.5px;
            background-color: #C6A44E;
        }

        .jrb-main-heading {
            font-size: 40px;
            letter-spacing: -0.02em;
            line-height: 1.25;
        }

        .jrb-description {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.8;
            color: #5E6B60;
            max-width: 620px;
        }

        /* --- Premium Inquiry Form (Left Side) --- */
        .jrb-form-wrapper {
            background-color: #FFFFFF;
            border: 1px solid rgba(20, 92, 56, 0.08);
            border-radius: 20px;
            padding: 45px;
            box-shadow: 0 12px 32px rgba(11, 55, 34, 0.08);
            position: relative;
            z-index: 1;
        }

        .jrb-form-group {
            margin-bottom: 24px;
        }

        .jrb-form-group label {
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: #0B3722;
            margin-bottom: 8px;
            display: block;
        }

        .jrb-form-control {
            width: 100%;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: #20291F;
            background-color: #F9FAFB;
            border: 1px solid rgba(20, 92, 56, 0.1);
            border-radius: 10px;
            padding: 14px 18px;
            transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-form-control:focus {
            outline: none;
            background-color: #FFFFFF;
            border-color: #C6A44E;
            box-shadow: 0 0 0 4px rgba(198, 164, 78, 0.12);
        }

        select.jrb-form-control {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145C38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 18px center;
            background-size: 16px;
            padding-right: 45px;
        }

        .jrb-form-control::placeholder {
            color: #A0ABA1;
            font-size: 13.5px;
        }

        /* --- Luxury Action Button --- */
        .jrb-btn-submit {
            width: 100%;
            background: linear-gradient(135deg, #145C38 0%, #0B3722 100%);
            color: #FFFFFF;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 16px 32px;
            border: none;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            box-shadow: 0 6px 20px rgba(11, 55, 34, 0.15);
        }

        .jrb-btn-submit::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.6s ease;
            z-index: -1;
        }

        .jrb-btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(11, 55, 34, 0.25);
        }

        .jrb-btn-submit:hover::before {
            left: 100%;
        }

        /* --- Premium Information Cards (Right Side) --- */
        .jrb-info-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .jrb-contact-card {
            background-color: #FFFFFF;
            border: 1px solid rgba(198, 164, 78, 0.12);
            border-radius: 16px;
            padding: 24px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            box-shadow: 0 4px 20px rgba(11, 55, 34, 0.04);
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-contact-card:hover {
            transform: translateX(6px) translateY(-2px);
            border-color: rgba(198, 164, 78, 0.3);
            box-shadow: 0 12px 32px rgba(11, 55, 34, 0.08);
        }

        .jrb-info-icon-box {
            width: 48px;
            height: 48px;
            min-width: 48px;
            background-color: #F9FAFB;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #145C38;
            font-size: 18px;
            transition: all 0.35s ease;
        }

        .jrb-contact-card:hover .jrb-info-icon-box {
            background-color: #145C38;
            color: #FFFFFF;
            animation: iconBounce 0.5s ease;
        }

        .jrb-contact-card h4 {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }

        .jrb-contact-card p {
            font-size: 13.5px;
            line-height: 1.6;
            color: #5E6B60;
            margin-bottom: 0;
        }

        /* --- Map Interface --- */
        .jrb-map-container {
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(20, 92, 56, 0.08);
            box-shadow: 0 12px 32px rgba(11, 55, 34, 0.08);
            height: 100%;
            min-height: 320px;
        }

        .jrb-map-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
        }

        /* --- Floating WhatsApp Anchor --- */
        .jrb-whatsapp-float {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: #25D366;
            color: #FFFFFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            text-decoration: none;
            z-index: 9999;
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-whatsapp-float:hover {
            color: #FFFFFF;
            transform: scale(1.1);
            box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
        }

        .jrb-whatsapp-pulse {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background-color: #25D366;
            opacity: 0.4;
            z-index: -1;
            animation: pulseRing 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
        }

        /* --- Pure CSS Native Animations --- */
        @keyframes floatingGlow {
            0% { transform: translateY(0) scale(1); }
            100% { transform: translateY(-20px) scale(1.05); }
        }

        @keyframes pulseRing {
            0% { transform: scale(0.95); opacity: 0.5; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }

        .jrb-animate-fade-up {
            animation: nativeFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
        }

        @keyframes nativeFadeUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Mobile Layout Overrides */
        @media (max-width: 991.98px) {
            .jrb-contact-section { padding: 60px 0; }
            .jrb-main-heading { font-size: 32px; }
            .jrb-form-wrapper { padding: 30px 20px; }
            .jrb-map-container { height: 350px; margin-top: 24px; }
        }
    

/* CSS extracted from gallery.php */

/* =========================================================
   JRB GROUP — PREMIUM GALLERY THEME
   Palette derived from the JRB Group logo:
   - Deep Emerald Green  : #006738  (primary brand green)
   - Antique Gold        : #B68743  (primary brand gold)
   - Light Gold          : #ECC98F  (gradient highlight)
   - Deep Gold           : #8B6B34  (gradient shadow)
   - Ink Black            : #111111  (dark sections)
   - Ivory White          : #FFFFFF  (light sections)
   ========================================================= */
:root{
  --green:        #006738;
  --green-dark:   #00431f;
  --green-light:  #0f8a4d;
  --gold-light:   #ECC98F;
  --gold:         #B68743;
  --gold-dark:    #8B6B34;
  --gold-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-dark) 100%);
  --green-gradient: linear-gradient(135deg, var(--green-light) 0%, var(--green) 60%, var(--green-dark) 100%);
  --ink:          #111111;
  --ink-soft:     #1b1b1b;
  --white:        #FFFFFF;
  --cream:        #FAF7F1;
  --muted:        #7a7568;
  --line:         rgba(182,135,67,0.28);
  --shadow-gold:  0 20px 45px -18px rgba(182,135,67,0.45);
  --shadow-dark:  0 20px 45px -18px rgba(0,0,0,0.55);
  --radius:       14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:400;
  color:#2b2b28;
  background:var(--white);
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
}
a{text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--gold-light);color:var(--ink);}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* -------------------- Utility: gold text -------------------- */
.text-gold-gradient{
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:28px;height:1px;
  background:var(--gold-gradient);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.jrb-nav{
  background:var(--ink);
  padding:16px 0;
  border-bottom:1px solid rgba(182,135,67,0.2);
}
.jrb-nav .brand{
  display:flex;align-items:center;gap:10px;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:20px;
  color:var(--white);
}
.jrb-nav .brand .mark{
  width:38px;height:38px;border-radius:50%;
  background:var(--gold-gradient);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--ink);font-weight:800;
}
.jrb-nav .brand small{
  display:block;font-family:'Inter',sans-serif;font-size:9px;letter-spacing:.28em;
  font-weight:600;color:var(--green-light);text-transform:uppercase;margin-top:-2px;
}
.jrb-nav .nav-links a{
  color:#cfcfcf;font-size:13px;font-weight:500;margin-left:28px;
  position:relative;transition:color .3s var(--ease);
}
.jrb-nav .nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;
  background:var(--gold-gradient);transition:width .35s var(--ease);
}
.jrb-nav .nav-links a:hover{color:var(--gold-light);}
.jrb-nav .nav-links a:hover::after{width:100%;}
.jrb-nav .nav-links a.active{color:var(--gold-light);}
.jrb-nav .nav-links a.active::after{width:100%;}

/* =========================================================
   HERO / GALLERY HEADER  (Dark section + blueprint plot-grid motif)
   Signature element: faint gold survey/plot-boundary lines &
   corner coordinate ticks — a nod to land parcel demarcation,
   the core of a plot-development business.
   ========================================================= */

/* =========================================================
   FILTER SECTION (White)
   ========================================================= */
.filter-section{
  background:var(--white);
  padding:46px 0 34px;
  border-bottom:1px solid #f0ece2;
}
.filter-wrap{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.filter-btn{
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:600;
  letter-spacing:.03em;
  color:#4a463e;
  background:var(--white);
  border:1px solid #e6e0d2;
  padding:10px 22px;
  border-radius:30px;
  cursor:pointer;
  transition:all .35s var(--ease);
  position:relative;
  overflow:hidden;
}
.filter-btn i{margin-right:6px;color:var(--gold);transition:color .3s var(--ease);}
.filter-btn:hover{
  border-color:var(--gold);
  color:var(--ink);
  transform:translateY(-2px);
  box-shadow:var(--shadow-gold);
}
.filter-btn.active{
  color:var(--white);
  border-color:transparent;
  background:var(--green-gradient);
  box-shadow:0 12px 28px -10px rgba(0,103,56,0.5);
}
.filter-btn.active i{color:var(--gold-light);}

/* =========================================================
   GALLERY GRID (Cream background)
   ========================================================= */
.gallery-section{
  background:var(--cream);
  padding:60px 0 90px;
  position:relative;
}
.gallery-item{
  margin-bottom:30px;
  opacity:0;
  transform:translateY(28px);
}
.gallery-item.aos-in{
  animation:fadeUp .7s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
.gallery-item.fade-left.aos-in{animation-name:fadeLeft;}
.gallery-item.fade-right.aos-in{animation-name:fadeRight;}
.gallery-item.zoom-in.aos-in{animation-name:zoomIn;}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:translateX(0);}}
@keyframes fadeRight{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:translateX(0);}}
@keyframes zoomIn{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}

.gallery-item.filtered-out{
  display:none;
}

.g-card{
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  border:1px solid #efe9db;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  height:100%;
  position:relative;
}
.g-card::before{
  /* border glow ring */
  content:"";position:absolute;inset:0;border-radius:var(--radius);
  padding:1.5px;
  background:var(--gold-gradient);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s var(--ease);
  pointer-events:none;z-index:3;
}
.g-card:hover, .g-card:focus-visible{
  transform:translateY(-9px);
  box-shadow:var(--shadow-gold);
  border-color:transparent;
}
.g-card:hover::before, .g-card:focus-visible::before{opacity:1;}

.g-card-img{position:relative;overflow:hidden;aspect-ratio:4/3.2;background:#e9e3d4;}
.g-card-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.g-card:hover .g-card-img img{transform:scale(1.12);}

.g-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(17,17,17,0.72);
  backdrop-filter:blur(4px);
  color:var(--gold-light);
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:20px;
  border:1px solid rgba(182,135,67,0.4);
}
.g-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.82) 100%);
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:18px;
  opacity:0;transition:opacity .5s var(--ease);
}
.g-card:hover .g-overlay, .g-card:focus-visible .g-overlay{opacity:1;}
.g-view{
  color:var(--white);font-size:12px;font-weight:600;letter-spacing:.05em;
  border:1px solid var(--gold-light);padding:8px 18px;border-radius:24px;
  transform:translateY(10px);transition:transform .5s var(--ease);
  background:rgba(182,135,67,0.18);
}
.g-card:hover .g-view{transform:translateY(0);}

.g-card-body{padding:18px 18px 20px;}
.g-title{
  font-size:16px;font-weight:600;margin:0 0 6px;color:var(--ink);
  transition:color .3s var(--ease);
}
.g-card:hover .g-title{color:var(--green);}
.g-desc{
  font-size:12.5px;line-height:1.6;color:var(--muted);margin:0;
}

/* Floating decorative shapes in gallery section */
.deco-shape{position:absolute;border-radius:50%;opacity:.5;pointer-events:none;z-index:0;}
.deco-shape.d1{width:10px;height:10px;background:var(--gold);top:8%;left:4%;animation:floaty 6s ease-in-out infinite;}
.deco-shape.d2{width:6px;height:6px;background:var(--green);top:60%;right:5%;animation:floaty 8s ease-in-out infinite reverse;}
.deco-shape.d3{width:8px;height:8px;background:var(--gold);bottom:10%;left:8%;animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}

/* =========================================================
   LIGHTBOX (Mandatory) — full-screen premium
   ========================================================= */
.jrb-lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(8,8,8,0.97);
  display:none;
  align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .4s var(--ease);
}
.jrb-lightbox.open{display:flex;opacity:1;}
.jrb-lightbox .lb-grid{
  position:absolute;inset:0;opacity:.15;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:60px 60px;
}
.lb-stage{
  position:relative;z-index:2;
  width:min(1100px,92vw);
  max-height:90vh;
  display:flex;flex-direction:column;align-items:center;
}
.lb-imgwrap{
  position:relative;width:100%;
  border:1px solid rgba(182,135,67,.35);
  border-radius:10px;
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.lb-imgwrap img{
  width:100%;max-height:64vh;object-fit:contain;background:#000;
  opacity:0;transform:scale(.97);
  animation:lbReveal .5s var(--ease) forwards;
}
@keyframes lbReveal{to{opacity:1;transform:scale(1);}}
/* corner ticks on lightbox image, echoing survey-mark motif */
.lb-imgwrap::before, .lb-imgwrap::after{
  content:"";position:absolute;width:26px;height:26px;
  border:1.5px solid var(--gold-light);opacity:.8;z-index:3;pointer-events:none;
}
.lb-imgwrap::before{top:10px;left:10px;border-right:0;border-bottom:0;}
.lb-imgwrap::after{bottom:10px;right:10px;border-left:0;border-top:0;}

.lb-info{
  text-align:center;color:var(--white);margin-top:20px;max-width:640px;
}
.lb-cat{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);font-weight:600;
}
.lb-title{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;margin:8px 0 6px;}
.lb-desc{font-size:13px;color:#c9c6bd;line-height:1.7;}
.lb-counter{
  margin-top:14px;font-size:12px;color:var(--muted);
  letter-spacing:.08em;
}
.lb-counter b{color:var(--gold-light);font-weight:600;}

.lb-close, .lb-nav{
  position:absolute;z-index:5;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(182,135,67,.4);
  color:var(--white);font-size:18px;cursor:pointer;
  transition:all .3s var(--ease);
}
.lb-close:hover, .lb-nav:hover{
  background:var(--gold-gradient);color:var(--ink);
  box-shadow:var(--shadow-gold);
  transform:scale(1.08);
}
.lb-close{top:24px;right:24px;}
.lb-nav.prev{left:16px;top:50%;transform:translateY(-50%);}
.lb-nav.next{right:16px;top:50%;transform:translateY(-50%);}
.lb-nav.prev:hover{transform:translateY(-50%) scale(1.08);}
.lb-nav.next:hover{transform:translateY(-50%) scale(1.08);}
@media (max-width:768px){
  .lb-nav{width:40px;height:40px;font-size:15px;}
  .lb-nav.prev{left:6px;}
  .lb-nav.next{right:6px;}
  .lb-close{top:14px;right:14px;width:40px;height:40px;}
  .lb-title{font-size:18px;}
}

/* =========================================================
   FOOTER CTA (Dark)
   ========================================================= */
.gallery-footer{
  background:var(--ink);
  color:#cfcfcf;
  padding:56px 0 28px;
  position:relative;
  overflow:hidden;
}
.gallery-footer .footer-glow{
  position:absolute;top:-100px;left:50%;transform:translateX(-50%);
  width:520px;height:220px;background:var(--gold);filter:blur(120px);opacity:.18;
}
.gallery-footer h4{color:var(--white);font-size:22px;margin-bottom:10px;}
.gallery-footer p{font-size:13px;color:#a8a49a;max-width:480px;}
.btn-gold{
  background:var(--gold-gradient);
  color:var(--ink);font-weight:600;font-size:13px;
  padding:13px 30px;border-radius:30px;border:none;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:var(--shadow-gold);color:var(--ink);}
.footer-bottom{
  border-top:1px solid rgba(182,135,67,.18);
  margin-top:40px;padding-top:20px;
  font-size:11.5px;color:#7a766c;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.footer-bottom a{color:#a8a49a;}
.footer-bottom a:hover{color:var(--gold-light);}

@media (max-width:576px){
  .gallery-hero{padding:70px 0 60px;}
  .gallery-hero h1{font-size:30px;}
}


/* CSS extracted from project.php */

/* =========================================================================
   JRB GROUP — PREMIUM PROJECTS PAGE
   Design tokens derived from the JRB Group logo:
   - Antique Gold  (crest, wordmark strokes)
   - Emerald Green (skyline / roof motif, "JRB" wordmark)
   - Ivory / Cream (negative space of the mark)
   ========================================================================= */

:root{
  --gold:        #C9A227;
  --gold-light:  #EAD08C;
  --gold-dark:   #96721A;
  --green:       #145C3C;
  --green-dark:  #0B3D28;
  --green-soft:  #E8F0EA;
  --cream:       #FBF7EF;
  --ivory:       #F4EFE3;
  --charcoal:    #211E1A;
  --stone:       #6E685C;
  --white:       #FFFFFF;

  /* RGB triplets of the tokens above — every translucent color in this file
     is built from these, so the whole palette stays in sync with the logo. */
  --gold-rgb:       201,162,39;
  --gold-light-rgb: 234,208,140;
  --green-rgb:      20,92,60;
  --green-dark-rgb: 11,61,40;
  --charcoal-rgb:   33,30,26;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --shadow-soft: 0 20px 45px -20px rgba(var(--green-rgb),0.25);
  --shadow-gold: 0 12px 30px -10px rgba(var(--gold-rgb),0.35);
  --radius-lg: 22px;
  --radius-md: 14px;
}

*{box-sizing:border-box;}

body{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--charcoal);
  background: var(--cream);
  overflow-x:hidden;
}

h1,h2,h3,h4,.font-head{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: -0.01em;
}

.section-heading{ font-size: 40px; line-height: 1.15; }
@media (max-width:767px){ .section-heading{ font-size: 30px; } }
.heading-on-dark{ color: var(--white); }

.eyebrow{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:28px; height:2px;
  background: var(--gold);
  display:inline-block;
}
.eyebrow.on-dark{ color: var(--gold-light); }

p{ color: var(--stone); }

.btn{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing:.03em;
  border-radius: 50px;
  padding: 14px 32px;
  position: relative;
  overflow: hidden;
  transition: all .35s ease;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: var(--white);
  border:none;
  box-shadow: var(--shadow-gold);
}
.btn-gold:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -10px rgba(var(--gold-rgb),.5); color:#fff; }
.btn-outline-green{
  background: transparent;
  border: 1.5px solid var(--green);
  color: var(--green);
}
.btn-outline-green:hover{ background: var(--green); color: #fff; transform: translateY(-3px); }
.btn-outline-gold-dark{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
}
.btn-outline-gold-dark:hover{ background: var(--gold); border-color: var(--gold); color:#fff; transform: translateY(-3px);}

/* ripple */
.ripple-span{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: rippleAnim .6s linear;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3); opacity:0; } }

img{ max-width:100%; }

/* ---------- Reveal Animations (driven by jQuery toggling classes) ---------- */
.reveal{ opacity:0; transition: all .9s cubic-bezier(.19,1,.22,1); }
.fade-up{ transform: translateY(50px); }
.fade-left{ transform: translateX(-60px); }
.fade-right{ transform: translateX(60px); }
.fade-scale{ transform: scale(.92); }
.reveal.in-view{ opacity:1; transform: translate(0,0) scale(1); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================ PROJECT CARDS ============================= */
.project-card{
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: 0 10px 30px -18px rgba(var(--charcoal-rgb),.25);
  transition: transform .5s ease, box-shadow .5s ease;
  height:100%;
  border: 1px solid rgba(var(--gold-rgb),.08);
}
.project-card:hover{
  transform: translateY(-10px);
  box-shadow: var(--shadow-soft);
}
.project-card .img-wrap{
  position:relative; overflow:hidden; height:230px;
}
.project-card .img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s cubic-bezier(.19,1,.22,1);
}
.project-card:hover .img-wrap img{ transform: scale(1.12); }
.badge-status{
  position:absolute; top:16px; left:16px;
  font-family: var(--font-head); font-size:11px; font-weight:600;
  padding:6px 14px; border-radius:50px; letter-spacing:.03em;
  background: rgba(255,255,255,.92); color: var(--green);
}
.badge-price{
  position:absolute; bottom:-1px; right:16px; transform: translateY(50%);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color:#fff; font-family: var(--font-head); font-weight:700; font-size:13px;
  padding:10px 18px; border-radius:12px 12px 4px 12px;
  box-shadow: var(--shadow-gold);
}
.project-card .body-wrap{ padding: 34px 24px 24px; }
.project-card .p-type{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-dark);
  font-family: var(--font-head); font-weight:600;
}
.project-card h3{ font-size:21px; margin: 6px 0 10px; }
.project-card .meta-row{
  display:flex; flex-wrap:wrap; gap:14px; font-size:12.5px; color: var(--stone); margin-bottom:12px;
}
.project-card .meta-row span{ display:flex; align-items:center; gap:6px; }
.project-card .meta-row i{ color: var(--green); }
.project-card p.desc{ font-size:13px; margin-bottom:18px; }
.link-explore{
  font-family: var(--font-head); font-weight:600; font-size:13px;
  color: var(--green); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.link-explore i{ transition: transform .3s ease; }
.link-explore:hover i{ transform: translateX(6px); }
.link-explore:hover{ color: var(--gold-dark); }

/* ============================ PROJECT DETAILS ============================ */
.detail-row{ padding: 60px 0; }
.detail-row .img-frame{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft);
}
.detail-row .img-frame img{ width:100%; height:460px; object-fit:cover; transition: transform .8s ease;}
.detail-row .img-frame:hover img{ transform: scale(1.06); }
.detail-tag{
  position:absolute; bottom:20px; left:20px;
  background: rgba(var(--charcoal-rgb),.55); backdrop-filter: blur(6px);
  color:#fff; padding:8px 16px; border-radius:10px; font-family: var(--font-head); font-size:12px;
}
.mini-cat-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  height:100%;
  border: 1px solid rgba(var(--green-rgb),.08);
  transition: all .35s ease;
}
.mini-cat-card:hover{ border-color: var(--gold); box-shadow: 0 14px 26px -18px rgba(var(--gold-rgb),.5); transform: translateY(-4px); }
.mini-cat-card i{ font-size:20px; color: var(--gold); margin-bottom:8px; display:block; }
.mini-cat-card h6{ font-family: var(--font-head); font-weight:600; font-size:13px; margin-bottom:6px; color:var(--charcoal); }
.mini-cat-card p{ font-size:12px; margin:0; line-height:1.6; }

/* ============================ PLOT INFO CARDS ============================ */
.plot-card{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 30px 22px;
  text-align:center;
  height:100%;
  border: 1px solid rgba(var(--gold-rgb),.1);
  transition: all .4s ease;
}
.plot-card:hover{
  background: var(--green);
  border-color: var(--green);
  transform: translateY(-8px);
  box-shadow: var(--shadow-soft);
}
.plot-card .icon-circle{
  width:58px; height:58px; border-radius:50%;
  background: var(--green-soft);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 16px; transition: all .4s ease;
}
.plot-card .icon-circle i{ font-size:22px; color: var(--green); transition: color .4s ease; }
.plot-card:hover .icon-circle{ background: rgba(255,255,255,.15); }
.plot-card:hover .icon-circle i{ color: var(--gold-light); }
.plot-card h6{ font-family: var(--font-head); font-size:14px; font-weight:600; margin-bottom:6px; }
.plot-card p{ font-size:12px; margin:0; }
.plot-card:hover h6{ color:#fff; }
.plot-card:hover p{ color: rgba(255,255,255,.75); }

/* ============================ LOCATION ============================ */
.location-section{ background: var(--green-dark); color:#fff; position:relative; overflow:hidden; }
.location-section::before{
  content:""; position:absolute; inset:0; opacity:.06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 26px 26px;
}
.map-illustration{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid rgba(var(--gold-light-rgb),.25); min-height:420px;
  background: linear-gradient(145deg, rgba(var(--gold-light-rgb),.08), rgba(255,255,255,.03));
  display:flex; align-items:center; justify-content:center;
}
.map-ring{
  position:absolute; border-radius:50%;
  border: 1.5px solid rgba(var(--gold-light-rgb),.3);
}
.map-ring.r1{ width:150px; height:150px; }
.map-ring.r2{ width:230px; height:230px; border-color: rgba(var(--gold-light-rgb),.2); }
.map-ring.r3{ width:320px; height:320px; border-color: rgba(var(--gold-light-rgb),.12); }
.map-icon-badge{
  position:relative; z-index:1;
  width:72px; height:72px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-gold);
}
.map-icon-badge i{ font-size:30px; color: var(--white); }
.map-site-label{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-family: var(--font-head); font-weight:600; font-size:13px; color:#fff;
  background: rgba(var(--charcoal-rgb),.5); backdrop-filter: blur(6px);
  padding:6px 16px; border-radius:50px;
}
.location-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 4px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.location-item:last-child{ border-bottom:none; }
.location-item .li-left{ display:flex; align-items:center; gap:14px; }
.location-item i{ font-size:18px; color: var(--gold-light); width:26px; text-align:center; }
.location-item h6{ font-family: var(--font-head); font-size:14px; font-weight:600; color:#fff; margin:0; }
.distance-badge{
  font-family: var(--font-head); font-size:11.5px; font-weight:600;
  border: 1px solid rgba(var(--gold-light-rgb),.5); color: var(--gold-light);
  padding:6px 14px; border-radius:50px; white-space:nowrap;
}

/* ============================ GALLERY (masonry) ============================ */
.masonry{ column-count:3; column-gap: 18px; }
@media (max-width:991px){ .masonry{ column-count:2; } }
@media (max-width:575px){ .masonry{ column-count:1; } }
.masonry-item{
  break-inside: avoid; margin-bottom:18px; position:relative; overflow:hidden;
  border-radius: var(--radius-md); box-shadow: 0 10px 24px -16px rgba(0,0,0,.3);
}
.masonry-item img{ width:100%; display:block; transition: transform .7s ease; }
.masonry-item:hover img{ transform: scale(1.1); }
.masonry-overlay{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(var(--charcoal-rgb),.85), transparent 60%);
  display:flex; align-items:flex-end; padding:16px;
  opacity:0; transition: opacity .4s ease;
}
.masonry-item:hover .masonry-overlay{ opacity:1; }
.masonry-overlay span{ font-family: var(--font-head); color:#fff; font-weight:600; font-size:14px; }

/* ============================ AMENITIES ============================ */
.amenity-card{
  text-align:center; padding: 26px 14px; border-radius: var(--radius-md);
  background: var(--white); border:1px solid rgba(var(--green-rgb),.08); height:100%;
  transition: all .35s ease;
}
.amenity-card:hover{ box-shadow: var(--shadow-gold); transform: translateY(-6px); border-color: var(--gold); }
.amenity-card i{ font-size:26px; color: var(--green); margin-bottom:10px; display:block; }
.amenity-card h6{ font-family:var(--font-head); font-size:12.5px; font-weight:600; margin:0; }

/* ============================ WHY INVEST ============================ */
.invest-card{
  background: var(--white); border-radius: var(--radius-lg); padding: 34px 26px;
  height:100%; position:relative; border: 1px solid rgba(var(--gold-rgb),.1);
  transition: all .4s ease;
}
.invest-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-soft); }
.invest-card .num{
  font-family: var(--font-head); font-size:13px; font-weight:700; color: var(--gold);
  letter-spacing:.05em;
}
.invest-card h4{ font-size:19px; margin: 10px 0 10px; }
.invest-card p{ font-size:13px; margin:0; }

/* ============================ HIGHLIGHTS (dark counters) ============================ */
.highlights-section{
  background: linear-gradient(160deg, var(--green-dark), var(--green) 120%);
  color:#fff; position:relative; overflow:hidden;
}
.highlights-section::after{
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  border:1px solid rgba(var(--gold-light-rgb),.12); top:-200px; right:-200px;
}
.counter-box{ text-align:center; padding: 20px 10px; }
.counter-box .count{
  font-family: var(--font-head); font-weight:800; font-size:52px; color: var(--gold-light);
  line-height:1;
}
.counter-box .count sup{ font-size: 26px; }
.counter-box p{ color: rgba(255,255,255,.7); margin:10px 0 0; font-size:13px; letter-spacing:.03em; }

/* ============================ CTA ============================ */
.cta-inquiry{
  position:relative;
  background:
    linear-gradient(180deg, rgba(var(--charcoal-rgb),.55), rgba(var(--charcoal-rgb),.85)),
    url('https://images.unsplash.com/photo-1500916434205-0c77489c6cf7?auto=format&fit=crop&w=1920&q=80') center/cover fixed;
  padding: 110px 0;
  text-align:center;
}
.cta-inquiry h2{ color:#fff; max-width:720px; margin:0 auto 18px; }
.cta-inquiry p{ color: rgba(255,255,255,.78); max-width:560px; margin:0 auto 40px; }
.cta-btn-group{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }

/* Glassmorphism accent chip used across cards */
.glass-chip{
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
}

/* scrollbar accent (non essential nicety) */
::selection{ background: var(--gold-light); color: var(--charcoal); }


/* CSS extracted from why.php */

        /* --- GLOBAL SECTION RESET --- */
        .jrb-why-choose-section {
            background-color: #FFFFFF;
            font-family: 'Inter', sans-serif;
            color: #1C2B24;
            padding: 140px 0;
            position: relative;
            overflow: hidden;
        }

        /* --- BACKGROUND FLOATING LIGHT ORNAMENTS (CSS ONLY) --- */
        .jrb-bg-glow {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(197, 155, 78, 0.04) 0%, rgba(255,255,255,0) 70%);
            top: -10%;
            right: -10%;
            z-index: 1;
            pointer-events: none;
            animation: subtlePulse 8s ease-in-out infinite alternate;
        }

        .jrb-bg-glow-left {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 90, 54, 0.03) 0%, rgba(255,255,255,0) 70%);
            bottom: -5%;
            left: -5%;
            z-index: 1;
            pointer-events: none;
            animation: subtlePulse 10s ease-in-out infinite alternate-reverse;
        }

        @keyframes subtlePulse {
            0% { transform: translateY(0) scale(1); opacity: 0.8; }
            100% { transform: translateY(-30px) scale(1.05); opacity: 1; }
        }

        /* --- TYPOGRAPHY & INTRO HEADER --- */
        .jrb-section-intro {
            position: relative;
            z-index: 2;
            margin-bottom: 80px;
        }

        .jrb-tagline {
            font-family: 'Poppins', sans-serif;
            color: #C59B4E;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 4px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .jrb-tagline::after {
            content: '';
            width: 40px;
            height: 1.5px;
            background-color: #C59B4E;
            display: inline-block;
        }

        .jrb-main-title {
            font-family: 'Poppins', sans-serif;
            color: #005A36;
            font-size: 40px;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.5px;
            max-width: 700px;
            margin-bottom: 24px;
        }

        .jrb-main-title span {
            color: #C59B4E;
            font-weight: 600;
        }

        .jrb-desc-text {
            font-size: 15px;
            color: #5A6E65;
            line-height: 1.8;
            max-width: 750px;
            margin-bottom: 0;
        }

        /* --- ARCHITECTURAL PLOT CARD CONFIGURATIONS --- */
        .jrb-grid-container {
            position: relative;
            z-index: 2;
        }

        .jrb-plot-card {
            background-color: #FFFFFF;
            border: 1px solid rgba(0, 90, 54, 0.06);
            border-radius: 12px;
            padding: 40px 35px;
            height: 100%;
            box-shadow: 0 15px 40px rgba(0, 90, 54, 0.05);
            transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                        box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(40px);
            animation: cssFadeUpIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        /* Pure CSS Staggered Entry Pipeline */
        .jrb-card-1 { animation-delay: 0.1s; }
        .jrb-card-2 { animation-delay: 0.2s; }
        .jrb-card-3 { animation-delay: 0.3s; }
        .jrb-card-4 { animation-delay: 0.4s; }
        .jrb-card-5 { animation-delay: 0.5s; }
        .jrb-card-6 { animation-delay: 0.6s; }
        .jrb-card-7 { animation-delay: 0.7s; }
        .jrb-card-8 { animation-delay: 0.8s; }

        @keyframes cssFadeUpIn {
            to { opacity: 1; transform: translateY(0); }
        }

        /* Premium Micro-Interactive Hover Actions */
        .jrb-plot-card:hover {
            transform: translateY(-10px);
            border-color: rgba(197, 155, 78, 0.4);
            box-shadow: 0 25px 55px rgba(0, 90, 54, 0.12);
        }

        /* Card Inner Accent Line Graphic */
        .jrb-plot-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, #005A36, #C59B4E);
            transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-plot-card:hover::before {
            width: 100%;
        }

        /* --- PREMIUM ICON SPHERE DESIGN --- */
        .jrb-icon-wrapper {
            width: 65px;
            height: 65px;
            background-color: #F4F7F5;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 28px;
            position: relative;
            transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .jrb-icon-wrapper i {
            color: #005A36;
            font-size: 26px;
            transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* Interactive Icon Choreography on Hover */
        .jrb-plot-card:hover .jrb-icon-wrapper {
            background-color: #005A36;
            transform: rotateY(180deg);
        }

        .jrb-plot-card:hover .jrb-icon-wrapper i {
            color: #C59B4E;
            transform: scale(1.1) rotateY(180deg);
        }

        /* --- CARD DATA SCALE TYPOGRAPHY --- */
        .jrb-card-title {
            font-family: 'Poppins', sans-serif;
            font-size: 19px;
            font-weight: 600;
            color: #005A36;
            margin-bottom: 14px;
            letter-spacing: -0.2px;
            transition: color 0.3s ease;
        }

        .jrb-plot-card:hover .jrb-card-title {
            color: #C59B4E;
        }

        .jrb-card-text {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: #5A6E65;
            line-height: 1.8;
            margin-bottom: 0;
        }

        /* --- THEMEFOREST CALL-TO-ACTION BUTTON SYSTEM --- */
        .jrb-action-footer {
            margin-top: 60px;
            position: relative;
            z-index: 2;
        }

        .btn-jrb-luxury {
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            padding: 16px 42px;
            border-radius: 4px;
            background-color: #005A36;
            color: #FFFFFF !important;
            border: 1px solid #005A36;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            display: inline-flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 25px rgba(0, 90, 54, 0.15);
        }

        .btn-jrb-luxury i {
            transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
            font-size: 12px;
        }

        .btn-jrb-luxury:hover {
            background-color: transparent;
            color: #005A36 !important;
            box-shadow: 0 15px 30px rgba(0, 90, 54, 0.2);
            transform: translateY(-2px);
        }

        .btn-jrb-luxury:hover i {
            transform: translateX(6px);
        }

        /* --- HIGH RESPONSIVENESS MEDIA PIPELINES --- */
        @media (max-width: 1199.98px) {
            .jrb-why-choose-section { padding: 110px 0; }
            .jrb-main-title { font-size: 36px; }
            .jrb-plot-card { padding: 35px 25px; }
        }

        @media (max-width: 991.98px) {
            .jrb-why-choose-section { padding: 90px 0; }
            .jrb-main-title { font-size: 32px; }
            .jrb-section-intro { margin-bottom: 60px; }
        }

        @media (max-width: 767.98px) {
            .jrb-why-choose-section { padding: 75px 0; }
            .jrb-main-title { font-size: 26px; }
            .jrb-desc-text { font-size: 14px; }
            .jrb-section-intro { margin-bottom: 45px; }
            .jrb-plot-card { padding: 30px 25px; text-align: left; }
            .jrb-icon-wrapper { margin-bottom: 22px; width: 55px; height: 55px; }
            .jrb-icon-wrapper i { font-size: 22px; }
            .jrb-action-footer { margin-top: 40px; }
            .btn-jrb-luxury { width: 100%; justify-content: center; padding: 14px 24px; }
        }
    


/* Extracted Inline Styles */
.jrb-ext-style-16 { max-width:60%; }
.jrb-ext-style-20 { font-size:28px; }
.jrb-ext-style-17 { color:var(--jrb-green-dark); font-size:.9rem; }
.jrb-ext-style-6 { --d:0.00s }
.jrb-ext-style-25 { padding:28px 18px; }
.jrb-ext-style-2 { max-width:640px; }
.jrb-ext-style-21 { background:var(--cream); }
.jrb-ext-style-26 { font-size:14px; }
.jrb-ext-style-11 { background-image: url('https://images.unsplash.com/photo-1590012314607-cda9d9b6a9a7?auto=format&fit=crop&w=1920&q=80'); }
.jrb-ext-style-5 { position:relative; z-index:1; }
.jrb-ext-style-8 { --d:0.16s }
.jrb-ext-style-27 { transition-delay:.3s }
.jrb-ext-style-13 { background:var(--cream); padding-top:70px; padding-bottom:70px; }
.jrb-ext-style-14 { transition-delay:.1s }
.jrb-ext-style-19 { background:var(--ivory); }
.jrb-ext-style-3 { color:#fff; }
.jrb-ext-style-24 { transition-delay:.25s }
.jrb-ext-style-15 { transition-delay:.2s }
.jrb-ext-style-23 { transition-delay:.15s }
.jrb-ext-style-10 { background-image: url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1920&q=80'); }
.jrb-ext-style-7 { --d:0.08s }
.jrb-ext-style-1 { font-size:15.5px; color:#0B3722; font-weight:500; margin-bottom:22px; }
.jrb-ext-style-4 { max-width:640px; position:relative; z-index:1; }
.jrb-ext-style-18 { font-size:.72rem; }
.jrb-ext-style-22 { transition-delay:.05s }
.jrb-ext-style-12 { background-image: url('https://images.unsplash.com/photo-1444653389962-8149286c578a?auto=format&fit=crop&w=1920&q=80'); }
.jrb-ext-style-9 { --d:0.24s }


/* Quick Overrides */
.navbar-brand img {
    height: 120px !important;
}
@media (max-width: 991px) {
    .navbar-brand img {
        height: 90px !important;
    }
}
.jrb-exp-badge {
    right: 20px !important; /* pull it inward so it doesn't get cut off */
    bottom: -20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* make it stand out more */
}
@media (max-width: 575px) {
    .jrb-exp-badge {
        right: 5% !important;
        bottom: -15px !important;
    }
}
/* ==========================================================================
   NEW SECTIONS: TESTIMONIALS, CTA, CONTACT INFO
   ========================================================================== */

/* Testimonials */
.jrb-testimonial-section {
    background: #FAF7EE;
    padding: 80px 0;
}
.jrb-testimonial-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(11, 55, 34, 0.05);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    height: 100%;
    position: relative;
    border: 1px solid rgba(212, 175, 55, 0.15);
}
.jrb-testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(11, 55, 34, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}
.testimonial-stars {
    color: #D4AF37;
    font-size: 14px;
    margin-bottom: 15px;
}
.testimonial-text {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    font-style: italic;
    margin-bottom: 20px;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}
.testimonial-author .initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F1D48A, #9C7A24);
    color: #04160D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}
.testimonial-author .info h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #063D28;
}
.testimonial-author .info span {
    font-size: 12px;
    color: #777;
}

/* Call to Action */
.jrb-cta-section {
    background: linear-gradient(135deg, #145C38 0%, #0B3722 100%);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.jrb-cta-bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    border-radius: 50%;
}
.jrb-cta-content {
    position: relative;
    z-index: 2;
}
.jrb-cta-title {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 38px;
    margin-bottom: 20px;
}
.jrb-cta-title span {
    color: #F1D48A;
}
.jrb-cta-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 35px;
}
.jrb-btn-outline-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    border: 2px solid #D4AF37;
    color: #F1D48A;
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}
.jrb-btn-outline-gold:hover {
    background: #D4AF37;
    color: #04160D;
}

/* Contact Info Quick Strip */
.jrb-quick-contact-section {
    background: #fff;
    padding: 70px 0;
}
.quick-contact-card {
    text-align: center;
    padding: 20px;
}
.quick-contact-icon {
    width: 60px;
    height: 60px;
    background: rgba(212, 175, 55, 0.1);
    color: #9C7A24;
    font-size: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: transform 0.3s ease, background 0.3s ease;
}
.quick-contact-card:hover .quick-contact-icon {
    transform: translateY(-5px);
    background: #D4AF37;
    color: #04160D;
}
.quick-contact-title {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #063D28;
    margin-bottom: 10px;
}
.quick-contact-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
.quick-contact-text a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.quick-contact-text a:hover {
    color: #9C7A24;
}

/* ==========================================================================
   UPGRADED CONTACT QUICK STRIP (Premium Overrides)
   ========================================================================== */
.jrb-quick-contact-section {
    background: #FAF7EE !important; /* Ivory background */
    padding: 90px 0 !important;
    position: relative;
    border-top: none !important;
}
.jrb-quick-contact-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.6;
    pointer-events: none;
}
.quick-contact-card {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 40px 30px !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    box-shadow: 0 15px 35px rgba(11, 55, 34, 0.05) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
    height: 100%;
    position: relative;
    z-index: 1;
}
.quick-contact-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 50px rgba(11, 55, 34, 0.12) !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}
.quick-contact-icon {
    width: 70px !important;
    height: 75px !important;
    background: linear-gradient(135deg, rgba(241, 212, 138, 0.2) 0%, rgba(212, 175, 55, 0.2) 100%) !important;
    color: #9C7A24 !important;
    font-size: 28px !important;
    margin: 0 auto 20px !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.4s ease !important;
}
.quick-contact-card:hover .quick-contact-icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, #F1D48A 0%, #D4AF37 100%) !important;
    color: #04160D !important;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3) !important;
}
.quick-contact-title {
    font-size: 20px !important;
    color: #063D28 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px;
}
.quick-contact-text {
    font-size: 15px !important;
    color: #555 !important;
    line-height: 1.7 !important;
}
.quick-contact-text a {
    font-weight: 500;
}
/* ==========================================================================
   JRB GROUP REAL ESTATE - FINAL ULTRA-PREMIUM TESTIMONIAL SUITE
   ========================================================================== */

/* Section Layout Base */
.premium-testimonials-section {
    position: relative;
    padding: 90px 0;
    background-color: #f8faf7;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

/* Header Elements Typography */
.testimonial-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #006837; 
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}
.testimonial-sub i {
    margin-right: 6px;
    color: #c59b27;
}
.testimonial-main-title {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #121614;
    line-height: 1.3;
}
.testimonial-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.7;
    color: #555d59;
    max-width: 640px;
    margin: 0 auto;
}

/* Slider Track Infrastructure */
.jrb-slider-track-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 25px 0;
}
.jrb-slider-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}
.jrb-slider-item {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Professional Card Architecture Design */
.jrb-testimonial-card {
    background: #ffffff;
    border: 1px solid rgba(0, 104, 55, 0.08);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    height: 100%;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.015);
    z-index: 1;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Outer Glow Gradient Frame on Hover */
.jrb-testimonial-card::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    background: linear-gradient(135deg, #006837 0%, #c59b27 100%);
    border-radius: 16px;
    z-index: -3;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Card Default Inner Background Mask */
.jrb-card-inner-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    border-radius: 15px;
    z-index: -2;
    transition: all 0.4s ease;
}

/* 2-COLOR LOGO GRADIENT BACKGROUND OVERLAY (Triggers on Hover) */
.jrb-card-hover-gradient-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #006837 0%, #c59b27 100%);
    z-index: -2;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 15px;
}

/* Dynamic Architectural Building Skyline Grid */
.jrb-building-skyline-grid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 12px;
    z-index: -1;
    pointer-events: none;
}
.jrb-building-tower {
    width: 9%;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: 3px 3px 0 0;
    height: 0%;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-Aesthetics Elements */
.jrb-card-accent-tag {
    position: absolute;
    top: 0; left: 30px;
    width: 45px; height: 5px;
    background: linear-gradient(90deg, #006837, #c59b27);
    border-radius: 0 0 4px 4px;
    transition: opacity 0.3s ease;
}
.jrb-quote-icon-wrapper {
    position: absolute;
    top: 26px; right: 30px;
}
.jrb-quote-icon-wrapper i {
    font-size: 24px;
    color: rgba(197, 155, 39, 0.14);
    transition: color 0.3s ease;
}

.jrb-stars-container { margin-bottom: 14px; }
.jrb-star { color: #c59b27; font-size: 13px; margin-right: 2px; transition: color 0.3s ease; }

.jrb-review-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: #2c3330;
    margin-bottom: 24px;
    position: relative;
    transition: color 0.3s ease;
}

/* Profile Identity Footer block */
.jrb-meta-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0, 104, 55, 0.06);
    padding-top: 16px;
    gap: 12px;
    transition: border-color 0.3s ease;
}
.jrb-client-profile { display: flex; align-items: center; }
.jrb-avatar-wrapper { position: relative; width: 44px; height: 44px; margin-right: 12px; flex-shrink: 0; }
.jrb-client-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 0 0 1.5px rgba(0, 104, 55, 0.3); transition: border-color 0.3s ease; }

.jrb-verified-badge {
    position: absolute;
    bottom: -1px; right: -1px;
    background: #006837;
    border: 1px solid #ffffff;
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.jrb-verified-badge i { font-size: 8px; color: #ffffff; }

.jrb-client-name { font-family: 'Poppins', sans-serif; font-size: 14.5px; font-weight: 600; color: #121614; margin: 0; transition: color 0.3s ease; }
.jrb-client-location { font-family: 'Inter', sans-serif; font-size: 12px; color: #555d59; transition: color 0.3s ease; }

.jrb-project-tag {
    background-color: rgba(0, 104, 55, 0.04);
    border: 1px solid rgba(0, 104, 55, 0.06);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #006837;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.jrb-project-tag i { margin-right: 5px; color: #c59b27; transition: color 0.3s ease; }

/* HOVER TRIGGERS */
.jrb-testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 104, 55, 0.12);
}
.jrb-testimonial-card:hover::after { opacity: 1; }
.jrb-testimonial-card:hover .jrb-card-hover-gradient-bg { opacity: 1; }
.jrb-testimonial-card:hover .jrb-review-text { color: #ffffff; }
.jrb-testimonial-card:hover .jrb-client-name { color: #ffffff; }
.jrb-testimonial-card:hover .jrb-client-location { color: rgba(255, 255, 255, 0.75); }
.jrb-testimonial-card:hover .jrb-quote-icon-wrapper i { color: rgba(255, 255, 255, 0.2); }
.jrb-testimonial-card:hover .jrb-star { color: #ffffff; }
.jrb-testimonial-card:hover .jrb-meta-wrapper { border-top-color: rgba(255, 255, 255, 0.15); }
.jrb-testimonial-card:hover .jrb-project-tag { background-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }
.jrb-testimonial-card:hover .jrb-project-tag i { color: #ffffff; }
.jrb-testimonial-card:hover .jrb-client-img { border-color: #ffffff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.4); }
.jrb-testimonial-card:hover .jrb-verified-badge { background-color: #ffffff; border-color: #006837; }
.jrb-testimonial-card:hover .jrb-verified-badge i { color: #006837; }
.jrb-testimonial-card:hover .jrb-card-accent-tag { opacity: 0; }

.jrb-testimonial-card:hover .jrb-building-tower:nth-child(1) { height: 70%; transition-delay: 0.0s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(2) { height: 35%; transition-delay: 0.04s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(3) { height: 90%; transition-delay: 0.08s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(4) { height: 50%; transition-delay: 0.12s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(5) { height: 95%; transition-delay: 0.16s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(6) { height: 40%; transition-delay: 0.20s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(7) { height: 80%; transition-delay: 0.24s; }
.jrb-testimonial-card:hover .jrb-building-tower:nth-child(8) { height: 55%; transition-delay: 0.28s; }

/* INTERACTIVE BOTTOM CONTROLS CONSOLE */
.jrb-slider-bottom-controls-bar {
    display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 35px; width: 100%;
}
.jrb-bottom-nav-btn {
    width: 44px; height: 44px; background-color: #ffffff; border: 1px solid rgba(0, 104, 55, 0.12);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); user-select: none;
}
.jrb-bottom-nav-btn:hover { background-color: #006837; border-color: #006837; transform: translateY(-2px); }
.jrb-bottom-nav-btn:hover i { color: #ffffff; }
.jrb-bottom-nav-btn i { color: #006837; font-size: 13px; transition: color 0.2s; }

.jrb-bottom-dots-indicator { display: flex; align-items: center; gap: 8px; }
.jrb-dot { width: 9px; height: 9px; border-radius: 50%; background-color: rgba(0, 104, 55, 0.15); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.jrb-dot.active-dot { background-color: #006837; width: 26px; border-radius: 6px; }

/* RESPONSIVE MATRIX */
@media (min-width: 1200px) { .jrb-slider-item { flex: 0 0 25%; max-width: 25%; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .jrb-slider-item { flex: 0 0 33.333333%; max-width: 33.333333%; } }
@media (min-width: 576px) and (max-width: 991.98px) { .jrb-slider-item { flex: 0 0 50%; max-width: 50%; } }
@media (max-width: 575.98px) {
    .jrb-slider-item { flex: 0 0 100%; max-width: 100%; }
    .premium-testimonials-section { padding: 55px 0; }
    .testimonial-main-title { font-size: 28px; }
    .jrb-testimonial-card { padding: 26px 22px; }
    .jrb-slider-bottom-controls-bar { gap: 16px; }
}

/* FINAL LOGO ADJUSTMENT FIX */
.navbar-brand img {
    height: 75px !important; /* Adjusted size so it fits well within the header */
    width: auto !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important; /* This magically removes the white background from JPEGs on non-white backgrounds! */
    filter: contrast(1.1) !important; /* Slight contrast boost to compensate for multiply blend */
}
@media (max-width: 991px) {
    .navbar-brand img {
        height: 55px !important;
    }
}


/* NAVBAR HEIGHT ADJUSTMENT */
.custom-navbar {
    padding: 16px 0 !important;
}


.jrb-vm-section .container, .jrb-profile-section .container, .jrb-info-section .container, .location-section .container { position: relative; z-index: 2; }

.plot-filter-bar{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.plot-filter-chip{
  font-family: var(--font-head, 'Poppins', sans-serif);
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  padding:10px 22px;
  border-radius:30px;
  border:1.5px solid var(--gold, #C9A227);
  background:transparent;
  color: var(--gold-dark, #96721A);
  cursor:pointer;
  transition: all .3s ease;
}
.plot-filter-chip:hover{ background: rgba(201,162,39,.12); }
.plot-filter-chip.active{
  background: var(--gold, #C9A227);
  border-color: var(--gold, #C9A227);
  color:#fff;
}
.plot-item{ transition: opacity .3s ease, transform .3s ease; }
.plot-item.plot-hidden{ display:none; }

@media (max-width: 767px) {
    .slider-btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    .slider-btn-group .btn-jrb {
        width: 100% !important;
        flex: none !important;
        margin-top: 0 !important;
        text-align: center;
        padding: 12px 15px !important;
        font-size: 13px !important;
    }
}
.jrb-vm-section h1, .jrb-vm-section h2, .location-section h1, .location-section h2 {
    color: #ffffff !important;
}
.jrb-vm-section .jrb-eyebrow, .location-section .eyebrow {
    color: #EAD9A0 !important;
}
.jrb-exp-badge .num { color: #EAD9A0 !important; }
.jrb-exp-badge .lbl { color: rgba(255,255,255,.78) !important; }
@media (min-width: 992px) {
    .jrb-profile-section .row {
        align-items: stretch !important;
    }
    .jrb-profile-section .row > .col-lg-6 {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .jrb-profile-img-wrap {
        height: 100%;
    }
    .jrb-profile-img-frame {
        height: 100% !important;
    }
}


.jrb-meta-wrapper {
    flex-wrap: wrap !important;
    gap: 12px;
}
.jrb-project-tag {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.heading-on-dark {
    color: #ffffff !important;
}
.highlights-section .section-heading, .highlights-section .eyebrow {
    color: #ffffff !important;
}
.highlights-section .eyebrow.on-dark {
    color: #EAD9A0 !important;
}