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

body{
    background:var(--logo-color);
    font-family:'Inter', sans-serif;
    color:var(--text-color);
}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */
.navbar-brand,
.navbar-nav .nav-link,
.contact-btn,
.theme-btn{
    font-family:'Poppins', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:'Poppins', sans-serif;
    color:var(--heading-color);
}


/* =========================
   UNIQUE HEADER CONTACT BUTTONS
========================= */
.header-contact-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.header-contact-btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-width:230px;
    padding:10px 18px 10px 12px;
    border-radius:var(--radius-md);
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    transition:all var(--transition-smooth);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 30px var(--black-18);
}

.header-contact-btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:1;
    transition:all var(--transition-smooth);
    background: linear-gradient(135deg, var(--mail-red-25), var(--mail-red-10));
    border-radius:inherit;
}

/* Phone button */
.phone-btn{
    border:1px solid var(--white-18);
}
.phone-btn::before{
    background:linear-gradient(135deg, var(--accent-blue-25), var(--white-06));
}

/* Email button */
.mail-btn{
    border:1px solid var(--white-18);
}
.mail-btn .header-contact-icon{
    background: linear-gradient(135deg, var(--mail-red), var(--mail-red-25));
    color: var(--white);
}
.header-contact-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 35px var(--black-22);
}

.header-contact-btn:hover::before{
    filter:brightness(1.08);
}

.header-contact-icon{
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--heading-sm);
    color:var(--white);
    box-shadow:inset 0 1px 0 var(--white-18);
}

.phone-btn .header-contact-icon{
    background:linear-gradient(135deg, var(--accent-blue), var(--icon-blue));
}

.mail-btn .header-contact-icon{
    background: linear-gradient(135deg, var(--mail-red), #7f1d1d);
    color: var(--white);
}

.header-contact-content{
    display:flex;
    flex-direction:column;
}

.header-contact-content small{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    color:var(--black);
    margin-bottom:4px;
    font-family:'Inter', sans-serif;
}

.header-contact-content strong{
    font-size:14px;
    font-weight:700;
    color:var(--black);
    font-family:'Poppins', sans-serif;
}


.brand-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-decoration:none;
    justify-content:flex-start;
    margin-right:auto;
}

.brand-tagline{
    margin-top:4px;
    font-size:11px;
    font-weight:500;
    color:var(--icon-blue);
    white-space:nowrap;
}

/* Hide only header tagline on mobile */
@media (max-width:991.98px){
    .desktop-tagline{
        display:none;
    }

    .sidebar-tagline{
        display:block;
        font-size:var(--text-micro);
    }
}
/* =========================
   HEADER / NAVBAR
========================= */
.custom-navbar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:12px 0 ;
    background: var(--white);
}

.hero-shell .container{
    max-width:1500px;
}

/* Keep brand + toggler aligned */
.custom-navbar .navbar > .container,
.custom-navbar .navbar > .container-fluid,
.custom-navbar .container{
    position:relative;
}

/* =========================
   BRAND
========================= */
.navbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--navbar-brand-color) !important;
    font-size:31px;
    font-weight:700;
    text-decoration:none;
    margin:0;
}

/* Override Bootstrap */
.navbar-brand.brand-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
}

.brand-logo{
    height:50px;
    width:auto;
    display:block;
    object-fit:contain;
}
/* =========================
   NAV LINKS
========================= */
.navbar-nav{
    align-items:center;
}

.navbar-nav .nav-link{
    color:var(--accent-blue) !important;
    font-size:14px;
    font-weight:400;
    margin:0 15px;
    padding:0 !important;
    transition:var(--transition-default);
    position:relative;
}

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

.dropdown-toggle::after{
    margin-left:8px;
    vertical-align:middle;
    border-top:.25em solid currentColor;
    border-right:.25em solid transparent;
    border-left:.25em solid transparent;
}

/* =========================
   BUTTONS
========================= */
.contact-btn{
    background:var(--contact-btn-bg);
    color:var(--contact-btn-text) !important;
    border-radius:var(--radius-pill);
    padding:5px 5px 5px 22px;
    font-weight:400;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
    box-shadow:var(--shadow-contact-btn);
    transition:var(--transition-default);
    white-space:nowrap;
    border:none;
}

.contact-btn:hover{
    transform:translateY(-2px);
    background:var(--contact-btn-hover-bg);
    color:var(--contact-btn-text) !important;
}

.contact-btn .circle-icon{
    width:40px;
    height:40px;
    min-width:40px;
    border-radius:50%;
    background:var(--contact-btn-icon-bg);
    color:var(--contact-btn-icon-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--heading-sm);
}

