/* =====================================================
   IMMAR TRADING SERVICES PAGE
===================================================== */

:root{
    --blue1:#0b3c8a;
    --blue2:#1e73d8;
    --blue3:#4fa3ff;
    --white:#fff;
    --light:#f5f7fb;
    --lightblue:#edf4ff;
    --dark:#172033;
    --grey:#667085;
    --green:#25d366;
    --shadow:0 12px 35px rgba(0,0,0,.08);
}


/* =====================================================
   HEADER
===================================================== */

.services-header{
    background:linear-gradient(
        135deg,
        var(--blue1),
        var(--blue2) 60%,
        var(--blue3)
    );

    color:#fff;
    padding:18px 22px 75px;
}


.services-navbar{
    max-width:1250px;
    margin:auto;

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

    position:relative;
}


.services-brand a{
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
}


.services-brand img{
    height:75px;
    width:auto;
}


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


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


.services-brand-text span{
    font-size:11px;
    color:#e3efff;
}


.services-navbar .nav-links{
    display:flex;
    align-items:center;
    gap:25px;

    list-style:none;
    padding:0;
    margin:0;
}


.services-navbar .nav-links a{
    color:#fff;
    font-size:14px;
    font-weight:600;
}


.services-navbar .nav-links a.active{
    border-bottom:2px solid #fff;
    padding-bottom:5px;
}


.services-navbar .nav-book{
    background:#fff;
    color:var(--blue1) !important;

    padding:11px 22px;
    border-radius:30px;
}



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

.services-hero{
    max-width:850px;
    margin:70px auto 0;
    text-align:center;
}


.hero-label{
    display:inline-block;

    padding:8px 17px;

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

    background:rgba(255,255,255,.12);

    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
}


.services-hero h1{
    margin:18px 0 16px;
    font-size:48px;
    line-height:1.18;
}


.services-hero p{
    max-width:720px;
    margin:auto;

    color:#e7f1ff;

    font-size:15px;
    line-height:1.8;
}


.hero-buttons{
    margin-top:30px;

    display:flex;
    justify-content:center;
    gap:14px;
}


