/*
Theme Name: Bob Theme
Author: Shahid Umarani
Version: 1.0
*/
/* RESET */

*{
        /*color: white;*/
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html,body{
margin:0;
padding:0;
overflow-x:hidden;
width:100%;
}
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}


.preloader{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
height:100vh;
}

.pre-logo{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.pre-logo img{
width:200px;
max-width:120%;
}

/* MOBILE FIX */

@media (max-width:768px){

.pre-logo{
flex-direction:column;
}

.pre-logo img{
width:160px;
margin-bottom:10px;
}

.loader-text{
font-size:22px;
}

}






.nav-logo{
display:flex;
align-items:center;
gap:10px;
}

.logo-text{
display:flex;
flex-direction:column;
}

/* LOGO */
.nav-logo img{
width:60px;
}

/* TITLE */
.site-title{
font-size:30px;
font-weight:600;
background: linear-gradient(120deg,#b8860b,#ffd700,#ffea70,#ffffff,#ffea70,#ffd700,#b8860b);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* TAGLINE */
.site-tagline{
font-size:15px;
color:#fff2a9ba;
margin-top:3px;
}

@media(min-width:992px){
.nav-logo img{
width:160px;
}
}
/*.title{*/
/*    font-weight: 900;*/
/*    height: 40px;*/
/*    padding-right: 1085px;*/
/*        background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);*/
/*    -webkit-background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*}*/
/* ==========================================
    NAVBAR 
  =========================================== */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:102px;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,0.9);
    backdrop-filter:blur(10px);
    z-index:9999;
}

/* LOGO */
.nav-logo img{
    width:60px;
    display:flex;
    align-items:center;
gap:10px;
}

/*=================================================
    MENU TOGGLE 
==================================================*/
.menu-toggle{
    width:30px;
    height:26px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.menu-toggle span{
    height:3px;
    width:100%;
    background:#ffd700;
    border-radius:5px;
    transition:0.3s;
}

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(4px,4px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(4px,-4px);
}

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

.side-menu{
    position:fixed;
    top:0;
    right:-260px;
    width:260px;
    height:100vh;
    background:#111;
    padding-top:100px;
    padding-left:30px;
    transition:0.4s ease;
    z-index:9998;
}

.side-menu.active{
    right:0;
}

.side-menu-list{
    list-style:none;
}

.side-menu-list li{
    margin-bottom:25px;
}

.side-menu-list a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    display:block;
    transition:0.3s;
}

.side-menu-list a:hover{
    color:#ffd700;
}

/* ===============================================
    HERO FIX (NO UNWANTED GAP) 
==================================================*/
.hero-section{
    margin-top:70px;
}

/*================================================
    DESKTOP VERSION 
====================================================*/
@media(min-width:992px){

    .navbar{
        padding:0 60px;
    }

    .nav-logo img{
        width:160px;
    }

    .side-menu{
        width:300px;
        right:-300px;
        padding-left:40px;
    }

    .side-menu.active{
        right:0;
    }
}
/* ================================================
    MOBILE MENU FORCE FIX 
==================================================== */

@media (max-width:768px){

    /*.navbar{*/
    /*    position:fixed !important;*/
    /*    top:0;*/
    /*    left:0;*/
    /*    width:100%;*/
    /*    height:69px;*/
    /*    padding:0 20px;*/
    /*    display:flex !important;*/
    /*    justify-content:space-between !important;*/
    /*    align-items:center;*/
    /*    z-index:99999 !important;*/
    /*    background:rgba(0,0,0,0.8) !important;*/
    /*}*/
    
    .nav-logo img{
        
        width:120px;   /* logo thoda bada */
        height:auto;
    }
    .nav-logo h1{
white-space:nowrap;
font-size:22px;
}

    .menu-toggle{
        display:flex !important;
        z-index:100000 !important;
    }

    .side-menu{
        position:fixed !important;
        top:0;
        right:-100% !important;
        width:80% !important;
        max-width:280px;
        height:100vh;
        background:#000;
        padding-top:100px;
        padding-left:30px;
        transition:0.4s ease;
        z-index:99998 !important;
    }

    .side-menu.active{
        right:0 !important;
    }

    .side-menu-list{
        display:block !important;
    }

}

/* =================================================
    PRELOADER Front Page 
===================================================== */

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    background: linear-gradient(135deg,
            #020409 0%,
            #030a13 40%,
            #030a18 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    overflow: hidden;
}

.loader-text {
    font-size: 65px;
    font-weight: 800;
    letter-spacing: 3px;
    position: relative;

    background: linear-gradient(120deg,
            #000 0%,
            #b8860b 25%,
            #ffd700 45%,
            #ffffff 50%,
            #ffd700 55%,
            #b8860b 75%,
            #000 100%);

    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: goldShine 6s linear infinite;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 8px 15px rgba(255, 215, 0, 0.25);
}

@keyframes goldShine {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

/* Reflection */
.loader-text::after {
    content: "Bob The Builder Achietured";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
    transform: scaleY(-1);
    opacity: 0.2;

    background: linear-gradient(120deg,
            #b8860b,
            #ffd700,
            #ffffff,
            #ffd700,
            #b8860b);

    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    filter: blur(2px);
}


/* =======================================================
    HERO SECTION 
========================================================== */

.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    margin-bottom: -1px;
    /* FIX GAP */
}

.hero-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.55);*/
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    flex-direction: column;
}

.hero-content h1 {
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 60px;
}

.hero-content p {
    color: #fff2a9ba;
    margin-top: 20px;
    font-size: 20px;
}

.btn {
    margin-top: 30px;
    padding: 12px 30px;
    background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 30px;
    transition: 0.3s ease;
}

/*.btn:hover {*/
/*    transform: translateY(-4px);*/
/*    background: linear-gradient(120deg, #b8860b, #ffd700);*/
/*   color: #000;*/
/*}*/

/* Shape Divider */
.custom-shape-divider-bottom {
    position: absolute;
    bottom: -16px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 10;
}

.custom-shape-divider-bottom svg {
    display: block;
    width: 100%;
    height: 157px;
}

.custom-shape-divider-bottom path {
    fill: #131111;
}
/* ==================================================
   🔥 MOBILE RESPONSIVE
====================================================== */
@media (max-width:768px){

    .hero-section{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        padding-top:70px !important;
    }

    .hero-content{
        width:100% !important;
        max-width:100% !important;
        padding:0 20px !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .hero-content h1{
        font-size:28px !important;
        text-align:center !important;
        margin:0 auto 15px auto !important;
        line-height:1.3 !important;
    }

    .hero-content p{
        font-size:15px !important;
        text-align:center !important;
        margin:0 auto 20px auto !important;
    }

    .hero-content .btn{
        margin:0 auto !important;
        display:inline-block !important;
    }

}

/* ===============================
   🔥 MOBILE SHAPE DIVIDER FIX
================================ */

@media (max-width:768px){

    .custom-shape-divider-bottom{
        bottom: -11px !important;
        height:auto !important;
        line-height:0;
        overflow:hidden;
    }

    .custom-shape-divider-bottom svg{
        width:100% !important;
        height:80px !important;   /* reduce wave height */
        display:block;
    }

    .custom-shape-divider-bottom path{
        fill:#131111 !important;  /* match next section bg */
    }

}

/*========================================================
    floting section
==========================================================*/


.floating-section {
    height: 120vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 120px 8%;
    background: #131111;
    color: #fff;
}

.floating-wrapper {
    height: 150vh;
}

.floating-left {
    width: 45%;
    position: sticky;
    top: 20%;
    height: 500px;
}

.media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.media-item {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.5s ease;
}

.media-item img,
.media-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(255, 215, 0, 0.2);
}

.media-item.active {
    opacity: 1;
    transform: scale(1);
}

/*========================================================
    Right Content 
============================================================*/

.floating-content {
    width: 45%;
}

.float-heading {
    font-size: 48px;
    margin-bottom: 20px;

        background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    transform: translateX(150px);
    opacity: 0;
}

.float-text {
    font-size: 18px;
    color: #fff2a9ba;
    opacity: 0;
    transform: translateY(60px);
}

.floating-content{
    width: 45%;
    position: relative;
    z-index: 10;
}

.floating-left{
    width: 45%;
    position: sticky;
    top: 20%;
    height: 500px;
    z-index: 1;
}
.floating-section .float-heading,
.floating-section .float-text{
    opacity:1 !important;
    transform:translateX(0) translateY(0) !important;
}
/*========================================================
    CTA SECTION BACKGROUND
===========================================================*/

.btb-cta-section {
    padding: 120px 8%;
    background: #131111;
}

/* GLASS CONTAINER */

.btb-cta-glass {
    max-width: 1200px;
    margin: auto;
    padding: 60px 70px;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;

    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 215, 0, 0.3);

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.15),
        inset 0 0 40px rgba(255, 215, 0, 0.08);

    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* LIQUID SHINE */