/* =========================
   THEME BUTTON
========================= */
.theme-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:16px;
    padding:5px 5px 5px 25px;
    border-radius:var(--radius-pill);
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    overflow:hidden;
    isolation:isolate;
    background:var(--theme-btn-bg);
    color:var(--theme-btn-text) !important;
    border:1px solid var(--theme-btn-border);
    transition:
        color var(--transition-smooth),
        transform var(--transition-default),
        box-shadow var(--transition-default);
    z-index:1;
    white-space:nowrap;
}

.theme-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--theme-btn-overlay-bg);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform var(--transition-overlay);
    z-index:-1;
    border-radius:inherit;
}

.theme-btn:hover{
    color:var(--theme-btn-hover-text) !important;
    transform:translateY(1px);
    border-color:var(--theme-btn-hover-border);
}

.theme-btn:hover::before{
    transform:scaleX(1);
}

.theme-btn .btn-text{
    position:relative;
    z-index:2;
    color:var(--theme-btn-text);
    transition:color var(--transition-smooth);
}

.theme-btn:hover .btn-text{
    color:var(--theme-btn-hover-text);
}

.theme-btn .circle-icon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    background:var(--theme-btn-icon-bg);
    color:var(--theme-btn-icon-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    position:relative;
    z-index:2;
    transition:all var(--transition-smooth);
}

.theme-btn:hover .circle-icon{
    background:var(--theme-btn-hover-icon-bg);
    color:var(--theme-btn-hover-icon-color);
}

/* Optional modifier class */
.theme-btn.theme-btn-blue{
    background:var(--theme-btn-bg);
    color:var(--theme-btn-text) !important;
    border-color:var(--theme-btn-border);
    box-shadow:var(--shadow-theme-btn);
}

.theme-btn.theme-btn-blue::before{
    background:var(--theme-btn-overlay-bg);
}

.theme-btn.theme-btn-blue:hover{
    color:var(--theme-btn-hover-text) !important;
}

.theme-btn.theme-btn-blue:hover .btn-text{
    color:var(--theme-btn-hover-text);
}

.theme-btn.theme-btn-blue:hover .circle-icon{
    background:var(--theme-btn-hover-icon-bg);
    color:var(--theme-btn-hover-icon-color);
}

/* =========================
   NAVBAR TOGGLER
========================= */
.navbar-toggler{
    border:none !important;
    box-shadow:none !important;
    padding:0;
    width:46px;
    height:46px;
    border-radius:var(--radius-sm);
    background:var(--navbar-toggler-bg);
    display:flex;
    align-items:center;
    justify-content:center;
}

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

.navbar-toggler-icon{
    background-image:none !important;
    width:22px;
    height:16px;
    position:relative;
    display:inline-block;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:var(--black);
    border-radius:10px;
    transition:var(--transition-default);
}

.navbar-toggler-icon::before{
    top:0;
}

.navbar-toggler-icon span{
    top:7px;
}

.navbar-toggler-icon::after{
    bottom:0;
}

/* =========================
   HEADER DIVIDER
========================= */
.header-divider{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:var(--header-divider-color);
}


/* =========================
   FLOATING WHATSAPP BUTTON
========================= */
.floating-whatsapp-btn{
    position:fixed;
    right:24px;
    bottom:24px;
    width:62px;
    height:62px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:var(--whatsapp-btn-bg);
    color:var(--whatsapp-btn-icon-color);
    box-shadow:var(--whatsapp-btn-shadow);
    z-index:1200;
    transition:
        transform var(--transition-smooth),
        background var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.floating-whatsapp-btn::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:1px solid var(--whatsapp-btn-ring);
    transform:scale(0.92);
    opacity:0;
    transition:
        transform var(--transition-smooth),
        opacity var(--transition-smooth);
}

.floating-whatsapp-btn i{
    font-size:30px;
}

.floating-whatsapp-btn:hover{
    background:var(--whatsapp-btn-bg-hover);
    color:var(--whatsapp-btn-icon-color);
    transform:translateY(-4px) scale(1.03);
}

.floating-whatsapp-btn:hover::before{
    opacity:1;
    transform:scale(1);
}

/* =========================
   DESKTOP NAV WRAPPER
========================= */
.desktop-navbar{
    flex:1;
    margin-left:40px;
}

/* =========================
   MOBILE SIDEBAR / OFFCANVAS
========================= */
.mobile-sidebar{
    width:min(86vw, 340px) !important;
    background: var(--white);
    border-right:1px solid var(--border-color);
    box-shadow:25px 0 60px var(--black-18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    color:var(--accent-blue);
}

.mobile-sidebar .offcanvas-header{
    padding:18px 18px 14px;
    border-bottom:1px solid var(--mobile-sidebar-divider);
background:var(--mobile-sidebar-header-bg);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    box-shadow:0 8px 20px rgba(0,0,0,.04);
}

.mobile-sidebar .offcanvas-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    height:100%;
}