.hero-primary,
.hero-secondary{
    padding:14px 28px;
    border-radius:30px;

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


.hero-primary{
    background:#fff;
    color:var(--blue1);
}


.hero-secondary{
    border:1px solid rgba(255,255,255,.7);
    color:#fff;
}



/* =====================================================
   TAB NAVIGATION
===================================================== */

.service-navigation{
    background:#fff;
    padding:70px 20px 50px;

    text-align:center;

    scroll-margin-top:25px;
}


.service-nav-heading{
    max-width:720px;
    margin:auto;
}


.service-nav-heading > span{
    color:var(--blue2);

    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
}


.service-nav-heading h2{
    margin:7px 0 10px;

    color:var(--blue1);

    font-size:35px;
}


.service-nav-heading p{
    margin:0;

    color:var(--grey);

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


.service-tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;

    margin-top:30px;
}


.service-tab{
    display:inline-block;

    border:1px solid #dbe4ef;

    border-radius:30px;

    padding:11px 23px;

    background:#f7f9fd;
    color:var(--blue1);

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

    transition:.25s;
}


.service-tab:hover{
    border-color:var(--blue2);
    transform:translateY(-2px);
}


.service-tab.active{
    background:linear-gradient(
        135deg,
        var(--blue1),
        var(--blue2)
    );

    border-color:transparent;

    color:#fff;
}



/* =====================================================
   SHARED HEADING
===================================================== */

.section-heading{
    max-width:760px;
    margin:0 auto 50px;
    text-align:center;
}


.section-label{
    color:var(--blue2);

    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
}


.section-heading h2{
    margin:7px 0 12px;

    color:var(--blue1);

    font-size:36px;
}


.section-heading p{
    color:var(--grey);

    line-height:1.8;

    font-size:14px;
}



/* =====================================================
   OVERVIEW
===================================================== */

.services-introduction{
    background:#fff;

    padding:50px 22px 90px;

    scroll-margin-top:30px;
}


.overview-grid{
    max-width:1150px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;
}


.overview-card{
    padding:27px;

    border-radius:16px;

    border:1px solid #e4eaf2;

    background:#f8faff;

    transition:.3s;
}


.overview-card:hover{
    transform:translateY(-5px);
    background:#fff;
    box-shadow:var(--shadow);
}


.overview-number{
    color:var(--blue2);

    font-size:11px;
    font-weight:700;
}


.overview-card h3{
    color:var(--blue1);

    margin:12px 0 8px;
}


.overview-card p{
    color:var(--grey);

    font-size:12px;
    line-height:1.7;
}


.overview-card a{
    color:var(--blue2);

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



/* =====================================================
   CATEGORY SECTIONS
===================================================== */

.service-category{
    padding:90px 22px;

    background:#fff;

    scroll-margin-top:25px;
}


.service-category.alternate{
    background:var(--light);
}


.category-heading{
    max-width:1200px;
    margin:0 auto 45px;

    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:35px;
}


.category-heading > div{
    max-width:720px;
}


.category-top{
    color:var(--blue2);

    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
}


.category-top span{
    color:#9ab7db;
    margin-right:10px;
}


.category-heading h2{
    margin:9px 0 10px;

    color:var(--blue1);

    font-size:34px;
}


.category-heading p{
    margin:0;

    color:var(--grey);

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


.category-heading > a{
    color:var(--blue2);

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

    white-space:nowrap;
}



/* =====================================================
   SERVICE CARDS
===================================================== */

.service-grid{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:25px;
}


.service-card{
    background:#fff;

    border:1px solid #e5eaf1;

    border-radius:18px;

    padding:30px 28px;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.3s;
}


.service-card:hover{
    transform:translateY(-6px);

    box-shadow:var(--shadow);
}


.service-icon{
    width:58px;
    height:58px;

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

    background:var(--lightblue);

    border-radius:15px;

    font-size:27px;

    margin-bottom:20px;
}


.service-card h3{
    margin:0 0 11px;

    color:var(--blue1);

    font-size:19px;
}


.service-card > p{
    color:var(--grey);

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


.service-card ul{
    margin:18px 0 22px;
    padding:0;

    list-style:none;
}


.service-card li{
    position:relative;

    padding-left:20px;
    margin:8px 0;

    color:#535e6e;

    font-size:12px;
}


.service-card li::before{
    content:"✓";

    position:absolute;
    left:0;

    color:var(--blue2);
    font-weight:700;
}


.service-card > a{
    color:var(--blue2);

    font-size:13px;
    font-weight:700;
}



/* =====================================================
   SECTION HIGHLIGHT
===================================================== */

.service-highlight{
    animation:sectionFlash 1.1s ease;
}


@keyframes sectionFlash{

    0%{
        box-shadow:
        inset 0 0 0 1000px
        rgba(30,115,216,.09);
    }

    100%{
        box-shadow:
        inset 0 0 0 1000px
        rgba(30,115,216,0);
    }

}



/* =====================================================
   WHY
===================================================== */

.services-why{
    padding:90px 22px;

    background:linear-gradient(
        135deg,
        #082e6d,
        #0b4b9d,
        var(--blue2)
    );

    color:#fff;
}


.why-container{
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:.85fr 1.15fr;

    gap:60px;
}


.why-copy > span{
    color:#cde2ff;

    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
}


.why-copy h2{
    font-size:36px;
    line-height:1.25;

    margin:8px 0 16px;
}


.why-copy p{
    color:#dae9ff;

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


.why-copy a{
    color:#fff;
    font-weight:700;
    font-size:13px;
}


.why-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:18px;
}


.why-card{
    padding:25px;

    border-radius:15px;

    background:rgba(255,255,255,.09);

    border:1px solid rgba(255,255,255,.13);
}


.why-card strong{
    color:#9bc8ff;
    font-size:11px;
}


.why-card h3{
    margin:10px 0 7px;
}


.why-card p{
    margin:0;

    color:#d9e8ff;

    font-size:12px;
    line-height:1.7;
}



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

.services-cta-wrap{
    padding:65px 22px;

    background:var(--light);
}


.services-cta{
    max-width:1200px;
    margin:auto;

    padding:42px 38px;

    border-radius:20px;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--blue1),
        var(--blue2),
        var(--blue3)
    );

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

    gap:35px;
}


.services-cta > div:first-child{
    max-width:700px;
}


.services-cta span{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.4px;
}


.services-cta h2{
    margin:7px 0 8px;

    font-size:29px;
}


.services-cta p{
    color:#e5f0ff;

    margin:0;
    font-size:13px;
}


.cta-buttons{
    display:flex;
    gap:12px;
}


.cta-fleet,
.cta-whatsapp{
    padding:13px 22px;

    border-radius:30px;

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

    white-space:nowrap;
}


.cta-fleet{
    color:var(--blue1);
    background:#fff;
}


.cta-whatsapp{
    color:#fff;
    background:var(--green);
}



/* =====================================================
   FOOTER
===================================================== */

.footer-brand-services{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:14px;
}


.footer-brand-services img{
    height:60px;
}


.footer-brand-services h3{
    margin:0;
}


.footer-brand-services span{
    color:#9da8b9;
    font-size:11px;
}



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

@media(max-width:1050px){

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

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

}



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

@media(max-width:900px){

    .services-brand img{
        height:60px;
    }


    .services-brand-text{
        display:none;
    }


    .menu-toggle{
        display:block;
    }


    .services-navbar .nav-links{
        display:none;

        position:absolute;

        top:75px;
        left:0;
        right:0;

        padding:20px;

        flex-direction:column;
        align-items:flex-start;

        gap:3px;

        background:#fff;

        border-radius:14px;

        box-shadow:0 12px 35px rgba(0,0,0,.18);

        z-index:999;
    }


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


    .services-navbar .nav-links li{
        width:100%;
    }


    .services-navbar .nav-links a{
        width:100%;
        display:block;

        color:var(--blue1);

        padding:9px;
    }


    .services-navbar .nav-links a.active{
        border:none;

        background:var(--lightblue);

        border-radius:8px;
    }


    .services-navbar .nav-book{
        width:100%;

        color:#fff !important;

        background:var(--blue1);

        text-align:center;
    }


    .why-container{
        grid-template-columns:1fr;
    }


    .services-cta{
        flex-direction:column;
        text-align:center;
    }

}



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

@media(max-width:600px){

    .services-header{
        padding:14px 18px 55px;
    }


    .services-brand img{
        height:55px;
    }


    .services-hero{
        margin-top:48px;
    }


    .services-hero h1{
        font-size:31px;
    }


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


    .hero-buttons{
        flex-direction:column;
    }


    .hero-primary,
    .hero-secondary{
        width:100%;
    }


    .service-navigation{
        padding:55px 18px 40px;
    }


    .service-nav-heading h2{
        font-size:28px;
    }


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


    .service-tab{
        text-align:center;
        padding:11px 10px;
    }


    .service-tab:first-child{
        grid-column:1 / -1;
    }


    .services-introduction{
        padding:45px 18px 65px;
    }


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


    .section-heading h2{
        font-size:28px;
    }


    .service-category{
        padding:65px 18px;
    }


    .category-heading{
        flex-direction:column;
        align-items:flex-start;

        gap:18px;
    }


    .category-heading h2{
        font-size:28px;
    }


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


    .why-container{
        gap:35px;
    }


    .why-copy h2{
        font-size:29px;
    }


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


    .services-cta-wrap{
        padding:45px 18px;
    }


    .services-cta{
        padding:32px 22px;
    }


    .services-cta h2{
        font-size:25px;
    }


    .cta-buttons{
        width:100%;
        flex-direction:column;
    }


    .cta-fleet,
    .cta-whatsapp{
        width:100%;
        text-align:center;
    }

}