:root{
    --navy:#071d35;
    --navy-2:#0b2948;
    --blue:#075fae;
    --blue-light:#28a9e0;
    --cyan:#15a8db;
    --gold:#d7b467;
    --white:#ffffff;
    --off:#f5f8fb;
    --text:#18324a;
    --muted:#6f8090;
    --border:#dce5ed;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:#fff;
}

body.modal-open{
    overflow:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

.container{
    width:min(1180px, calc(100% - 48px));
    margin:auto;
}

.section{
    padding:110px 0;
}

.eyebrow{
    display:block;
    color:var(--blue);
    font-size:12px;
    font-weight:800;
    letter-spacing:2.3px;
    margin-bottom:18px;
}

.eyebrow.light{
    color:#64c9ef;
}

h1,h2,h3{
    font-family:'Montserrat',sans-serif;
}

h2{
    margin:0;
    font-size:52px;
    line-height:1.02;
    letter-spacing:-2px;
    color:var(--navy);
}

h2 span{
    color:var(--blue);
}

p{
    line-height:1.8;
    color:var(--muted);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    min-height:52px;
    padding:0 25px;
    border:0;
    font-weight:700;
}

.btn-primary{
    color:white;
    background:var(--blue);
}

.btn-primary:hover{
    background:#0872ce;
}


/* NAV */

.main-header{
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
}

.navbar{
    width:min(1250px,calc(100% - 40px));
    margin:18px auto 0;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    background:rgba(5,29,53,.94);
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.09);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:white;
}

.brand-symbol{
    width:41px;
    height:41px;
    border:2px solid #4fb7e2;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Montserrat';
    font-weight:800;
    font-size:23px;
}

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

.brand-text strong{
    font-size:15px;
    letter-spacing:1px;
}

.brand-text span{
    color:#7fa2bc;
    font-size:8px;
    letter-spacing:2px;
    margin-top:4px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:26px;
}

.nav-links a{
    color:#d7e5ef;
    font-size:12px;
    font-weight:600;
}

.nav-links a:hover{
    color:#58c2e8;
}

.nav-contact{
    border:1px solid rgba(255,255,255,.2);
    padding:12px 17px;
}

.mobile-toggle{
    display:none;
    width:42px;
    height:42px;
    border:0;
    background:none;
}

.mobile-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:white;
    margin:5px auto;
}


/* HERO */

.hero{
    min-height:760px;
    position:relative;
    display:flex;
    align-items:center;
    color:white;
    overflow:hidden;
    background:
        linear-gradient(100deg,rgba(3,23,43,.96),rgba(6,54,88,.68)),
        url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?auto=format&fit=crop&w=1800&q=85')
        center/cover no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(5,25,45,.96) 0%,rgba(8,48,80,.65) 55%,rgba(5,26,47,.3) 100%);
}

.hero-shape{
    position:absolute;
    background:rgba(3,83,139,.55);
    transform:skewX(-22deg);
}

.hero-shape-one{
    width:430px;
    height:900px;
    right:5%;
    top:-100px;
}

.hero-shape-two{
    width:250px;
    height:850px;
    right:-10%;
    top:-40px;
    background:rgba(20,164,215,.2);
}

.hero-content{
    position:relative;
    z-index:3;
    padding-top:80px;
}

.hero h1{
    max-width:800px;
    margin:0 0 25px;
    font-size:74px;
    line-height:.98;
    letter-spacing:-4px;
    color:white;
}

.hero p{
    max-width:570px;
    margin:0 0 35px;
    color:#c8d9e6;
    font-size:17px;
}

.hero-services{
    position:absolute;
    z-index:4;
    bottom:0;
    right:0;
    width:min(720px,70%);
    height:105px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:rgba(4,29,52,.93);
}

.hero-services a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#d9e6ef;
    border-left:1px solid rgba(255,255,255,.08);
    font-size:11px;
}

.hero-services a:hover{
    background:var(--blue);
    color:white;
}

.service-icon{
    font-size:25px;
}


/* ABOUT */

.about-section{
    background:#fff;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr .85fr;
    gap:90px;
    align-items:center;
}

.about-copy h2{
    margin-bottom:30px;
}

.about-copy .lead{
    font-size:18px;
    color:#3a5266;
}

.about-visual{
    position:relative;
    min-height:480px;
}

.image-card{
    background:
        linear-gradient(rgba(9,57,93,.18),rgba(3,26,48,.4)),
        url('https://images.unsplash.com/photo-1494412685616-a5d310fbb07d?auto=format&fit=crop&w=1000&q=80')
        center/cover;
}

.image-main{
    height:430px;
    position:absolute;
    inset:0 0 auto 35px;
}

.image-main span{
    position:absolute;
    bottom:20px;
    right:22px;
    color:white;
    font-size:11px;
    letter-spacing:2px;
}

.experience-card{
    position:absolute;
    left:0;
    bottom:0;
    width:180px;
    height:145px;
    background:var(--blue);
    color:white;
    padding:25px;
}

.experience-card strong{
    display:block;
    font-family:'Montserrat';
    font-size:45px;
}

.experience-card span{
    font-size:11px;
    color:#cbe7f5;
}

.mission-vision-grid{
    margin-top:90px;
    display:grid;
    grid-template-columns:1fr 1fr;
}

.vision-card,
.mission-card{
    position:relative;
    padding:55px;
    min-height:310px;
    overflow:hidden;
}

.vision-card{
    background:var(--navy);
    color:white;
}

.mission-card{
    background:#edf3f7;
}

.vision-card h3,
.mission-card h3{
    font-size:27px;
}

.vision-card h3{
    color:white;
}

.vision-card p{
    color:#a9bdcc;
}

.mv-number{
    position:absolute;
    right:24px;
    top:5px;
    font-size:100px;
    font-family:'Montserrat';
    font-weight:800;
    color:rgba(255,255,255,.04);
}

.mission-card .mv-number{
    color:rgba(6,60,100,.06);
}


/* SECTION HEAD */

.section-heading{
    margin-bottom:55px;
}

.section-heading.center{
    text-align:center;
    max-width:730px;
    margin-left:auto;
    margin-right:auto;
}

.section-heading p{
    max-width:650px;
    margin:20px auto 0;
}


/* COMPANIES */

.companies-section{
    background:var(--off);
}

.companies-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.company-card{
    border:1px solid var(--border);
    background:white;
    min-height:220px;
    padding:30px;
    text-align:left;
    transition:.25s;
}

.company-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 40px rgba(20,46,66,.09);
    border-color:#8fc8e7;
}

.company-logo{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--navy);
    color:white;
    font-family:'Montserrat';
    font-weight:800;
    font-size:18px;
}

.company-card h3{
    margin:25px 0 20px;
    color:var(--navy);
}

.company-card span{
    color:var(--blue);
    font-size:12px;
    font-weight:700;
}


/* NETWORKS */

.network-certificate-section{
    padding:90px 0;
    background:
        linear-gradient(90deg,rgba(4,28,51,.96),rgba(4,44,74,.94)),
        url('https://images.unsplash.com/photo-1518527989017-5baca7a58d3c?auto=format&fit=crop&w=1600&q=80')
        center/cover;
}

.network-certificate-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
}

.network-certificate-section h2{
    color:white;
    font-size:35px;
    margin-bottom:30px;
}

.network-certificate-section h2 span{
    color:#57bde5;
}

.logo-box-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.logo-box{
    min-height:83px;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#39556c;
    font-weight:800;
}


/* SERVICES */

.services-layout{
    display:grid;
    grid-template-columns:310px 1fr;
    min-height:500px;
}

.services-tabs{
    display:flex;
    flex-direction:column;
    background:var(--navy);
}

.service-tab{
    flex:1;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;
    padding:18px 25px;
    background:transparent;
    color:#a9bfd0;
    font-size:12px;
    font-weight:600;
}

.service-tab span{
    color:#5f7e95;
    margin-right:15px;
}

.service-tab:hover,
.service-tab.active{
    background:var(--blue);
    color:white;
}

.service-tab.active span{
    color:white;
}

.service-content{
    background:#edf3f7;
}

.service-panel{
    display:none;
    height:100%;
    grid-template-columns:1fr 1fr;
}

.service-panel.active{
    display:grid;
}

.service-photo{
    min-height:500px;
    position:relative;
    background-position:center;
    background-size:cover;
}

.service-photo span{
    position:absolute;
    bottom:20px;
    left:20px;
    color:rgba(255,255,255,.85);
    font-family:'Montserrat';
    font-size:60px;
    font-weight:800;
}

.service-photo-sea{
    background-image:linear-gradient(rgba(0,35,65,.2),rgba(0,35,65,.2)),url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?auto=format&fit=crop&w=1000&q=80');
}

.service-photo-air{
    background-image:linear-gradient(rgba(0,35,65,.2),rgba(0,35,65,.2)),url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1000&q=80');
}

.service-photo-land{
    background-image:linear-gradient(rgba(0,35,65,.2),rgba(0,35,65,.2)),url('https://images.unsplash.com/photo-1586191582056-b7f2e3b0178e?auto=format&fit=crop&w=1000&q=80');
}

.service-photo-customs{
    background-image:linear-gradient(rgba(0,35,65,.2),rgba(0,35,65,.2)),url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1000&q=80');
}

.service-photo-warehousing{
    background-image:linear-gradient(rgba(0,35,65,.2),rgba(0,35,65,.2)),url('https://images.unsplash.com/photo-1553413077-190dd305871c?auto=format&fit=crop&w=1000&q=80');
}

.service-photo-insurance,
.service-photo-documentation{
    background-image:linear-gradient(rgba(0,35,65,.2),rgba(0,35,65,.2)),url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1000&q=80');
}

.service-copy{
    padding:70px 55px;
}

.service-copy h3{
    color:var(--navy);
    font-size:33px;
}

.text-link{
    display:inline-block;
    margin-top:25px;
    color:var(--blue);
    font-weight:700;
    font-size:12px;
}


/* WHY */

.why-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
        url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=80')
        center/cover;
}

.why-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(4,26,47,.97),rgba(6,73,111,.76));
}

.why-content{
    position:relative;
    z-index:2;
}

.why-section h2{
    color:white;
    font-size:58px;
}

.why-section h2 span{
    color:#57bde5;
}

.why-section p{
    max-width:570px;
    color:#c1d2de;
}

.stats-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid rgba(255,255,255,.16);
}

.stats-grid div{
    padding:30px 20px 0 0;
}

.stats-grid strong{
    display:block;
    color:white;
    font-family:'Montserrat';
    font-size:35px;
}

.stats-grid span{
    color:#9db6c8;
    font-size:11px;
}


/* CONTACT */

.contact-section{
    background:white;
}

.contact-grid{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:75px;
}

.contact-info h3{
    color:var(--navy);
    font-size:28px;
}

.contact-item{
    margin-top:30px;
}

.contact-item span{
    display:block;
    color:var(--blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.7px;
    margin-bottom:8px;
}

.contact-item strong{
    font-size:13px;
    color:#304b61;
    line-height:1.8;
}

.contact-form-wrap{
    padding:40px;
    background:var(--off);
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    border:1px solid #d8e2e9;
    background:white;
    outline:none;
    padding:16px 17px;
    color:var(--text);
}

.contact-form textarea{
    min-height:150px;
    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#71bde4;
}

.success-message,
.error-message{
    margin-bottom:20px;
    padding:15px;
    background:#eaf8ee;
    color:#28783c;
}

.error-message{
    background:#fff0f0;
    color:#a23b3b;
}

.world-map{
    margin-top:80px;
    height:300px;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 40%,#dce6ec 0 2px,transparent 3px),
        linear-gradient(140deg,#f1f6f9,#e4edf3);
}

.map-title{
    position:absolute;
    left:40px;
    bottom:35px;
    font-family:'Montserrat';
    font-size:45px;
    font-weight:800;
    color:#d4e0e7;
}

.map-dots span{
    position:absolute;
    width:11px;
    height:11px;
    border:3px solid white;
    border-radius:50%;
    background:#0f91cb;
    box-shadow:0 0 0 4px rgba(15,145,203,.18);
}


/* FOOTER */

footer{
    background:#06192d;
    color:white;
}

.footer-grid{
    padding:65px 0;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.footer-brand p{
    max-width:400px;
    color:#7892a6;
    font-size:12px;
}

.footer-links{
    display:flex;
    gap:28px;
    color:#a9bdcb;
    font-size:12px;
}

.footer-bottom{
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.07);
    color:#678296;
    font-size:10px;
}


/* MODAL */

.company-modal{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:25px;
}

.company-modal.active{
    display:flex;
}

.modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,16,29,.8);
    backdrop-filter:blur(5px);
}

.modal-dialog{
    position:relative;
    z-index:2;
    width:min(560px,100%);
    padding:50px;
    background:white;
}

.modal-close{
    position:absolute;
    right:18px;
    top:16px;
    border:0;
    background:none;
    font-size:30px;
    color:#526c80;
}

.modal-company-logo{
    width:80px;
    height:80px;
    background:var(--navy);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Montserrat';
    font-size:22px;
    font-weight:800;
    margin-bottom:30px;
}

.modal-dialog h3{
    font-size:32px;
    color:var(--navy);
}

.back-top{
    position:fixed;
    z-index:900;
    right:22px;
    bottom:22px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--blue);
    color:white;
}


/* MOBILE */

@media(max-width:900px){

    .container{
        width:min(100% - 32px,700px);
    }

    .section{
        padding:75px 0;
    }

    h2{
        font-size:39px;
    }

    .navbar{
        width:calc(100% - 24px);
        margin-top:12px;
        padding:0 17px;
    }

    .mobile-toggle{
        display:block;
    }

    .nav-links{
        position:absolute;
        top:82px;
        left:12px;
        right:12px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:12px;
        background:#071d35;
    }

    .nav-links.active{
        display:flex;
    }

    .nav-links a{
        padding:15px;
        border-bottom:1px solid rgba(255,255,255,.07);
    }

    .hero{
        min-height:720px;
        align-items:flex-start;
    }

    .hero-content{
        padding-top:180px;
    }

    .hero h1{
        font-size:48px;
        letter-spacing:-2px;
    }

    .hero-services{
        width:100%;
        grid-template-columns:repeat(2,1fr);
        height:150px;
    }

    .about-grid,
    .network-certificate-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .about-grid{
        gap:45px;
    }

    .mission-vision-grid{
        grid-template-columns:1fr;
    }

    .companies-grid{
        grid-template-columns:1fr 1fr;
    }

    .network-certificate-grid{
        gap:60px;
    }

    .services-layout{
        grid-template-columns:1fr;
    }

    .services-tabs{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .service-panel.active{
        grid-template-columns:1fr;
    }

    .service-photo{
        min-height:300px;
    }

    .service-copy{
        padding:40px 30px;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
    }

    .footer-grid{
        flex-direction:column;
        gap:35px;
    }

}

@media(max-width:560px){

    .container{
        width:calc(100% - 28px);
    }

    .brand-text strong{
        font-size:12px;
    }

    .hero{
        min-height:720px;
    }

    .hero-content{
        padding-top:160px;
    }

    .hero h1{
        font-size:39px;
    }

    .hero p{
        font-size:14px;
    }

    .hero-services{
        height:150px;
    }

    .about-visual{
        min-height:340px;
    }

    .image-main{
        height:300px;
        left:20px;
    }

    .experience-card{
        width:145px;
        height:120px;
        padding:20px;
    }

    .experience-card strong{
        font-size:35px;
    }

    .vision-card,
    .mission-card{
        padding:35px 28px;
    }

    .companies-grid{
        grid-template-columns:1fr;
    }

    .logo-box-grid{
        grid-template-columns:1fr 1fr;
    }

    .services-tabs{
        display:flex;
        overflow-x:auto;
        flex-direction:row;
        background:var(--navy);
    }

    .service-tab{
        min-width:175px;
        padding:17px;
    }

    .why-section h2{
        font-size:40px;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .contact-form-wrap{
        padding:25px;
    }

    .footer-links{
        flex-wrap:wrap;
    }

}


/* ==================================================
   BLUE GROUP HEADER + HERO V2
   ================================================== */

.main-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

.navbar-shell{
    padding-top:20px;
}

.navbar{
    position:relative;
    width:min(1310px,calc(100% - 50px));
    height:82px;
    margin:auto;
    padding:0 27px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(3,28,51,.92);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
}

.blue-original-brand{
    min-width:245px;
}

.brand-mark{
    width:47px;
    height:47px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #5dc6ef;
}

.brand-b{
    color:white;
    font-size:23px;
    font-weight:800;
    font-family:'Montserrat',sans-serif;
}

.brand-wing{
    position:absolute;
    top:-13px;
    right:-8px;
    color:#d7b467;
    font-size:14px;
    transform:rotate(22deg);
}

.blue-original-brand .brand-text strong{
    font-family:'Montserrat',sans-serif;
    font-size:16px;
    letter-spacing:.4px;
}

.blue-original-brand .brand-text span{
    color:#7fa9c4;
    font-size:7px;
    letter-spacing:2.3px;
}

.language-link{
    color:#d7b467 !important;
}


/* HERO */

.hero-v2{
    height:790px;
    min-height:790px;
    position:relative;
    overflow:hidden;
    background:#031b31;
    color:white;
}

.hero-slides{
    position:absolute;
    inset:0;
}

.hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:
        opacity .7s ease,
        visibility .7s ease;
    background-image:var(--hero-image);
    background-position:center;
    background-size:cover;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
}

.hero-dark-layer{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(2,24,44,.98) 0%,
            rgba(3,31,55,.90) 35%,
            rgba(3,41,70,.52) 66%,
            rgba(3,38,62,.20) 100%
        );
}

.hero-blue-shape{
    position:absolute;
    top:-130px;
    right:4%;
    width:500px;
    height:1020px;
    transform:skewX(-24deg);
    background:
        linear-gradient(
            180deg,
            rgba(10,128,189,.52),
            rgba(5,92,147,.34)
        );
    border-left:1px solid rgba(72,190,236,.25);
}

.hero-content-v2{
    height:100%;
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:55px;
}

.hero-copy-v2{
    width:min(720px,65%);
    padding-top:30px;
}

.hero-kicker{
    display:inline-block;
    margin-bottom:24px;
    color:#54c9f4;
    font-size:12px;
    font-weight:800;
    letter-spacing:2.6px;
}

.hero-copy-v2 h1{
    margin:0 0 30px;
    color:white;
    font-size:68px;
    line-height:.94;
    letter-spacing:-3.6px;
}

.hero-copy-v2 h1 span{
    color:#65c6ef;
}

.hero-copy-v2 p{
    max-width:600px;
    margin:0 0 35px;
    color:#d2e2eb;
    font-size:17px;
    line-height:1.7;
}

.hero-main-button{
    min-width:235px;
    height:54px;
    padding:0 23px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
    color:#09233b;
    background:white;
    font-size:12px;
    font-weight:800;
    transition:.25s;
}

.hero-main-button:hover{
    color:white;
    background:#0871be;
}

.hero-script{
    position:absolute;
    right:4%;
    top:46%;
    color:white;
    font-size:33px;
    line-height:1.2;
    text-align:right;
    font-family:cursive;
    font-style:italic;
    transform:rotate(-8deg);
    text-shadow:0 4px 12px rgba(0,0,0,.25);
}

.hero-bottom-bar{
    position:absolute;
    z-index:10;
    left:0;
    right:0;
    bottom:0;
    background:rgba(3,27,49,.93);
    border-top:1px solid rgba(255,255,255,.08);
}

.hero-bottom-inner{
    min-height:105px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
}

.hero-bottom-inner button{
    border:0;
    border-right:1px solid rgba(255,255,255,.08);
    background:transparent;
    color:#dce8ef;
    display:flex;
    flex-direction:column;
    gap:9px;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:600;
    transition:.22s;
}

.hero-bottom-inner button:first-child{
    border-left:1px solid rgba(255,255,255,.08);
}

.hero-bottom-inner button:hover{
    background:#0968aa;
    color:white;
}

.hero-service-symbol{
    font-size:24px;
    color:#d7eaf4;
}

.hero-pagination{
    position:absolute;
    z-index:12;
    right:45px;
    bottom:125px;
    display:flex;
    gap:8px;
}

.hero-dot{
    width:8px;
    height:8px;
    padding:0;
    border:1px solid rgba(255,255,255,.75);
    border-radius:50%;
    background:transparent;
}

.hero-dot.active{
    background:white;
}


/* MOBILE HEADER/HERO */

@media(max-width:900px){

    .navbar-shell{
        padding-top:12px;
    }

    .navbar{
        width:calc(100% - 24px);
        height:70px;
        padding:0 16px;
    }

    .blue-original-brand{
        min-width:auto;
    }

    .brand-mark{
        width:39px;
        height:39px;
    }

    .blue-original-brand .brand-text strong{
        font-size:12px;
    }

    .blue-original-brand .brand-text span{
        font-size:6px;
    }

    .hero-v2{
        height:760px;
        min-height:760px;
    }

    .hero-content-v2{
        padding-top:80px;
        align-items:center;
    }

    .hero-copy-v2{
        width:100%;
    }

    .hero-copy-v2 h1{
        font-size:48px;
        line-height:.97;
        letter-spacing:-2px;
    }

    .hero-copy-v2 p{
        max-width:520px;
        font-size:14px;
    }

    .hero-blue-shape{
        right:-210px;
        width:440px;
    }

    .hero-script{
        display:none;
    }

    .hero-bottom-inner{
        min-height:135px;
        grid-template-columns:repeat(3,1fr);
    }

    .hero-bottom-inner button:nth-child(n+4){
        display:none;
    }

    .hero-pagination{
        right:20px;
        bottom:150px;
    }

}

@media(max-width:560px){

    .hero-v2{
        height:720px;
        min-height:720px;
    }

    .hero-content-v2{
        padding-top:65px;
    }

    .hero-copy-v2{
        padding-top:25px;
    }

    .hero-kicker{
        margin-bottom:18px;
        font-size:9px;
        letter-spacing:1.8px;
    }

    .hero-copy-v2 h1{
        font-size:39px;
        margin-bottom:24px;
    }

    .hero-copy-v2 p{
        width:92%;
        font-size:13px;
        line-height:1.6;
    }

    .hero-main-button{
        min-width:205px;
        height:50px;
        font-size:11px;
    }

    .hero-bottom-inner{
        min-height:120px;
    }

    .hero-bottom-inner button{
        font-size:9px;
    }

    .hero-pagination{
        bottom:135px;
    }

}


/* =========================================
   HERO FULL VIEWPORT HEIGHT
   ========================================= */

.hero-v2{
    height:100vh;
    min-height:700px;
}

.hero-slides{
    bottom:105px;
}

.hero-slide{
    bottom:105px;
}

.hero-bottom-bar{
    height:105px;
}

.hero-bottom-inner{
    height:105px;
    min-height:105px;
}

.hero-bottom-inner button.active{
    background:#0871be;
    color:#fff;
}

.hero-bottom-inner button.active .hero-service-symbol{
    color:#fff;
}

@media(max-width:900px){

    .hero-v2{
        height:100vh;
        min-height:680px;
    }

    .hero-slides,
    .hero-slide{
        bottom:135px;
    }

    .hero-bottom-bar,
    .hero-bottom-inner{
        height:135px;
        min-height:135px;
    }

}

@media(max-width:560px){

    .hero-v2{
        height:100svh;
        min-height:640px;
    }

    .hero-slides,
    .hero-slide{
        bottom:120px;
    }

    .hero-bottom-bar,
    .hero-bottom-inner{
        height:120px;
        min-height:120px;
    }

}


/* =====================================================
   FINAL HERO VIEWPORT SYSTEM
   Hero image + service bar = exactly one viewport
   ===================================================== */

.hero-v2{
    position:relative !important;

    width:100% !important;

    height:100vh !important;
    min-height:680px !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;
}