.sidebar-close-btn{
    width:42px;
    height:42px;
    border:none;
    outline:none;
    border-radius:12px;
background:var(--logo-color);
color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--heading-sm);
    transition:0.3s ease;
}

.sidebar-close-btn:hover{
    background:var(--white-14);
    transform:rotate(90deg);
}

.mobile-nav-list{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    margin:0;
    padding:8px 0 0;
}

.mobile-nav-list .nav-item{
    width:100%;
}

.mobile-nav-list .nav-link{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    margin:0 !important;
    padding:14px 20px 14px 24px !important;
    border-radius:14px;
    color:var(--accent-blue) !important;
    font-size:15px;
    font-weight:500;
    border:none !important;
    transition:all .3s ease;
    overflow:hidden;
}

.mobile-nav-list .nav-link::before{
    content:"";
    position:absolute;
    left:10px; /* pehle 0 tha */
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:10px;
    background:linear-gradient(180deg, #f4c95d, #ffb703);
    opacity:0;
    transform:scaleY(0.4);
    transition:all .3s ease;
}

.mobile-nav-list .nav-link:hover,
.mobile-nav-list .nav-link.active{
    background:var(--mobile-sidebar-hover-bg);
    color:var(--accent-blue) !important;
    transform:translateX(1px);
}

.mobile-nav-list .nav-link:hover::before,
.mobile-nav-list .nav-link.active::before{
    opacity:1;
    transform:scaleY(1);
}

.mobile-contact-wrap{
    margin-top:auto;
    padding-top:24px;
    border-top:1px solid rgba(30,64,175,.12);
    display:flex;
    flex-direction:column;
    gap:14px;
}

.mobile-contact-wrap .header-contact-btn{
    min-width:100%;
    width:100%;
 background:var(--white);
border:1px solid var(--mobile-sidebar-card-border);
    box-shadow:0 10px 25px rgba(30,64,175,.06);
}



/* nice backdrop */
.offcanvas-backdrop.show{
    opacity:.55;
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}

/* =========================
   OFFCANVAS MENU FINAL FIX
========================= */
.mobile-sidebar .mobile-nav-list .nav-link{
    display:flex !important;
    align-items:center;
    width:100%;
    margin:0 !important;
    padding:14px 18px 14px 30px !important; /* left space for gold line */
    border:none !important;
    border-radius:14px;
    position:relative;
    margin-bottom:8px !important;
background:#fff;
border:1px solid var(--mobile-sidebar-card-border);
box-shadow:0 8px 20px var(--mobile-sidebar-card-shadow);
}

.mobile-sidebar .mobile-nav-list .nav-link::before{
    content:"";
    position:absolute;
    left:14px;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:10px;
    background:linear-gradient(
    180deg,
    var(--accent-blue),
    var(--icon-blue)
);
    opacity:0;
    transform:scaleY(.4);
    transition:all .3s ease;
}

.mobile-sidebar .mobile-nav-list .nav-link:hover,
.mobile-sidebar .mobile-nav-list .nav-link.active{
background:linear-gradient(90deg,#eef5ff,#ffffff);
border-color:rgba(30,64,175,.25);
color:var(--accent-blue) !important;
transform:translateX(5px);
}

.mobile-sidebar .mobile-nav-list .nav-link:hover::before,
.mobile-sidebar .mobile-nav-list .nav-link.active::before{
    opacity:1;
    transform:scaleY(1);
}


/* hide toggler on desktop */
@media (min-width:992px){
    .navbar-toggler{
        display:none !important;
    }
}

/* =========================
   DESKTOP / LARGE TABLET
========================= */
@media (max-width:1199px){
    .navbar-nav .nav-link{
        margin:0 10px;
        font-size:15px;
    }
    
    .header-contact-btn{
        min-width:210px;
        padding:10px 14px 10px 10px;
    }

    .header-contact-content strong{
        font-size:13px;
    }
}

/* =========================
   TABLET / MOBILE
========================= */
@media (max-width:991px){
    .custom-navbar{
        padding:16px 0;
    }

    .navbar-brand{
        font-size:24px;
        gap:12px;
        max-width:calc(100% - 60px);
    }

.brand-logo{
    height:50px;
}

    .navbar-collapse{
        margin-top:16px;
        padding:18px;
        border-radius:var(--radius-lg);
        background:var(--mobile-menu-bg);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        box-shadow:var(--shadow-mobile-menu);
    }

    .navbar-nav{
        align-items:flex-start;
        width:100%;
    }

    .navbar-nav .nav-item{
        width:100%;
    }

    .navbar-nav .nav-link{
        display:block;
        width:100%;
        margin:0;
        padding:12px 0 !important;
        font-size:16px;
        border-bottom:1px solid var(--mobile-menu-link-border);
    }

    .navbar-nav .nav-item:last-child .nav-link{
        border-bottom:none;
    }

    /* Nav right side buttons wrapper */
    .navbar-actions,
    .header-actions,
    .nav-btn-wrap{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:12px;
        margin-top:16px;
    }

    .contact-btn,
    .theme-btn{
        width:100%;
        justify-content:space-between;
    }

    .header-divider{
        display:none;
    }
    
    .header-contact-wrap{
        width:100%;
        flex-direction:column;
        align-items:stretch;
        margin-top:16px;
    }

    .header-contact-btn{
        width:100%;
        min-width:100%;
    }
    
    .contact-btn{
        width:100%;
        justify-content:space-between;
    }

    .theme-btn{
        width:auto;
        display:inline-flex;
        justify-content:center;
    }
    
    .desktop-navbar{
        display:none !important;
    }

    .custom-navbar{
        padding:16px 0;
    }
}

/* =========================
   SMALL MOBILE
========================= */
@media (max-width:767px){
    .custom-navbar{
        padding:14px 0;
    }

    .navbar-brand{
        font-size:20px;
        gap:10px;
    }

.brand-logo{
    height:44px;
}

    .navbar-toggler{
        width:42px;
        height:42px;
        border-radius:var(--radius-xs);
    }

    .navbar-collapse{
        margin-top:14px;
        padding:16px;
        border-radius:var(--radius-md);
    }

    .navbar-nav .nav-link{
        font-size:15px;
        padding:11px 0 !important;
    }

    .theme-btn,
    .contact-btn{
        font-size:14px;
        gap:12px;
        padding:5px 5px 5px 16px;
    }

    .theme-btn .circle-icon,
    .contact-btn .circle-icon{
        width:38px;
        height:38px;
        min-width:38px;
        font-size:15px;
    }
    
    .floating-whatsapp-btn{
        right:18px;
        bottom:18px;
        width:56px;
        height:56px;
    }

    .floating-whatsapp-btn i{
        font-size:26px;
    }
}

/* =========================
   EXTRA SMALL MOBILE
========================= */
@media (max-width:575px){
    .custom-navbar .container,
    .custom-navbar .container-fluid{
        padding-left:14px;
        padding-right:14px;
    }

    .navbar-brand{
        font-size:18px;
        max-width:calc(100% - 54px);
    }

.brand-logo{
    height:38px;
}

    .navbar-collapse{
        padding:14px;
    }

    .theme-btn,
    .contact-btn{
        font-size:13px;
        padding:4px 4px 4px 14px;
    }

    .theme-btn .circle-icon,
    .contact-btn .circle-icon{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:14px;
    }
    
    .header-contact-btn{
        padding:10px 12px 10px 10px;
        gap:10px;
    }

    .header-contact-icon{
        width:42px;
        height:42px;
        min-width:42px;
        font-size:16px;
    }

    .header-contact-content strong{
        font-size:12px;
    }

    .header-contact-content small{
        font-size:var(--text-micro);
    }
    
    .floating-whatsapp-btn{
        right:14px;
        bottom:14px;
        width:52px;
        height:52px;
    }

    .floating-whatsapp-btn i{
        font-size:24px;
    }
}




/* =========================
   SERVICES DROPDOWN
========================= */

.navbar-nav .dropdown{
    position:relative;
}

.services-dropdown{
    margin-top:18px;
    border:none;
    border-radius:16px;
    min-width:230px;
    padding:10px 0;
    background:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    animation:dropdownFade .25s ease;
}

.services-dropdown .dropdown-item{
    padding:12px 22px;
    font-size:15px;
    font-weight:500;
    transition:.3s;
}

.services-dropdown .dropdown-item:hover,
.services-dropdown .dropdown-item.active{
    background:rgba(13,110,253,.08);
    color:var(--accent-blue);
}



@keyframes dropdownFade{

    from{
        opacity:0;
        transform:translateY(10px);
    }

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

}

@media (max-width:991px){
.mobile-submenu{
    list-style:none;
    margin:8px 0 0;
    padding-left:22px;
}

.mobile-submenu li{
    margin-bottom:4px;
}

.mobile-submenu a{
    display:block;
    padding:10px 14px;
    color:var(--accent-blue);
    text-decoration:none;
    border-radius:10px;
    font-size:14px;
    transition:.3s;
}

.mobile-submenu a:hover,
.mobile-submenu a.active{
    background:var(--mobile-sidebar-hover-bg);
    color:var(--accent-blue);
}

.mobile-nav-list .nav-link i{
    margin-left:auto;
    transition:.3s;
}

.mobile-nav-list .nav-link[aria-expanded="true"] i{
    transform:rotate(180deg);
}
}