/* =====================================================
   IMMAR TRADING - ABOUT PAGE
===================================================== */

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


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

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

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


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

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

    position:relative;
}


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


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


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


.about-brand-text strong{
    font-size:18px;
    line-height:1.2;
}


.about-brand-text span{
    margin-top:3px;
    font-size:11px;
    color:#e5efff;
}


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

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


.about-navbar .nav-links li{
    list-style:none;
}


.about-navbar .nav-links a{
    color:#fff;

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

    transition:.25s;
}


.about-navbar .nav-links a:hover{
    opacity:.85;
}


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


.about-navbar .nav-book{
    background:#fff;

    color:var(--blue1) !important;

    padding:11px 22px;

    border-radius:30px;

    font-weight:700;

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


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

.about-hero{
    max-width:880px;

    margin:70px auto 0;

    padding:0 20px;

    text-align:center;
}


.about-hero-label{
    display:inline-block;

    padding:8px 17px;

    border-radius:30px;

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

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

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

    letter-spacing:1.5px;
}


.about-hero h1{
    margin:18px 0 16px;

    font-size:48px;

    line-height:1.18;
}


.about-hero p{
    max-width:720px;

    margin:auto;

    color:#e8f2ff;

    font-size:15px;

    line-height:1.8;
}


.about-hero-buttons{
    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:30px;
}


.about-primary-btn,
.about-secondary-btn{
    display:inline-block;

    padding:14px 28px;

    border-radius:30px;

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

    transition:.25s;
}


.about-primary-btn{
    background:#fff;

    color:var(--blue1);
}


.about-secondary-btn{
    border:1px solid rgba(255,255,255,.7);

    color:#fff;
}


.about-primary-btn:hover,
.about-secondary-btn:hover{
    transform:translateY(-2px);
}


.about-secondary-btn:hover{
    background:#fff;

    color:var(--blue1);
}


/* =====================================================
   ABOUT INTRO
===================================================== */

.about-intro{
    padding:95px 22px;

    background:#fff;

    scroll-margin-top:30px;
}


.about-intro-container{
    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;
}


.about-intro-copy{
    max-width:610px;
}


.section-label{
    display:inline-block;

    color:var(--blue2);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;
}


.about-intro-copy h2{
    margin:8px 0 18px;

    color:var(--blue1);

    font-size:38px;

    line-height:1.25;
}


.about-intro-copy p{
    margin:0 0 16px;

    color:var(--grey);

    font-size:14px;

    line-height:1.85;
}


.about-text-link{
    display:inline-block;

    margin-top:8px;

    color:var(--blue2);

    font-size:13px;

    font-weight:700;
}


/* =====================================================
   INTRO IMAGE
===================================================== */

.about-intro-visual{
    position:relative;

    max-width:560px;

    margin-left:auto;
}


.about-image-card{
    border-radius:22px;

    overflow:hidden;

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


.about-image-card img{
    width:100%;

    height:430px;

    object-fit:cover;
}


.about-stat-card{
    position:absolute;

    left:-30px;
    bottom:28px;

    min-width:220px;

    padding:20px 22px;

    border-radius:15px;

    background:#fff;

    box-shadow:0 14px 35px rgba(0,0,0,.15);
}


.about-stat-card strong{
    display:block;

    color:var(--blue1);

    font-size:20px;
}


.about-stat-card span{
    display:block;

    margin-top:4px;

    color:var(--grey);

    font-size:11px;
}


/* =====================================================
   VALUES
===================================================== */

.about-values{
    padding:90px 22px;

    background:var(--light);
}


.section-heading{
    max-width:760px;

    margin:0 auto 50px;

    text-align:center;
}


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

    color:var(--blue1);

    font-size:36px;
}


.section-heading p{
    margin:0;

    color:var(--grey);

    font-size:14px;

    line-height:1.8;
}


.values-grid{
    max-width:1150px;

    margin:auto;

    display:grid;

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

    gap:22px;
}


.value-card{
    padding:30px 25px;

    border-radius:17px;

    background:#fff;

    border:1px solid #e4eaf2;

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

    transition:.3s;
}


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

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


.value-card > span{
    color:var(--blue2);

    font-size:11px;

    font-weight:700;
}


.value-card h3{
    margin:12px 0 9px;

    color:var(--blue1);

    font-size:18px;
}


.value-card p{
    margin:0;

    color:var(--grey);

    font-size:12px;

    line-height:1.75;
}


/* =====================================================
   APPROACH SECTION
===================================================== */

.about-approach{
    padding:95px 22px;

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

    color:#fff;
}


.about-approach-container{
    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:60px;

    align-items:start;
}


.approach-copy > span{
    color:#cfe2ff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;
}


.approach-copy h2{
    margin:8px 0 17px;

    font-size:37px;

    line-height:1.25;
}


.approach-copy p{
    margin:0 0 20px;

    color:#dceaff;

    font-size:14px;

    line-height:1.8;
}


.approach-copy ul{
    list-style:none;

    padding:0;

    margin:0 0 24px;
}


.approach-copy li{
    position:relative;

    padding-left:24px;

    margin:11px 0;

    color:#e7f1ff;

    font-size:13px;
}


.approach-copy li::before{
    content:"✓";

    position:absolute;

    left:0;

    color:#9ec8ff;

    font-weight:700;
}


.approach-copy a{
    color:#fff;

    font-size:13px;

    font-weight:700;
}


.approach-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}