/* image/slider occupies viewport minus service bar */

.hero-v2 .hero-slides{
    position:absolute !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    bottom:105px !important;

    height:auto !important;
}


/* every slide stays inside slider area */

.hero-v2 .hero-slide{
    position:absolute !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    height:100% !important;

    background-size:cover !important;
    background-position:center center !important;
}


/* bottom services included inside 100vh */

.hero-v2 .hero-bottom-bar{
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    height:105px !important;

    margin:0 !important;

    z-index:20 !important;
}


.hero-v2 .hero-bottom-inner{
    height:105px !important;
    min-height:105px !important;
}


/* active icon */

.hero-v2 .hero-bottom-inner button{
    position:relative;

    transition:
        background .25s ease,
        color .25s ease;
}


.hero-v2 .hero-bottom-inner button.active{
    background:#0875bb !important;
    color:#ffffff !important;
}


.hero-v2 .hero-bottom-inner button.active::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:#63d0f5;
}


.hero-v2 .hero-bottom-inner button.active
.hero-service-symbol{
    color:#ffffff !important;
}


/* Pagination above icon bar */

.hero-v2 .hero-pagination{
    bottom:125px !important;
}


/* ABOUT starts immediately after hero */

.hero-v2 + .about-section{
    margin-top:0 !important;
}


/* TABLET */

@media(max-width:900px){

    .hero-v2{
        height:100svh !important;
        min-height:650px !important;
    }

    .hero-v2 .hero-slides{
        bottom:120px !important;
    }

    .hero-v2 .hero-bottom-bar,
    .hero-v2 .hero-bottom-inner{
        height:120px !important;
        min-height:120px !important;
    }

    .hero-v2 .hero-pagination{
        bottom:140px !important;
    }

}


/* MOBILE */

@media(max-width:560px){

    .hero-v2{
        height:100svh !important;
        min-height:620px !important;
    }

    .hero-v2 .hero-slides{
        bottom:112px !important;
    }

    .hero-v2 .hero-bottom-bar,
    .hero-v2 .hero-bottom-inner{
        height:112px !important;
        min-height:112px !important;
    }

    .hero-v2 .hero-pagination{
        bottom:130px !important;
    }

}


/* =====================================================
   STICKY NAVIGATION
   ===================================================== */

.main-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:2000 !important;
    pointer-events:none;
}

.main-header .navbar-shell{
    pointer-events:auto;
}


/* navbar transition */

.main-header .navbar{
    transition:
        background .3s ease,
        box-shadow .3s ease,
        height .3s ease,
        margin .3s ease;
}


/* After scrolling */

.main-header.scrolled .navbar-shell{
    padding-top:0 !important;
}

.main-header.scrolled .navbar{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    height:68px !important;

    padding-left:max(30px,calc((100vw - 1310px)/2 + 25px)) !important;
    padding-right:max(30px,calc((100vw - 1310px)/2 + 25px)) !important;

    background:rgba(3,28,51,.97) !important;

    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;

    box-shadow:0 8px 30px rgba(0,0,0,.12);

    backdrop-filter:blur(18px);
}


/* slightly smaller logo while scrolling */

.main-header.scrolled .brand-mark{
    width:40px;
    height:40px;
}

.main-header.scrolled .blue-original-brand .brand-text strong{
    font-size:14px;
}


/* Anchor sections shouldn't hide behind menu */

#about,
#companies,
#services,
#why-blue,
#contact{
    scroll-margin-top:85px;
}


/* Mobile */

@media(max-width:900px){

    .main-header.scrolled .navbar{
        width:100% !important;
        height:64px !important;

        padding-left:16px !important;
        padding-right:16px !important;
    }

    #about,
    #companies,
    #services,
    #why-blue,
    #contact{
        scroll-margin-top:75px;
    }

}


/* =====================================================
   ORIGINAL BLUE GROUP LOGO
   ===================================================== */

.blue-original-brand{
    display:flex;
    align-items:center;
    min-width:210px;
}

.bluegroup-logo{
    display:block;
    width:auto;
    height:58px;
    max-width:220px;
    object-fit:contain;
}

.main-header.scrolled .bluegroup-logo{
    height:48px;
}

@media(max-width:900px){

    .blue-original-brand{
        min-width:auto;
    }

    .bluegroup-logo{
        height:45px;
        max-width:180px;
    }

    .main-header.scrolled .bluegroup-logo{
        height:40px;
    }

}

@media(max-width:560px){

    .bluegroup-logo{
        height:39px;
        max-width:150px;
    }

}


/* =====================================================
   HERO HEADER + SERVICE ICONS — REFERENCE MATCH
   ===================================================== */

/* HEADER ON HERO */

.main-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:2000 !important;
    pointer-events:none;
}

.navbar-shell{
    padding-top:0 !important;
    pointer-events:auto;
}

.main-header:not(.scrolled) .navbar{
    width:min(1320px, calc(100% - 70px)) !important;
    height:88px !important;

    margin:0 auto !important;
    padding:0 10px !important;

    background:transparent !important;

    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}


/* LOGO */

.main-header:not(.scrolled) .blue-original-brand{
    min-width:260px !important;
}

.main-header:not(.scrolled) .bluegroup-logo{
    height:74px !important;
    max-width:245px !important;
    width:auto !important;
    object-fit:contain !important;
}


/* NAV LINKS */

.main-header:not(.scrolled) .nav-links{
    display:flex !important;
    align-items:center !important;
    gap:31px !important;
}

.main-header:not(.scrolled) .nav-links a{
    position:relative;

    padding:32px 0 26px !important;

    color:#ffffff !important;

    font-size:12px !important;
    font-weight:700 !important;

    text-shadow:0 1px 5px rgba(0,0,0,.25);

    border:0 !important;
    background:transparent !important;
}


/* GOLD ACTIVE LINE LIKE REFERENCE */

.main-header:not(.scrolled) .nav-links a.active::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:16px;

    width:28px;
    height:2px;

    transform:translateX(-50%);

    background:#d8b760;
}


/* GOLD ARABIC LINK */

.main-header:not(.scrolled) .language-link{
    color:#d9bd73 !important;
}


/* HERO TOP SPACING */

.hero-v2 .hero-content-v2{
    padding-top:105px !important;
}


/* =====================================================
   HERO SERVICE ICON BAR
   ===================================================== */

.hero-v2 .hero-bottom-bar{
    height:102px !important;

    background:
        linear-gradient(
            90deg,
            rgba(2,29,54,.93),
            rgba(4,47,82,.88)
        ) !important;

    border-top:1px solid rgba(255,255,255,.12) !important;
}

.hero-v2 .hero-bottom-inner{
    height:102px !important;
    min-height:102px !important;

    width:min(1240px, calc(100% - 50px)) !important;
    margin:auto !important;

    display:grid !important;
    grid-template-columns:repeat(6,1fr) !important;
}


/* ICON BUTTONS */

.hero-v2 .hero-bottom-inner button{
    position:relative;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    gap:13px !important;

    min-width:0 !important;

    padding:0 12px !important;

    border:0 !important;
    border-right:1px solid rgba(255,255,255,.11) !important;

    background:transparent !important;

    color:#ffffff !important;

    font-size:11px !important;
    font-weight:600 !important;

    transition:
        color .2s ease,
        background .2s ease;
}


.hero-v2 .hero-bottom-inner button:first-child{
    border-left:0 !important;
}


.hero-v2 .hero-bottom-inner button:last-child{
    border-right:0 !important;
}


/* LINE ICON FEEL */

.hero-v2 .hero-service-symbol{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:34px !important;
    height:34px !important;

    color:#ffffff !important;

    font-size:26px !important;
    line-height:1 !important;

    opacity:.96;
}


/* REMOVE BIG BLUE ACTIVE BLOCK */

.hero-v2 .hero-bottom-inner button.active{
    background:transparent !important;
    color:#ffffff !important;
}


/* REMOVE OLD ACTIVE TOP BAR */

.hero-v2 .hero-bottom-inner button.active::before{
    display:none !important;
}


/* ACTIVE ONLY GOLD ACCENT */

.hero-v2 .hero-bottom-inner button.active::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:10px;

    width:32px;
    height:2px;

    transform:translateX(-50%);

    background:#d8b760;
}


/* HOVER */

.hero-v2 .hero-bottom-inner button:hover{
    background:rgba(255,255,255,.05) !important;
}


/* PAGINATION POSITION */

.hero-v2 .hero-pagination{
    right:55px !important;
    bottom:123px !important;
}


/* =====================================================
   STICKY HEADER AFTER SCROLL
   ===================================================== */

.main-header.scrolled .navbar{
    width:100% !important;
    max-width:none !important;

    height:68px !important;

    margin:0 !important;

    padding-left:max(30px,calc((100vw - 1320px)/2 + 15px)) !important;
    padding-right:max(30px,calc((100vw - 1320px)/2 + 15px)) !important;

    background:rgba(3,28,51,.97) !important;

    border:0 !important;

    box-shadow:0 8px 28px rgba(0,0,0,.15) !important;

    backdrop-filter:blur(15px) !important;
}


.main-header.scrolled .bluegroup-logo{
    height:50px !important;
}


.main-header.scrolled .nav-links a{
    color:#ffffff !important;
    font-size:12px !important;
}


.main-header.scrolled .nav-links a.active{
    color:#5ac5eb !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media(max-width:1050px){

    .main-header:not(.scrolled) .navbar{
        width:calc(100% - 32px) !important;
    }

    .main-header:not(.scrolled) .nav-links{
        gap:20px !important;
    }

    .main-header:not(.scrolled) .nav-links a{
        font-size:11px !important;
    }

    .main-header:not(.scrolled) .bluegroup-logo{
        height:62px !important;
        max-width:205px !important;
    }

    .hero-v2 .hero-bottom-inner{
        width:100% !important;
    }

}


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

@media(max-width:900px){

    .main-header:not(.scrolled) .navbar{
        width:calc(100% - 24px) !important;
        height:72px !important;

        padding:0 8px !important;
    }

    .main-header:not(.scrolled) .bluegroup-logo{
        height:52px !important;
        max-width:180px !important;
    }

    .main-header:not(.scrolled) .nav-links{
        position:absolute !important;

        top:72px !important;
        left:0 !important;
        right:0 !important;

        display:none !important;

        flex-direction:column !important;
        align-items:stretch !important;

        gap:0 !important;

        padding:10px !important;

        background:rgba(3,28,51,.98) !important;
    }

    .main-header:not(.scrolled) .nav-links.active{
        display:flex !important;
    }

    .main-header:not(.scrolled) .nav-links a{
        padding:14px 16px !important;

        border-bottom:1px solid rgba(255,255,255,.07) !important;
    }

    .main-header:not(.scrolled) .nav-links a.active::after{
        display:none !important;
    }


    .hero-v2 .hero-bottom-bar{
        height:112px !important;
    }

    .hero-v2 .hero-bottom-inner{
        height:112px !important;
        min-height:112px !important;

        grid-template-columns:repeat(3,1fr) !important;
    }

    .hero-v2 .hero-bottom-inner button:nth-child(n+4){
        display:none !important;
    }

    .hero-v2 .hero-bottom-inner button{
        flex-direction:column !important;
        gap:7px !important;
    }

    .hero-v2 .hero-service-symbol{
        width:28px !important;
        height:28px !important;
        font-size:23px !important;
    }

    .hero-v2 .hero-pagination{
        bottom:132px !important;
        right:20px !important;
    }

}


/* =====================================================
   HERO HEADER + SERVICE ICONS — REFERENCE MATCH
   ===================================================== */

/* HEADER ON HERO */

.main-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:2000 !important;
    pointer-events:none;
}

.navbar-shell{
    padding-top:0 !important;
    pointer-events:auto;
}

.main-header:not(.scrolled) .navbar{
    width:min(1320px, calc(100% - 70px)) !important;
    height:88px !important;

    margin:0 auto !important;
    padding:0 10px !important;

    background:transparent !important;

    border:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
}


/* LOGO */

.main-header:not(.scrolled) .blue-original-brand{
    min-width:260px !important;
}

.main-header:not(.scrolled) .bluegroup-logo{
    height:74px !important;
    max-width:245px !important;
    width:auto !important;
    object-fit:contain !important;
}


/* NAV LINKS */

.main-header:not(.scrolled) .nav-links{
    display:flex !important;
    align-items:center !important;
    gap:31px !important;
}

.main-header:not(.scrolled) .nav-links a{
    position:relative;

    padding:32px 0 26px !important;

    color:#ffffff !important;

    font-size:12px !important;
    font-weight:700 !important;

    text-shadow:0 1px 5px rgba(0,0,0,.25);

    border:0 !important;
    background:transparent !important;
}


/* GOLD ACTIVE LINE LIKE REFERENCE */

.main-header:not(.scrolled) .nav-links a.active::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:16px;

    width:28px;
    height:2px;

    transform:translateX(-50%);

    background:#d8b760;
}


/* GOLD ARABIC LINK */

.main-header:not(.scrolled) .language-link{
    color:#d9bd73 !important;
}


/* HERO TOP SPACING */

.hero-v2 .hero-content-v2{
    padding-top:105px !important;
}


/* =====================================================
   HERO SERVICE ICON BAR
   ===================================================== */

.hero-v2 .hero-bottom-bar{
    height:102px !important;

    background:
        linear-gradient(
            90deg,
            rgba(2,29,54,.93),
            rgba(4,47,82,.88)
        ) !important;

    border-top:1px solid rgba(255,255,255,.12) !important;
}

.hero-v2 .hero-bottom-inner{
    height:102px !important;
    min-height:102px !important;

    width:min(1240px, calc(100% - 50px)) !important;
    margin:auto !important;

    display:grid !important;
    grid-template-columns:repeat(6,1fr) !important;
}


/* ICON BUTTONS */

.hero-v2 .hero-bottom-inner button{
    position:relative;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    gap:13px !important;

    min-width:0 !important;

    padding:0 12px !important;

    border:0 !important;
    border-right:1px solid rgba(255,255,255,.11) !important;

    background:transparent !important;

    color:#ffffff !important;

    font-size:11px !important;
    font-weight:600 !important;

    transition:
        color .2s ease,
        background .2s ease;
}


.hero-v2 .hero-bottom-inner button:first-child{
    border-left:0 !important;
}


.hero-v2 .hero-bottom-inner button:last-child{
    border-right:0 !important;
}


/* LINE ICON FEEL */

.hero-v2 .hero-service-symbol{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:34px !important;
    height:34px !important;

    color:#ffffff !important;

    font-size:26px !important;
    line-height:1 !important;

    opacity:.96;
}


/* REMOVE BIG BLUE ACTIVE BLOCK */

.hero-v2 .hero-bottom-inner button.active{
    background:transparent !important;
    color:#ffffff !important;
}


/* REMOVE OLD ACTIVE TOP BAR */

.hero-v2 .hero-bottom-inner button.active::before{
    display:none !important;
}


/* ACTIVE ONLY GOLD ACCENT */

.hero-v2 .hero-bottom-inner button.active::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:10px;

    width:32px;
    height:2px;

    transform:translateX(-50%);

    background:#d8b760;
}


/* HOVER */

.hero-v2 .hero-bottom-inner button:hover{
    background:rgba(255,255,255,.05) !important;
}


/* PAGINATION POSITION */

.hero-v2 .hero-pagination{
    right:55px !important;
    bottom:123px !important;
}


/* =====================================================
   STICKY HEADER AFTER SCROLL
   ===================================================== */

.main-header.scrolled .navbar{
    width:100% !important;
    max-width:none !important;

    height:68px !important;

    margin:0 !important;

    padding-left:max(30px,calc((100vw - 1320px)/2 + 15px)) !important;
    padding-right:max(30px,calc((100vw - 1320px)/2 + 15px)) !important;

    background:rgba(3,28,51,.97) !important;

    border:0 !important;

    box-shadow:0 8px 28px rgba(0,0,0,.15) !important;

    backdrop-filter:blur(15px) !important;
}


.main-header.scrolled .bluegroup-logo{
    height:50px !important;
}


.main-header.scrolled .nav-links a{
    color:#ffffff !important;
    font-size:12px !important;
}


.main-header.scrolled .nav-links a.active{
    color:#5ac5eb !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media(max-width:1050px){

    .main-header:not(.scrolled) .navbar{
        width:calc(100% - 32px) !important;
    }

    .main-header:not(.scrolled) .nav-links{
        gap:20px !important;
    }

    .main-header:not(.scrolled) .nav-links a{
        font-size:11px !important;
    }

    .main-header:not(.scrolled) .bluegroup-logo{
        height:62px !important;
        max-width:205px !important;
    }

    .hero-v2 .hero-bottom-inner{
        width:100% !important;
    }

}


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

@media(max-width:900px){

    .main-header:not(.scrolled) .navbar{
        width:calc(100% - 24px) !important;
        height:72px !important;

        padding:0 8px !important;
    }

    .main-header:not(.scrolled) .bluegroup-logo{
        height:52px !important;
        max-width:180px !important;
    }

    .main-header:not(.scrolled) .nav-links{
        position:absolute !important;

        top:72px !important;
        left:0 !important;
        right:0 !important;

        display:none !important;

        flex-direction:column !important;
        align-items:stretch !important;

        gap:0 !important;

        padding:10px !important;

        background:rgba(3,28,51,.98) !important;
    }

    .main-header:not(.scrolled) .nav-links.active{
        display:flex !important;
    }

    .main-header:not(.scrolled) .nav-links a{
        padding:14px 16px !important;

        border-bottom:1px solid rgba(255,255,255,.07) !important;
    }

    .main-header:not(.scrolled) .nav-links a.active::after{
        display:none !important;
    }


    .hero-v2 .hero-bottom-bar{
        height:112px !important;
    }

    .hero-v2 .hero-bottom-inner{
        height:112px !important;
        min-height:112px !important;

        grid-template-columns:repeat(3,1fr) !important;
    }

    .hero-v2 .hero-bottom-inner button:nth-child(n+4){
        display:none !important;
    }

    .hero-v2 .hero-bottom-inner button{
        flex-direction:column !important;
        gap:7px !important;
    }

    .hero-v2 .hero-service-symbol{
        width:28px !important;
        height:28px !important;
        font-size:23px !important;
    }

    .hero-v2 .hero-pagination{
        bottom:132px !important;
        right:20px !important;
    }

}


/* =====================================================
   HERO SERVICE SVG ICONS
   ===================================================== */

.hero-v2 .hero-service-symbol{
    width:40px !important;
    height:40px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 40px !important;

    color:#ffffff !important;
}

.hero-v2 .hero-service-symbol svg{
    width:34px !important;
    height:34px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    overflow:visible;
}

.hero-v2 .hero-bottom-inner button:hover
.hero-service-symbol,
.hero-v2 .hero-bottom-inner button.active
.hero-service-symbol{
    color:#ffffff !important;
}

@media(max-width:900px){

    .hero-v2 .hero-service-symbol{
        width:34px !important;
        height:34px !important;
        flex-basis:34px !important;
    }

    .hero-v2 .hero-service-symbol svg{
        width:29px !important;
        height:29px !important;
    }

}


/* =====================================================
   ABOUT + VISION + MISSION V2
   ===================================================== */

.about-v2{
    padding:84px 0 92px !important;
    background:#ffffff;
}

.about-v2-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr 1fr;
    gap:18px;
    align-items:stretch;
}

.about-v2-copy{
    padding:10px 35px 10px 0;
}

.about-v2-copy h2{
    margin:0 0 24px;

    font-size:49px;
    line-height:.98;
    letter-spacing:-2.2px;

    color:#0a2746;
}

.about-v2-copy h2 span{
    color:#0a67b5;
}

.about-v2-copy p{
    margin:0 0 14px;

    color:#4f6678;

    font-size:14px;
    line-height:1.65;
}

.about-readmore{
    margin-top:10px;

    display:inline-flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    min-width:160px;
    height:45px;

    padding:0 20px;

    border-radius:24px;

    color:white;
    background:#063c78;

    font-size:12px;
    font-weight:700;

    transition:.2s ease;
}

.about-readmore:hover{
    background:#0871be;
}


/* cards */

.about-v2-card{
    min-height:330px;

    position:relative;

    overflow:hidden;

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

    background-size:cover;
    background-position:center;
}

.vision-v2{
    background-image:
        url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1000&q=80');
}

.mission-v2{
    background-image:
        url('https://images.unsplash.com/photo-1494412685616-a5d310fbb07d?auto=format&fit=crop&w=1000&q=80');
}

.about-v2-card-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(223,240,252,.86),
            rgba(212,232,246,.87)
        );
}

.about-v2-card-content{
    position:relative;
    z-index:2;

    width:82%;

    text-align:center;
}

.about-v2-icon{
    width:58px;
    height:58px;

    margin:0 auto 15px;

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

    color:#073b7b;
}

