/* =========================================================================
   BPNS COMMON.CSS
   Reusable styles shared across every page: header, navigation and footer.
   Link this file on EVERY page, AFTER bootstrap.min.css / style.css and
   BEFORE any page-specific <style> block, e.g.:

   <link rel="stylesheet" href="assets/css/common.css">
   ========================================================================= */

/* ---------- Fonts (needed by header/nav/footer typography below) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

/* ---------- Shared design tokens ---------- */
:root{
    --bpns-navy:#0f2d52;
    --bpns-navy-deep:#0a1f3b;
    --bpns-blue:#1c6dd0;
    --bpns-sky:#2bc1f2;
    --bpns-gold:#f2a71b;
    --bpns-cream:#fbf9f4;
    --bpns-ink:#1c2733;
    --bpns-muted:#5a6a7a;
    --bpns-white:#ffffff;
    --bpns-radius:16px;
    --bpns-radius-sm:10px;
    --bpns-shadow:0 10px 30px -12px rgba(15,45,82,.25);
    --bpns-shadow-soft:0 6px 18px -8px rgba(15,45,82,.18);
    --bpns-transition:.25s cubic-bezier(.4,0,.2,1);
}

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

html{ scroll-behavior:smooth; }

body{
    font-family:'Poppins', Arial, sans-serif !important;
    color:var(--bpns-ink);
    -webkit-font-smoothing:antialiased;
}

a{ transition:color var(--bpns-transition), background var(--bpns-transition), transform var(--bpns-transition); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:3px solid var(--bpns-gold);
    outline-offset:2px;
}

/* =========================================================================
   HEADER (top utility bar + logo/nav bar)
   ========================================================================= */