/* SECTION */

.btb-cta-section {
    padding: 45px 8%;
    background: #131111;
}


/* GLASS BOX */

.btb-cta-glass {

    position: relative;
    max-width: 1200px;
    margin: auto;

    padding: 60px;

    border-radius: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* IMPORTANT */

    gap: 40px;

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 215, 0, 0.3);

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.15);

    overflow: hidden;
}


/* CONTENT SIDE */

.cta-content {
    flex: 1;
    min-width: 300px;
    position: relative;
    z-index: 2;
}

.cta-content h2 {
    font-size: 34px;
    margin-bottom: 15px;

    background: linear-gradient(120deg,
            #b8860b,
            #ffd700,
            #ffffff,
            #ffd700,
            #b8860b);

    background-size: 200% auto;
    /* REQUIRED */
    background-position: 0% center;
    /* ADD THIS */

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-content p {
    font-size: 17px;
    color: #fff2a9ba;
    opacity: 0.9;
}

/* BUTTON SIDE */

.cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}

/* BUTTON BASE */

.cta-btn {
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s ease;
}

/* GOLD BUTTON */

.cta-btn.primary {
    background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;
    /*box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);*/
}

.cta-btn.primary:hover {
    transform: translateY(-4px);
    /*box-shadow: 0 0 40px rgba(255, 215, 0, 0.9);*/
}

/* OUTLINE BUTTON */

.cta-btn.secondary {
    border: 1px solid #ffd700;
    color: #ffd700;
}

.cta-btn.secondary:hover {
    background: rgba(255, 215, 0, 0.1);
}

/* ======================================================================
    FEATURED Card SECTION
========================================================================== */

.featured-section {
    padding: 70px 8%;
    background: #131111;
    color: #ffffff;
}


.featured-header {
    text-align: center;
    margin-bottom: 80px;
}

.featured-header h2 {
    font-size: 48px;
    margin-bottom: 20px;

    background: linear-gradient(120deg,
            #b8860b,
            #ffd700,
            #ffea70,
            #ffffff,
            #ffea70,
            #ffd700,
            #b8860b);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.featured-header p {
    font-size: 16px;
    max-width: 700px;
    margin: auto;
    color: #fff2a9ba;
    opacity: 0.8;
}


/* ================ Grid ======================*/

.featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.feature-card{
text-decoration: none;
color: inherit;
}

.feature-card {
    background: #0d0d0d;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.4s ease;
    border: 1px solid rgba(255, 215, 0, 0.08);
}


.feature-card img{
width:100%;
height:240px;
object-fit:cover;
aspect-ratio:3/2;
border-radius:12px;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.25);
}

.feature-info {
    padding: 20px;
}

.feature-info h3 {
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    margin-bottom: 10px;
}

.location {
    display: block;
    font-size: 14px;
    color: #fff2a9ba;
    margin-bottom: 15px;
}


.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #aaa;
}

/* Button */

.featured-btn {
    text-align: center;
    margin-top: 60px;
}

.featured-btn a {
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    color: #000;
    background: linear-gradient(120deg, #b8860b, #ffd700);
    transition: 0.3s ease;
}

.featured-btn a:hover {
    transform: scale(1.05);
    /*box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);*/
}


/*===============================================================================
    VIDEO SECTION 
=================================================================================*/

.bobVideoSection {
    background-color: #131111;
    margin-top: 0px;
    padding: 20px 0 60px;
    position: relative;
}

/* VIDEO GRID */

.bobVideoSection .bobVideoGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* VIDEO CARD */

.bobVideoSection .bobVideoCard {
    background: transparent;
    padding: 0;
    border-radius: 20px;
    text-align: center;
    position: relative;
    transition: all .4s ease;
}

/* VIDEO IMAGE */

.bobVideoSection .bobVideoThumb {
    width: 100%;
    border-radius: 20px;
    display: block;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .35);
    transition: .4s;
}

/* PLAY BUTTON */

.bobVideoSection .bobPlayIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ff3d00;
    color: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    animation: bobPulse 1.6s infinite;
}

/* PULSE */

@keyframes bobPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 61, 0, .7);
    }

    70% {
        box-shadow: 0 0 0 25px rgba(255, 61, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 61, 0, 0);
    }
}

/* TITLE */

.bobVideoSection .bobImageTitle {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(120deg, #b8860b, #ffd700);
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .14);
    color: #000;
    padding: 10px 26px;
    border-radius: 30px;
    font-weight: 600;

}

/* HOVER */

.bobVideoSection .bobVideoCard:hover .bobVideoThumb {
    transform: scale(1.05);
}

.bobVideoSection .bobVideoCard:hover {
    transform: translateY(-10px);
}

/* POPUP BACKGROUND */

.bobVideoSection .bobPopup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* POPUP CONTENT */

.bobVideoSection .bobPopupContent {
    position: relative;
    width: 95%;
    max-width: 1400px;
}

/* POPUP VIDEO SIZE */

.bobVideoSection .bobPopup iframe {
    width: 100%;
    height: 75vh;
    border: none;
    border-radius: 14px;
}

/* CLOSE BUTTON */

.bobVideoSection .bobClose {
    position: absolute;
    top: -55px;
    right: 0;
    font-size: 45px;
    color: #fff;
    cursor: pointer;
}

/* SLIDE ANIMATION */

.bobVideoSection .slide-left,
.bobVideoSection .slide-right,
.bobVideoSection .slide-bottom {
    opacity: 0;
    transition: all .9s ease;
}

.bobVideoSection .slide-left {
    transform: translateX(-80px);
}

.bobVideoSection .slide-right {
    transform: translateX(80px);
}

.bobVideoSection .slide-bottom {
    transform: translateY(80px);
}

.bobVideoSection .slide-show {
    opacity: 1;
    transform: translate(0, 0);
}

/* BUTTON */

.bobBtnWatch {
    display: inline-block;
    background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;
    font-weight: 600;
    font-size: 18px;
    padding: 14px 32px;
    border-radius: 40px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    font-family: inherit;
}

.bobBtnWatch:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

.bobBtnWatch {
    display: table;
    margin: 60px auto;
}

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

@media (max-width: 992px) {

    .bobVideoSection .bobVideoGrid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .bobVideoSection .bobImageTitle {
        font-size: 14px;
        padding: 8px 18px;
        bottom: -14px;
    }

    .bobVideoSection .bobPlayIcon {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }

    .bobVideoSection .bobPopup iframe {
        height: 60vh;
    }

}


@media (max-width: 600px) {

    .bobVideoSection {
        padding: 10px 0 40px;
    }

    .bobVideoSection .bobVideoGrid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 0 18px;
    }

    .bobVideoSection .bobVideoCard {
        margin-bottom: 10px;
    }

    .bobVideoSection .bobVideoThumb {
        border-radius: 18px;
    }

    .bobVideoSection .bobImageTitle {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        display: inline-block;
        margin-top: 15px;
        font-size: 15px;
    }

    .bobVideoSection .bobPlayIcon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .bobVideoSection .bobPopup iframe {
        height: 50vh;
    }

    .bobVideoSection .bobClose {
        top: -45px;
        font-size: 38px;
    }

    .bobBtnWatch {
        font-size: 16px;
        padding: 12px 26px;
    }

}

/* ===============================
   GLOBAL MOBILE OPTIMIZATION
================================ */

@media (max-width: 768px) {

    /*====================== HERO SECTION ===================== */
    .hero-content h1 {
        font-size: 34px;
    }
    .hero-content p {
        font-size: 16px;
        padding: 0 20px;
    }
    .loader-text {
        font-size: 32px;
        text-align: center;
        padding: 0 15px;
    }
    
    /*===================== FLOATING SECTION ============== */
    .floating-section {
        height: auto;
        flex-direction: column;
        padding: 80px 20px;
        gap: 60px;
    }

    .floating-left {
        width: 100%;
        position: relative;
        top: auto;
        height: 350px;
    }

    .floating-content {
        width: 100%;
        text-align: center;
    }

    .float-heading {
        font-size: 30px;
        transform: none !important;
    }

    .float-text {
        font-size: 16px;
        transform: none !important;
    }

    /*=========================== CTA SECTION ===================*/
    .btb-cta-glass {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
    }

    .cta-content h2 {
        font-size: 24px;
    }

    .cta-buttons {
        justify-content: center;
        width: 100%;
    }

    .cta-btn {
        width: 100%;
        text-align: center;
    }

    /*============================= FEATURED GRID ======================*/
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .featured-header h2 {
        font-size: 32px;
    }

    .featured-header p {
        font-size: 16px;
        padding: 0 20px;
    }

    /*============================= VIDEO GRID ==========================*/
    .bobVideoSection .bobVideoGrid {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 0 18px;
    }

    .bobVideoSection .bobPlayIcon {
        width: 55px;
        height: 55px;
        font-size: 22px;
    }

    .bobVideoSection .bobPopup iframe {
        height: 50vh;
    }

}