.about-v2-icon svg{
    width:54px;
    height:54px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.about-v2-card h3{
    margin:0 0 15px;

    color:#083b75;

    font-size:21px;
    letter-spacing:-.5px;
}

.about-v2-card p{
    margin:0;

    color:#173d62;

    font-size:14px;
    line-height:1.55;
}


/* tablet */

@media(max-width:1000px){

    .about-v2-grid{
        grid-template-columns:1fr 1fr;
    }

    .about-v2-copy{
        grid-column:1 / -1;
        padding-right:0;
        max-width:760px;
    }

}


/* mobile */

@media(max-width:700px){

    .about-v2{
        padding:65px 0 !important;
    }

    .about-v2-grid{
        grid-template-columns:1fr;
    }

    .about-v2-copy{
        grid-column:auto;
    }

    .about-v2-copy h2{
        font-size:40px;
    }

    .about-v2-card{
        min-height:290px;
    }

}


/* =====================================================
   OUR COMPANIES V2
   ===================================================== */

.companies-v2{
    padding:80px 0 88px !important;
    background:
        linear-gradient(180deg,#f7fbfe,#edf5fa);
}

.companies-v2-header{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:60px;
    align-items:end;

    margin-bottom:42px;
}

.companies-v2-header h2{
    font-size:43px;
    line-height:1;
}

.companies-v2-header p{
    max-width:560px;

    margin:0 0 4px;

    color:#60788b;

    font-size:14px;
    line-height:1.75;
}


/* slider */

.companies-v2-slider{
    position:relative;

    display:grid;
    grid-template-columns:45px 1fr 45px;
    gap:18px;

    align-items:center;
}


.companies-v2-track{
    display:grid;

    grid-template-columns:
        repeat(5,minmax(190px,1fr));

    gap:16px;

    overflow:hidden;
}


/* company card */

.company-v2-card{
    height:155px;

    border:1px solid rgba(21,67,101,.08);

    border-radius:12px;

    background:#ffffff;

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

    padding:24px;

    box-shadow:
        0 9px 30px rgba(22,57,84,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.company-v2-card:hover{
    transform:translateY(-7px);

    border-color:#d4b45c;

    box-shadow:
        0 18px 38px rgba(20,53,80,.12);
}


.company-v2-card img{
    display:block;

    width:100%;
    max-width:175px;

    max-height:88px;

    object-fit:contain;
}


/* navigation */

.company-nav{
    width:42px;
    height:42px;

    padding:0;

    border:1px solid #c8d8e3;
    border-radius:50%;

    background:#ffffff;

    color:#234d6e;

    font-size:27px;
    line-height:1;

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

    transition:.2s ease;
}


.company-nav:hover{
    color:white;
    background:#096db5;
    border-color:#096db5;
}


.company-click-note{
    margin-top:20px;

    text-align:center;

    color:#638097;

    font-size:11px;
}


/* =====================================================
   COMPANY POPUP
   ===================================================== */

.company-popup-v2{
    position:fixed;

    inset:0;

    z-index:4000;

    display:none;

    align-items:center;
    justify-content:center;

    padding:25px;
}


.company-popup-v2.active{
    display:flex;
}


.company-popup-backdrop{
    position:absolute;

    inset:0;

    background:rgba(2,20,37,.78);

    backdrop-filter:blur(6px);
}


.company-popup-dialog{
    position:relative;
    z-index:2;

    width:min(820px,100%);

    min-height:390px;

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    background:#ffffff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);
}


.company-popup-logo-wrap{
    min-height:390px;

    padding:45px;

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

    background:
        linear-gradient(145deg,#eef6fb,#ffffff);
}


.company-popup-logo-wrap img{
    width:100%;
    max-width:300px;

    max-height:190px;

    object-fit:contain;
}


.company-popup-copy{
    padding:55px 50px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}


.company-popup-copy h3{
    margin:0 0 8px;

    color:#082d50;

    font-size:35px;
}


.company-popup-copy h4{
    margin:0 0 22px;

    color:#0874b9;

    font-size:14px;
    font-weight:600;
}


.company-popup-copy p{
    margin:0;

    color:#61788a;

    line-height:1.7;
}


.company-popup-close{
    position:absolute;

    z-index:5;

    top:15px;
    right:17px;

    width:36px;
    height:36px;

    border:0;
    border-radius:50%;

    background:#082d50;

    color:white;

    font-size:23px;

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


/* tablet */

@media(max-width:1100px){

    .companies-v2-track{
        display:flex;

        overflow-x:auto;

        scroll-behavior:smooth;

        scrollbar-width:none;
    }

    .companies-v2-track::-webkit-scrollbar{
        display:none;
    }

    .company-v2-card{
        flex:0 0 220px;
    }

}


/* mobile */

@media(max-width:700px){

    .companies-v2{
        padding:65px 0 !important;
    }

    .companies-v2-header{
        grid-template-columns:1fr;
        gap:18px;
    }

    .companies-v2-header h2{
        font-size:36px;
    }

    .companies-v2-slider{
        grid-template-columns:34px 1fr 34px;
        gap:8px;
    }

    .company-nav{
        width:34px;
        height:34px;
    }

    .company-v2-card{
        flex-basis:190px;

        height:135px;
    }

    .company-popup-dialog{
        grid-template-columns:1fr;
    }

    .company-popup-logo-wrap{
        min-height:220px;

        padding:35px;
    }

    .company-popup-logo-wrap img{
        max-height:120px;
    }

    .company-popup-copy{
        padding:35px 28px;
    }

    .company-popup-copy h3{
        font-size:28px;
    }

}


/* =====================================================
   FIX COMPANY CARD MOVEMENT
   Keep logos fully visible on hover / click / focus
   ===================================================== */

.company-v2-card,
.company-v2-card:hover,
.company-v2-card:focus,
.company-v2-card:active{
    transform:none !important;
    top:auto !important;
    margin-top:0 !important;
}

.company-v2-card:hover,
.company-v2-card:focus{
    border-color:#d4b45c !important;

    box-shadow:
        0 14px 34px rgba(20,53,80,.12) !important;
}

.company-v2-card:focus{
    outline:none !important;
}

.company-v2-card:active{
    box-shadow:
        0 8px 22px rgba(20,53,80,.10) !important;
}


/* Make sure logo remains centered and never clips */

.company-v2-card{
    overflow:hidden !important;
}

.company-v2-card img{
    position:static !important;

    display:block !important;

    margin:auto !important;

    transform:none !important;

    max-width:88% !important;
    max-height:82px !important;

    object-fit:contain !important;
    object-position:center center !important;
}


/* =====================================================
   OUR COMPANIES — REFERENCE STYLE
   ===================================================== */

.companies-v2{
    padding:56px 0 34px !important;

    background:
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #eef6fb 100%
        ) !important;

    overflow:hidden;
}


/* header becomes left block like reference */

.companies-v2-header{
    display:grid !important;

    grid-template-columns:270px 1fr !important;

    gap:38px !important;

    align-items:end !important;

    margin-bottom:22px !important;
}


.companies-v2-header > div{
    align-self:start;
}


.companies-v2-header .eyebrow{
    margin-bottom:10px !important;

    color:#0a5fa8 !important;

    font-size:11px !important;
    letter-spacing:2px !important;
}


.companies-v2-header h2{
    margin:0 !important;

    font-size:34px !important;
    line-height:1.03 !important;

    letter-spacing:-1.2px !important;

    color:#0a2b4d !important;
}


.companies-v2-header h2 span{
    color:#0a2b4d !important;
}


.companies-v2-header p{
    max-width:390px !important;

    margin:0 0 3px !important;

    color:#526f84 !important;

    font-size:13px !important;
    line-height:1.5 !important;
}


/* slider overall layout */

.companies-v2-slider{
    display:grid !important;

    grid-template-columns:42px 1fr 42px !important;

    gap:12px !important;

    align-items:center !important;
}


/* cards row */

.companies-v2-track{
    display:grid !important;

    grid-template-columns:repeat(5,1fr) !important;

    gap:12px !important;

    overflow:visible !important;

    padding:0 !important;
}


/* smaller reference-like cards */

.company-v2-card{
    position:relative !important;

    height:138px !important;

    padding:20px 16px !important;

    border:1px solid #e3ebf1 !important;
    border-radius:9px !important;

    background:#ffffff !important;

    box-shadow:
        0 8px 22px rgba(20,53,80,.055) !important;

    overflow:visible !important;

    transform:none !important;
}


/* logo sizing */

.company-v2-card img{
    width:auto !important;

    max-width:88% !important;
    max-height:72px !important;

    object-fit:contain !important;

    margin:auto !important;
}


/* hover */

.company-v2-card:hover,
.company-v2-card:focus{
    transform:none !important;

    border-color:#d2b256 !important;

    box-shadow:
        0 10px 25px rgba(20,53,80,.08) !important;
}


/* selected / focused visual like reference */

.company-v2-card:focus,
.company-v2-card:focus-visible{
    outline:none !important;

    border:1.5px solid #d6b04e !important;

    box-shadow:
        0 9px 24px rgba(20,53,80,.08) !important;
}


/* small gold pointer under selected card */

.company-v2-card:focus::after,
.company-v2-card:focus-visible::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-7px;

    width:0;
    height:0;

    transform:translateX(-50%);

    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:7px solid #d6b04e;
}


/* arrows like reference */

.company-nav{
    width:36px !important;
    height:36px !important;

    border:1px solid #c9d8e3 !important;
    border-radius:50% !important;

    background:#f8fbfd !important;

    color:#315b79 !important;

    font-size:23px !important;

    box-shadow:none !important;
}


.company-nav:hover{
    background:#ffffff !important;

    color:#0a67b5 !important;

    border-color:#9fc3da !important;
}


/* note closer to cards */

.company-click-note{
    margin-top:13px !important;

    text-align:center !important;

    color:#526f84 !important;

    font-size:11px !important;
}


/* reduce total whitespace */

.companies-v2 + .network-certificate-section{
    margin-top:0 !important;
}


/* =====================================================
   TABLET
   ===================================================== */

@media(max-width:1100px){

    .companies-v2-header{
        grid-template-columns:230px 1fr !important;
        gap:28px !important;
    }

    .companies-v2-header h2{
        font-size:30px !important;
    }

    .companies-v2-track{
        display:flex !important;

        gap:12px !important;

        overflow-x:auto !important;

        scroll-behavior:smooth !important;

        scrollbar-width:none !important;
    }

    .companies-v2-track::-webkit-scrollbar{
        display:none !important;
    }

    .company-v2-card{
        flex:0 0 190px !important;

        height:130px !important;
    }

}


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

@media(max-width:700px){

    .companies-v2{
        padding:48px 0 30px !important;
    }

    .companies-v2-header{
        grid-template-columns:1fr !important;

        gap:12px !important;

        margin-bottom:20px !important;
    }

    .companies-v2-header h2{
        font-size:30px !important;
    }

    .companies-v2-header p{
        max-width:100% !important;
    }

    .companies-v2-slider{
        grid-template-columns:30px 1fr 30px !important;

        gap:7px !important;
    }

    .company-nav{
        width:30px !important;
        height:30px !important;

        font-size:20px !important;
    }

    .company-v2-card{
        flex:0 0 165px !important;

        height:118px !important;

        padding:16px 12px !important;
    }

    .company-v2-card img{
        max-height:62px !important;
    }

}

/* =====================================================
   COMPANY LOGO HOVER MOTION
   ===================================================== */

/* حركة اللوجو فقط */
.company-v2-card img{
    transform: scale(1);
    transform-origin: center center;

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1),
        filter .38s ease !important;

    will-change: transform;
}

/* عند مرور الماوس */
.company-v2-card:hover img{
    transform: scale(1.18) !important;

    filter:
        drop-shadow(0 6px 8px rgba(8,42,75,.12));
}

/* البطاقة نفسها لا تكبر */
.company-v2-card:hover{
    transform: none !important;
}

/* حركة خفيفة عند الضغط */
.company-v2-card:active img{
    transform: scale(1.10) !important;

    transition-duration:.12s !important;
}


/* احترام إعداد Reduce Motion */
@media (prefers-reduced-motion: reduce){

    .company-v2-card img{
        transition:none !important;
    }

}



/* =========================================================
   NETWORKS + CERTIFICATES V2
   ========================================================= */

.network-certificate-section{
    position:relative;
    padding:55px 0 60px;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        );
    overflow:hidden;
}


/* subtle background decoration */

.network-certificate-section::before{
    content:"";
    position:absolute;
    left:-140px;
    bottom:-190px;
    width:420px;
    height:420px;
    border:1px solid rgba(10,73,119,.06);
    border-radius:50%;
    pointer-events:none;
}

.network-certificate-section::after{
    content:"";
    position:absolute;
    right:-170px;
    top:-200px;
    width:440px;
    height:440px;
    border:1px solid rgba(10,73,119,.05);
    border-radius:50%;
    pointer-events:none;
}


.network-certificate-section .container{
    position:relative;
    z-index:2;
}


/* main two columns */

.network-certificate-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
}


/* columns */

.nc-column{
    min-width:0;
}

.nc-networks{
    padding-right:55px;
}

.nc-certificates{
    padding-left:55px;
    border-left:1px solid #dce6ed;
}


/* heading */

.nc-heading{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:24px;

    color:#0b3153;

    font-size:12px;
    font-weight:800;
    letter-spacing:2.3px;
}

.nc-line{
    display:block;

    width:32px;
    height:2px;

    background:#c7a447;
}


/* logo layout */

.nc-logo-grid{
    display:grid;
    align-items:stretch;
    gap:12px;
}


/* 4 Networks */

.nc-network-grid{
    grid-template-columns:repeat(4,1fr);
}


/* 5 Certificates */

.nc-certificate-grid{
    grid-template-columns:repeat(5,1fr);
}


/* card */

.nc-logo-card{
    position:relative;

    height:112px;

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

    padding:17px 14px;

    background:#ffffff;

    border:1px solid #e0e8ee;
    border-radius:7px;

    box-shadow:
        0 7px 20px rgba(16,48,73,.045);

    overflow:hidden;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* image */

.nc-logo-card img{
    display:block;

    width:auto;
    height:auto;

    max-width:90%;
    max-height:70px;

    object-fit:contain;

    transform:scale(1);

    transform-origin:center center;

    transition:
        transform .42s cubic-bezier(.22,.61,.36,1),
        filter .35s ease;

    will-change:transform;
}


/* hover card */

.nc-logo-card:hover{
    border-color:#d1b35b;

    background:#ffffff;

    box-shadow:
        0 12px 27px rgba(15,50,77,.085);
}


/* LOGO ZOOM MOTION */

.nc-logo-card:hover img{
    transform:scale(1.16);

    filter:
        drop-shadow(0 6px 7px rgba(8,42,75,.10));
}


/* gold detail */

.nc-logo-card::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:2px;

    transform:translateX(-50%);

    background:#c8a649;

    transition:width .35s ease;
}

.nc-logo-card:hover::after{
    width:42%;
}


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

@media(max-width:1100px){

    .network-certificate-section{
        padding:50px 0;
    }

    .nc-networks{
        padding-right:30px;
    }

    .nc-certificates{
        padding-left:30px;
    }

    .nc-network-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .nc-certificate-grid{
        grid-template-columns:repeat(3,1fr);
    }

}


@media(max-width:760px){

    .network-certificate-section{
        padding:45px 0;
    }

    .network-certificate-grid{
        grid-template-columns:1fr;
        gap:42px;
    }

    .nc-networks{
        padding-right:0;
    }

    .nc-certificates{
        padding-left:0;
        border-left:0;
        border-top:1px solid #dce6ed;
        padding-top:36px;
    }

    .nc-network-grid,
    .nc-certificate-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .nc-logo-card{
        height:105px;
    }

}


@media(max-width:420px){

    .nc-network-grid,
    .nc-certificate-grid{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .nc-logo-card{
        height:95px;
        padding:13px 10px;
    }

    .nc-logo-card img{
        max-height:58px;
    }

}


/* accessibility */

@media(prefers-reduced-motion:reduce){

    .nc-logo-card,
    .nc-logo-card img,
    .nc-logo-card::after{
        transition:none !important;
    }

}



/* =========================================================
   NETWORKS + CERTIFICATES — BIGGER LOGOS
   ========================================================= */

/* البطاقة */
.nc-logo-card{
    height:120px !important;
    padding:8px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
}


/* تكبير الشعارات داخل البطاقة */
.nc-logo-card img{
    display:block !important;

    width:92% !important;
    height:92% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:scale(1) !important;
    transform-origin:center center !important;

    transition:
        transform .40s cubic-bezier(.22,.61,.36,1),
        filter .35s ease !important;

    will-change:transform;
}


/* تكبير إضافي عند مرور الماوس */
.nc-logo-card:hover img{
    transform:scale(1.10) !important;

    filter:
        drop-shadow(0 5px 7px rgba(8,42,75,.12));
}


/* بعض شعارات الشهادات طولية
   نعطيها مساحة أكبر داخل البطاقة */
.nc-certificate-grid .nc-logo-card img{
    width:94% !important;
    height:94% !important;
}


/* Networks */
.nc-network-grid .nc-logo-card img{
    width:94% !important;
    height:94% !important;
}


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

    .nc-logo-card{
        height:110px !important;
        padding:8px !important;
    }

    .nc-logo-card img{
        width:90% !important;
        height:90% !important;
    }

}


/* =========================================================
   NETWORKS + CERTIFICATES — VISUAL LOGO ENLARGEMENT
   ========================================================= */

.nc-logo-card{
    height:128px !important;
    padding:4px !important;
    overflow:hidden !important;
}

.nc-logo-card img{
    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:scale(1.38) !important;

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1),
        filter .35s ease !important;
}


/* Networks */
.nc-network-grid .nc-logo-card:nth-child(1) img{
    transform:scale(1.55) !important;
}

.nc-network-grid .nc-logo-card:nth-child(2) img{
    transform:scale(1.48) !important;
}

.nc-network-grid .nc-logo-card:nth-child(3) img{
    transform:scale(1.55) !important;
}

.nc-network-grid .nc-logo-card:nth-child(4) img{
    transform:scale(1.48) !important;
}


/* Certificates */
.nc-certificate-grid .nc-logo-card:nth-child(1) img{
    transform:scale(1.55) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(2) img{
    transform:scale(1.55) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(3) img{
    transform:scale(1.62) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(4) img{
    transform:scale(1.55) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(5) img{
    transform:scale(1.62) !important;
}


/* Hover Motion */
.nc-logo-card:hover img{
    filter:drop-shadow(0 6px 8px rgba(8,42,75,.12));
}


/* hover لكل شعار مع زيادة بسيطة فوق الحجم الأساسي */

.nc-network-grid .nc-logo-card:nth-child(1):hover img{
    transform:scale(1.67) !important;
}

.nc-network-grid .nc-logo-card:nth-child(2):hover img{
    transform:scale(1.60) !important;
}

.nc-network-grid .nc-logo-card:nth-child(3):hover img{
    transform:scale(1.67) !important;
}

.nc-network-grid .nc-logo-card:nth-child(4):hover img{
    transform:scale(1.60) !important;
}


.nc-certificate-grid .nc-logo-card:nth-child(1):hover img{
    transform:scale(1.67) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(2):hover img{
    transform:scale(1.67) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(3):hover img{
    transform:scale(1.74) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(4):hover img{
    transform:scale(1.67) !important;
}

.nc-certificate-grid .nc-logo-card:nth-child(5):hover img{
    transform:scale(1.74) !important;
}


/* Mobile */
@media(max-width:760px){

    .nc-logo-card{
        height:115px !important;
    }

    .nc-logo-card img{
        transform:scale(1.28) !important;
    }

}


/* =========================================================
   HERO SERVICES — BIGGER ICONS
   ========================================================= */

/* تكبير أيقونات الخدمات */
.hero-v2 .hero-service-icon,
.hero-v2 .service-icon,
.hero-v2 .hero-bottom-strip svg{
    width:42px !important;
    height:42px !important;
    font-size:38px !important;

    transform:scale(1) !important;
    transform-origin:center center !important;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        opacity .3s ease,
        filter .3s ease !important;
}


/* إذا كانت الأيقونة داخل span */
.hero-v2 .hero-bottom-strip .icon{
    font-size:38px !important;
    line-height:1 !important;
}


/* Hover */
.hero-v2 .hero-service:hover .hero-service-icon,
.hero-v2 .hero-service:hover .service-icon,
.hero-v2 .hero-service:hover svg,
.hero-v2 .hero-bottom-strip button:hover svg,
.hero-v2 .hero-bottom-strip a:hover svg{
    transform:scale(1.18) !important;

    filter:
        drop-shadow(0 5px 8px rgba(0,0,0,.18));
}


/* Active service */
.hero-v2 .hero-service.active .hero-service-icon,
.hero-v2 .hero-service.active .service-icon,
.hero-v2 .hero-service.active svg{
    transform:scale(1.12) !important;
}


/* Mobile */
@media(max-width:760px){

    .hero-v2 .hero-service-icon,
    .hero-v2 .service-icon,
    .hero-v2 .hero-bottom-strip svg{
        width:34px !important;
        height:34px !important;
        font-size:32px !important;
    }

    .hero-v2 .hero-bottom-strip .icon{
        font-size:32px !important;
    }

}


/* =========================================================
   OUR COMPANIES — BIGGER LOGOS
   ========================================================= */

/* إبقاء البطاقة ثابتة */
.company-v2-card{
    overflow:hidden !important;
}


/* الحجم الأساسي للشعارات */
.company-v2-card img{
    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center !important;

    transform:scale(1.32) !important;

    transition:
        transform .40s cubic-bezier(.22,.61,.36,1),
        filter .35s ease !important;
}


/* BlueBoat */
.company-v2-card:nth-child(1) img{
    transform:scale(1.42) !important;
}


/* Blue Tower */
.company-v2-card:nth-child(2) img{
    transform:scale(1.40) !important;
}


/* Blue Sailboat */
.company-v2-card:nth-child(3) img{
    transform:scale(1.38) !important;
}


/* Blue Eagle */
.company-v2-card:nth-child(4) img{
    transform:scale(1.42) !important;
}


/* BluBarco */
.company-v2-card:nth-child(5) img{
    transform:scale(1.42) !important;
}


/* =========================================================
   HOVER MOTION
   ========================================================= */

.company-v2-card:nth-child(1):hover img{
    transform:scale(1.55) !important;
}

.company-v2-card:nth-child(2):hover img{
    transform:scale(1.53) !important;
}

.company-v2-card:nth-child(3):hover img{
    transform:scale(1.51) !important;
}

.company-v2-card:nth-child(4):hover img{
    transform:scale(1.55) !important;
}

.company-v2-card:nth-child(5):hover img{
    transform:scale(1.55) !important;
}


.company-v2-card:hover img{
    filter:drop-shadow(
        0 6px 8px rgba(8,42,75,.13)
    ) !important;
}


/* البطاقة لا تتحرك */
.company-v2-card:hover{
    transform:none !important;
}


/* Mobile */
@media(max-width:700px){

    .company-v2-card img{
        transform:scale(1.22) !important;
    }

}


/* =========================================================
   OUR COMPANIES — REDUCE LOGOS 15%
   ========================================================= */

/* BlueBoat */
.company-v2-card:nth-child(1) img{
    transform:scale(1.21) !important;
}

/* Blue Tower */
.company-v2-card:nth-child(2) img{
    transform:scale(1.19) !important;
}

/* Blue Sailboat */
.company-v2-card:nth-child(3) img{
    transform:scale(1.17) !important;
}

/* Blue Eagle */
.company-v2-card:nth-child(4) img{
    transform:scale(1.21) !important;
}

/* BluBarco */
.company-v2-card:nth-child(5) img{
    transform:scale(1.21) !important;
}


/* Hover — يبقى التكبير الناعم */
.company-v2-card:nth-child(1):hover img{
    transform:scale(1.34) !important;
}

.company-v2-card:nth-child(2):hover img{
    transform:scale(1.32) !important;
}

.company-v2-card:nth-child(3):hover img{
    transform:scale(1.30) !important;
}

.company-v2-card:nth-child(4):hover img{
    transform:scale(1.34) !important;
}

.company-v2-card:nth-child(5):hover img{
    transform:scale(1.34) !important;
}


/* =========================================================
   OUR SERVICES — MODERN REDESIGN
   ========================================================= */

.services-section{
    position:relative;
    padding:78px 0 88px !important;
    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 100%
        ) !important;
    overflow:hidden;
}


/* Heading */
.services-section .section-heading{
    margin-bottom:34px !important;
}

.services-section .section-heading .eyebrow{
    display:block;
    margin-bottom:9px;
    color:#0b67ad;
    font-size:11px;
    font-weight:800;
    letter-spacing:2.4px;
}

.services-section .section-heading h2{
    margin:0;
    color:#0a2b4d;
    font-size:42px;
    line-height:1;
    letter-spacing:-1.4px;
}

.services-section .section-heading h2 span{
    color:#0b67ad;
}


/* Main layout */
.services-layout{
    display:grid !important;
    grid-template-columns:300px minmax(0,1fr) !important;
    gap:0 !important;

    background:#ffffff;
    border:1px solid #dce6ed;
    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 18px 55px rgba(14,49,77,.08);
}


/* =========================================================
   LEFT TABS
   ========================================================= */

.services-tabs{
    display:flex !important;
    flex-direction:column !important;

    background:
        linear-gradient(
            180deg,
            #082d50 0%,
            #061f38 100%
        ) !important;

    padding:14px 0 !important;
}


.service-tab{
    position:relative;

    display:flex !important;
    align-items:center !important;

    min-height:66px;

    width:100%;

    padding:14px 24px !important;

    background:transparent !important;

    color:#dceaf4 !important;

    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.075) !important;

    text-align:left;

    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.15px;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        padding-left .3s ease;
}


.service-tab:last-child{
    border-bottom:0 !important;
}


/* number */
.service-tab span{
    flex:0 0 auto;

    min-width:38px;

    margin-right:14px;

    color:#6ea7ca !important;

    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:1.2px;

    transition:
        color .3s ease,
        transform .3s ease;
}


/* gold left indicator */
.service-tab::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:3px;
    height:0;

    transform:translateY(-50%);

    background:#caaa55;

    transition:height .3s ease;
}


/* Hover */
.service-tab:hover{
    background:rgba(255,255,255,.055) !important;
    color:#ffffff !important;

    padding-left:29px !important;
}

.service-tab:hover span{
    color:#d3b45f !important;
}


/* Active */
.service-tab.active{
    background:
        linear-gradient(
            90deg,
            rgba(21,112,174,.32),
            rgba(255,255,255,.035)
        ) !important;

    color:#ffffff !important;

    padding-left:29px !important;
}


.service-tab.active::before{
    height:100%;
}


.service-tab.active span{
    color:#d7b75d !important;
    transform:translateX(2px);
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.service-content{
    position:relative;

    min-width:0;

    background:#ffffff;
}


.service-panel{
    display:none !important;

    grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr) !important;

    min-height:500px;

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


.service-panel.active{
    display:grid !important;

    opacity:1;
    transform:translateY(0);

    animation:
        servicePanelIn .48s cubic-bezier(.22,.61,.36,1);
}


@keyframes servicePanelIn{

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

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

}


/* =========================================================
   SERVICE IMAGE
   ========================================================= */

.service-photo{
    position:relative;

    min-height:500px;

    background-position:center !important;
    background-size:cover !important;

    overflow:hidden;
}


/* image dark overlay */
.service-photo::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(4,31,55,.08) 0%,
            rgba(4,31,55,.18) 52%,
            rgba(4,31,55,.55) 100%
        );

    z-index:1;
}


/* subtle cyan shape */
.service-photo::after{
    content:"";

    position:absolute;

    right:-80px;
    bottom:-130px;

    width:280px;
    height:360px;

    transform:rotate(23deg);

    background:
        linear-gradient(
            180deg,
            rgba(30,151,211,.24),
            rgba(10,95,153,.10)
        );

    z-index:1;
}


/* big service number */
.service-photo > span{
    position:absolute !important;

    left:28px !important;
    bottom:24px !important;

    z-index:3;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:62px !important;
    height:62px !important;

    margin:0 !important;

    background:#0a5f9e !important;

    border:1px solid rgba(255,255,255,.30);
    border-radius:50%;

    color:#ffffff !important;

    font-size:17px !important;
    font-weight:800 !important;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);
}


/* =========================================================
   SERVICE COPY
   ========================================================= */

.service-copy{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:52px 44px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbfd 100%
        );
}


.service-copy .eyebrow{
    margin-bottom:14px !important;

    color:#0b67ad !important;

    font-size:10px !important;
    font-weight:800;
    letter-spacing:2.1px;
}


.service-copy h3{
    position:relative;

    margin:0 0 22px !important;

    padding-bottom:17px;

    color:#0a2c4c !important;

    font-size:34px !important;
    line-height:1.08 !important;
    letter-spacing:-.8px;
}


/* gold underline */
.service-copy h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:46px;
    height:2px;

    background:#caaa55;
}