/* ---- Top utility bar ---- */
.top-header{
    background:linear-gradient(90deg,var(--bpns-navy-deep),var(--bpns-navy));
    color:#eaf2fb;
    font-size:13px;
}
.top-header .header-txt a{ color:#dfeaf7 !important; font-weight:500; }
.top-header .header-txt a:hover{ color:var(--bpns-gold) !important; }
.top-header .arvind{ color:#6fa3e2; font-weight:500; }
.top-header .row{ row-gap:6px; }
#sfcd1wjs8sdbat8dcafmk27h9dl2y36fscf{ display:inline-block; margin-left:4px; font-weight:700; color:var(--bpns-gold); }

/* ---- Sticky header wrapper ---- */
.header.header-style-1{
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:var(--bpns-shadow-soft);
}
.bottom-header{
    background:var(--bpns-white);
    padding:8px 0;
}
.logo img{ max-height:64px; width:auto; }

/* ---- Navigation menu ---- */
.navbar-nav .nav-item > a{
    font-weight:600;
    color:var(--bpns-navy) !important;
    letter-spacing:.2px;
    padding:10px 14px !important;
    border-radius:8px;
    transition:background var(--bpns-transition), color var(--bpns-transition);
}
.navbar-nav .nav-item > a:hover{
    background:rgba(28,109,208,.08);
    color:var(--bpns-blue) !important;
}
.dropdown-menu{
    border:none;
    border-radius:var(--bpns-radius-sm);
    box-shadow:var(--bpns-shadow);
    padding:8px;
    overflow:hidden;
}
.dropdown-menu li a{
    border-radius:6px;
    padding:8px 12px;
    font-size:14px;
    transition:background var(--bpns-transition), padding-left var(--bpns-transition);
}
.dropdown-menu li a:hover{
    background:rgba(28,109,208,.08);
    padding-left:16px;
}
.navbar-toggler{
    border:2px solid var(--bpns-navy);
    border-radius:8px;
}
.navbar-toggler i{ color:var(--bpns-navy); font-size:20px; }

@media (max-width:991px){
    .navbar-collapse{
        background:var(--bpns-white);
        border-radius:var(--bpns-radius-sm);
        box-shadow:var(--bpns-shadow-soft);
        padding:10px;
        margin-top:10px;
    }
    .top-header .row{ text-align:center; }
    .top-header .justify-content-lg-end{ justify-content:center !important; }
    .top-header .d-sm-flex{ flex-wrap:wrap; justify-content:center; }
}

@media (max-width:575px){
    .top-header{ font-size:12px;height: 180px; }
    .header-txt{ padding:2px 8px !important; }
    .logo img{ max-height:48px; }
}

/* ---- Sliding "Enquiry Form" side tab (appears on every page) ---- */
#sidebar, #sidebar1{
    box-shadow:var(--bpns-shadow);
    border-radius:10px 0 0 10px;
}
@media (max-width:575px){
    #sidebar, #sidebar1{ transform:scale(.85); }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
    background:linear-gradient(180deg,var(--bpns-navy),var(--bpns-navy-deep)) !important;
}
.footer-card-title{
    color:#fff;
    font-family:'Sora','Poppins',sans-serif;
    font-weight:700;
    position:relative;
}
.footer-card-title::after{
    content:"";
    display:block;
    width:42px;
    height:3px;
    background:var(--bpns-gold);
    margin-top:10px;
    border-radius:2px;
}
.footer-card-txt{ color:#cfdaea !important; line-height:1.7; }
.footer-link{ color:#cfdaea !important; transition:color var(--bpns-transition), padding-left var(--bpns-transition); }
.footer-link:hover{ color:var(--bpns-gold) !important; padding-left:4px; }
.footer-social{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#fff !important;
    margin-right:8px;
    transition:background var(--bpns-transition), transform var(--bpns-transition);
}
.footer-social:hover{
    background:var(--bpns-gold);
    transform:translateY(-3px);
}
.bottom-footer{
    background:var(--bpns-navy-deep);
    border-top:1px solid rgba(255,255,255,.08);
}
.bottom-footer p, .bottom-footer a{ color:#c7d3e2; }
.bottom-footer a.branding-theme{ color:var(--bpns-gold); font-weight:600; }

/* "Total visitors" counter relocated into the footer row */
.bpns-counter{ color:#c7d3e2 !important; font-weight:500; gap:6px; justify-content:center; }
.bpns-counter #sfcd1wjs8sdbat8dcafmk27h9dl2y36fscf{ font-weight:700; color:var(--bpns-gold); }
@media (min-width:992px){
    .bpns-counter{ justify-content:flex-end; }
}
@media (max-width:991px){
    .bottom-footer .row{ row-gap:8px; }
}

/* =========================================================================
   SIDELINK — fixed social-icon rail (Facebook / Instagram / YouTube)
   Overrides the old hover-expand rail from style.css with a lighter,
   theme-matched, fully responsive version. Load this file AFTER style.css
   so these rules win the cascade (no edits to style.css needed).
   ========================================================================= */
.sidelink{
    position:fixed !important;
    top:50% !important;
    left:0 !important;
    width:auto !important;
    transform:translateY(-50%);
    z-index:950;
}
.sidelink .nav-secondary{
    position:static !important;
    top:auto !important;
    left:auto !important;
    font-weight:600;
    text-transform:none;
}
.sidelink .nav-secondary ul{
    display:flex !important;
    flex-direction:column !important;
    gap:10px;
    width:auto !important;
}
.sidelink .nav-secondary li{
    margin:0 !important;
    list-style:none;
    position:relative;
}
.sidelink .nav-secondary li + li{ margin-left:0 !important; }

.sidelink .nav-secondary a{
    display:flex !important;
    align-items:center;
    width:44px !important;
    height:44px;
    padding:0 !important;
    border-radius:0 50px 50px 0;
    background:var(--bpns-navy);
    color:#fff !important;
    overflow:hidden;
    transition:width var(--bpns-transition), background var(--bpns-transition);
    box-shadow:var(--bpns-shadow-soft);
}
.sidelink .nav-secondary a:before{ content:none !important; }

.sidelink .nav-secondary .nav__icon{
    width:44px !important;
    height:44px;
    flex:0 0 44px;
    position:static !important;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent !important;
    font-size:18px;
}
.sidelink .nav-secondary .nav__icon i{ color:#fff; line-height:1; }

.sidelink .nav-secondary .nav__content{
    display:inline-block !important;
    white-space:nowrap;
    font-size:13px !important;
    letter-spacing:.4px;
    text-transform:none !important;
    font-weight:600 !important;
    opacity:0 !important;
    max-width:0;
    overflow:hidden;
    padding-right:0;
    transition:opacity var(--bpns-transition), max-width var(--bpns-transition), padding-right var(--bpns-transition);
}

/* brand colours per icon, and hover-reveal label (pointer devices only) */
.sidelink .nav-secondary li:nth-child(1) a{ background:#1877f2; }
.sidelink .nav-secondary li:nth-child(2) a{ background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.sidelink .nav-secondary li:nth-child(3) a{ background:#ff0000; }

@media (hover:hover) and (pointer:fine){
    .sidelink .nav-secondary a:hover{ width:160px !important; }
    .sidelink .nav-secondary a:hover .nav__content{
        opacity:1 !important;
        max-width:120px;
        padding-right:14px;
    }
}

/* tablets */
@media (max-width:991px){
    .sidelink .nav-secondary a{ width:40px !important; height:40px; }
    .sidelink .nav-secondary .nav__icon{ width:40px !important; height:40px; flex-basis:40px; font-size:16px; }
}

/* phones — compact floating circles, icon-only, no hover/label */
@media (max-width:575px){
    .sidelink{
        top:auto !important;
        bottom:14px;
        left:10px !important;
        transform:none;
    }
    .sidelink .nav-secondary ul{ gap:8px; }
    .sidelink .nav-secondary a{
        width:38px !important;
        height:38px;
        border-radius:50% !important;
    }
    .sidelink .nav-secondary .nav__icon{ width:38px !important; height:38px; flex-basis:38px; font-size:15px; }
    .sidelink .nav-secondary .nav__content{ display:none !important; }
}