/* ================================================
    STAGE 
================================================= */

.carousel-stage{
    background:#131111;
    width:100%;
    height:550px;
    perspective:1000px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===================== CAROUSEL ===== */

.carousel {
    margin-bottom: 240px;
    margin-top: 70px;
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

/* ===== CARD ===== */

.card {
    position: absolute;
    width: 280px;
    height: 320px;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%); /* ADD THIS */

    background: linear-gradient(145deg,
            rgba(255, 215, 0, 0.08),
            rgba(255, 215, 0, 0.02));

    border-radius: 20px;
    overflow: hidden;

    border: 1px solid rgba(255, 215, 0, 0.25);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .6),
        0 0 40px rgba(255, 215, 0, .15);

    transition:
        transform .9s cubic-bezier(.22, .61, .36, 1),
        opacity .6s ease;
}

.card:hover {
    transform: translate(-50%, -50%) scale(1.05) !important;
    z-index: 999;
}

.card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.card-content{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:16px;
    background:linear-gradient(to top, rgba(255,215,0,.25), transparent);
    backdrop-filter:blur(8px);
}

.card-text{
    font-size:14px;
    color:#ffd700;
    text-align:center;
    font-weight:500;
}

/* ================== BUTTONS ================ */

.controls{
    position:absolute;
    bottom:-60px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:20px;
}

button {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    font-size: 22px;
    cursor: pointer;

    background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;

    box-shadow: 0 0 20px rgba(255, 215, 0, .5);
    transition: .25s;
}

button:hover {
    transform: scale(1.15);
    box-shadow: 0 0 35px rgba(255, 215, 0, .9);
}

.card video{
    width:100%;
    height:100%;
    object-fit:cover;
}

@media (max-width:768px){

.carousel-stage{
display:none;
}

}
@media (max-width:480px){

.carousel-stage{
display:none;
}

}
/* ===============================
   🚫 MOBILE UNWANTED SPACE REMOVE
================================ */

@media (max-width:768px){

    html, body{
        margin:0 !important;
        padding:0 !important;
        overflow-x:hidden !important;
    }

    section{
        margin:0 !important;
        padding-left:20px !important;
        padding-right:20px !important;
    }

    /* HERO FIX */
    .hero-section{
        margin-top:0 !important;
        padding-top:70px !important; /* navbar height only */
        height:auto !important;
        min-height:90vh !important;
    }

    .hero-overlay{
        height:100% !important;
    }

    /* REMOVE RANDOM TOP GAPS */
    .floating-section,
    .btb-cta-section,
    .featured-section,
    .bobVideoSection{
        margin-top:0 !important;
        padding-top:60px !important;
        padding-bottom:60px !important;
    }

    /* KILL BIG HEIGHT SECTIONS */
    .btb-3d-section{
        height:auto !important;
        padding:80px 0 !important;
    }

    .carousel-stage{
        height:auto !important;
        min-height:400px !important;
    }

    /* REMOVE EXTRA WHITE SPACE UNDER LAST SECTION */
    footer{
        margin:0 !important;
    }

}

@media (max-width: 992px) {

    .floating-section {
        height: auto;
        flex-direction: column;
        padding: 80px 20px;
        text-align: center;
    }

    .floating-left {
        width: 100%;
        position: relative;
        top: 0;
        height: 300px;
        margin-bottom: 40px;
    }

    .media-wrapper {
        height: 260px;
    }

    .floating-content {
        order: 1;
        width: 100%;
        margin-bottom: 30px;
    }
    
    .floating-left {
        order: 2;
        width: 100%;
        height: auto;
        position: relative;
        top: 0;
    }

    .float-heading {
        font-size: 32px;
        transform: none;
        opacity: 1;
    }

    .float-text {
        transform: none;
        opacity: 1;
    }
}
/* ===============================
   testimonial-card
================================ */
/* TESTIMONIAL TITLE */

.testimonial-title{
text-align:center;
margin-bottom:60px;
}

.testimonial-title h2{
font-size:42px;
font-weight:700;
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
margin-bottom:10px;
}