.service-copy p{
    margin:0 0 28px !important;

    color:#587083 !important;

    font-size:14px !important;
    line-height:1.85 !important;
}


/* CTA */
.service-copy .text-link{
    align-self:flex-start;

    display:inline-flex;
    align-items:center;

    padding-bottom:5px;

    color:#0a5f9e !important;

    border-bottom:1px solid rgba(10,95,158,.28);

    font-size:12px;
    font-weight:800;
    letter-spacing:.3px;

    text-decoration:none;

    transition:
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.service-copy .text-link:hover{
    color:#c19b3c !important;
    border-color:#c19b3c;

    transform:translateX(4px);
}


/* =========================================================
   IMAGE MOTION
   ========================================================= */

.service-panel.active .service-photo{
    animation:
        serviceImageZoom .9s ease both;
}


@keyframes serviceImageZoom{

    from{
        background-size:108% auto;
    }

    to{
        background-size:100% auto;
    }

}


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

@media(max-width:1100px){

    .services-layout{
        grid-template-columns:250px minmax(0,1fr) !important;
    }

    .service-panel{
        grid-template-columns:1fr 340px !important;
    }

    .service-copy{
        padding:42px 32px !important;
    }

    .service-copy h3{
        font-size:30px !important;
    }

}


@media(max-width:850px){

    .services-section{
        padding:60px 0 70px !important;
    }

    .services-layout{
        grid-template-columns:1fr !important;
    }

    .services-tabs{
        flex-direction:row !important;
        overflow-x:auto;

        padding:0 !important;

        scrollbar-width:none;
    }

    .services-tabs::-webkit-scrollbar{
        display:none;
    }

    .service-tab{
        flex:0 0 auto;

        min-width:180px;
        min-height:62px;

        padding:14px 18px !important;

        border-bottom:0 !important;
        border-right:1px solid rgba(255,255,255,.08) !important;
    }

    .service-tab:hover,
    .service-tab.active{
        padding-left:18px !important;
    }

    .service-tab::before{
        left:0;
        top:auto;
        bottom:0;

        width:100%;
        height:3px;

        transform:scaleX(0);

        transform-origin:left center;

        transition:transform .3s ease;
    }

    .service-tab.active::before{
        height:3px;
        transform:scaleX(1);
    }

    .service-panel{
        grid-template-columns:1fr !important;
    }

    .service-photo{
        min-height:390px;
    }

    .service-panel{
        min-height:0;
    }

    .service-copy{
        padding:38px 30px !important;
    }

}


@media(max-width:560px){

    .services-section .section-heading h2{
        font-size:34px;
    }

    .service-tab{
        min-width:165px;
    }

    .service-photo{
        min-height:300px;
    }

    .service-photo > span{
        width:54px !important;
        height:54px !important;

        left:20px !important;
        bottom:20px !important;

        font-size:15px !important;
    }

    .service-copy{
        padding:32px 24px !important;
    }

    .service-copy h3{
        font-size:28px !important;
    }

}


/* Reduced motion */
@media(prefers-reduced-motion:reduce){

    .service-panel.active,
    .service-panel.active .service-photo,
    .service-tab,
    .service-tab span,
    .service-copy .text-link{
        animation:none !important;
        transition:none !important;
    }

}


/* =========================================================
   SERVICES — ORIGINAL BLUE GROUP CONTENT
   ========================================================= */

.service-copy{
    overflow:auto !important;
}

/* Subtitle from original website */
.service-subtitle{
    margin:-9px 0 19px !important;

    color:#0a2c4c !important;

    font-size:13px !important;
    line-height:1.5 !important;
    font-weight:800 !important;

    letter-spacing:0 !important;
}


/* Original detailed description */
.service-description{
    white-space:normal !important;

    margin-bottom:27px !important;

    color:#587083 !important;

    font-size:13px !important;
    line-height:1.72 !important;
}


/* Long services need slightly more content width */
.service-panel{
    grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr) !important;
}


/* Warehousing / Customs / Documentation have longer text */
#service-warehousing .service-copy,
#service-customs .service-copy,
#service-documentation .service-copy,
#service-insurance .service-copy{
    padding-top:35px !important;
    padding-bottom:35px !important;
}


/* slightly smaller copy for longer sections */
#service-warehousing .service-description,
#service-customs .service-description,
#service-documentation .service-description,
#service-insurance .service-description{
    font-size:12.5px !important;
    line-height:1.65 !important;
}


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

    .service-panel{
        grid-template-columns:1fr 390px !important;
    }

    .service-description{
        font-size:12.5px !important;
    }

}

@media(max-width:850px){

    .service-panel{
        grid-template-columns:1fr !important;
    }

    .service-copy{
        overflow:visible !important;
    }

}


/* =========================================================
   OUR SERVICES — REDUCE TOP SPACE
   ========================================================= */

.services-section{
    padding-top:38px !important;
}

.services-section .section-heading{
    margin-top:0 !important;
    padding-top:0 !important;
}

@media(max-width:850px){
    .services-section{
        padding-top:32px !important;
    }
}

@media(max-width:560px){
    .services-section{
        padding-top:28px !important;
    }
}


/* =========================================================
   WHY BLUEGROUP — PREMIUM REDESIGN
   ========================================================= */

.why-section{
    position:relative !important;
    overflow:hidden !important;

    padding:82px 0 72px !important;

    background:
        url('https://images.unsplash.com/photo-1494412519320-aa613dfb7738?auto=format&fit=crop&w=1900&q=85')
        center 58% / cover no-repeat !important;

    isolation:isolate;
}


/* Main dark overlay */
.why-overlay{
    position:absolute !important;
    inset:0 !important;

    background:
        linear-gradient(
            90deg,
            rgba(3,27,49,.98) 0%,
            rgba(4,39,68,.95) 42%,
            rgba(5,62,98,.78) 72%,
            rgba(6,73,111,.58) 100%
        ) !important;

    z-index:0;
}


/* Decorative blue shape */
.why-section::before{
    content:"";

    position:absolute;
    z-index:1;

    top:-180px;
    right:7%;

    width:390px;
    height:850px;

    transform:skewX(-22deg);

    background:
        linear-gradient(
            180deg,
            rgba(23,143,200,.22),
            rgba(8,91,145,.08)
        );

    border-left:1px solid rgba(94,190,229,.18);

    pointer-events:none;
}


/* subtle light line */
.why-section::after{
    content:"";

    position:absolute;
    z-index:1;

    top:0;
    right:31%;

    width:1px;
    height:100%;

    background:
        linear-gradient(
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    pointer-events:none;
}


.why-content{
    position:relative !important;
    z-index:3 !important;
}


/* Eyebrow */
.why-section .eyebrow{
    display:inline-flex;
    align-items:center;

    margin-bottom:17px !important;

    color:#66c5eb !important;

    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:2.5px !important;
}


.why-section .eyebrow::before{
    content:"";

    display:inline-block;

    width:32px;
    height:2px;

    margin-right:12px;

    background:#d1ad4d;
}


/* Main heading */
.why-section h2{
    max-width:720px;

    margin:0 !important;

    color:#ffffff !important;

    font-size:62px !important;
    line-height:.98 !important;

    font-weight:800 !important;

    letter-spacing:-2px !important;
}


.why-section h2 span{
    color:#58bee7 !important;

    position:relative;
}


/* gold accent */
.why-section h2 span::after{
    content:"";

    display:inline-block;

    width:52px;
    height:3px;

    margin-left:16px;
    margin-bottom:15px;

    background:#d1ad4d;
}


/* Description */
.why-section > .why-content > p,
.why-content > p{
    max-width:540px !important;

    margin:26px 0 0 !important;

    color:#c5d8e5 !important;

    font-size:15px !important;
    line-height:1.75 !important;
}


/* =========================================================
   STATS
   ========================================================= */

.stats-grid{
    position:relative;

    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;

    margin-top:50px !important;

    border-top:1px solid rgba(255,255,255,.17) !important;
}


.stats-grid > div{
    position:relative;

    min-height:120px;

    padding:27px 25px 18px 0 !important;

    border-right:1px solid rgba(255,255,255,.10);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        background .35s ease,
        padding-left .35s ease;
}


.stats-grid > div:last-child{
    border-right:0;
}


/* gold line */
.stats-grid > div::before{
    content:"";

    position:absolute;

    top:-1px;
    left:0;

    width:0;
    height:2px;

    background:#d1ad4d;

    transition:width .4s ease;
}


/* Hover */
.stats-grid > div:hover{
    transform:translateY(-5px);

    padding-left:18px !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.07),
            transparent
        );
}


.stats-grid > div:hover::before{
    width:64px;
}


/* Numbers */
.stats-grid strong{
    display:block !important;

    margin-bottom:6px;

    color:#ffffff !important;

    font-family:'Montserrat',sans-serif !important;

    font-size:40px !important;
    line-height:1 !important;

    font-weight:800 !important;

    transition:
        color .3s ease,
        transform .3s ease;
}


.stats-grid > div:hover strong{
    color:#61c5eb !important;
    transform:translateX(3px);
}


/* Labels */
.stats-grid span{
    display:block;

    color:#a8c0d0 !important;

    font-size:11px !important;
    font-weight:600;

    letter-spacing:.4px;

    transition:color .3s ease;
}


.stats-grid > div:hover span{
    color:#ffffff !important;
}


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