.approach-card{
    padding:27px;

    border-radius:15px;

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

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

    transition:.3s;
}


.approach-card:hover{
    transform:translateY(-4px);

    background:rgba(255,255,255,.14);
}


.approach-card strong{
    color:#9ec8ff;

    font-size:11px;
}


.approach-card h3{
    margin:11px 0 7px;

    font-size:18px;
}


.approach-card p{
    margin:0;

    color:#dceaff;

    font-size:12px;

    line-height:1.7;
}


/* =====================================================
   CUSTOMERS
===================================================== */

.about-customers{
    padding:90px 22px;

    background:#fff;
}


.customer-grid{
    max-width:1150px;

    margin:auto;

    display:grid;

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

    gap:22px;
}


.customer-card{
    padding:30px 25px;

    border-radius:17px;

    background:#f8faff;

    border:1px solid #e4eaf2;

    transition:.3s;
}


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

    background:#fff;

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


.customer-icon{
    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--lightblue);

    font-size:27px;

    margin-bottom:18px;
}


.customer-card h3{
    margin:0 0 9px;

    color:var(--blue1);

    font-size:18px;
}


.customer-card p{
    margin:0;

    color:var(--grey);

    font-size:12px;

    line-height:1.75;
}


/* =====================================================
   WHY CHOOSE US
===================================================== */

.about-why{
    padding:95px 22px;

    background:var(--light);
}


.about-why-container{
    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:60px;

    align-items:start;
}


.about-why-copy > span{
    color:var(--blue2);

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;
}


.about-why-copy h2{
    margin:8px 0 16px;

    color:var(--blue1);

    font-size:36px;

    line-height:1.25;
}


.about-why-copy p{
    color:var(--grey);

    font-size:14px;

    line-height:1.8;
}


.about-why-copy a{
    color:var(--blue2);

    font-size:13px;

    font-weight:700;
}


.about-benefits{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;
}


.about-benefit-card{
    padding:25px;

    background:#fff;

    border-radius:15px;

    border:1px solid #e5ebf3;

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


.about-benefit-card strong{
    color:var(--blue2);

    font-size:11px;
}


.about-benefit-card h3{
    margin:10px 0 7px;

    color:var(--blue1);

    font-size:17px;
}


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

    color:var(--grey);

    font-size:12px;

    line-height:1.7;
}


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

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

    background:#fff;
}


.about-cta{
    max-width:1200px;

    margin:auto;

    padding:42px 38px;

    border-radius:20px;

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

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;
}


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


.about-cta span{
    font-size:11px;

    font-weight:700;

    letter-spacing:1.4px;
}


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

    font-size:29px;
}


.about-cta p{
    margin:0;

    color:#e5f0ff;

    font-size:13px;
}


.about-cta-buttons{
    display:flex;

    gap:12px;
}


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

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;
}


.about-cta-primary{
    background:#fff;

    color:var(--blue1);
}


.about-cta-whatsapp{
    background:var(--green);

    color:#fff;
}


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

.footer-brand-about{
    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;
}


.footer-brand-about img{
    height:60px;

    width:auto;
}


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


.footer-brand-about span{
    color:#9aa6b7;

    font-size:11px;
}


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

@media(max-width:1050px){

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


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


    .about-intro-container{
        gap:45px;
    }

}


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

@media(max-width:900px){

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


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


    .menu-toggle{
        display:block;
    }


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

        position:absolute;

        top:75px;

        left:0;

        right:0;

        z-index:999;

        flex-direction:column;

        align-items:flex-start;

        gap:3px;

        padding:20px;

        border-radius:14px;

        background:#fff;

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


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


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


    .about-navbar .nav-links a{
        display:block;

        width:100%;

        padding:9px;

        color:var(--blue1);
    }


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

        border-radius:8px;

        background:var(--lightblue);
    }


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

        background:var(--blue1);

        color:#fff !important;

        text-align:center;
    }


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


    .about-intro-visual{
        margin:auto;

        width:100%;
    }


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


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


    .about-cta{
        flex-direction:column;

        text-align:center;
    }

}


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

@media(max-width:600px){

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


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


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


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


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


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


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


    .about-intro{
        padding:65px 18px;
    }


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


    .about-image-card img{
        height:300px;
    }


    .about-stat-card{
        left:15px;

        right:15px;

        bottom:15px;

        min-width:auto;
    }


    .about-values{
        padding:65px 18px;
    }


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


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


    .about-approach{
        padding:70px 18px;
    }


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


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


    .about-customers{
        padding:65px 18px;
    }


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


    .about-why{
        padding:70px 18px;
    }


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


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


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


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


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


    .about-cta-buttons{
        width:100%;

        flex-direction:column;
    }


    .about-cta-primary,
    .about-cta-whatsapp{
        width:100%;

        text-align:center;
    }

}