.testimonial-title p{
font-size:16px;
color:#bbb;
max-width:600px;
margin:auto;
}
.testimonial-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        max-width: 1400px;
        margin: auto;
        overflow: hidden;
    }

    .testimonial-section {
        background: #131111;
        padding: 60px 1px 160px 0px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /* SLIDER WRAPPER (CENTER CONTROL) */

    .testimonial-slider {
        display: flex;
        gap: 60px;
        justify-content: center;
        align-items: center;
    }

    /* CARD */

    .testimonial-card {
        display: flex;
        align-items: center;
        /*gap: 30px;*/
        flex-shrink: 0;
        transition: 0.6s ease;
    }

    .testimonial-card.active {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }

    /* IMAGE */

    .testimonial-img {
        position: relative;
    }

    .testimonial-img img {
        width: 250px;
        height: 320px;
        object-fit: cover;
    }

    /* GOLD STRIP */

    .name-strip {

        position: absolute;
        right: -35px;
        top: 0;

        width: 50px;
        height: 71%;

        background: linear-gradient(to bottom,
                #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .name-strip span {

        writing-mode: vertical-rl;
        transform: rotate(180deg);

        color: #fff;
        font-size: 20px;
    }

    /* CONTENT */

    .testimonial-content {

        background: #0c0c0c;
        border: 1px solid #caa85c;

        padding: 55px;
        width: 320px;

        color: #fff;
    }

    .role {
        color: #caa85c;
    }

    /* BUTTON */

    .read-btn {

        display: inline-block;
        margin-top: 20px;

        padding: 10px 25px;

        background: linear-gradient(to right,
                #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

        color: #000;
        text-decoration: none;
        font-weight: 600;
    }

    /* ARROWS */

    .nav {
        position: absolute;
        top: 50%;
        /*transform: translateY(-50%);*/
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background: #caa85c;
        font-size: 22px;
        cursor: pointer;
        z-index: 10;
    }

    .prev {
        left: 40px;
    }

    .next {
        right: 40px;
    }

    .testimonial-slider .testimonial-card {
        opacity: .3;
        filter: blur(3px);
        transform: scale(.85);
    }

    .testimonial-slider .testimonial-card.active {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
        z-index: 2;
    }
    @media (max-width:1024px){

.testimonial-slider{
gap:30px;
}

.testimonial-img img{
width:200px;
height:260px;
}

.testimonial-content{
width:260px;
padding:35px;
}

}
@media (max-width:768px){

.testimonial-wrapper{
max-width:100%;
padding:0 20px;
}

.testimonial-card{
flex-direction:column;
text-align:center;
}

.testimonial-img img{
width:220px;
height:auto;
}

.name-strip{
right:-25px;
width:45px;
height:100%;
}

.testimonial-content{
width:100%;
padding:30px;
}

}
@media (max-width:480px){

.testimonial-section{
padding:80px 0;
}

.testimonial-slider{
gap:20px;
}

.testimonial-img img{
width:180px;
}

.testimonial-content{
padding:25px;
}

.nav{
width:40px;
height:40px;
font-size:18px;
}

.prev{
left:10px;
}

.next{
right:10px;
}

}

/*========================================================================================================================= 
    ABOUT KA HERO SECTION
============================================================================================================================*/

.about-hero{
    height:100vh;
    display:flex;
    align-items:center;
    padding:0 8%;
    background:
        linear-gradient(
        to right,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.92) 40%,
        rgba(0,0,0,0.6) 55%,
        rgba(0,0,0,0) 75%
        ),
        url("https://bobthebuilderr.com/wp-content/uploads/2026/03/bg-scaled.jpg") right center/cover no-repeat;
}

.about-hero-content{
    max-width:600px;
}

.about-logo{
    color:#d4a373;
    margin-bottom:20px;
    font-size:18px;
    letter-spacing:2px;
}

.about-hero h1{
        color:#ffca00;
    font-size:56px;
    line-height:1.1;
    margin-bottom:25px;
}

.about-hero p{
    color:#fff2a9ba;
    font-size:18px;
    line-height:1.6;
    margin-bottom:35px;
}

.about-hero-buttons{
    display:flex;
    gap:20px;
}

.about-btn{
    background: linear-gradient(120deg, #b8860b, #ffd700);
    padding:14px 32px;
    display:inline-block;
    color:black;
    text-decoration:none;
    border-radius:40px;
    font-weight:600;
}
.about-btnn{
    /*background: linear-gradient(120deg, #b8860b, #ffd700);*/
    padding:14px 32px;
    display:inline-block;
    color: #ffd700;
    text-decoration:none;
    border-radius:40px;
    border: 1px solid #ffd700;
    font-weight:600;
}

.about-btn:hover{
    /*background:#d4a373;*/
}

/*================================
    LUX SECTION 
====================================*/

.about-lux-section{
    background:#121110;
    padding:120px 0;
}

.about-lux-container{
    width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-lux-label{
    color:#e6c089;
    font-size:14px;
    letter-spacing:2px;
}

.about-lux-text h2{
    color: #ffd700;
    font-size:32px;
    margin:15px 0;
}

.about-lux-text p{
    font-size: 18px;
    color:#fff2a9ba;
    margin-bottom:20px;
}

.about-lux-btn{
    background: linear-gradient(120deg, #b8860b, #ffd700);
    /*border:1px solid #e6c089;*/
    color: #000;
    padding:10px 25px;
    text-decoration: none;
    border-radius: 40px;
    font-weight: 600;
}

.about-lux-images-top{
    display:flex;
    gap:25px;
}

.about-lux-images-top img{
    width:260px;
    border-radius:12px;
}

.about-lux-image-bottom img{
    width:100%;
    border-radius:12px;
}

/*========================================
    CARD
==========================================*/
   

/*.about-interiors-section{*/
/*    padding:120px 0;*/
/*    background:#121110;*/
/*}*/

/*.about-interiors-container{*/
/*    width:1200px;*/
/*    margin:auto;*/
/*}*/

/*.about-tag{*/
/*    color:#c6a46c;*/
/*    font-size:14px;*/
/*    letter-spacing:2px;*/
/*    display:block;*/
/*    margin-bottom:15px;*/
/*}*/

/*.about-heading{*/
/*    color:#e6c089;*/
/*    font-size:48px;*/
/*    margin-bottom:15px;*/
/*}*/

/*.about-subtext{*/
/*    color:#e6c089;*/
/*    max-width:600px;*/
/*    margin-bottom:50px;*/
/*}*/

/* CARDS */

/*.about-cards{*/
/*    display:flex;*/
/*    gap:30px;*/
/*}*/

/*.about-card{*/
/*    width:380px;*/
/*    border-radius:20px;*/
/*    overflow:hidden;*/
/*    background:white;*/
/*}*/

/*.about-card img{*/
/*    width:100%;*/
/*    height:240px;*/
/*    object-fit:cover;*/
/*}*/

/*.about-card-body{*/
/*    padding:25px;*/
/*}*/

/*.about-small{*/
/*    font-size:13px;*/
/*    display:block;*/
/*    margin-bottom:10px;*/
/*}*/

/*.about-card h3{*/
/*    font-size:22px;*/
/*    margin-bottom:10px;*/
/*}*/

/*.about-meta{*/
/*    font-size:14px;*/
/*    margin-bottom:20px;*/
/*}*/

/*.about-btn{*/
/*    display:inline-block;*/
/*    padding:12px 25px;*/
/*    background:#f4b400;*/
/*    color:black;*/
/*    text-decoration:none;*/
/*    border-radius:12px;*/
/*}*/



/*=================================================
    processss
==================================================*/

.about-process{
    background:#121110;
    padding:20px 0px 60px;
    text-align:center;
    color:white;
}

.about-process-title{
    font-size:42px;
    margin-bottom:100px;
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing:2px;
    position:relative;
}

.about-process-container{
    display:flex;
    justify-content:space-between;
    width:1200px;
    margin:auto;
    position:relative;
}

.about-line{
    position:absolute;
    top:170px;
    left:0;
    width:100%;
    height:2px;
    background:linear-gradient(to right,#d4a373,#f5d7a1);
}

.about-process-item{
    width:250px;
    position:relative;
    transition:.4s;
    will-change:transform;
}

.about-process-item img{
    width:160px;
    margin-bottom:30px;
    filter:drop-shadow(0 0 20px rgba(212,163,115,.3));
}

.about-circle{
    width:18px;
    height:18px;
    background:#d4a373;
    border-radius:50%;
    margin:auto;
    box-shadow:0 0 15px #d4a373;
}

.about-step{
    display:inline-block;
    margin-top:20px;
    padding:8px 20px;
    border:1px solid #d4a373;
    border-radius:30px;
    color:#d4a373;
    font-size:13px;
}

.about-process-item h3{
    margin-top:20px;
    font-size:22px;
}

.about-process-item p{
    color:#aaa;
    font-size:14px;
}

/* hover */

.about-process-item:hover{
    transform:translateY(-15px);
}

.about-process-item:hover .about-circle{
    box-shadow:0 0 25px #d4a373;
}


/* title underline animation */

.about-process-title::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-15px;
    transform:translateX(-50%);
    width:0;
    height:2px;
    background:#d4a373;
    animation:aboutline 1.5s ease forwards;
}

@keyframes aboutline{
    to{
        width:120px;
    }
}

/*===============================================
    CTA SECTION 
==================================================*/

.about-cta{
    background:#121110;
    padding:100px 0;
}

.about-cta-box{
    width:1200px;
    margin:auto;
    padding:60px;
    border-radius:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:linear-gradient(
    135deg,
    rgba(212,163,115,0.15),
    rgba(255,255,255,0.05)
    );

    border:1px solid rgba(226,184,77,0.3);
    box-shadow:0 0 40px rgba(212,163,115,0.2);
}

.about-cta-tag{
    color:#d4a373;
    letter-spacing:2px;
    font-size:14px;
}

.about-cta-left h2{
    color:white;
    font-size:32px;
    margin:15px 0;
}

.about-cta-left p{
    color:#aaa;
}

.about-btn-primary{
    background: linear-gradient(120deg, #b8860b, #ffd700);
    color:black;
    padding:15px 35px;
    border-radius:30px;
    text-decoration:none;
    margin-right:15px;
    font-weight:600;
}

.about-btn-secondary{
    border:1px solid #d4a373;
    color:#d4a373;
    padding:15px 35px;
    border-radius:30px;
    text-decoration:none;
}
/* ======================================
   TABLET RESPONSIVE
====================================== */

@media (max-width:1024px){

.about-lux-container,
.about-interiors-container,
.about-process-container,
.about-cta-box{
    width:90%;
}

.about-cards{
    flex-wrap:wrap;
    justify-content:center;
}

.about-card{
    width:45%;
}

.about-process-container{
    flex-wrap:wrap;
    gap:50px;
}

.about-process-item{
    width:45%;
}

.about-line{
    display:none;
}

.about-lux-container{
    grid-template-columns:1fr;
    text-align:left;
}

.about-lux-images-top{
    justify-content:center;
}

.about-cta-box{
    flex-direction:column;
    text-align:center;
    gap:30px;
}

.about-hero h1{
    font-size:44px;
}

}


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

@media (max-width:768px){

.about-hero{
    height:auto;
    padding:120px 20px;
}

.about-hero-content{
    max-width:100%;
}

.about-hero h1{
    font-size:34px;
}

.about-hero p{
    font-size:16px;
}

.about-hero-buttons{
    flex-direction:column;
    align-items:flex-start;
}

.about-lux-section{
    padding:80px 20px;
}

.about-lux-container{
    width:100%;
}

.about-lux-images-top{
    flex-direction:column;
}

.about-lux-images-top img{
    width:100%;
}

.about-lux-image-bottom img{
    width:100%;
}

.about-interiors-container{
    width:100%;
    padding:0 20px;
}

.about-heading{
    font-size:34px;
}

.about-cards{
    flex-direction:column;
}

.about-card{
    width:100%;
}

.about-process{
    padding:80px 20px;
}

.about-process-title{
    font-size:32px;
}

.about-process-container{
    flex-direction:column;
    align-items:center;
    gap:60px;
    width:100%;
}

.about-process-item{
    width:100%;
}

.about-cta{
    padding:80px 20px;
}

.about-cta-box{
    width:100%;
    padding:40px 25px;
}

.about-cta-left h2{
    font-size:26px;
}

.about-btn-primary,
.about-btn-secondary{
    display:block;
    width:100%;
    margin-bottom:15px;
    text-align:left;
}

}


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

@media (max-width:480px){

.about-hero h1{
    font-size:28px;
}

.about-heading{
    font-size:28px;
}

.about-process-title{
    font-size:26px;
}

.about-lux-text h2{
    font-size:24px;
}

.about-cta-left h2{
    font-size:22px;
}

.about-card-body{
    padding:20px;
}

}








/* =========================
HERO SECTION
========================= */

.rp-hero{
position:relative;
width:100%;
height:75vh;
min-height:420px;
background:url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
display:flex;
align-items:center;
padding:0 6%;
overflow:hidden;
}

.rp-overlay{
position:absolute;
inset:0;
background:linear-gradient(to right,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.65) 40%,
rgba(0,0,0,.25) 100%);
z-index:1;
}

.site-logo{
position:absolute;
top:25px;
left:6%;
z-index:3;
}

.site-logo img{
width:140px;
filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));
}

/* HERO TEXT */

.rp-content{
/*margin-left:60px;*/
position:relative;
max-width:650px;
z-index:2;
}

.rp-content h1{
        background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
font-size:50px;
margin-bottom:18px;
font-weight:600;
line-height:1.1;
}

.rp-content h3{
font-size:24px;
color:#d4af37;
margin-bottom:18px;
}

.rp-content p{
font-size:16px;
line-height:1.7;
color:#fff2a9ba;
margin-bottom:30px;
}

/* BUTTONS */

.rp-buttons{
    margin-bottom: 20px;
display:flex;
gap:18px;
flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
padding:13px 28px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-primary{
background:linear-gradient(45deg,#d4af37,#b8962e);
color:#000;
}

.btn-primary:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(212,175,55,.4);
}

.btn-secondary{
border:1px solid #d4af37;
color:#d4af37;
}

.btn-secondary:hover{
background:#d4af37;
color:#000;
}

/* =========================
RECENT PROJECTS
========================= */

.recent-projects{
padding:100px 8%;
}

.rp-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:60px;
gap:20px;
}

.rp-header h2{
        background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
font-size:48px;
font-weight:600;
}

.rp-header p{
color:#fff2a9ba;
margin-top:10px;
}

.rp-main-btn{
background:linear-gradient(45deg,#d4af37,#b8962e);
color:#000;
padding:14px 30px;
border-radius:50px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.rp-main-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(212,175,55,.4);
}

/* =========================
PROJECT CARD (DESKTOP SAME)
========================= */

.rp-card{
display:grid;
grid-template-columns:45% 55%;
align-items:center;
background:#111;
border-radius:20px;
margin-bottom:35px;
overflow:hidden;
border:1px solid rgba(212,175,55,.12);
transition:.4s;
padding:25px;
gap:30px;
}

.rp-card:hover{
border-color:#d4af37;
box-shadow:0 25px 60px rgba(0,0,0,.6);
}

.rp-img{
height:280px;
border-radius:15px;
overflow:hidden;
}

.rp-img img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s;
}

.rp-card:hover .rp-img img{
transform:scale(1.08);
}

/* CARD TEXT */

.rp-card-content{
padding-left:40px;
}

.rp-card-content h3{
    margin-top: 20px;
     background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
font-size:26px;
margin-bottom:10px;
}
.rp-tag{
    color: #fff2a9ba;
}
.rp-card-content p{
margin:18px 0 25px;
color:#fff2a9ba;
line-height:1.6;
font-size:15px;
}

/* BUTTONS */

.btn-gold{
background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;
padding:12px 25px;
border-radius:40px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn-gold:hover{
transform:translateY(-3px);
}

.btn-outline{
border:1px solid #d4af37;
color:#d4af37;
padding:12px 25px;
border-radius:40px;
text-decoration:none;
transition:.3s;
}

.btn-outline:hover{
background:#d4af37;
color:#000;
}

/* =========================
CTA
========================= */

.cta-luxury-minimal{
text-align:center;
padding:70px 8%;
background:#131111;
position:relative;
overflow:hidden;
}

.cta-luxury-minimal::before{
content:"";
width:100px;
height:2px;
background:linear-gradient(to right,transparent,#d4af37,transparent);
position:absolute;
top:30px;
left:50%;
transform:translateX(-50%);
}

.cta-luxury-minimal h2{
background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
font-size:36px;
margin-bottom:15px;
}

.cta-luxury-minimal p{
color:#fff2a9ba;
font-size:15px;
margin-bottom:25px;
}

.cta-gold-btn{
display:inline-block;
padding:14px 36px;
border-radius:50px;
background: linear-gradient(120deg, #b8860b, #ffd700);
color:#000;
font-weight:600;
text-decoration:none;
transition:.4s;
}

.cta-gold-btn:hover{
transform:translateY(-4px);
/*box-shadow:0 15px 35px rgba(212,175,55,.5);*/
}

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

/* Responsive */
@media(max-width:900px){

.rp-card{
grid-template-columns:1fr;
}

.rp-img{
height:220px;
margin-bottom:20px;
}

.rp-content{
padding-left:0;
}

.rp-header{
flex-direction:column;
align-items:flex-start;
gap:20px;
}

}

/* CTA */

.cta-luxury-minimal{
padding:60px 20px;
}

.cta-luxury-minimal h2{
font-size:26px;
}

.cta-luxury-minimal p{
font-size:14px;
}

/* =========================
SINGLE PROJECT PAGE
========================= */
/* SINGLE PROJECT GRID */

.project-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* TEXT */

.project-text{
max-width:600px;
}

/* IMAGE */

.project-image img{
width:100%;
border-radius:20px;
box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

/* MOBILE */

@media(max-width:900px){

.project-grid{
grid-template-columns:1fr;
gap:30px;
}

.project-image{
order:-1;
}

}
.single-project{
padding:120px 8%;
background:#131111;
}

.single-project .container{
max-width:1100px;
margin:auto;
}

/* TITLE */

.project-title{
font-size:46px;
font-weight:600;
margin-bottom:40px;
line-height:1.2;
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}

/* IMAGE */

.project-image{
margin-bottom:40px;
border-radius:18px;
overflow:hidden;
box-shadow:0 25px 60px rgba(0,0,0,0.6);
}

.project-image img{
width:100%;
height:auto;
display:block;
transition:0.6s ease;
}

.project-image img:hover{
transform:scale(1.04);
}

/* CONTENT */

.project-content{
font-size:17px;
line-height:1.8;
color:#cfcfcf;
max-width:850px;
}

.project-content h2,
.project-content h3{
color:#d4af37;
margin-top:40px;
margin-bottom:15px;
}

.project-content p{
margin-bottom:20px;
}

.project-content strong{
color:#fff;
}

/* LIST */

.project-content ul{
padding-left:20px;
margin-bottom:20px;
}

.project-content li{
margin-bottom:8px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

.single-project{
padding:90px 6%;
}

.project-title{
font-size:32px;
}

.project-content{
font-size:15px;
}

}

/* =========================
MOBILE PROPER FIX
========================= */

@media (max-width:768px){

.recent-projects{
padding:60px 20px;
}

/* Header fix */

.rp-header{
flex-direction:column;
align-items:flex-start;
gap:15px;
margin-bottom:40px;
}

.rp-header h2{
    color: white;
font-size:30px;
}

.rp-header p{
font-size:14px;
}

/* Card layout */

.rp-card{
grid-template-columns:1fr;
padding:18px;
border-radius:16px;
}

/* Image */

.rp-img{
height:200px;
border-radius:12px;
margin-bottom:15px;
}

/* Text */

.rp-card-content{
padding-left:0;
}

.rp-card-content h3{
    color: white;
font-size:20px;
}

.rp-card-content p{
font-size:14px;
line-height:1.6;
}

/* Buttons */

.rp-buttons{
flex-direction:row;
gap:10px;
flex-wrap:wrap;
}

.btn-gold,
.btn-outline{
padding:10px 18px;
font-size:14px;
}

}



























/* =========================
    GALLERY KA PAGE
========================= */
.gallery-section{
        background: #131111;
padding:120px 6%;
text-align:center;
}

.gallery-heading{
font-size:48px;
background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
margin-bottom:60px;
letter-spacing:3px;
}

/* ===== FILTER BUTTONS ===== */
.gallery-buttons{
margin-bottom:70px;
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.gallery-buttons button{
    background:transparent;
    color:#d4a373;
    padding: 0px 100px 0px 15px;
    /*margin:10px;*/
    cursor:pointer;
    transition:.4s ease;
    border-radius:15px;
    text-align:center;
}

/*.gallery-buttons button:hover,*/
/*.gallery-buttons .active{*/
/*background:#d4a373;*/
/*color:#000;*/
/*}*/

/* ===== MASONRY GRID ===== */
.gallery-wrapper{
column-count:3;
column-gap:35px;
max-width:1350px;
margin:auto;
}

/* ===== CARD ===== */
.gallery-card{
break-inside:avoid;
margin-bottom:35px;
position:relative;
overflow:hidden;
border-radius:26px;
background:#111;
box-shadow:0 20px 50px rgba(0,0,0,0.7);
cursor:pointer;
transform:translateY(60px);
opacity:0;
transition:transform .4s ease,box-shadow .4s ease;
}

/* IMAGE */
.gallery-card img{
width:100%;
display:block;
border-radius:26px;
transition:transform .6s ease,filter .6s ease;
}

/* GOLD BORDER */
.gallery-card::after{
content:"";
position:absolute;
inset:0;
border-radius:26px;
border:2px solid #d4a373;
opacity:0;
transition:.4s ease;
}

/* OVERLAY TEXT */
.gallery-overlay{
position:absolute;
inset:0;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:18px;
letter-spacing:2px;
background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
opacity:0;
transition:.4s ease;
}

/* HOVER EFFECT */
.gallery-card:hover{
transform:translateY(-12px);
box-shadow:0 30px 70px rgba(212,163,115,0.25);
}

.gallery-card:hover img{
transform:scale(1.08);
filter:brightness(.75);
}

.gallery-card:hover::after{
opacity:1;
}

.gallery-card:hover .gallery-overlay{
opacity:1;
}

/* POPUP */
.gallery-lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.97);
display:none;
justify-content:center;
align-items:center;
z-index:999;
}

.gallery-lightbox-img{
max-width:85%;
max-height:85%;
border-radius:20px;
}

.gallery-close{
position:absolute;
top:30px;
right:50px;
font-size:45px;
color:#d4a373;
cursor:pointer;
}

/* RESPONSIVE */

@media(max-width:1100px){
.gallery-wrapper{
column-count:2;
}
}

@media(max-width:600px){

.gallery-wrapper{
column-count:1;
}

.gallery-heading{
font-size:32px;
}

}

.card-section a{
display:block;
text-decoration:none;
}


/* =======================================
    OUR SERVICES KA PAGE
========================================== */
/* SERVICES SECTION */
        .btb-services-clean {
            position: relative;
            height: 60vh;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 8%;
            overflow: hidden;
        }

        .btb-services-clean::before {
            content: "";
            position: absolute;
            inset: 0;
            background: url("https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?q=80&w=2000&auto=format&fit=crop") center/cover;
            z-index: 0;
        }

        .btb-services-clean::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.95),
                    rgba(0, 0, 0, 0.85),
                    rgba(0, 0, 0, 0.5),
                    transparent);
            z-index: 1;
        }

        .btb-services-content {
            position: relative;
            z-index: 2;
            max-width: 650px;
            color: #fff2a9ba;
            /*margin-left: 45px;*/
        }

        .btb-services-content h2 {
                background: linear-gradient(120deg,#b8860b,#ffd700,#ffea70,#ffffff,#ffea70,#ffd700,#b8860b);
                background-clip:text;
                -webkit-background-clip:text;
            
                color:transparent;
                -webkit-text-fill-color:transparent;
            font-size: 48px;
            margin-bottom: 15px;
        }

        .btb-services-content h3 {
            font-size: 22px;
            color: #fff2a9ba;
            margin-bottom: 20px;
        }

        .btb-services-btn {
    display:inline-block;
    padding:14px 32px;
    background: linear-gradient(120deg,#b8860b,#ffd700);
    color:#000 !important;
    border-radius:50px;
    text-decoration:none;
    margin-top:20px;
    font-weight:600;
}

        /* CARD SECTION FIX */
        /* ================= CARD SECTION ================= */

        .card-section {
            display: flex;
            justify-content: center;
            gap: 60px;
            padding: 100px 5%;
            flex-wrap: wrap;
        }

        /* CARD */
        
        .bhk3d-card-main {
            width: var(--bhk3d-card-width);
            height: var(--bhk3d-card-height);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            perspective: 1500px;
            border-radius: 20px;
        }

        /* WRAPPER */

        .bhk3d-card-wrapper {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
            transition: 0.6s ease;
        }

        /* BACKGROUND IMAGE */

        .bhk3d-card-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            
        }
        
        /* GLASS TEXT */

/* BACKGROUND LAYER */
.bhk3d-card-wrapper{
z-index:1;
}

/* CHARACTER */
.bhk3d-card-character{
z-index:3;
}

/* GLASS TEXT */
.bhk3d-glass-text{
position:absolute;
bottom:0px;
left:50%;
transform:translateX(-50%);
width:99%;

    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
/*background:rgba(255,255,255,0.08);*/
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.2);
border-radius:12px;

padding:12px;
text-align:center;

z-index:5; /* IMPORTANT */
}

.bhk3d-glass-text h3{
margin:0;
color:white;
font-size:18px;
letter-spacing:1px;
}

        /* DESKTOP HOVER EFFECT */

        .bhk3d-card-main:hover .bhk3d-card-wrapper {
            transform: rotateX(15deg) translateY(-10px) scale(1.05);
            box-shadow: 0 35px 60px rgba(0, 0, 0, 0.6);
            filter: brightness(0.5) blur(3px);
            /*transform: scale(1.05);*/
            transition: 0.5s ease;
        }

        /* TITLE */

        .bhk3d-card-title {
            margin-top: 10px;
            position: absolute;
            bottom: 20px;
            width: 100%;
            transition: 0.5s ease;
        }

        .bhk3d-card-main:hover .bhk3d-card-title {
            transform: translateY(-40px);
        }

        /* SECOND IMAGE (CHARACTER) */

        .bhk3d-card-character {
            position: absolute;
            top: 15%;
            width: 120%;
            opacity: 0;
            transition: 0.5s ease;
        }

        /* Desktop Hover Show */

        .bhk3d-card-main:hover .bhk3d-card-character {
            opacity: 1;
            transform: translateY(-20%);
            
        }

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

        @media (max-width: 768px) {

            .card-section {
                flex-direction: column;
                align-items: center;
                gap: 50px;
                padding: 70px 0;
            }

            .bhk3d-card-main {
                width: 90%;
                height: 350px;
            }

            /* Active Card Effect */

            .bhk3d-card-main.active-card .bhk3d-card-character {
                opacity: 1;
                transform: translateY(-20%);
            }

            .bhk3d-card-main.active-card .bhk3d-card-wrapper {
                transform: rotateX(10deg) translateY(-5px);
            }

        }

        /* ================= HOW IT WORKS ================= */

        .how-section {
            /* background: #0f0f0f; */
            padding: 120px 8%;
            color: #fff;
        }

        .how-header {
            margin-bottom: 80px;
        }

        .how-header h2 {
            background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
            font-size: 42px;
            margin-bottom: 15px;
        }

        .how-header p {

            color: #ae9247;
        }

        /* GRID */

        .how-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        /* CARD */

        .how-card {
            background: linear-gradient(145deg, #111, #1a1a1a);
            border-radius: 20px;
            padding: 40px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            position: relative;
            transition: 0.4s ease;
        }

        .how-card:hover {
            transform: translateY(-10px);
            border-color: #d4af37;
            box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
        }

        /* STEP NUMBER */

        .step-number {
            position: absolute;
            top: -18px;
            left: 30px;
            background: #0f0f0f;
            border: 1px solid #d4af37;
            color: #d4af37;
            padding: 6px 14px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 600;
        }

        /* TEXT */

        .how-card h3 {
            margin-top: 20px;
            font-size: 20px;
            margin-bottom: 15px;
            background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
        }

        .how-card p {
            color: #fff2a9ba;
            line-height: 1.6;
            font-size: 14px;
        }

        /* RESPONSIVE */

        @media(max-width:992px) {
            .how-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media(max-width:768px) {
            .how-grid {
                grid-template-columns: 1fr;
            }
        }

        .lux-cta {
            /* background: #121110; */
            padding: 100px 0;
        }

        .lux-cta-box {
            width: 390px;
            margin: auto;
            padding: 60px;
            border-radius: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(145deg, #111, #1a1a1a);
            border: 1px solid rgba(226, 184, 77, 0.3);
            /* box-shadow: 0 0 40px rgba(212, 163, 115, 0.2); */
        }

        .lux-tag {
            color: #d4a373;
            letter-spacing: 2px;
            font-size: 14px;
        }

        .lux-cta-left h2 {
            color: white;
            font-size: 32px;
            margin: 15px 0;
        }

        .lux-cta-left p {
            color: #aaa;
        }

        .lux-btn-primary {
            background: #d4a373;
            color: black;
            padding: 15px 35px;
            border-radius: 30px;
            text-decoration: none;
            margin-right: 15px;
            font-weight: 600;
            transition: .3s;
        }

        .lux-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px #d4a373;
        }

        .lux-btn-secondary {
            border: 1px solid #d4a373;
            color: #d4a373;
            padding: 15px 35px;
            border-radius: 30px;
            text-decoration: none;
            transition: .3s;
        }

        .lux-btn-secondary:hover {
            background: #d4a373;
            color: black;
        }

        @media(max-width:768px) {

            .lux-cta-box {

                flex-direction: column;
                align-items: flex-start;
                gap: 25px;
                padding: 35px 25px;

            }

            .lux-cta-left h2 {

                font-size: 24px;

            }

        }

        /* ================= MINIMAL LUXURY CTA ================= */

        .cta-luxury-minimal {
            text-align: center;
            padding: 70px 8%;
            /* 👈 pehle 120px tha */
            background: #131111;
            position: relative;
        }

        /* subtle gold top line */
        .cta-luxury-minimal::before {
            content: "";
            width: 100px;
            height: 2px;
            background: linear-gradient(to right, transparent, #d4af37, transparent);
            position: absolute;
            top: 30px;
            /* 👈 upar ki line bhi adjust */
            left: 50%;
            transform: translateX(-50%);
        }

        /* heading */

        .cta-luxury-minimal h2 {
            color: #d4af37;
            font-size: 36px;
            margin-bottom: 15px;
        }

        /* subtext */

        .cta-luxury-minimal p {
            color: #ae9247;
            font-size: 17px;
            margin-bottom: 25px;
        }

        /* gold button */

        .cta-gold-btn {
            display: inline-block;
            padding: 14px 36px;
            border-radius: 50px;
            background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;
            font-weight: 600;
            text-decoration: none;
            transition: 0.4s ease;
        }

        .cta-gold-btn:hover {
            transform: translateY(-4px);
            /*box-shadow: 0 15px 35px rgba(212, 175, 55, 0.5);*/
        }

        /* mobile */

        @media(max-width:768px) {
            .cta-luxury-minimal h2 {
                font-size: 28px;
            }
        }

        /* Smooth performance */
        .cta-luxury-minimal {
            overflow: hidden;
        }

        .cta-luxury-minimal h2 span {
            display: inline-block;
        }

        .type-heading {
            display: inline-block;
            border-right: 3px solid #d4af37;
            white-space: nowrap;
            overflow: hidden;
        }

        .cursor-blink {
            animation: blink 0.8s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                border-color: #d4af37;
            }

            50% {
                border-color: transparent;
            }
        }
        
        /* ===================================
   🔥 MOBILE OVERFLOW / RIGHT GAP FIX
=================================== */

@media (max-width:768px){

    html, body{
        overflow-x:hidden !important;
        max-width:100% !important;
    }

    *{
        max-width:100% !important;
    }

    /* FIX BIG FIXED WIDTH CONTAINER */
    .lux-cta-box{
        width:100% !important;
        max-width:100% !important;
        padding:30px 20px !important;
    }

    /* FIX 120% IMAGE OVERFLOW */
    .bhk3d-card-character{
        width:100% !important;
        left:0 !important;
    }

    /* SERVICES SECTION FIX */
    .btb-services-clean{
        padding:0 20px !important;
        height:auto !important;
        min-height:60vh;
    }

    .btb-services-content{
        margin-left:0 !important;
        padding:0 10px !important;
    }

    .btb-services-content h2{
        font-size:28px !important;
    }

    /* CARD SECTION */
    .card-section{
        padding:60px 20px !important;
    }

    .bhk3d-card-main{
        width:100% !important;
    }

    /* HOW SECTION */
    .how-section{
        padding:70px 20px !important;
    }

    /* CTA MINIMAL */
    .cta-luxury-minimal{
        padding:60px 20px !important;
    }

}

/*===============================================================
    SINGLE PAGE OF SERVICES
===============================================================*/


/* PROJECT SECTION */

.project-section{
padding:140px 8%;
background:#131111;
color:#fff;
}

.project-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
position:relative;
}

/* TEXT */

.project-text{
max-width:480px;
}

.project-text h2{
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
font-size:44px;
margin-bottom:25px;
font-weight:600;
letter-spacing:0.5px;
}

.project-text p{
font-size:18px;
line-height:1.9;
color:#fff2a9ba;
margin-bottom:18px;
}

/* IMAGE */

.project-image{
text-align:center;
}

.project-image img{
width:100%;
max-width:420px;
border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

/* DETAILS CARD */

.project-details{
position:absolute;
right:0;
bottom:-120px;
width:300px;
padding:35px;
border-radius:16px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 20px 40px rgba(0,0,0,0.5);
}

.project-details h3{
    
font-size:26px;
margin-bottom:20px;
}

.project-details ul{
list-style:none;
padding:0;
}

.project-details li{
font-size:18px;
margin-bottom:12px;
}

.project-btn{
display:inline-block;
margin-top:25px;
padding:14px 34px;
background:#fff;
color:#000;
border-radius:8px;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.project-btn:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(255,255,255,0.3);
}

/* MOBILE */

@media(max-width:900px){

.project-container{
grid-template-columns:1fr;
text-align:center;
}

.project-details{
position:relative;
bottom:0;
margin-top:40px;
}

}




/* =========================================================
   CONTACT US — Slots Calendar + Premium Form
   Scoped to .cuPage (won’t break other pages)
========================================================= */

.cuPage{

  /* TEXT COLORS */
  --cuInk:#ffffff;
  --cuMut:rgba(255,255,255,0.65);

  /* GOLD BRAND COLOR */
  --cuBrand:#C9A14A;
  --cuBrand2:#E6C77A;

  /* BLACK CARD */
  --cuCard:rgba(10,10,10,0.88);

  /* BORDER */
  --cuStroke:rgba(201,161,74,0.25);

  --cuR:26px;
  --cuShadow:0 18px 60px rgba(0,0,0,.55);
  --cuShadow2:0 14px 34px rgba(0,0,0,.45);

  padding: 120px 0 60px;

  background:
  radial-gradient(900px 600px at 10% 10%, rgba(201,161,74,.15), transparent 60%),
  radial-gradient(900px 600px at 90% 10%, rgba(201,161,74,.12), transparent 60%),
  linear-gradient(180deg,#0b0b0b,#000000);
}

.cuShell{
  padding:0 18px;
  margin-top:40px;
}
.cuGrid{
  max-width: var(--wrap, 1200px);
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items:start;
}

@media (max-width: 980px){
  .cuGrid{ grid-template-columns: 1fr; }
}

/* Reveal animation */
.cuReveal{
  opacity: 0;
  transform: translateY(14px);
}
.cuReveal.is-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}

/* Cards */
.cuCard, .cuFormCard{
  background: var(--cuCard);
  border: 1px solid var(--cuStroke);
  border-radius: var(--cuR);
  box-shadow: var(--cuShadow);
  overflow:hidden;
}

.cuLeft{ display:grid; gap: 14px; }
.cuRight{ position: relative; }

/* Brand card */
.cuBrand{ padding: 16px; }
.cuBrandRow{ display:flex; gap: 12px; align-items:center; }
.cuLogo{
  width: 50px; height: 50px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,183,3,.20);
  border: 1px solid rgba(255,183,3,.28);
  box-shadow: 0 14px 30px rgba(255,183,3,.16);
}
.cuLogoMark{
  font-weight: 1000;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--cuInk);
}
.cuBrandName{ 
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 1000; 
    letter-spacing: -.02em;
    }
.cuBrandTag{ color:#fff2a9ba; font-size: 13px; margin-top: 2px; }
.cuBrandAbout{ margin: 12px 0 0; color: #fff2a9ba; line-height: 1.55; }

.cuBadges{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; }
.cuBadge{
    color: #fff2a9ba;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
  font-weight: 800;
}

/* Pill */
.cuPill{
  display:inline-flex; align-items:center; gap:10px;
  letter-spacing:.14em; text-transform:uppercase;
  font-weight: 950; font-size: 12px;
      color: rgb(206 194 2 / 78%);
}
.cuPill i{
  width:10px;height:10px;border-radius:999px;
  background:#C9A14A;
  box-shadow: 0 0 0 6px rgba(255,183,3,.16);
  display:inline-block;
}
.cuPhones{
display:flex;
flex-direction:column;
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cuInfoValue a{
     background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
text-decoration:none;
}
/* Calendar card */
.cuCal{ padding: 16px; }
.cuCalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.cuH2{
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0 6px;
    font-size: 20px; 
    letter-spacing: -.01em;
    }
    
.cuH1{ 
    background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0 6px; 
    font-size: clamp(24px, 2.2vw, 32px); 
    letter-spacing: -.02em; 
    
}
.cuSub{ margin: 0; color:#fff2a9ba; line-height: 1.55; }

.cuCalNav{ display:flex; gap: 8px; }
.cuNavBtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.70);
  box-shadow: var(--cuShadow2);
  font-size: 18px;
  cursor:pointer;
  transition: transform .18s ease;
}
.cuNavBtn:hover{ transform: translateY(-2px); }

.cuWeek{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 10px;
}
.cuDay{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgb(62 61 57 / 76%);
  padding: 10px 10px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow:hidden;
}
.cuDay:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(15,23,42,.10); }
.cuDay .dName{ font-size: 12px; font-weight: 900; opacity: .72; }
.cuDay .dNum{ font-size: 18px; font-weight: 1000; letter-spacing: -.02em; }
.cuDay .dMon{ font-size: 12px; font-weight: 900; opacity: .64; }

.cuDay.is-active{
  border-color: rgba(255,183,3,.55);
  box-shadow: 0 20px 60px rgba(255,183,3,.18);
}
.cuDay.is-active::after{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(closest-side, rgba(255,183,3,.22), transparent 60%);
  transform: translate(35%, -10%);
}

/* Slots grid */
.cuSlots{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 520px){
  .cuSlots{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.cuSlot{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgb(62 61 57 / 76%);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow:hidden;
}
.cuSlot:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15,23,42,.10);
}
.cuSlot .t{ font-weight: 950; }
.cuSlot .m{ font-size: 12px; opacity: .72; margin-top: 3px; }
.cuSlot.is-picked{
  border-color: rgba(255,183,3,.55);
  box-shadow: 0 20px 60px rgba(255,183,3,.16);
}
.cuSlot.is-picked::after{
  content:"";
  position:absolute; inset:-40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.38) 45%, transparent 55%);
  animation: cuShine 1.05s ease;
}
@keyframes cuShine{
  from{ transform: translateX(-55%); }
  to{ transform: translateX(55%); }
}

/* Selected row */
.cuSelected{
  margin-top: 14px;
  border-radius: 20px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.05);
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.cuSelectedLeft{ display:flex; align-items:center; gap: 10px; }
.cuDot{
  width: 10px; height: 10px; border-radius: 999px;
  background:#C9A14A;
  box-shadow: 0 0 0 6px rgba(255,183,3,.16);
}
.cuSelTitle{ font-size: 12px; font-weight: 950; opacity:.72; letter-spacing:.12em; text-transform:uppercase; color:#fff2a9ba;}
.cuSelValue{ font-weight: 950; color:#fff2a9ba;}

.cuWhats{
  text-decoration:none;
  display:inline-flex; gap:10px; align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgb(198 151 50);
  font-weight: 950;
  color: #000000;
  transition: transform .18s ease;
}
.cuWhats:hover{ transform: translateY(-2px); }

/* Quick info card */
.cuInfo{ padding: 14px 16px; }
.cuInfoRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width:520px){ .cuInfoRow{ grid-template-columns: 1fr; } }
.cuInfoLabel{ font-size: 12px; opacity:.70; font-weight: 900; letter-spacing:.12em; text-transform:uppercase; background: linear-gradient(120deg, #b8860b, #ffd700, #ffea70, #ffffff, #ffea70, #ffd700, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.cuInfoValue{ font-weight: 1000; margin-top: 4px;color:#fff2a9ba; }
.cuInfoNote{ color:#fff2a9ba; margin-top: 10px; }

/* Form card */
.cuFormCard{ padding: 18px; }
.cuFormHead{ margin-bottom: 12px; }

.cuForm{ display:grid; gap: 12px; }
.cuRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 620px){
  .cuRow{ grid-template-columns: 1fr; }
}

.cuField span{
  display:block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.72;
  margin: 0 0 8px;
}
.cuField input, .cuField select, .cuField textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgb(62 61 57 / 76%);
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.cuField input:focus, .cuField select:focus, .cuField textarea:focus{
  border-color: rgba(255,183,3,.55);
  box-shadow: 0 0 0 6px rgba(255,183,3,.14);
  transform: translateY(-1px);
}

.cuConsent{
  display:flex; gap:10px; align-items:flex-start;
  color:#fff2a9ba;
  font-size: 14px;
}
.cuConsent input{ margin-top: 4px; }

.cuActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 4px;
}
.cuBtn {
    text-align: left;
    border-radius: 16px;
    padding: 20px 130px 17px 40px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .70);
    font-weight: 600;
    text-decoration: none;
    color: var(--cuInk);
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

button {
    width: 52px;
    height: 70px;
    border-radius: 50%;
    border: none;
    font-size: 22px;
    cursor: pointer;
    background: linear-gradient(120deg, #b8860b, #ffd700);
    color: #000;
    box-shadow: 0 0 20px rgba(255, 215, 0, .5);
    transition: .25s;
}
.cuBtn:hover{ transform: translateY(-2px); filter: brightness(1.02); }
.cuBtnPrimary{
  background: linear-gradient(135deg,#C9A14A,#E6C77A);
  color:#000;
  box-shadow:0 12px 30px rgba(201,161,74,.35);
}
.cuBtnGhost{
  background: rgba(15,23,42,.06);
}
.cuNote{ color:#fff2a9ba; font-size: 13px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cuReveal, .cuNavBtn, .cuDay, .cuSlot, .cuBtn, .cuWhats, .cuField input, .cuField select, .cuField textarea{
    transition:none !important;
  }
}
/* =========================================
   STICKY HEADER IMPROVEMENT
========================================= */

body {
    padding-top: 32px;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 102px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 99999;
    transition: all 0.35s ease;
    border-bottom: 1px solid rgba(255, 215, 0, 0.08);
}

/* Scroll state */
.navbar.is-scrolled {
    height: 78px;
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Logo image smooth resize */
.nav-logo img {
    transition: width 0.35s ease;
}

.navbar.is-scrolled .nav-logo img {
    width: 120px;
}

/* Text smooth resize */
.site-title,
.site-tagline {
    transition: all 0.35s ease;
}

.navbar.is-scrolled .site-title {
    font-size: 24px;
}

.navbar.is-scrolled .site-tagline {
    font-size: 13px;
}

/* Side menu below header */
.side-menu {
    top: 0;
    padding-top: 120px;
    z-index: 99998;
}

/* Prevent scroll when menu open */
body.menu-open {
    overflow: hidden;
}

/* =========================================
   MOBILE STICKY HEADER
========================================= */
@media (max-width: 768px) {
    body {
        padding-top: 72px;
    }

    .navbar {
        height: 72px !important;
        padding: 0 16px !important;
        background: rgba(0, 0, 0, 0.82) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .navbar.is-scrolled {
        height: 64px !important;
        background: rgba(0, 0, 0, 0.94) !important;
    }

    .nav-logo {
        gap: 8px;
    }

    .nav-logo img {
        width: 86px !important;
        height: auto;
    }

    .navbar.is-scrolled .nav-logo img {
        width: 74px !important;
    }

    .logo-text {
        line-height: 1.1;
    }

    .site-title {
        font-size: 18px !important;
        white-space: nowrap;
    }

    .site-tagline {
        font-size: 10px !important;
        line-height: 1.2;
    }

    .navbar.is-scrolled .site-title {
        font-size: 16px !important;
    }

    .navbar.is-scrolled .site-tagline {
        font-size: 9px !important;
    }

    .menu-toggle {
        width: 28px;
        height: 22px;
        flex-shrink: 0;
    }

    .menu-toggle span {
        height: 3px;
    }

    .side-menu {
        width: 82% !important;
        max-width: 300px;
        right: -100% !important;
        padding-top: 95px !important;
    }

    .side-menu.active {
        right: 0 !important;
    }
}

/* =========================================
   EXTRA SMALL MOBILE
========================================= */
@media (max-width: 480px) {
    body {
        padding-top: 68px;
    }

    .navbar {
        height: 68px !important;
        padding: 0 12px !important;
    }

    .navbar.is-scrolled {
        height: 60px !important;
    }

    .nav-logo img {
        width: 102px !important;
    }

    .navbar.is-scrolled .nav-logo img {
        width: 64px !important;
    }

    .site-title {
        font-size: 20px !important;
    }

    .site-tagline {
        font-size: 10px !important;
    }
}