@media(max-width:900px){

    .why-section{
        padding:70px 0 60px !important;
    }

    .why-section h2{
        font-size:52px !important;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .stats-grid > div{
        border-bottom:1px solid rgba(255,255,255,.10);
    }

}


@media(max-width:560px){

    .why-section{
        padding:58px 0 48px !important;
    }

    .why-section h2{
        font-size:40px !important;
        letter-spacing:-1px !important;
    }

    .why-section h2 span::after{
        display:none;
    }

    .why-content > p{
        font-size:14px !important;
    }

    .stats-grid{
        grid-template-columns:1fr 1fr !important;
        margin-top:38px !important;
    }

    .stats-grid strong{
        font-size:32px !important;
    }

    .stats-grid > div{
        min-height:105px;
        padding:22px 12px 16px 0 !important;
    }

}


/* Accessibility */
@media(prefers-reduced-motion:reduce){

    .stats-grid > div,
    .stats-grid strong,
    .stats-grid span{
        transition:none !important;
    }

}



/* =========================================================
   CONTACT US — PREMIUM REDESIGN
   ========================================================= */

.contact-section{
    position:relative;
    padding:72px 0 0 !important;
    background:
        linear-gradient(180deg,#ffffff 0%,#f6f9fb 100%) !important;
}


.contact-section .section-heading{
    margin-bottom:42px !important;
}


.contact-grid{
    display:grid !important;
    grid-template-columns:.78fr 1.22fr !important;
    gap:0 !important;

    overflow:hidden;

    border:1px solid #dce6ed;
    border-radius:14px;

    background:#fff;

    box-shadow:0 18px 55px rgba(14,49,77,.08);
}


/* LEFT CONTACT PANEL */

.contact-info{
    position:relative;

    padding:46px 42px !important;

    background:
        linear-gradient(145deg,#082f53 0%,#061f38 100%);

    overflow:hidden;
}


.contact-info::after{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-130px;
    bottom:-130px;

    border:1px solid rgba(91,192,232,.14);

    border-radius:50%;

    box-shadow:
        0 0 0 45px rgba(91,192,232,.035),
        0 0 0 90px rgba(91,192,232,.025);
}


.contact-info h3{
    position:relative;
    z-index:2;

    margin:0 0 13px !important;

    color:#fff !important;

    font-size:29px !important;
    font-weight:800;
}


.contact-info > p{
    position:relative;
    z-index:2;

    max-width:330px;

    margin:0 0 33px;

    color:#9eb8ca;

    font-size:13px;
    line-height:1.75;
}


.contact-item{
    position:relative;
    z-index:2;

    margin-top:25px !important;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.09);
}


.contact-item span{
    margin-bottom:7px !important;

    color:#59bee7 !important;

    font-size:9px !important;

    letter-spacing:2px !important;
}


.contact-item strong{
    color:#fff !important;

    font-size:12.5px !important;

    font-weight:500;

    line-height:1.75 !important;
}


/* CONTACT FORM */

.contact-form-wrap{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:45px 48px !important;

    background:#fff !important;
}


.contact-form{
    gap:17px !important;
}


.contact-form input,
.contact-form textarea{

    border:1px solid #dce5eb !important;

    border-radius:5px;

    background:#f9fbfc !important;

    padding:16px 17px !important;

    font-family:inherit;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#2998cc !important;

    background:#fff !important;

    box-shadow:0 0 0 3px rgba(41,152,204,.08);
}


.contact-form textarea{
    min-height:135px !important;
}


.contact-form .btn{
    align-self:flex-start;

    min-width:180px;

    border-radius:3px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.contact-form .btn:hover{
    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(11,111,167,.20);
}


/* =========================================================
   GOOGLE MAP
   ========================================================= */

.blue-location-map{

    position:relative;

    display:grid;

    grid-template-columns:330px minmax(0,1fr);

    height:390px;

    margin-top:55px;

    overflow:hidden;

    background:#082c4c;
}


.map-info-panel{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:45px 38px;

    background:
        linear-gradient(
            145deg,
            #082f53 0%,
            #061f38 100%
        );

    color:#fff;
}


.map-eyebrow{

    display:block;

    margin-bottom:15px;

    color:#59bee7;

    font-size:9px;

    font-weight:800;

    letter-spacing:2.2px;
}


.map-info-panel h3{

    margin:0 0 22px;

    color:#fff;

    font-size:29px;

    line-height:1.08;

    font-weight:800;
}


.map-info-panel h3 span{
    color:#59bee7;
}


.map-info-panel p{

    margin:0 0 27px;

    color:#b8ccda;

    font-size:12px;

    line-height:1.8;
}


.map-direction-btn{

    display:inline-flex;

    align-items:center;

    gap:15px;

    width:max-content;

    padding:13px 18px;

    border:1px solid rgba(255,255,255,.20);

    color:#fff;

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.map-direction-btn span{

    color:#d1ad4d;

    font-size:16px;
}


.map-direction-btn:hover{

    background:#0d6fa7;

    border-color:#0d6fa7;

    transform:translateX(4px);
}


.map-frame{

    position:relative;

    width:100%;

    height:100%;

    background:#e7edf1;
}


.map-frame iframe{

    display:block;

    width:100% !important;

    height:100% !important;

    filter:saturate(.78) contrast(.96);
}


/* remove old map */

.world-map{
    display:none !important;
}


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

@media(max-width:900px){

    .contact-grid{
        grid-template-columns:1fr !important;
    }

    .contact-info{
        padding:38px 32px !important;
    }

    .contact-form-wrap{
        padding:38px 32px !important;
    }

    .blue-location-map{
        grid-template-columns:280px 1fr;
        height:380px;
    }

}


@media(max-width:650px){

    .contact-section{
        padding-top:55px !important;
    }

    .form-row{
        grid-template-columns:1fr !important;
    }

    .blue-location-map{
        grid-template-columns:1fr;
        height:auto;
    }

    .map-info-panel{
        padding:34px 28px;
    }

    .map-frame{
        height:330px;
    }

}



/* =========================================================
   BLUE GROUP — FINAL FOOTER
   ========================================================= */

.site-footer{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(135deg,#061c32 0%,#041526 100%) !important;
    color:#fff;
}

.site-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(
        90deg,
        #158cc5 0%,
        #158cc5 68%,
        #c9a84d 68%,
        #c9a84d 100%
    );
}

.site-footer .footer-grid{
    position:relative;
    z-index:2;

    display:grid !important;
    grid-template-columns:1.5fr .8fr 1fr !important;
    gap:80px !important;
    align-items:start !important;

    padding:58px 0 52px !important;
}


/* LOGO */

.footer-logo{
    display:inline-block;
    margin-bottom:18px;
}

.footer-logo img{
    display:block;
    width:175px;
    height:auto;
    object-fit:contain;

    /* Logo designed for light background */
    background:#fff;
    padding:9px 14px;
    border-radius:4px;

    transition:transform .3s ease;
}

.footer-logo:hover img{
    transform:scale(1.04);
}


.footer-brand p{
    max-width:390px !important;
    margin:0 !important;

    color:#8da8bb !important;

    font-size:12px !important;
    line-height:1.8;
}


/* TITLES */

.footer-title{
    display:block;

    position:relative;

    margin-bottom:21px;

    color:#fff;

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;
}

.footer-title::after{
    content:"";

    display:block;

    width:30px;
    height:2px;

    margin-top:10px;

    background:#c9a84d;
}


/* LINKS */

.site-footer .footer-links{
    display:flex !important;
    flex-direction:column !important;

    gap:10px !important;
}

.site-footer .footer-links a{
    width:max-content;

    color:#91aabc !important;

    font-size:11px !important;
    font-weight:500;

    transition:
        color .25s ease,
        transform .25s ease;
}

.site-footer .footer-links a:hover{
    color:#5dc2e9 !important;
    transform:translateX(4px);
}


/* CONTACT */

.footer-contact p{
    margin:0 0 16px;

    color:#91aabc;

    font-size:11px;
    line-height:1.8;
}

.footer-contact > a{
    color:#fff;

    font-size:12px;
    font-weight:700;

    transition:color .25s ease;
}

.footer-contact > a:hover{
    color:#5dc2e9;
}


/* BOTTOM BAR */

.site-footer .footer-bottom{
    padding:0 !important;

    border-top:1px solid rgba(255,255,255,.08) !important;

    background:rgba(0,0,0,.10);
}

.footer-bottom-inner{
    min-height:58px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;

    color:#668398;

    font-size:10px;
}


/* AWTAD CREDIT */

.footer-awtad-link{
    display:inline-flex;
    align-items:center;

    gap:4px;

    color:#7f9aac !important;

    font-size:10px;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-awtad-link strong{
    color:#a8c2d2;

    font-weight:700;

    transition:color .25s ease;
}

.footer-awtad-link:hover{
    color:#fff !important;
    transform:translateY(-1px);
}

.footer-awtad-link:hover strong{
    color:#5dc2e9;
}


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

@media(max-width:900px){

    .site-footer .footer-grid{
        grid-template-columns:1.4fr .8fr 1fr !important;
        gap:40px !important;
    }

}

@media(max-width:650px){

    .site-footer .footer-grid{
        grid-template-columns:1fr !important;
        gap:35px !important;

        padding:45px 0 40px !important;
    }

    .footer-bottom-inner{
        padding:18px 0;

        flex-direction:column;

        justify-content:center;

        gap:8px;

        text-align:center;
    }

}


/* =========================================================
   FOOTER LOGO — REMOVE WHITE BACKGROUND
   ========================================================= */

.site-footer .footer-logo{
    display:inline-block !important;
    background:transparent !important;
}

.site-footer .footer-logo img{
    width:175px !important;
    height:auto !important;

    background:transparent !important;

    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    object-fit:contain !important;
}

.site-footer .footer-logo:hover img{
    transform:scale(1.04);
}



/* =========================================================
   SURVEY NAV BUTTON
   ========================================================= */

.survey-nav-link{
    position:relative;
    color:#fff !important;
}

.survey-nav-link::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:2px;
    background:#c9a84d;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.survey-nav-link:hover::after{
    transform:scaleX(1);
}


/* =========================================================
   SURVEY POPUP
   ========================================================= */

.survey-modal{
    position:fixed;
    inset:0;
    z-index:5000;

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

    padding:28px;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}


.survey-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}


.survey-modal-backdrop{
    position:absolute;
    inset:0;

    background:rgba(2,17,31,.88);

    backdrop-filter:blur(7px);
}


.survey-modal-dialog{
    position:relative;
    z-index:2;

    width:min(1180px,96vw);
    height:min(820px,90vh);

    display:flex;
    flex-direction:column;

    overflow:hidden;

    background:#fff;

    border-radius:12px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.38);

    transform:translateY(20px) scale(.985);

    transition:transform .32s cubic-bezier(.22,.61,.36,1);
}


.survey-modal.active .survey-modal-dialog{
    transform:translateY(0) scale(1);
}


/* Header */

.survey-modal-header{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:16px 22px 16px 28px;

    background:
        linear-gradient(135deg,#082f53,#061f38);

    border-bottom:2px solid #c9a84d;
}


.survey-modal-header > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}


.survey-modal-header span{
    color:#5fc1e7;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;
}


.survey-modal-header strong{
    color:#fff;

    font-size:17px;
    font-weight:700;
}


.survey-modal-close{
    width:42px;
    height:42px;

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

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;

    background:transparent;

    color:#fff;

    font-size:28px;
    line-height:1;

    cursor:pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.survey-modal-close:hover{
    background:#0d6fa7;
    border-color:#0d6fa7;

    transform:rotate(90deg);
}


/* iframe */

.survey-frame-wrap{
    flex:1;

    position:relative;

    background:#f5f7f9;

    overflow:hidden;
}


.survey-frame-wrap iframe{
    display:block;

    width:100%;
    height:100%;

    border:0;
}


/* Footer */

.survey-modal-footer{
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:10px 24px;

    background:#f7f9fb;

    border-top:1px solid #e0e7ec;

    color:#6e8494;

    font-size:10px;
}


.survey-modal-footer a{
    color:#0d6fa7;

    font-weight:700;

    transition:color .25s ease;
}


.survey-modal-footer a:hover{
    color:#082f53;
}


/* Stop body scroll */

body.survey-open{
    overflow:hidden !important;
}


/* Mobile */

@media(max-width:700px){

    .survey-modal{
        padding:10px;
    }

    .survey-modal-dialog{
        width:100%;
        height:94vh;

        border-radius:8px;
    }

    .survey-modal-header{
        min-height:62px;

        padding:12px 15px 12px 18px;
    }

    .survey-modal-footer{
        flex-direction:column;
        align-items:flex-start;

        gap:4px;

        padding:10px 16px;
    }

}



/* =========================================================
   COMPANY POPUP — DESCRIPTION FONT -25%
   ========================================================= */

.company-popup-v2 #companyPopupDescription{
    font-size:10px !important;
    line-height:1.75 !important;
}

@media(max-width:700px){
    .company-popup-v2 #companyPopupDescription{
        font-size:10px !important;
        line-height:1.7 !important;
    }
}



/* =========================================================
   BLUE GROUP — FINAL MOBILE RESPONSIVE PATCH
   Desktop remains unchanged
   ========================================================= */

@media (max-width:768px){

    /* -----------------------------------------------------
       GLOBAL
       ----------------------------------------------------- */

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

    .container{
        width:calc(100% - 32px) !important;
        max-width:none !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .section-heading{
        margin-bottom:28px !important;
    }

    .section-heading h2{
        font-size:34px !important;
        line-height:1.05 !important;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

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

    .navbar-shell{
        width:100% !important;
    }

    .navbar,
    .main-header:not(.scrolled) .navbar,
    .main-header.scrolled .navbar{
        width:100% !important;
        max-width:none !important;
        height:72px !important;

        margin:0 !important;
        padding:0 18px !important;

        border-radius:0 !important;
    }

    .blue-original-brand{
        position:relative;
        z-index:20;
    }

    .bluegroup-logo{
        width:125px !important;
        max-height:55px !important;
        object-fit:contain !important;
    }

    .mobile-toggle{
        display:flex !important;
        flex-direction:column;
        justify-content:center;
        gap:5px;

        position:relative;
        z-index:30;

        width:42px;
        height:42px;

        padding:9px;

        border:0;
        background:transparent;
    }

    .mobile-toggle span{
        display:block;
        width:100%;
        height:2px;
        background:#fff;
    }


    /* Mobile navigation */

    .nav-links,
    .main-header:not(.scrolled) .nav-links{
        position:absolute !important;

        top:72px !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;

        display:none !important;
        flex-direction:column !important;
        align-items:stretch !important;

        gap:0 !important;

        padding:10px 18px 18px !important;

        background:#061f38 !important;

        box-shadow:0 18px 30px rgba(0,0,0,.20);

        max-height:calc(100vh - 72px);
        overflow-y:auto;
    }

    .nav-links.active,
    .main-header:not(.scrolled) .nav-links.active{
        display:flex !important;
    }

    .nav-links a,
    .main-header:not(.scrolled) .nav-links a{
        display:block !important;

        width:100%;

        padding:13px 5px !important;

        color:#fff !important;

        font-size:13px !important;

        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-links a::after{
        display:none !important;
    }

    .survey-nav-link{
        color:#d5b452 !important;
        font-weight:800 !important;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .hero-v2{
        height:100svh !important;
        min-height:650px !important;

        padding-bottom:94px !important;
    }

    .hero-v2 .hero-slide{
        bottom:94px !important;
    }

    .hero-v2 .hero-content-v2{
        width:calc(100% - 36px) !important;

        margin:0 auto !important;
        padding-top:90px !important;
        padding-bottom:30px !important;
    }

    .hero-copy-v2{
        width:100% !important;
        max-width:100% !important;
    }

    .hero-kicker{
        font-size:9px !important;
        letter-spacing:2px !important;
    }

    .hero-copy-v2 h1{
        font-size:40px !important;
        line-height:.98 !important;
        letter-spacing:-1px !important;
    }

    .hero-copy-v2 p{
        max-width:330px !important;

        font-size:12px !important;
        line-height:1.65 !important;
    }

    .hero-main-button{
        min-height:44px !important;

        padding:0 18px !important;

        font-size:10px !important;
    }

    .hero-script{
        display:none !important;
    }


    /* Hero service strip */

    .hero-v2 .hero-bottom-strip,
    .hero-v2 .hero-bottom-bar{
        height:94px !important;
    }

    .hero-v2 .hero-bottom-inner{
        height:94px !important;

        display:flex !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        justify-content:flex-start !important;

        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .hero-v2 .hero-bottom-inner::-webkit-scrollbar{
        display:none;
    }

    .hero-v2 .hero-bottom-inner button{
        display:flex !important;

        flex:0 0 108px !important;

        min-width:108px !important;

        height:94px !important;

        padding:9px 5px !important;
    }

    /* restore all service buttons on mobile */
    .hero-v2 .hero-bottom-inner button:nth-child(n){
        display:flex !important;
    }

    .hero-v2 .hero-service-symbol,
    .hero-v2 .hero-service-icon,
    .hero-v2 .service-icon{
        transform:scale(.78);
    }


    /* -----------------------------------------------------
       ABOUT
       ----------------------------------------------------- */

    .about-v2{
        padding:55px 0 !important;
    }

    .about-v2-grid{
        display:grid !important;
        grid-template-columns:1fr !important;

        gap:28px !important;
    }

    .about-v2-copy{
        padding:0 !important;
    }

    .about-v2-copy h2{
        font-size:35px !important;
        line-height:1.05 !important;
    }

    .about-v2-copy p{
        font-size:13px !important;
        line-height:1.75 !important;
    }

    .about-v2-card{
        min-height:300px !important;
    }


    /* -----------------------------------------------------
       OUR COMPANIES
       ----------------------------------------------------- */

    .companies-v2{
        padding-top:55px !important;
        padding-bottom:55px !important;
    }

    .companies-v2-track{
        display:flex !important;

        width:100% !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        gap:12px !important;

        padding:5px 2px 18px !important;

        scroll-snap-type:x mandatory;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .companies-v2-track::-webkit-scrollbar{
        display:none;
    }

    .company-v2-card{
        flex:0 0 72% !important;

        width:72% !important;
        min-width:72% !important;

        min-height:175px !important;

        scroll-snap-align:center;
    }

    .company-v2-card img{
        max-width:78% !important;
        max-height:105px !important;
    }


    /* Company popup */

    .company-popup-v2{
        padding:12px !important;

        align-items:center !important;
    }

    .company-popup-dialog{
        width:100% !important;
        max-width:100% !important;

        max-height:90svh !important;

        display:grid !important;
        grid-template-columns:1fr !important;

        overflow-y:auto !important;
    }

    .company-popup-logo-wrap{
        min-height:180px !important;

        padding:30px 25px !important;
    }

    .company-popup-logo-wrap img{
        max-width:220px !important;
        max-height:110px !important;
    }

    .company-popup-copy{
        padding:28px 25px 32px !important;
    }

    .company-popup-copy h3,
    #companyPopupName{
        font-size:28px !important;
        line-height:1.1 !important;
    }

    #companyPopupSubtitle{
        font-size:11px !important;
        line-height:1.5 !important;
    }

    .company-popup-v2 #companyPopupDescription{
        font-size:10px !important;
        line-height:1.7 !important;
    }

    .company-popup-close{
        top:12px !important;
        right:12px !important;
    }


    /* -----------------------------------------------------
       NETWORKS + CERTIFICATES
       ----------------------------------------------------- */

    .network-certificate-section{
        padding:48px 0 !important;
    }

    .network-certificate-grid{
        display:grid !important;
        grid-template-columns:1fr !important;

        gap:42px !important;
    }

    .nc-column{
        width:100% !important;
    }

    .nc-logo-grid{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;

        gap:10px !important;
    }

    .nc-logo-card{
        height:105px !important;
    }


    /* -----------------------------------------------------
       SERVICES
       ----------------------------------------------------- */

    .services-section{
        padding:50px 0 58px !important;
    }

    .services-layout{
        display:block !important;

        width:100% !important;

        overflow:hidden !important;

        border-radius:10px !important;
    }

    .services-tabs{
        display:flex !important;
        flex-direction:row !important;

        width:100% !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:0 !important;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .services-tabs::-webkit-scrollbar{
        display:none;
    }

    .service-tab{
        flex:0 0 auto !important;

        width:auto !important;
        min-width:145px !important;
        min-height:58px !important;

        padding:11px 14px !important;

        white-space:normal !important;

        font-size:11px !important;

        border-right:1px solid rgba(255,255,255,.08) !important;
        border-bottom:0 !important;
    }

    .service-tab.active{
        padding-left:14px !important;
    }

    .service-panel,
    .service-panel.active{
        grid-template-columns:1fr !important;

        min-height:0 !important;
    }

    .service-photo{
        min-height:240px !important;
        height:240px !important;
    }

    .service-copy{
        padding:30px 24px 34px !important;

        overflow:visible !important;
    }

    .service-copy h3{
        font-size:27px !important;
        line-height:1.08 !important;
    }

    .service-subtitle{
        font-size:11px !important;
    }

    .service-description,
    #service-warehousing .service-description,
    #service-customs .service-description,
    #service-documentation .service-description,
    #service-insurance .service-description{
        font-size:11px !important;
        line-height:1.7 !important;
    }


    /* -----------------------------------------------------
       WHY BLUE GROUP
       ----------------------------------------------------- */

    .why-section{
        padding:55px 0 48px !important;
    }

    .why-section h2{
        max-width:100% !important;

        font-size:39px !important;
        line-height:1 !important;

        letter-spacing:-1px !important;
    }

    .why-content > p{
        max-width:100% !important;

        font-size:13px !important;
        line-height:1.7 !important;
    }

    .stats-grid{
        display:grid !important;

        grid-template-columns:1fr 1fr !important;

        width:100% !important;

        margin-top:36px !important;
    }

    .stats-grid > div{
        min-height:105px !important;

        padding:20px 10px !important;
    }

    .stats-grid strong{
        font-size:31px !important;
    }

    .stats-grid span{
        font-size:9px !important;
    }


    /* -----------------------------------------------------
       CONTACT
       ----------------------------------------------------- */

    .contact-section{
        padding-top:50px !important;
    }

    .contact-grid{
        grid-template-columns:1fr !important;
    }

    .contact-info{
        padding:32px 24px !important;
    }

    .contact-info h3{
        font-size:25px !important;
    }

    .contact-form-wrap{
        padding:32px 24px !important;
    }

    .form-row{
        grid-template-columns:1fr !important;
    }


    /* Google Map */

    .blue-location-map{
        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        height:auto !important;
    }

    .map-info-panel{
        padding:30px 24px !important;
    }

    .map-frame{
        width:100% !important;
        height:300px !important;
    }

    .map-frame iframe{
        width:100% !important;
        height:100% !important;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .site-footer .footer-grid{
        display:grid !important;

        grid-template-columns:1fr !important;

        gap:32px !important;

        padding:42px 0 36px !important;
    }

    .site-footer .footer-logo img{
        width:150px !important;
    }

    .footer-brand p{
        max-width:100% !important;
    }

    .site-footer .footer-links{
        gap:8px !important;
    }

    .footer-bottom-inner{
        flex-direction:column !important;

        justify-content:center !important;
        align-items:center !important;

        gap:8px !important;

        padding:17px 0 !important;

        text-align:center !important;
    }


    /* -----------------------------------------------------
       SURVEY POPUP
       ----------------------------------------------------- */

    .survey-modal{
        padding:7px !important;
    }

    .survey-modal-dialog{
        width:100% !important;

        height:96svh !important;
        max-height:96svh !important;

        border-radius:8px !important;
    }

    .survey-modal-header{
        min-height:58px !important;

        padding:10px 12px 10px 16px !important;
    }

    .survey-modal-header strong{
        font-size:13px !important;
    }

    .survey-modal-footer{
        padding:8px 14px !important;

        font-size:9px !important;
    }


    /* -----------------------------------------------------
       BACK TO TOP
       ----------------------------------------------------- */

    .back-top{
        width:40px !important;
        height:40px !important;

        right:14px !important;
        bottom:14px !important;
    }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width:380px){

    .container{
        width:calc(100% - 24px) !important;
    }

    .bluegroup-logo{
        width:112px !important;
    }

    .hero-copy-v2 h1{
        font-size:35px !important;
    }

    .section-heading h2{
        font-size:30px !important;
    }

    .about-v2-copy h2{
        font-size:31px !important;
    }

    .why-section h2{
        font-size:34px !important;
    }

    .company-v2-card{
        flex-basis:82% !important;
        width:82% !important;
        min-width:82% !important;
    }

    .service-tab{
        min-width:132px !important;
    }

    .service-copy{
        padding:27px 20px 30px !important;
    }

    .service-copy h3{
        font-size:24px !important;
    }

    .contact-info,
    .contact-form-wrap{
        padding-left:20px !important;
        padding-right:20px !important;
    }

}


/* =========================================================
   MOBILE MENU — FORCE HAMBURGER VISIBLE
   ========================================================= */

@media (max-width:768px){

    .main-header{
        position:absolute !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        z-index:3000 !important;
    }

    .navbar-shell{
        position:relative !important;
        z-index:3001 !important;
    }

    .navbar,
    .main-header:not(.scrolled) .navbar,
    .main-header.scrolled .navbar{
        position:relative !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        width:100% !important;
        height:72px !important;

        padding:0 18px !important;
    }

    .mobile-toggle{
        display:flex !important;

        position:absolute !important;
        top:15px !important;
        right:16px !important;

        z-index:9999 !important;

        width:44px !important;
        height:42px !important;

        flex-direction:column !important;
        justify-content:center !important;
        align-items:center !important;

        gap:6px !important;

        padding:9px !important;

        margin:0 !important;

        border:1px solid rgba(255,255,255,.22) !important;
        border-radius:4px !important;

        background:rgba(4,31,55,.45) !important;

        cursor:pointer !important;

        visibility:visible !important;
        opacity:1 !important;
    }

    .mobile-toggle span{
        display:block !important;

        width:24px !important;
        height:2px !important;

        margin:0 !important;

        background:#ffffff !important;

        border-radius:2px !important;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;
    }

    .blue-original-brand{
        position:relative !important;
        z-index:3002 !important;

        margin-right:65px !important;
    }


    /* OPEN MENU */

    .nav-links,
    .main-header:not(.scrolled) .nav-links,
    .main-header.scrolled .nav-links{
        position:absolute !important;

        top:72px !important;
        left:0 !important;
        right:0 !important;

        z-index:9998 !important;

        width:100% !important;

        display:none !important;

        padding:8px 18px 18px !important;

        background:#061f38 !important;

        box-shadow:0 18px 35px rgba(0,0,0,.32) !important;
    }

    .nav-links.active,
    .main-header:not(.scrolled) .nav-links.active,
    .main-header.scrolled .nav-links.active{
        display:flex !important;
        flex-direction:column !important;
    }

}



/* =========================================================
   BLUE GROUP — GOLD ACCENT THEME
   Replace blue accents with logo gold
   Desktop + Mobile
   ========================================================= */

:root{
    --blue:#C9A84D !important;
    --gold:#C9A84D !important;
    --accent:#C9A84D !important;
}


/* ---------------------------------------------------------
   GENERAL ACCENTS
   --------------------------------------------------------- */

.eyebrow,
.section-heading .eyebrow{
    color:#C9A84D !important;
}

.section-heading h2 span{
    color:#C9A84D !important;
}


/* ---------------------------------------------------------
   HEADER / NAVIGATION
   --------------------------------------------------------- */

.nav-links a.active,
.nav-links a:hover{
    color:#C9A84D !important;
}

.nav-links a.active::after,
.nav-links a:hover::after{
    background:#C9A84D !important;
}

.language-link:hover{
    color:#C9A84D !important;
}

.survey-nav-link{
    color:#C9A84D !important;
}

.survey-nav-link::after{
    background:#C9A84D !important;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero-kicker{
    color:#C9A84D !important;
}

.hero-copy-v2 h1 span{
    color:#C9A84D !important;
}

.hero-main-button span{
    color:#C9A84D !important;
}


/* Slider dots */

.hero-dot.active,
.hero-pagination button.active,
.hero-slider-dot.active{
    background:#C9A84D !important;
    border-color:#C9A84D !important;
}


/* Hero service navigation */

.hero-service-item.active,
.hero-service-button.active,
.hero-bottom-inner button.active{
    color:#C9A84D !important;
}

.hero-service-item.active::after,
.hero-service-button.active::after,
.hero-bottom-inner button.active::after{
    background:#C9A84D !important;
}

.hero-bottom-inner button.active svg,
.hero-bottom-inner button:hover svg{
    color:#C9A84D !important;
    stroke:#C9A84D !important;
}


/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */

.about-v2 h2 span,
.about-v2-copy h2 span{
    color:#C9A84D !important;
}

.about-v2 .eyebrow{
    color:#C9A84D !important;
}


/* ---------------------------------------------------------
   OUR COMPANIES
   --------------------------------------------------------- */

.companies-v2 .eyebrow{
    color:#C9A84D !important;
}

.company-v2-card:hover,
.company-v2-card:focus,
.company-v2-card.is-selected{
    border-color:#C9A84D !important;
}

.company-v2-card::after{
    background:#C9A84D !important;
}


/* Company popup */

.company-popup-eyebrow,
.company-popup-v2 .eyebrow{
    color:#C9A84D !important;
}

.company-popup-v2 #companyPopupSubtitle{
    color:#C9A84D !important;
}

.company-popup-close:hover{
    background:#C9A84D !important;
}


/* ---------------------------------------------------------
   NETWORKS + CERTIFICATES
   --------------------------------------------------------- */

.nc-line,
.nc-heading::after{
    background:#C9A84D !important;
}

.nc-logo-card::after{
    background:#C9A84D !important;
}

.nc-logo-card:hover{
    border-color:#C9A84D !important;
}


/* ---------------------------------------------------------
   OUR SERVICES
   --------------------------------------------------------- */

.services-section .eyebrow{
    color:#C9A84D !important;
}

.services-section .section-heading h2 span{
    color:#C9A84D !important;
}


/* Active service */

.service-tab.active{
    color:#ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(201,168,77,.32),
            rgba(255,255,255,.035)
        ) !important;
}

.service-tab.active::before,
.service-tab.active::after{
    background:#C9A84D !important;
}

.service-tab.active > span{
    color:#C9A84D !important;
}


/* Service content */

.service-copy .eyebrow{
    color:#C9A84D !important;
}

.service-copy h3::after{
    background:#C9A84D !important;
}

.service-copy .text-link{
    color:#C9A84D !important;
}

.service-copy .text-link:hover{
    color:#D8B85A !important;
}


/* Service number */

.service-photo > span{
    background:#C9A84D !important;
    color:#071f36 !important;
}


/* ---------------------------------------------------------
   WHY BLUEGROUP
   --------------------------------------------------------- */

.why-section .eyebrow{
    color:#C9A84D !important;
}

.why-section .eyebrow::before{
    background:#C9A84D !important;
}

.why-section h2 span{
    color:#C9A84D !important;
}

.why-section h2 span::after{
    background:#C9A84D !important;
}

.stats-grid > div::before{
    background:#C9A84D !important;
}

.stats-grid > div:hover strong{
    color:#C9A84D !important;
}


/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.contact-section .eyebrow{
    color:#C9A84D !important;
}

.contact-section .section-heading h2 span{
    color:#C9A84D !important;
}

.contact-item span{
    color:#C9A84D !important;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#C9A84D !important;

    box-shadow:
        0 0 0 3px rgba(201,168,77,.10) !important;
}


/* Contact button */

.contact-form .btn{
    background:#C9A84D !important;
    border-color:#C9A84D !important;
    color:#071f36 !important;
}

.contact-form .btn:hover{
    background:#D8B85A !important;
    border-color:#D8B85A !important;

    box-shadow:
        0 8px 20px rgba(201,168,77,.25) !important;
}


/* ---------------------------------------------------------
   GOOGLE MAP
   --------------------------------------------------------- */

.map-eyebrow{
    color:#C9A84D !important;
}

.map-info-panel h3 span{
    color:#C9A84D !important;
}

.map-direction-btn span{
    color:#C9A84D !important;
}

.map-direction-btn:hover{
    background:#C9A84D !important;
    border-color:#C9A84D !important;
    color:#071f36 !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer::before{
    background:#C9A84D !important;
}

.footer-title::after{
    background:#C9A84D !important;
}

.site-footer .footer-links a:hover{
    color:#C9A84D !important;
}

.footer-contact > a:hover{
    color:#C9A84D !important;
}

.footer-awtad-link:hover strong{
    color:#C9A84D !important;
}


/* ---------------------------------------------------------
   BACK TO TOP
   --------------------------------------------------------- */

.back-top{
    background:#C9A84D !important;
    color:#071f36 !important;
}

.back-top:hover{
    background:#D8B85A !important;
}


/* ---------------------------------------------------------
   SURVEY POPUP
   --------------------------------------------------------- */

.survey-modal-header{
    border-bottom-color:#C9A84D !important;
}

.survey-modal-header span{
    color:#C9A84D !important;
}

.survey-modal-close:hover{
    background:#C9A84D !important;
    border-color:#C9A84D !important;
    color:#071f36 !important;
}

.survey-modal-footer a{
    color:#A88632 !important;
}

.survey-modal-footer a:hover{
    color:#C9A84D !important;
}


/* ---------------------------------------------------------
   MOBILE HAMBURGER — GOLD
   --------------------------------------------------------- */

@media(max-width:768px){

    .mobile-toggle span{
        background:#C9A84D !important;
    }

    .mobile-toggle{
        border-color:rgba(201,168,77,.45) !important;
    }

    .nav-links a:hover,
    .nav-links a.active{
        color:#C9A84D !important;
    }

    .survey-nav-link{
        color:#C9A84D !important;
    }

}


/* ---------------------------------------------------------
   GLOBAL COMMON BLUE ACCENT FALLBACKS
   --------------------------------------------------------- */

.text-blue,
.accent-blue,
.color-blue{
    color:#C9A84D !important;
}

.bg-blue,
.background-blue{
    background-color:#C9A84D !important;
}

.border-blue{
    border-color:#C9A84D !important;
}




/* =========================================================
   OUR COMPANIES — CIRCULAR / ORBIT DESIGN
   ========================================================= */

.companies-orbit-section{
    position:relative !important;
    overflow:hidden !important;

    padding:65px 0 72px !important;

    background:
        radial-gradient(circle at 50% 57%,
        rgba(217,233,242,.70) 0,
        rgba(245,249,252,.92) 38%,
        #f8fbfd 72%) !important;
}


/* Header */

.companies-orbit-header{
    display:grid;

    grid-template-columns:.8fr 1.2fr;

    align-items:end;

    gap:70px;

    margin-bottom:10px;
}

.companies-orbit-title .eyebrow{
    color:#C9A84D !important;
}

.companies-orbit-title h2{
    margin:10px 0 0;

    color:#082d50;

    font-size:42px;
    line-height:.95;

    font-weight:800;
}

.companies-orbit-title h2 span{
    color:#082d50 !important;
}

.companies-gold-line{
    display:block;

    width:52px;
    height:3px;

    margin-top:25px;

    background:#C9A84D;
}

.companies-orbit-header > p{
    max-width:520px;

    margin:0 0 24px;

    color:#60798c;

    font-size:14px;
    line-height:1.7;
}


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

.companies-orbit-stage{
    position:relative;

    width:min(880px,100%);
    height:535px;

    margin:0 auto;
}


/* CENTER */

.companies-orbit-center{
    position:absolute;

    z-index:10;

    top:38px;
    left:50%;

    width:265px;
    height:265px;

    transform:translateX(-50%);

    border-radius:50%;

    padding:12px;

    background:
        rgba(255,255,255,.55);

    box-shadow:
        0 22px 50px rgba(15,55,83,.10);
}

.companies-orbit-center-inner{
    width:100%;
    height:100%;

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

    border-radius:50%;

    background:#fff;

    box-shadow:
        inset 0 0 0 1px rgba(11,52,83,.04);
}

.companies-orbit-center img{
    width:190px;
    height:auto;

    object-fit:contain;
}


/* =========================================================
   COLORED HALF ORBIT
   ========================================================= */

.companies-orbit-ring{
    position:absolute;

    z-index:2;

    top:145px;
    left:50%;

    width:460px;
    height:250px;

    transform:translateX(-50%);

    border-radius:0 0 260px 260px;

    overflow:hidden;

    pointer-events:none;
}

.companies-orbit-ring::before{
    content:"";

    position:absolute;

    left:10px;
    top:-220px;

    width:440px;
    height:440px;

    border-radius:50%;

    background:
        conic-gradient(
            from 215deg,
            #e3b600 0deg 35deg,
            #19b8c5 35deg 72deg,
            #179dd7 72deg 108deg,
            #ec3265 108deg 145deg,
            #8146c5 145deg 180deg,
            transparent 180deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 9px),
            #000 calc(100% - 8px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 9px),
            #000 calc(100% - 8px)
        );
}


/* Orbit dots */

.orbit-dot{
    position:absolute;

    z-index:6;

    width:15px;
    height:15px;

    border-radius:50%;

    background:#fff;

    border:3px solid #C9A84D;

    box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.orbit-dot-1{
    left:247px;
    top:226px;
    border-color:#e3b600;
}

.orbit-dot-2{
    left:335px;
    top:306px;
    border-color:#19b8c5;
}

.orbit-dot-3{
    left:433px;
    top:335px;
    border-color:#179dd7;
}

.orbit-dot-4{
    right:330px;
    top:305px;
    border-color:#ec3265;
}

.orbit-dot-5{
    right:245px;
    top:225px;
    border-color:#8146c5;
}


/* =========================================================
   COMPANY ORBIT CARDS
   ========================================================= */

.company-orbit-card,
.company-orbit-card:hover,
.company-orbit-card:focus,
.company-orbit-card:active{

    position:absolute !important;

    z-index:8;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:245px !important;
    height:155px !important;

    min-width:0 !important;
    min-height:0 !important;

    padding:20px !important;

    margin:0 !important;

    background:#fff !important;

    border:1px solid rgba(21,64,93,.06) !important;

    border-radius:28px 28px 70px 28px !important;

    box-shadow:
        0 18px 35px rgba(25,65,94,.13) !important;

    cursor:pointer;

    overflow:hidden;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease !important;
}


/* Prevent old card rules */

.company-orbit-card::before,
.company-orbit-card::after{
    display:none !important;
}


.company-orbit-card img{
    width:auto !important;
    height:auto !important;

    max-width:84% !important;
    max-height:90px !important;

    object-fit:contain !important;

    transform:none !important;

    filter:none !important;

    transition:transform .35s ease !important;
}


/* Positioning */

.company-orbit-barco{
    left:20px !important;
    top:150px !important;

    transform:rotate(8deg) !important;
}

.company-orbit-barco img{
    transform:rotate(-8deg) !important;
}


.company-orbit-eagle{
    left:92px !important;
    top:330px !important;

    transform:rotate(18deg) !important;
}

.company-orbit-eagle img{
    transform:rotate(-18deg) !important;
}


.company-orbit-boat{
    left:50% !important;
    top:370px !important;

    width:285px !important;
    height:145px !important;

    transform:translateX(-50%) !important;

    border-radius:35px 35px 65px 65px !important;
}


.company-orbit-tower{
    right:92px !important;
    top:330px !important;

    transform:rotate(-18deg) !important;
}

.company-orbit-tower img{
    transform:rotate(18deg) !important;
}


.company-orbit-sailboat{
    right:20px !important;
    top:150px !important;

    transform:rotate(-8deg) !important;
}

.company-orbit-sailboat img{
    transform:rotate(8deg) !important;
}


/* Hover */

.company-orbit-barco:hover{
    transform:rotate(8deg) translateY(-7px) scale(1.03) !important;
}

.company-orbit-eagle:hover{
    transform:rotate(18deg) translateY(-7px) scale(1.03) !important;
}

.company-orbit-boat:hover{
    transform:translateX(-50%) translateY(-7px) scale(1.03) !important;
}

.company-orbit-tower:hover{
    transform:rotate(-18deg) translateY(-7px) scale(1.03) !important;
}

.company-orbit-sailboat:hover{
    transform:rotate(-8deg) translateY(-7px) scale(1.03) !important;
}


.company-orbit-card:hover{
    border-color:rgba(201,168,77,.65) !important;

    box-shadow:
        0 23px 45px rgba(25,65,94,.19) !important;
}


.company-orbit-barco:hover img{
    transform:rotate(-8deg) scale(1.07) !important;
}

.company-orbit-eagle:hover img{
    transform:rotate(-18deg) scale(1.07) !important;
}

.company-orbit-boat:hover img{
    transform:scale(1.07) !important;
}

.company-orbit-tower:hover img{
    transform:rotate(18deg) scale(1.07) !important;
}

.company-orbit-sailboat:hover img{
    transform:rotate(8deg) scale(1.07) !important;
}


/* Note */

.company-orbit-note{
    margin-top:7px !important;

    text-align:center;

    color:#5e778a;

    font-size:12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .companies-orbit-header{
        grid-template-columns:1fr;

        gap:16px;
    }

    .companies-orbit-header > p{
        margin-bottom:10px;
    }

    .companies-orbit-stage{
        transform:scale(.84);
        transform-origin:top center;

        margin-bottom:-80px;
    }

}


/* =========================================================
   MOBILE
   Maintain circular concept
   ========================================================= */

@media(max-width:600px){

    .companies-orbit-section{
        padding:48px 0 50px !important;
    }

    .companies-orbit-title h2{
        font-size:34px !important;
    }

    .companies-orbit-stage{
        width:700px !important;
        height:520px !important;

        left:50%;

        margin-left:-350px !important;
        margin-bottom:-165px !important;

        transform:scale(.57) !important;
        transform-origin:top center !important;
    }

    .companies-orbit-center{
        top:35px;
    }

    .company-orbit-note{
        margin-top:0 !important;

        font-size:11px;
    }

}


/* Extra small */

@media(max-width:380px){

    .companies-orbit-stage{
        transform:scale(.51) !important;

        margin-bottom:-195px !important;
    }

}



/* =========================================================
   OUR COMPANIES — ORIGINAL IMAGE DESIGN
   ========================================================= */

.companies-image-orbit{
    position:relative !important;
    overflow:hidden !important;

    padding:58px 0 62px !important;

    background:#fff !important;
}


/* Header */

.companies-image-header{
    text-align:center;

    margin-bottom:5px;
}

.companies-image-header .eyebrow{
    display:block;

    margin-bottom:10px;

    color:#C9A84D !important;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;
}

.companies-image-header h2{
    margin:0;

    color:#082d50;

    font-size:38px;
    line-height:1.05;

    font-weight:700;
}

.companies-image-header h2 span{
    color:#C9A84D !important;
}

.companies-image-header p{
    margin:19px auto 0;

    max-width:670px;

    color:#536f84;

    font-size:13px;
    line-height:1.6;
}


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

.companies-image-stage{
    position:relative;

    width:760px;
    height:455px;

    margin:15px auto 0;
}


/* =========================================================
   CENTER IMAGE
   ========================================================= */

.company-image-center{
    position:absolute;

    z-index:2;

    top:0;
    left:50%;

    width:100%;
    height:100%;

    transform:translateX(-50%);

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

    pointer-events:none;
}

.company-image-center img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================================
   CLICKABLE COMPANY IMAGES
   ========================================================= */

.company-image-item,
.company-image-item:hover,
.company-image-item:focus,
.company-image-item:active{

    position:absolute !important;

    z-index:10;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;
    outline:0 !important;

    box-shadow:none !important;

    cursor:pointer;

    overflow:visible !important;

    transition:
        transform .32s cubic-bezier(.22,.61,.36,1),
        filter .32s ease !important;
}


.company-image-item::before,
.company-image-item::after{
    display:none !important;
}


.company-image-item img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;

    transform:none !important;

    filter:
        drop-shadow(0 10px 12px rgba(23,52,75,.10));

    transition:
        transform .32s cubic-bezier(.22,.61,.36,1),
        filter .32s ease !important;
}


/* =========================================================
   POSITIONS
   Adjust only these if needed
   ========================================================= */


/* BluBarco - upper left */
.company-image-barco{
    width:205px !important;
    height:175px !important;

    left:14px !important;
    top:112px !important;
}


/* Blue Eagle - bottom left */
.company-image-eagle{
    width:220px !important;
    height:180px !important;

    left:90px !important;
    top:265px !important;
}


/* BlueBoat - bottom center */
.company-image-boat{
    width:245px !important;
    height:155px !important;

    left:50% !important;
    top:302px !important;

    transform:translateX(-50%) !important;
}


/* Blue Tower - bottom right */
.company-image-tower{
    width:220px !important;
    height:180px !important;

    right:90px !important;
    top:265px !important;
}


/* Blue Sailboat - upper right */
.company-image-sailboat{
    width:205px !important;
    height:175px !important;

    right:14px !important;
    top:112px !important;
}


/* =========================================================
   HOVER MOTION
   ========================================================= */

.company-image-barco:hover{
    transform:translateY(-7px) scale(1.035) !important;
}

.company-image-eagle:hover{
    transform:translateY(-7px) scale(1.035) !important;
}

.company-image-boat:hover{
    transform:
        translateX(-50%)
        translateY(-7px)
        scale(1.035) !important;
}

.company-image-tower:hover{
    transform:translateY(-7px) scale(1.035) !important;
}

.company-image-sailboat:hover{
    transform:translateY(-7px) scale(1.035) !important;
}


.company-image-item:hover img{
    filter:
        drop-shadow(0 16px 18px rgba(23,52,75,.20)) !important;
}


/* Note */

.company-image-note{
    margin-top:4px;

    text-align:center;

    color:#637b8d;

    font-size:11px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .companies-image-stage{
        transform:scale(.82);

        transform-origin:top center;

        margin-bottom:-80px;
    }

}


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

@media(max-width:600px){

    .companies-image-orbit{
        padding:45px 0 48px !important;
    }

    .companies-image-header h2{
        font-size:31px !important;
    }

    .companies-image-header p{
        padding:0 10px;

        font-size:12px;
    }

    .companies-image-stage{
        width:760px !important;
        height:455px !important;

        position:relative;

        left:50%;

        margin-left:-380px !important;
        margin-top:20px !important;
        margin-bottom:-175px !important;

        transform:scale(.56) !important;

        transform-origin:top center !important;
    }

    .company-image-note{
        margin-top:0;

        font-size:10px;
    }

}


@media(max-width:380px){

    .companies-image-stage{
        transform:scale(.50) !important;

        margin-bottom:-200px !important;
    }

}



/* =========================================================
   OUR COMPANIES — FINAL ORIGINAL IMAGE LAYOUT
   ========================================================= */

.companies-final-orbit{
    position:relative !important;
    overflow:hidden !important;

    padding:55px 0 60px !important;

    background:#fff !important;
}


/* HEADER */

.companies-final-header{
    text-align:center !important;
}

.companies-final-header .eyebrow{
    display:block;

    margin-bottom:10px;

    color:#C9A84D !important;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;
}

.companies-final-header h2{
    margin:0 !important;

    color:#082d50 !important;

    font-size:38px !important;
    line-height:1.05 !important;

    font-weight:700 !important;
}

.companies-final-header h2 span{
    color:#C9A84D !important;
}

.companies-final-header p{
    max-width:700px;

    margin:20px auto 0 !important;

    color:#536f84;

    font-size:13px;
    line-height:1.65;
}


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

.companies-final-stage{
    position:relative;

    width:780px;
    height:450px;

    margin:20px auto 0;
}


/* =========================================================
   CENTER
   ========================================================= */

.companies-final-center{
    position:absolute;

    z-index:5;

    top:0;
    left:50%;

    width:245px;
    height:245px;

    transform:translateX(-50%);

    pointer-events:none !important;
}

.companies-final-center img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    pointer-events:none !important;
}


/* =========================================================
   COMPANY BUTTON RESET
   This fixes shaking and clicking
   ========================================================= */

.companies-final-stage .company-final-item,
.companies-final-stage .company-final-item:hover,
.companies-final-stage .company-final-item:focus,
.companies-final-stage .company-final-item:focus-visible,
.companies-final-stage .company-final-item:active{

    position:absolute !important;

    z-index:20 !important;

    display:block !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    overflow:visible !important;

    cursor:pointer !important;

    opacity:1 !important;
    visibility:visible !important;

    /* IMPORTANT — no movement on button */
    transform:none !important;

    transition:none !important;

    pointer-events:auto !important;
}


/* Kill all old pseudo effects */

.companies-final-stage .company-final-item::before,
.companies-final-stage .company-final-item::after{
    content:none !important;
    display:none !important;
}


/* Images */

.companies-final-stage .company-final-item img{

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;

    object-fit:contain !important;

    transform:scale(1) !important;

    transform-origin:center !important;

    filter:none !important;

    transition:
        transform .28s ease,
        filter .28s ease !important;

    pointer-events:none !important;
}


/* Only image zooms — button never moves */

.companies-final-stage .company-final-item:hover img{
    transform:scale(1.035) !important;

    filter:
        drop-shadow(0 12px 13px rgba(18,54,80,.14)) !important;
}


/* =========================================================
   POSITIONS — LEFT TO RIGHT
   ========================================================= */


/* 1 — BluBarco */

.company-final-1{
    left:30px !important;
    top:135px !important;

    width:205px !important;
    height:190px !important;
}


/* 2 — Blue Eagle */

.company-final-2{
    left:145px !important;
    top:275px !important;

    width:205px !important;
    height:170px !important;
}


/* 3 — BlueBoat */

.company-final-3{
    left:50% !important;
    top:305px !important;

    width:220px !important;
    height:145px !important;

    margin-left:-110px !important;
}


/* 4 — Blue Tower */

.company-final-4{
    right:145px !important;
    top:275px !important;

    width:205px !important;
    height:170px !important;
}


/* 5 — Blue Sailboat */

.company-final-5{
    right:30px !important;
    top:135px !important;

    width:205px !important;
    height:190px !important;
}


/* =========================================================
   CLICK NOTE
   ========================================================= */

.companies-final-note{
    margin-top:8px;

    text-align:center;

    color:#637b8d;

    font-size:11px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

    .companies-final-stage{
        transform:scale(.82);

        transform-origin:top center;

        margin-bottom:-75px;
    }

}


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

@media(max-width:600px){

    .companies-final-orbit{
        padding:45px 0 48px !important;
    }

    .companies-final-header h2{
        font-size:31px !important;
    }

    .companies-final-header p{
        padding:0 12px;

        font-size:11px;
    }

    .companies-final-stage{
        width:780px !important;
        height:450px !important;

        left:50%;

        margin-left:-390px !important;
        margin-top:22px !important;
        margin-bottom:-170px !important;

        transform:scale(.56) !important;

        transform-origin:top center !important;
    }

    .companies-final-note{
        margin-top:0;

        font-size:10px;
    }

}


@media(max-width:380px){

    .companies-final-stage{
        transform:scale(.50) !important;

        margin-bottom:-195px !important;
    }

}



/* =========================================================
   OUR COMPANIES — FINAL POSITION + NO JITTER FIX
   ========================================================= */


/* ---------------------------------------------------------
   FORCE ALL COMPANY ITEMS TO STAY FIXED
   --------------------------------------------------------- */

.companies-final-stage .company-final-item,
.companies-final-stage .company-final-item:hover,
.companies-final-stage .company-final-item:focus,
.companies-final-stage .company-final-item:focus-visible,
.companies-final-stage .company-final-item:active{

    position:absolute !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;
    outline:0 !important;

    box-shadow:none !important;

    border-radius:0 !important;

    transform:none !important;

    transition:none !important;

    animation:none !important;

    overflow:visible !important;

    cursor:pointer !important;

    z-index:20 !important;
}


/* Kill ALL old hover/focus effects */

.companies-final-stage .company-final-item::before,
.companies-final-stage .company-final-item::after,
.companies-final-stage .company-final-item:hover::before,
.companies-final-stage .company-final-item:hover::after,
.companies-final-stage .company-final-item:focus::before,
.companies-final-stage .company-final-item:focus::after{

    display:none !important;
    content:none !important;
}


/* ---------------------------------------------------------
   IMAGE — NO SCALE / NO MOVEMENT
   --------------------------------------------------------- */

.companies-final-stage .company-final-item img,
.companies-final-stage .company-final-item:hover img,
.companies-final-stage .company-final-item:focus img,
.companies-final-stage .company-final-item:active img{

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;

    margin:0 !important;

    transform:none !important;

    animation:none !important;

    transition:filter .25s ease !important;

    pointer-events:none !important;
}


/* Hover = shadow only */

.companies-final-stage .company-final-item:hover img{

    transform:none !important;

    filter:
        drop-shadow(
            0 13px 12px
            rgba(15,45,70,.16)
        ) !important;
}


/* =========================================================
   FINAL DESKTOP POSITIONS
   ========================================================= */


/* 1 — BluBarco */

.companies-final-stage .company-final-1{

    left:35px !important;
    right:auto !important;

    top:132px !important;

    width:205px !important;
    height:190px !important;
}


/* 2 — Blue Eagle */

.companies-final-stage .company-final-2{

    left:150px !important;
    right:auto !important;

    top:276px !important;

    width:205px !important;
    height:170px !important;
}


/* 3 — BlueBoat
   shifted slightly LEFT
*/

.companies-final-stage .company-final-3{

    left:285px !important;
    right:auto !important;

    top:302px !important;

    width:220px !important;
    height:145px !important;

    margin:0 !important;

    transform:none !important;
}


/* 4 — Blue Tower
   shifted slightly RIGHT
*/

.companies-final-stage .company-final-4{

    left:auto !important;
    right:105px !important;

    top:276px !important;

    width:205px !important;
    height:170px !important;

    transform:none !important;
}


/* 5 — Blue Sailboat */

.companies-final-stage .company-final-5{

    left:auto !important;
    right:35px !important;

    top:132px !important;

    width:205px !important;
    height:190px !important;
}


/* ---------------------------------------------------------
   Ensure center artwork never blocks clicks
   --------------------------------------------------------- */

.companies-final-center,
.companies-final-center img{

    pointer-events:none !important;

    z-index:5 !important;
}


/* =========================================================
   MOBILE — KEEP SAME ARRANGEMENT
   ========================================================= */

@media(max-width:600px){

    .companies-final-stage .company-final-1{
        left:35px !important;
        top:132px !important;
    }

    .companies-final-stage .company-final-2{
        left:150px !important;
        top:276px !important;
    }

    .companies-final-stage .company-final-3{
        left:285px !important;
        top:302px !important;
    }

    .companies-final-stage .company-final-4{
        left:auto !important;
        right:105px !important;
        top:276px !important;
    }

    .companies-final-stage .company-final-5{
        left:auto !important;
        right:35px !important;
        top:132px !important;
    }

}



/* =========================================================
   OUR COMPANIES — FINAL POSITION + NO JITTER FIX
   ========================================================= */


/* ---------------------------------------------------------
   FORCE ALL COMPANY ITEMS TO STAY FIXED
   --------------------------------------------------------- */

.companies-final-stage .company-final-item,
.companies-final-stage .company-final-item:hover,
.companies-final-stage .company-final-item:focus,
.companies-final-stage .company-final-item:focus-visible,
.companies-final-stage .company-final-item:active{

    position:absolute !important;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;

    border:0 !important;
    outline:0 !important;

    box-shadow:none !important;

    border-radius:0 !important;

    transform:none !important;

    transition:none !important;

    animation:none !important;

    overflow:visible !important;

    cursor:pointer !important;

    z-index:20 !important;
}


/* Kill ALL old hover/focus effects */

.companies-final-stage .company-final-item::before,
.companies-final-stage .company-final-item::after,
.companies-final-stage .company-final-item:hover::before,
.companies-final-stage .company-final-item:hover::after,
.companies-final-stage .company-final-item:focus::before,
.companies-final-stage .company-final-item:focus::after{

    display:none !important;
    content:none !important;
}


/* ---------------------------------------------------------
   IMAGE — NO SCALE / NO MOVEMENT
   --------------------------------------------------------- */

.companies-final-stage .company-final-item img,
.companies-final-stage .company-final-item:hover img,
.companies-final-stage .company-final-item:focus img,
.companies-final-stage .company-final-item:active img{

    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:contain !important;

    margin:0 !important;

    transform:none !important;

    animation:none !important;

    transition:filter .25s ease !important;

    pointer-events:none !important;
}


/* Hover = shadow only */

.companies-final-stage .company-final-item:hover img{

    transform:none !important;

    filter:
        drop-shadow(
            0 13px 12px
            rgba(15,45,70,.16)
        ) !important;
}


/* =========================================================
   FINAL DESKTOP POSITIONS
   ========================================================= */


/* 1 — BluBarco */

.companies-final-stage .company-final-1{

    left:35px !important;
    right:auto !important;

    top:132px !important;

    width:205px !important;
    height:190px !important;
}


/* 2 — Blue Eagle */

.companies-final-stage .company-final-2{

    left:150px !important;
    right:auto !important;

    top:276px !important;

    width:205px !important;
    height:170px !important;
}


/* 3 — BlueBoat
   shifted slightly LEFT
*/

.companies-final-stage .company-final-3{

    left:285px !important;
    right:auto !important;

    top:302px !important;

    width:220px !important;
    height:145px !important;

    margin:0 !important;

    transform:none !important;
}


/* 4 — Blue Tower
   shifted slightly RIGHT
*/

.companies-final-stage .company-final-4{

    left:auto !important;
    right:105px !important;

    top:276px !important;

    width:205px !important;
    height:170px !important;

    transform:none !important;
}


/* 5 — Blue Sailboat */

.companies-final-stage .company-final-5{

    left:auto !important;
    right:35px !important;

    top:132px !important;

    width:205px !important;
    height:190px !important;
}


/* ---------------------------------------------------------
   Ensure center artwork never blocks clicks
   --------------------------------------------------------- */

.companies-final-center,
.companies-final-center img{

    pointer-events:none !important;

    z-index:5 !important;
}


/* =========================================================
   MOBILE — KEEP SAME ARRANGEMENT
   ========================================================= */

@media(max-width:600px){

    .companies-final-stage .company-final-1{
        left:35px !important;
        top:132px !important;
    }

    .companies-final-stage .company-final-2{
        left:150px !important;
        top:276px !important;
    }

    .companies-final-stage .company-final-3{
        left:285px !important;
        top:302px !important;
    }

    .companies-final-stage .company-final-4{
        left:auto !important;
        right:105px !important;
        top:276px !important;
    }

    .companies-final-stage .company-final-5{
        left:auto !important;
        right:35px !important;
        top:132px !important;
    }

}


/* =========================================================
   OUR COMPANIES — OLD SITE SPACING MATCH
   Final desktop alignment
   ========================================================= */

@media (min-width:901px){

    .companies-final-stage{
        width:900px !important;
        height:500px !important;

        margin-top:18px !important;
    }


    /* CENTER */

    .companies-final-center{
        top:8px !important;

        width:250px !important;
        height:250px !important;
    }


    /* -----------------------------------------------------
       1 — BluBarco
       more outward / slightly higher
       ----------------------------------------------------- */

    .companies-final-stage .company-final-1{
        left:55px !important;
        top:135px !important;

        width:205px !important;
        height:190px !important;
    }


    /* -----------------------------------------------------
       2 — Blue Eagle
       lower-left
       ----------------------------------------------------- */

    .companies-final-stage .company-final-2{
        left:165px !important;
        top:315px !important;

        width:205px !important;
        height:165px !important;
    }


    /* -----------------------------------------------------
       3 — BlueBoat
       true bottom-center
       ----------------------------------------------------- */

    .companies-final-stage .company-final-3{
        left:50% !important;
        top:348px !important;

        width:230px !important;
        height:145px !important;

        margin-left:-115px !important;
    }


    /* -----------------------------------------------------
       4 — Blue Tower
       lower-right
       ----------------------------------------------------- */

    .companies-final-stage .company-final-4{
        right:165px !important;
        left:auto !important;

        top:315px !important;

        width:205px !important;
        height:165px !important;
    }


    /* -----------------------------------------------------
       5 — Blue Sailboat
       more outward / slightly higher
       ----------------------------------------------------- */

    .companies-final-stage .company-final-5{
        right:55px !important;
        left:auto !important;

        top:135px !important;

        width:205px !important;
        height:190px !important;
    }


    /* -----------------------------------------------------
       NO SHAKE / NO MOVE
       ----------------------------------------------------- */

    .companies-final-stage .company-final-item,
    .companies-final-stage .company-final-item:hover,
    .companies-final-stage .company-final-item:focus,
    .companies-final-stage .company-final-item:active{
        transform:none !important;
        transition:none !important;
    }

    .companies-final-stage .company-final-item img,
    .companies-final-stage .company-final-item:hover img,
    .companies-final-stage .company-final-item:focus img,
    .companies-final-stage .company-final-item:active img{
        transform:none !important;
        transition:filter .22s ease !important;
    }

    .companies-final-stage .company-final-item:hover img{
        filter:drop-shadow(
            0 12px 14px rgba(15,45,70,.15)
        ) !important;
    }


    /* NOTE */

    .companies-final-note{
        margin-top:2px !important;
    }

}


/* =========================================================
   OUR COMPANIES — EXACT COMPACT LAYOUT
   Old website proportions + separated clickable areas
   ========================================================= */

@media (min-width:901px){

    /* Main artwork size */
    .companies-final-stage{
        position:relative !important;

        width:700px !important;
        height:430px !important;

        margin:18px auto 0 !important;

        transform:none !important;
    }


    /* =====================================================
       CENTER BLUE GROUP
       ===================================================== */

    .companies-final-center{
        position:absolute !important;

        top:0 !important;
        left:50% !important;

        width:220px !important;
        height:220px !important;

        margin:0 !important;

        transform:translateX(-50%) !important;

        z-index:5 !important;

        pointer-events:none !important;
    }

    .companies-final-center img{
        width:100% !important;
        height:100% !important;

        object-fit:contain !important;

        pointer-events:none !important;

        transform:none !important;
    }


    /* =====================================================
       COMPLETE BUTTON RESET
       ===================================================== */

    .companies-final-stage .company-final-item,
    .companies-final-stage .company-final-item:hover,
    .companies-final-stage .company-final-item:focus,
    .companies-final-stage .company-final-item:focus-visible,
    .companies-final-stage .company-final-item:active{

        position:absolute !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;
        outline:0 !important;

        border-radius:0 !important;

        background:transparent !important;

        box-shadow:none !important;

        overflow:hidden !important;

        opacity:1 !important;
        visibility:visible !important;

        cursor:pointer !important;

        pointer-events:auto !important;

        transform:none !important;

        transition:none !important;
        animation:none !important;

        z-index:20 !important;
    }


    .companies-final-stage .company-final-item::before,
    .companies-final-stage .company-final-item::after{
        display:none !important;
        content:none !important;
    }


    /* =====================================================
       IMAGE RESET
       Important: image cannot capture mouse
       ===================================================== */

    .companies-final-stage .company-final-item img,
    .companies-final-stage .company-final-item:hover img,
    .companies-final-stage .company-final-item:focus img,
    .companies-final-stage .company-final-item:active img{

        display:block !important;

        width:100% !important;
        height:100% !important;

        max-width:none !important;
        max-height:none !important;

        margin:0 !important;
        padding:0 !important;

        object-fit:contain !important;

        transform:none !important;

        transition:none !important;
        animation:none !important;

        filter:none !important;

        pointer-events:none !important;

        user-select:none !important;

        -webkit-user-drag:none !important;
    }


    /* Hover = opacity only.
       No transform, no scaling, no movement */
    .companies-final-stage .company-final-item:hover img{
        opacity:.92 !important;
        transform:none !important;
    }


    /* =====================================================
       FINAL POSITIONS
       Areas DO NOT overlap
       ===================================================== */


    /* 01 — BluBarco
       Upper left */

    .companies-final-stage .company-final-1{
        left:0 !important;
        right:auto !important;

        top:118px !important;

        width:165px !important;
        height:165px !important;
    }


    /* 02 — Blue Eagle
       Lower left */

    .companies-final-stage .company-final-2{
        left:100px !important;
        right:auto !important;

        top:270px !important;

        width:165px !important;
        height:145px !important;
    }


    /* 03 — BlueBoat
       Bottom center
       completely independent click zone */

    .companies-final-stage .company-final-3{
        left:265px !important;
        right:auto !important;

        top:300px !important;

        width:170px !important;
        height:115px !important;

        margin:0 !important;

        z-index:30 !important;
    }


    /* 04 — Blue Tower
       Lower right */

    .companies-final-stage .company-final-4{
        left:435px !important;
        right:auto !important;

        top:270px !important;

        width:165px !important;
        height:145px !important;
    }


    /* 05 — Blue Sailboat
       Upper right */

    .companies-final-stage .company-final-5{
        left:535px !important;
        right:auto !important;

        top:118px !important;

        width:165px !important;
        height:165px !important;
    }


    /* =====================================================
       CLICK NOTE
       ===================================================== */

    .companies-final-note{
        margin-top:0 !important;

        font-size:11px !important;

        text-align:center !important;
    }

}


/* =========================================================
   OUR COMPANIES — LOGO SIZE ADJUSTMENTS
   ========================================================= */

@media (min-width:901px){

    /* CENTER — +50% */
    .companies-final-center{
        width:330px !important;
        height:330px !important;

        top:-55px !important;
    }

    /* 02 — Blue Eagle +10% */
    .companies-final-stage .company-final-2{
        width:182px !important;
        height:160px !important;

        left:92px !important;
        top:262px !important;
    }

    /* 03 — BlueBoat +25% */
    .companies-final-stage .company-final-3{
        width:213px !important;
        height:144px !important;

        left:244px !important;
        top:286px !important;
    }

    /* 04 — Blue Tower +10% */
    .companies-final-stage .company-final-4{
        width:182px !important;
        height:160px !important;

        left:426px !important;
        top:262px !important;
    }

}


/* =========================================================
   OUR COMPANIES — FINAL EXTRA LOGO SIZE UPDATE
   Current state adjustments
   ========================================================= */

@media (min-width:901px){

    /* Blue Eagle — additional +10% */
    .companies-final-stage .company-final-2{
        width:200px !important;
        height:176px !important;
    }

    /* BlueBoat — additional +5% */
    .companies-final-stage .company-final-3{
        width:224px !important;
        height:151px !important;
    }

    /* Blue Tower — additional +10% */
    .companies-final-stage .company-final-4{
        width:200px !important;
        height:176px !important;
    }

}

/* Keep clickable areas stable and prevent hover shaking */
.companies-final-stage .company-final-item{
    transition:none !important;
}

.companies-final-stage .company-final-item:hover{
    transform:none !important;
}

.companies-final-stage .company-final-item img{
    transition:filter .25s ease !important;
    transform:none !important;
}

.companies-final-stage .company-final-item:hover img{
    transform:none !important;
    filter:brightness(1.03) !important;
}


/* =========================================================
   OUR COMPANIES — POSITION ADJUSTMENTS ONLY
   ========================================================= */

@media (min-width:901px){

    /* Blue Eagle — move left + up */
    .companies-final-stage .company-final-2{
        left:74px !important;
        top:244px !important;
    }

    /* BlueBoat — move down about 30px */
    .companies-final-stage .company-final-3{
        top:330px !important;
    }

    /* Blue Tower — move right + up */
    .companies-final-stage .company-final-4{
        left:453px !important;
        top:244px !important;
    }

}

/* Keep hover stable */
.companies-final-stage .company-final-item,
.companies-final-stage .company-final-item:hover,
.companies-final-stage .company-final-item:focus,
.companies-final-stage .company-final-item:active{
    transform:none !important;
    transition:none !important;
}

.companies-final-stage .company-final-item img,
.companies-final-stage .company-final-item:hover img{
    transform:none !important;
}


/* =========================================================
   BLUEBOAT — MOVE UP 15PX ONLY
   ========================================================= */

@media (min-width:901px){

    .companies-final-stage .company-final-3{
        top:315px !important;
    }

}


/* =========================================================
   OUR COMPANIES — FINAL SECTION SPACING & ALIGNMENT
   Do NOT change current company logo sizes/positions
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:901px){

    /* Whole section */
    .companies-final-orbit{
        position:relative !important;

        padding-top:42px !important;
        padding-bottom:55px !important;

        min-height:690px !important;

        overflow:hidden !important;

        background:#fff !important;
    }


    /* Header block */
    .companies-final-header{
        position:relative !important;

        margin:0 auto !important;
        padding:0 !important;

        text-align:center !important;
    }


    .companies-final-header .eyebrow{
        display:block !important;

        margin:0 0 11px !important;

        color:#C9A84D !important;

        font-size:10px !important;
        font-weight:800 !important;

        line-height:1 !important;

        letter-spacing:2.2px !important;
    }


    .companies-final-header h2{
        margin:0 !important;
        padding:0 !important;

        color:#082d50 !important;

        font-size:39px !important;
        line-height:1 !important;

        font-weight:800 !important;

        letter-spacing:-1px !important;
    }


    .companies-final-header h2 span{
        color:#C9A84D !important;
    }


    /* Description */
    .companies-final-header p{
        width:100% !important;
        max-width:680px !important;

        margin:22px auto 0 !important;

        padding:0 !important;

        color:#587489 !important;

        font-size:12px !important;
        line-height:1.65 !important;

        text-align:center !important;
    }


    /* =====================================================
       COMPANY ARTWORK AREA
       Keep existing individual logo positions
       ===================================================== */

    .companies-final-stage{
        position:relative !important;

        width:700px !important;

        /* increased so BlueBoat no longer touches note */
        height:475px !important;

        margin:8px auto 0 !important;

        padding:0 !important;

        left:auto !important;
        right:auto !important;

        transform:none !important;

        overflow:visible !important;
    }


    /* Keep complete diagram horizontally centered */
    .companies-final-center{
        margin-left:0 !important;
    }


    /* =====================================================
       CLICK NOTE
       ===================================================== */

    .companies-final-note{
        position:relative !important;

        display:block !important;

        clear:both !important;

        width:100% !important;

        margin:2px auto 0 !important;

        padding:0 !important;

        color:#607b8e !important;

        font-size:10px !important;
        font-weight:400 !important;

        line-height:1.4 !important;

        text-align:center !important;

        z-index:2 !important;
    }


    /* =====================================================
       STABILITY
       No element movement on hover
       ===================================================== */

    .companies-final-stage .company-final-item,
    .companies-final-stage .company-final-item:hover,
    .companies-final-stage .company-final-item:focus,
    .companies-final-stage .company-final-item:active{

        transform:none !important;

        animation:none !important;
        transition:none !important;

        cursor:pointer !important;
    }


    .companies-final-stage .company-final-item img,
    .companies-final-stage .company-final-item:hover img,
    .companies-final-stage .company-final-item:focus img,
    .companies-final-stage .company-final-item:active img{

        transform:none !important;

        animation:none !important;

        pointer-events:none !important;
    }


    /* Very subtle feedback only */
    .companies-final-stage .company-final-item:hover img{
        opacity:.96 !important;

        filter:
            drop-shadow(
                0 8px 10px
                rgba(14,48,72,.10)
            ) !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:601px) and (max-width:900px){

    .companies-final-orbit{
        padding-top:45px !important;
        padding-bottom:45px !important;
    }

    .companies-final-header h2{
        font-size:35px !important;
    }

    .companies-final-header p{
        max-width:570px !important;

        margin-top:18px !important;

        font-size:12px !important;
    }

    .companies-final-stage{
        margin-top:15px !important;
    }

}


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

@media (max-width:600px){

    .companies-final-orbit{
        padding-top:42px !important;
        padding-bottom:42px !important;

        min-height:0 !important;
    }


    .companies-final-header{
        margin:0 auto !important;

        padding:0 6px !important;
    }


    .companies-final-header .eyebrow{
        margin-bottom:9px !important;

        font-size:9px !important;
    }


    .companies-final-header h2{
        font-size:30px !important;
        line-height:1.03 !important;
    }


    .companies-final-header p{
        max-width:330px !important;

        margin:17px auto 0 !important;

        padding:0 !important;

        font-size:10.5px !important;
        line-height:1.6 !important;
    }


    .companies-final-stage{
        margin-top:18px !important;
    }


    .companies-final-note{
        position:relative !important;

        margin-top:10px !important;

        font-size:9px !important;

        text-align:center !important;
    }

}


/* =========================================================
   OUR COMPANIES — HEADER AREA FINAL TUNING
   ========================================================= */

@media (min-width:901px){

    .companies-final-header{
        max-width:850px !important;

        margin:0 auto 0 !important;
        padding:0 !important;

        text-align:center !important;
    }

    /* Small title */
    .companies-final-header .eyebrow{
        display:block !important;

        margin:0 0 12px !important;

        color:#C9A84D !important;

        font-size:9px !important;
        line-height:1 !important;

        font-weight:800 !important;
        letter-spacing:2.3px !important;
    }

    /* Main heading */
    .companies-final-header h2{
        margin:0 !important;
        padding:0 !important;

        color:#082D50 !important;

        font-size:37px !important;
        line-height:.98 !important;

        font-weight:800 !important;
        letter-spacing:-1.2px !important;
    }

    .companies-final-header h2 span{
        color:#C9A84D !important;
    }

    /* Description */
    .companies-final-header p{
        max-width:650px !important;

        margin:18px auto 0 !important;
        padding:0 !important;

        color:#587489 !important;

        font-size:11.5px !important;
        line-height:1.55 !important;

        font-weight:400 !important;

        text-align:center !important;
    }

    /* Pull the diagram a little closer to header */
    .companies-final-stage{
        margin-top:-6px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:601px) and (max-width:900px){

    .companies-final-header .eyebrow{
        font-size:9px !important;
        margin-bottom:10px !important;
    }

    .companies-final-header h2{
        font-size:33px !important;
    }

    .companies-final-header p{
        max-width:540px !important;

        margin-top:16px !important;

        font-size:11px !important;
    }

}


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

@media (max-width:600px){

    .companies-final-header{
        padding:0 10px !important;
    }

    .companies-final-header .eyebrow{
        font-size:8px !important;

        margin-bottom:8px !important;
    }

    .companies-final-header h2{
        font-size:28px !important;

        line-height:1.02 !important;
    }

    .companies-final-header p{
        max-width:320px !important;

        margin-top:14px !important;

        font-size:10px !important;
        line-height:1.55 !important;
    }

    .companies-final-stage{
        margin-top:10px !important;
    }

}


/* =========================================================
   OUR COMPANIES — FIX DESCRIPTION OVERLAP
   Move artwork down only
   ========================================================= */

@media (min-width:901px){

    .companies-final-stage{
        margin-top:32px !important;
    }

}

@media (min-width:601px) and (max-width:900px){

    .companies-final-stage{
        margin-top:28px !important;
    }

}

@media (max-width:600px){

    .companies-final-stage{
        margin-top:24px !important;
    }

}



/* =========================================================
   CERTIFICATES — CLICKABLE
   ========================================================= */

.nc-certificate-grid .nc-logo-card.certificate-clickable{
    cursor:pointer !important;

    position:relative;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease !important;
}


.nc-certificate-grid .nc-logo-card.certificate-clickable::before{

    content:"View";

    position:absolute;

    z-index:10;

    right:8px;
    bottom:7px;

    padding:4px 7px;

    border-radius:3px;

    background:#C9A84D;

    color:#082D50;

    font-size:7px;
    font-weight:800;

    letter-spacing:.5px;

    opacity:0;

    transform:translateY(4px);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.nc-certificate-grid .nc-logo-card.certificate-clickable:hover{
    border-color:#C9A84D !important;

    box-shadow:
        0 10px 25px rgba(8,45,80,.10) !important;
}


.nc-certificate-grid .nc-logo-card.certificate-clickable:hover::before{
    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   CERTIFICATE PDF MODAL
   ========================================================= */

.certificate-pdf-modal{

    position:fixed;

    inset:0;

    z-index:6000;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:26px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.certificate-pdf-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


.certificate-pdf-backdrop{

    position:absolute;

    inset:0;

    background:
        rgba(3,21,37,.90);

    backdrop-filter:
        blur(7px);
}


.certificate-pdf-dialog{

    position:relative;

    z-index:2;

    width:min(1100px,95vw);

    height:min(820px,90vh);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:10px;

    background:#fff;

    box-shadow:
        0 30px 90px rgba(0,0,0,.40);

    transform:
        translateY(18px)
        scale(.985);

    transition:
        transform .3s
        cubic-bezier(.22,.61,.36,1);
}


.certificate-pdf-modal.active
.certificate-pdf-dialog{

    transform:
        translateY(0)
        scale(1);
}


/* HEADER */

.certificate-pdf-header{

    min-height:68px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:
        12px 18px
        12px 25px;

    background:
        #082D50;

    border-bottom:
        2px solid #C9A84D;
}


.certificate-pdf-title{

    display:flex;

    flex-direction:column;

    gap:3px;
}


.certificate-pdf-title span{

    color:#C9A84D;

    font-size:8px;

    font-weight:800;

    letter-spacing:2px;
}


.certificate-pdf-title strong{

    color:#fff;

    font-size:15px;

    font-weight:700;
}


/* ACTIONS */

.certificate-pdf-actions{

    display:flex;

    align-items:center;

    gap:10px;
}


.certificate-pdf-newtab{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:35px;

    padding:0 14px;

    border:
        1px solid
        rgba(255,255,255,.18);

    color:#fff !important;

    font-size:9px;

    font-weight:700;

    letter-spacing:.5px;

    transition:
        background .2s ease,
        border-color .2s ease;
}


.certificate-pdf-newtab:hover{

    background:#C9A84D;

    border-color:#C9A84D;

    color:#082D50 !important;
}


.certificate-pdf-close{

    width:39px;
    height:39px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius:50%;

    background:
        transparent;

    color:#fff;

    font-size:25px;

    line-height:1;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


.certificate-pdf-close:hover{

    background:#C9A84D;

    color:#082D50;
}


/* PDF */

.certificate-pdf-frame{

    flex:1;

    min-height:0;

    background:#e8edf1;
}


.certificate-pdf-frame iframe{

    display:block;

    width:100%;

    height:100%;

    border:0;

    background:#fff;
}


body.certificate-popup-open{

    overflow:hidden !important;
}


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

@media(max-width:700px){

    .certificate-pdf-modal{

        padding:7px;

    }


    .certificate-pdf-dialog{

        width:100%;

        height:96vh;

        max-height:96vh;

        border-radius:7px;

    }


    .certificate-pdf-header{

        min-height:58px;

        padding:
            9px 10px
            9px 15px;

    }


    .certificate-pdf-title strong{

        font-size:12px;

    }


    .certificate-pdf-newtab{

        padding:0 9px;

        font-size:8px;

    }


    .certificate-pdf-close{

        width:36px;

        height:36px;

    }

}


/* =========================================================
   GLOBAL FONT — ALEXANDRIA
   English + Arabic
   ========================================================= */

html,
body,
button,
input,
textarea,
select,
option,
a,
p,
span,
div,
section,
article,
header,
footer,
nav,
label,
strong,
small,
h1,
h2,
h3,
h4,
h5,
h6,
.eyebrow,
.nav-links,
.hero-kicker,
.hero-copy-v2,
.section-heading,
.service-tab,
.company-popup-v2,
.survey-modal,
.certificate-pdf-modal{
    font-family:'Alexandria', sans-serif !important;
}

/* Remove old Montserrat/Inter overrides */
.brand-text,
.hero h1,
.hero-copy-v2 h1,
.section-heading h2,
.service-copy h3,
.modal-dialog h3,
.company-popup-copy h3,
.why-section h2{
    font-family:'Alexandria', sans-serif !important;
}



/* =========================================================
   BLUE GROUP — ARABIC / RTL
   ========================================================= */

html[dir="rtl"]{
    direction:rtl;
}


/* Global Arabic typography */

.arabic-site,
.arabic-site button,
.arabic-site input,
.arabic-site textarea,
.arabic-site select{
    font-family:'Alexandria',sans-serif !important;
}


/* Navigation */

.arabic-site .nav-links{
    direction:rtl;
}


/* General Arabic text */

.arabic-site p,
.arabic-site h1,
.arabic-site h2,
.arabic-site h3,
.arabic-site h4,
.arabic-site .eyebrow{
    font-family:'Alexandria',sans-serif !important;
}


/* Hero */

.arabic-site .hero-copy-v2{
    direction:rtl;

    text-align:right;
}


/* About */

.arabic-site .about-v2{
    direction:rtl;
}


/* Companies header */

.arabic-site .companies-final-header{
    direction:rtl;

    text-align:center !important;
}


/*
Keep company artwork LTR because the artwork itself
must remain in exactly the same physical positions.
*/

.arabic-site .companies-final-stage{
    direction:ltr !important;
}


/* Networks / certificates */

.arabic-site .network-certificate-section{
    direction:rtl;
}


/* Services */

.arabic-site .services-layout{
    direction:rtl;
}

.arabic-site .service-copy{
    direction:rtl;

    text-align:right;
}

.arabic-site .service-tab{
    text-align:right !important;
}


/* Why Blue */

.arabic-site .why-section{
    direction:rtl;
}

.arabic-site .why-content{
    text-align:right;
}


/* Contact */

.arabic-site .contact-section{
    direction:rtl;
}


/* Footer */

.arabic-site footer{
    direction:rtl;
}


/* Popup text */

.arabic-site .company-popup-v2,
.arabic-site .certificate-pdf-modal,
.arabic-site .survey-modal{
    direction:rtl;
}


/* Language switch remains readable */

.arabic-site .language-link{
    direction:ltr;

    unicode-bidi:isolate;
}


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

@media(max-width:900px){

    .arabic-site .nav-links{
        text-align:right !important;
    }

    .arabic-site .nav-links a{
        text-align:right !important;
    }

}



/* =========================================================
   BLUE GROUP ARABIC — CONTENT REFINEMENTS
   ========================================================= */

.arabic-site .hero-copy-v2{
    text-align:right !important;
}

.arabic-site .hero-copy-v2 h1,
.arabic-site .hero-copy-v2 p,
.arabic-site .hero-kicker{
    text-align:right !important;
}

.arabic-site .about-v2-copy{
    text-align:right !important;
}

.arabic-site .about-v2-card-content{
    text-align:right !important;
}

.arabic-site .service-copy h3,
.arabic-site .service-copy h4,
.arabic-site .service-copy p{
    text-align:right !important;
}

.arabic-site .contact-info,
.arabic-site .contact-form-wrap{
    text-align:right !important;
}

.arabic-site .contact-form input,
.arabic-site .contact-form textarea{
    direction:rtl;
    text-align:right;
}

.arabic-site .why-content > p,
.arabic-site .why-content > h2,
.arabic-site .why-content > .eyebrow{
    text-align:right !important;
}

/* Keep phone / fax numbers readable */

.arabic-site .contact-item strong{
    unicode-bidi:plaintext;
}

/* Service numbers stay western */

.arabic-site .service-tab > span,
.arabic-site .service-photo > span,
.arabic-site .stat-number{
    direction:ltr;
    unicode-bidi:isolate;
}

/* Arabic line height */

.arabic-site p{
    line-height:1.9;
}

.arabic-site h1,
.arabic-site h2,
.arabic-site h3{
    line-height:1.35;
}



/* =========================================================
   ARABIC HERO — RTL BACKGROUND MIRROR
   Mirror ONLY the hero background image
   ========================================================= */

.arabic-site .hero-v2 .hero-slide::before{
    transform:scaleX(-1) !important;
}


/* Keep all actual hero content normal */

.arabic-site .hero-v2 .hero-content-v2,
.arabic-site .hero-v2 .hero-dark-layer,
.arabic-site .hero-v2 .hero-blue-shape{
    transform:none;
}


/* Arabic content alignment */

.arabic-site .hero-copy-v2{
    direction:rtl;
    text-align:right !important;
}

.arabic-site .hero-copy-v2 h1,
.arabic-site .hero-copy-v2 p,
.arabic-site .hero-kicker{
    direction:rtl;
    text-align:right !important;
}


/* Do not mirror service icons */

.arabic-site .hero-bottom-bar svg{
    transform:none !important;
}



/* Arabic Hero - remove decorative script overlap */
.arabic-site .hero-script{
    display:none !important;
}


/* =========================================================
   ARABIC NETWORKS / CERTIFICATES
   ========================================================= */

.arabic-site .network-certificate-section{
    direction:rtl !important;
}

.arabic-site .nc-heading{
    direction:rtl !important;
    text-align:right !important;
}

.arabic-site .nc-heading span{
    font-family:'Alexandria',sans-serif !important;
}

.arabic-site .nc-logo-grid{
    direction:rtl !important;
}

/* Keep logos themselves unchanged */
.arabic-site .nc-logo-card img{
    direction:ltr !important;
    transform-origin:center center;
}

/* Certificate popup */
.arabic-site .certificate-pdf-modal{
    direction:rtl !important;
}

.arabic-site .certificate-pdf-modal h2,
.arabic-site .certificate-pdf-modal h3,
.arabic-site .certificate-pdf-modal p{
    text-align:right !important;
}


/* =========================================================
   ARABIC NETWORKS / CERTIFICATES — CENTER GAP
   ========================================================= */

.arabic-site .network-certificate-grid{
    column-gap:70px !important;
}

/* Extra breathing room around the center */
.arabic-site .nc-networks{
    padding-left:35px !important;
}

.arabic-site .nc-certificates{
    padding-right:35px !important;
}

/* Center separator */
.arabic-site .nc-certificates{
    border-right:1px solid rgba(12,35,64,.12) !important;
}

/* Mobile: remove separator and spacing */
@media (max-width:850px){

    .arabic-site .network-certificate-grid{
        column-gap:0 !important;
        row-gap:45px !important;
    }

    .arabic-site .nc-networks,
    .arabic-site .nc-certificates{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .arabic-site .nc-certificates{
        border-right:0 !important;
    }
}


/* =========================================================
   ARABIC FINAL RTL — WHY / CONTACT / FOOTER / SURVEY
   ========================================================= */

.arabic-site .why-content{
    direction:rtl !important;
    text-align:right !important;
}

.arabic-site .stats-grid{
    direction:rtl !important;
}

.arabic-site .contact-section{
    direction:rtl !important;
}

.arabic-site .contact-grid{
    direction:rtl !important;
}

.arabic-site .contact-info,
.arabic-site .contact-info h3,
.arabic-site .contact-info p,
.arabic-site .contact-item{
    text-align:right !important;
}

.arabic-site .contact-form{
    direction:rtl !important;
}

.arabic-site .contact-form input,
.arabic-site .contact-form textarea,
.arabic-site .contact-form select{
    text-align:right !important;
    direction:rtl !important;
}

.arabic-site footer{
    direction:rtl !important;
}

.arabic-site footer,
.arabic-site footer p,
.arabic-site footer li,
.arabic-site footer a{
    text-align:right;
}

.arabic-site .survey-modal{
    direction:rtl !important;
}

.arabic-site .survey-modal h2,
.arabic-site .survey-modal h3,
.arabic-site .survey-modal p{
    text-align:right !important;
}

/* Keep phone/fax/URLs readable */
.arabic-site a[href^="tel:"],
.arabic-site a[href^="mailto:"],
.arabic-site .contact-item strong{
    direction:ltr;
    unicode-bidi:isolate;
}


/* =========================================================
   ARABIC WHY BLUEGROUP - HEADLINE LETTER SPACING
   ========================================================= */

html[lang="ar"] #why-blue h2,
html[dir="rtl"] #why-blue h2 {
    letter-spacing: 2px !important;
    word-spacing: 4px !important;
}



/* =========================================================
   ARABIC MOBILE TYPOGRAPHY FIX
   Better vertical spacing for large multi-line headings
   ========================================================= */

@media (max-width: 768px) {

    html[lang="ar"] h1,
    html[lang="ar"] h2,
    html[lang="ar"] h3,
    html[dir="rtl"] h1,
    html[dir="rtl"] h2,
    html[dir="rtl"] h3 {
        line-height: 1.28 !important;
    }

    /* HERO large titles */
    html[lang="ar"] .hero-v2 h1,
    html[lang="ar"] .hero-v2 h2,
    html[lang="ar"] .hero-title,
    html[lang="ar"] .hero-slide h1,
    html[lang="ar"] .hero-slide h2,
    html[dir="rtl"] .hero-v2 h1,
    html[dir="rtl"] .hero-v2 h2,
    html[dir="rtl"] .hero-title,
    html[dir="rtl"] .hero-slide h1,
    html[dir="rtl"] .hero-slide h2 {
        line-height: 1.20 !important;
        padding-top: .04em !important;
        padding-bottom: .08em !important;
    }

    /* ABOUT / COMPANIES / SERVICES / WHY / CONTACT */
    html[lang="ar"] #about h2,
    html[lang="ar"] #companies h2,
    html[lang="ar"] #services h2,
    html[lang="ar"] #why-blue h2,
    html[lang="ar"] #contact h2,
    html[dir="rtl"] #about h2,
    html[dir="rtl"] #companies h2,
    html[dir="rtl"] #services h2,
    html[dir="rtl"] #why-blue h2,
    html[dir="rtl"] #contact h2 {
        line-height: 1.24 !important;
        padding-bottom: .08em !important;
    }

    /* WHY BLUE GROUP title */
    html[lang="ar"] #why-blue h2,
    html[dir="rtl"] #why-blue h2 {
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
        word-spacing: 5px !important;
    }

    /* Companies heading shown in screenshot */
    html[lang="ar"] .companies-section h2,
    html[lang="ar"] .companies-v2 h2,
    html[dir="rtl"] .companies-section h2,
    html[dir="rtl"] .companies-v2 h2 {
        line-height: 1.24 !important;
    }

    /* Service headings */
    html[lang="ar"] .service-copy h3,
    html[lang="ar"] .service-panel h3,
    html[dir="rtl"] .service-copy h3,
    html[dir="rtl"] .service-panel h3 {
        line-height: 1.28 !important;
    }

}


/* =========================================================
   ARABIC POPUP / MODAL CLOSE FIX
   Keep close button above all modal layers
   ========================================================= */

html[lang="ar"] .company-modal,
html[dir="rtl"] .company-modal {
    direction: rtl;
}

html[lang="ar"] .company-modal-close,
html[lang="ar"] .modal-close,
html[lang="ar"] [data-modal-close],
html[dir="rtl"] .company-modal-close,
html[dir="rtl"] .modal-close,
html[dir="rtl"] [data-modal-close] {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;

    width: 42px !important;
    height: 42px !important;

    z-index: 999999 !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    touch-action: manipulation !important;
}


/* Certificate PDF modal close */
html[lang="ar"] .certificate-modal-close,
html[lang="ar"] .pdf-modal-close,
html[dir="rtl"] .certificate-modal-close,
html[dir="rtl"] .pdf-modal-close {
    z-index: 999999 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* =========================================================
   BLUEGROUP — CLEAN ARABIC MOBILE FINAL
   ========================================================= */

/* ---------- X CLOSE BUTTONS ---------- */

html[lang="ar"] .company-popup-close,
html[lang="ar"] .company-modal-close,
html[lang="ar"] .modal-close,
html[lang="ar"] .survey-modal-close,
html[lang="ar"] .certificate-modal-close,
html[lang="ar"] .certificate-pdf-close,
html[lang="ar"] .pdf-modal-close,
html[dir="rtl"] .company-popup-close,
html[dir="rtl"] .company-modal-close,
html[dir="rtl"] .modal-close,
html[dir="rtl"] .survey-modal-close,
html[dir="rtl"] .certificate-modal-close,
html[dir="rtl"] .certificate-pdf-close,
html[dir="rtl"] .pdf-modal-close{
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;

    padding:0 !important;

    position:absolute !important;
    top:14px !important;
    right:14px !important;
    left:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:50% !important;

    font-size:0 !important;
    line-height:1 !important;

    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;

    z-index:9999999 !important;
}

html[lang="ar"] .company-popup-close::after,
html[lang="ar"] .company-modal-close::after,
html[lang="ar"] .modal-close::after,
html[lang="ar"] .survey-modal-close::after,
html[lang="ar"] .certificate-modal-close::after,
html[lang="ar"] .certificate-pdf-close::after,
html[lang="ar"] .pdf-modal-close::after,
html[dir="rtl"] .company-popup-close::after,
html[dir="rtl"] .company-modal-close::after,
html[dir="rtl"] .modal-close::after,
html[dir="rtl"] .survey-modal-close::after,
html[dir="rtl"] .certificate-modal-close::after,
html[dir="rtl"] .certificate-pdf-close::after,
html[dir="rtl"] .pdf-modal-close::after{
    content:"×" !important;
    font-family:Arial,sans-serif !important;
    font-size:25px !important;
    font-weight:400 !important;
    line-height:1 !important;
}

html[lang="ar"] .close-label,
html[dir="rtl"] .close-label{
    display:none !important;
}


/* =========================================================
   ARABIC MOBILE — COMPANIES
   Keep Arabic text RTL.
   Artwork uses fixed LTR canvas and is scaled as ONE unit.
   ========================================================= */

@media (max-width:600px){

    html[lang="ar"] #companies,
    html[dir="rtl"] #companies{
        direction:rtl !important;
        overflow:hidden !important;
    }

    /* Arabic heading */
    html[lang="ar"] #companies .companies-final-header,
    html[dir="rtl"] #companies .companies-final-header{
        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:20px !important;
        padding-right:20px !important;

        text-align:center !important;
        direction:rtl !important;

        box-sizing:border-box !important;
    }

    html[lang="ar"] #companies .companies-final-header h2,
    html[lang="ar"] #companies .companies-final-header p,
    html[lang="ar"] #companies .companies-final-header .eyebrow,
    html[dir="rtl"] #companies .companies-final-header h2,
    html[dir="rtl"] #companies .companies-final-header p,
    html[dir="rtl"] #companies .companies-final-header .eyebrow{
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }


    /*
     * COMPANY ARTWORK
     * 700px fixed design canvas.
     * Entire artwork scales together.
     */
    html[lang="ar"] #companies .companies-final-stage,
    html[dir="rtl"] #companies .companies-final-stage{
        position:relative !important;

        width:700px !important;
        max-width:none !important;
        height:475px !important;

        left:50% !important;
        right:auto !important;

        margin-top:28px !important;
        margin-left:0 !important;
        margin-right:0 !important;

        transform:translateX(-50%) scale(.54) !important;
        transform-origin:center top !important;

        direction:ltr !important;
        overflow:visible !important;
    }


    /* Center BlueGroup */
    html[lang="ar"] #companies .companies-final-center,
    html[dir="rtl"] #companies .companies-final-center{
        position:absolute !important;

        left:240px !important;
        right:auto !important;
        top:0 !important;

        width:220px !important;
        height:220px !important;

        margin:0 !important;
        transform:none !important;
    }


    /* BluBarco — left */
    html[lang="ar"] #companies .company-final-1,
    html[dir="rtl"] #companies .company-final-1{
        position:absolute !important;

        left:0 !important;
        right:auto !important;
        top:118px !important;

        width:165px !important;
        height:165px !important;

        margin:0 !important;
        transform:none !important;
    }


    /* Blue Eagle — lower left */
    html[lang="ar"] #companies .company-final-2,
    html[dir="rtl"] #companies .company-final-2{
        position:absolute !important;

        left:92px !important;
        right:auto !important;
        top:270px !important;

        width:165px !important;
        height:145px !important;

        margin:0 !important;
        transform:none !important;
    }


    /* BlueBoat — bottom center */
    html[lang="ar"] #companies .company-final-3,
    html[dir="rtl"] #companies .company-final-3{
        position:absolute !important;

        left:267px !important;
        right:auto !important;
        top:290px !important;

        width:165px !important;
        height:125px !important;

        margin:0 !important;
        transform:none !important;
    }


    /* Blue Tower — lower right */
    html[lang="ar"] #companies .company-final-4,
    html[dir="rtl"] #companies .company-final-4{
        position:absolute !important;

        left:435px !important;
        right:auto !important;
        top:270px !important;

        width:165px !important;
        height:145px !important;

        margin:0 !important;
        transform:none !important;
    }


    /* Blue Sailboat — right */
    html[lang="ar"] #companies .company-final-5,
    html[dir="rtl"] #companies .company-final-5{
        position:absolute !important;

        left:535px !important;
        right:auto !important;
        top:118px !important;

        width:165px !important;
        height:165px !important;

        margin:0 !important;
        transform:none !important;
    }


    /*
     * Canvas = 475px
     * Visible after scale .54 ≈ 257px
     * Remove unused CSS height.
     */
    html[lang="ar"] #companies .companies-final-stage,
    html[dir="rtl"] #companies .companies-final-stage{
        margin-bottom:-218px !important;
    }


    /* Arabic instruction */
    html[lang="ar"] #companies .companies-final-note,
    html[dir="rtl"] #companies .companies-final-note{
        position:relative !important;

        width:100% !important;

        margin:18px auto 0 !important;
        padding:0 15px !important;

        text-align:center !important;
        direction:rtl !important;

        transform:none !important;
    }


    /* Networks section starts cleanly */
    html[lang="ar"] .network-certificate-section,
    html[dir="rtl"] .network-certificate-section{
        clear:both !important;
    }
}


/* Wider phones */
@media (min-width:481px) and (max-width:600px){

    html[lang="ar"] #companies .companies-final-stage,
    html[dir="rtl"] #companies .companies-final-stage{
        transform:translateX(-50%) scale(.62) !important;
        margin-bottom:-180px !important;
    }

}


/* Very narrow phones */
@media (max-width:380px){

    html[lang="ar"] #companies .companies-final-stage,
    html[dir="rtl"] #companies .companies-final-stage{
        transform:translateX(-50%) scale(.50) !important;
        margin-bottom:-237px !important;
    }

}

/* ARABIC MOBILE — COMPANIES STAGE WIDTH ONLY */
@media (max-width:600px){
    html[lang="ar"] #companies .companies-final-stage,
    html[dir="rtl"] #companies .companies-final-stage{
        position:relative !important;
        width:578px !important;
        min-width:578px !important;
        max-width:578px !important;
    }
}


/* ARABIC MOBILE — COMPANIES STAGE POSITION */
@media (max-width:600px){
    html[lang="ar"] #companies .companies-final-stage,
    html[dir="rtl"] #companies .companies-final-stage{
        position:relative !important;
        width:578px !important;
        max-width:none !important;
        height:475px !important;
        left:100% !important;
    }
}


/* =========================================================
   HERO — CLEAN OVERLAY FINAL
   Remove blue decorative shape
   EN: dark left -> light right
   AR: dark right -> light left
   ========================================================= */


/* Remove decorative blue shape from both languages */

.hero-v2 .hero-blue-shape{
    display:none !important;
}


/* English hero
   Strong dark overlay on LEFT */

html[lang="en"] .hero-v2 .hero-dark-layer{
    background:
        linear-gradient(
            90deg,
            rgba(2,24,44,.98) 0%,
            rgba(3,31,55,.90) 35%,
            rgba(3,41,70,.52) 66%,
            rgba(3,38,62,.20) 100%
        ) !important;
}


/* Arabic hero
   Strong dark overlay on RIGHT */

html[lang="ar"] .hero-v2 .hero-dark-layer,
html[dir="rtl"] .hero-v2 .hero-dark-layer,
.arabic-site .hero-v2 .hero-dark-layer{
    background:
        linear-gradient(
            270deg,
            rgba(2,24,44,.98) 0%,
            rgba(3,31,55,.90) 35%,
            rgba(3,41,70,.52) 66%,
            rgba(3,38,62,.20) 100%
        ) !important;
}




/* =========================================================
   HERO — SINGLE ACTIVE SLIDE FINAL SAFETY
   ========================================================= */

.hero-v2 .hero-slide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:0 !important;
}

.hero-v2 .hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:1 !important;
}




/* =========================================================
   HERO — CLICK SAFETY FIX
   Keep one visible slide without blocking controls
   ========================================================= */

.hero-v2 .hero-slide{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:auto !important;
}

.hero-v2 .hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:auto !important;
}

/* Re-enable interactive elements inside active slide */
.hero-v2 .hero-slide.active .hero-content-v2,
.hero-v2 .hero-slide.active .hero-content-v2 a,
.hero-v2 .hero-slide.active .hero-content-v2 button{
    pointer-events:auto !important;
}

/* Bottom service bar must always stay clickable */
.hero-v2 .hero-bottom-bar,
.hero-v2 .hero-bottom-inner,
.hero-v2 .hero-bottom-inner button{
    position:relative;
    z-index:20 !important;
    pointer-events:auto !important;
}


/* =========================================================
   NETWORK DOCUMENT — VIEW BADGE
   Match Certificates visual behavior
   ========================================================= */

.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]) {
    position:relative !important;
    cursor:pointer !important;
}


/*
 * Restore original gold bottom line.
 * ::after stays dedicated to the card detail.
 */
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""])::after {
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:0 !important;

    width:0 !important;
    height:2px !important;

    transform:translateX(-50%) !important;

    background:#c8a649 !important;

    opacity:1 !important;
    visibility:visible !important;

    transition:width .35s ease !important;

    pointer-events:none !important;

    z-index:4 !important;
}


.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]):hover::after,
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]):focus::after {
    width:42% !important;
}


/*
 * Small VIEW badge.
 * ::before is free, so it does not conflict
 * with the original gold line.
 */
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""])::before {
    content:"View";

    position:absolute;

    right:8px;
    bottom:7px;

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

    min-width:31px;
    height:18px;

    padding:0 7px;

    background:#d0a83c;

    color:#0b3153;

    border-radius:3px;

    font-size:9px;
    line-height:1;
    font-weight:800;

    letter-spacing:0;

    text-transform:none;

    opacity:0;
    visibility:hidden;

    transform:translateY(4px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;

    pointer-events:none;

    z-index:20;
}


.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]):hover::before,
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]):focus::before {
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}


/* Keep logo underneath badge */
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]) img {
    position:relative;
    z-index:1;
}


/* Keyboard accessibility */
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""]):focus-visible {
    outline:2px solid #d0a83c;
    outline-offset:2px;
}


/* Arabic */
html[lang="ar"]
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""])::before,

html[dir="rtl"]
.nc-network-grid
.nc-logo-card[data-network-document]:not([data-network-document=""])::before {
    content:"عرض";

    right:auto;
    left:8px;

    font-family:inherit;
    letter-spacing:0;
}




/* =========================================================
   ARABIC CERTIFICATES — VIEW LABEL
   ========================================================= */

html[lang="ar"]
.nc-certificate-grid
.nc-logo-card.certificate-clickable::before,

html[dir="rtl"]
.nc-certificate-grid
.nc-logo-card.certificate-clickable::before {
    content:"عرض" !important;
    font-family:inherit !important;
    letter-spacing:0 !important;
}




/* =========================================================
   BLUEGROUP_UPDATES_NOTICES_V1
   Latest Updates + Shipping Notices
   ========================================================= */

.bg-updates-section {
    padding: 85px 0 95px;
    background: #f4f8fb;
}

.bg-updates-heading {
    text-align: center;
    margin-bottom: 36px;
}

.bg-updates-heading .eyebrow {
    display: block;
    color: #c69a38;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.bg-updates-heading h2 {
    color: #0b3153;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 12px;
}

.bg-updates-heading h2 span {
    color: #c69a38;
}

.bg-updates-heading p {
    color: #65798b;
    margin: 0;
}

.bg-updates-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.bg-info-column {
    background: #fff;
    border: 1px solid #e2eaf0;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 12px 35px rgba(8, 43, 73, .045);
    min-width: 0;
}

.bg-info-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2eaf0;
}

.bg-info-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #c69a38;
    color: white;
    font-size: 24px;
}

.bg-info-header h3 {
    color: #0b3153;
    font-size: 22px;
    margin: 0 0 5px;
    font-weight: 800;
}

.bg-info-header div > span {
    color: #7a899b;
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.bg-notice-item {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 20px;
    padding: 25px 0;
    border-bottom: 1px solid #e9eef2;
}

.bg-notice-item:last-child,
.bg-news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bg-notice-date {
    text-align: center;
    border-right: 2px solid #c69a38;
    padding-right: 14px;
    align-self: start;
}

.bg-notice-date strong {
    display: block;
    font-size: 30px;
    color: #0b3153;
    line-height: 1.1;
}

.bg-notice-date span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #8494a3;
    margin-top: 6px;
}

.bg-notice-content h4,
.bg-news-content h4 {
    color: #0b3153;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    margin: 0 0 9px;
}

.bg-notice-content p,
.bg-news-content p {
    color: #62768a;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

.bg-news-item {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 19px;
    padding: 20px 0;
    border-bottom: 1px solid #e9eef2;
    align-items: center;
}

.bg-news-photo {
    width: 100%;
    height: 125px;
    border-radius: 9px;
    background-color: #dbe6ed;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.bg-news-photo-trucks {
    background-image: linear-gradient(135deg, #0b3153, #417c9e);
}

.bg-news-photo-warehouse {
    background-image: linear-gradient(135deg, #587b8f, #102d45);
}

.bg-news-content time {
    display: block;
    color: #8999a9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 9px;
}

@media (max-width: 900px) {
    .bg-updates-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bg-updates-section {
        padding: 55px 0 65px;
    }

    .bg-info-column {
        padding: 20px;
    }

    .bg-info-header h3 {
        font-size: 19px;
    }

    .bg-news-item {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 13px;
    }

    .bg-news-photo {
        height: 100px;
    }

    .bg-notice-item {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 13px;
    }

    .bg-notice-date {
        padding-right: 8px;
    }

    .bg-notice-date strong {
        font-size: 24px;
    }

    .bg-notice-content h4,
    .bg-news-content h4 {
        font-size: 15px;
    }
}


/* BLUEGROUP_LOGISTICS_FRONTEND_V2 - Arabic RTL */
.bg-updates-section[dir="rtl"] .bg-info-header {
    flex-direction: row;
    text-align: right;
}

.bg-updates-section[dir="rtl"] .bg-info-column,
.bg-updates-section[dir="rtl"] .bg-notice-content,
.bg-updates-section[dir="rtl"] .bg-news-content {
    text-align: right;
}

.bg-updates-section[dir="rtl"] .bg-notice-date {
    border-right: 0;
    border-left: 2px solid #c69a38;
    padding-right: 0;
    padding-left: 14px;
}

.bg-updates-section .bg-updates-empty {
    padding: 24px 0;
    color: #62768a;
    font-size: 13px;
}


/* BLUEGROUP_COMPANY_PARAGRAPHS_V1
   Preserve paragraph breaks in company popup descriptions.
   Applies to Arabic and English.
*/

.company-popup-v2 #companyPopupDescription {
    white-space: pre-wrap !important;
    line-height: 1.9 !important;
    overflow-wrap: break-word;
}

html[lang="ar"] .company-popup-v2 #companyPopupDescription,
html[dir="rtl"] .company-popup-v2 #companyPopupDescription {
    line-height: 2 !important;
}