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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:#fff;

color:#24334a;

}

.container{

width:90%;

max-width:1320px;

margin:auto;

}

/* HEADER */

header{

position:sticky;

top:0;

background:#fff;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

}

.logo img{

height:70px;

}

nav ul{

display:flex;

list-style:none;

gap:40px;

}

nav a{

text-decoration:none;

color:#19325d;

font-weight:600;

transition:.3s;

}

nav a:hover,

nav a.active{

color:#0f73c7;

}

.mobile-btn{

display:none;

font-size:26px;

cursor:pointer;

}

/* HERO */

.hero{

padding:70px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero h1{

font-family:'Playfair Display',serif;

font-size:64px;

line-height:1.1;

color:#0a2d62;

margin-bottom:25px;

}

.hero p{

font-size:19px;

line-height:1.8;

color:#5d6677;

margin-bottom:35px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

}

.btn{

padding:16px 30px;

border-radius:12px;

text-decoration:none;

font-weight:600;

display:inline-flex;

align-items:center;

gap:10px;

transition:.35s;

}

.btn-primary{

background:#072b63;

color:#fff;

}

.btn-primary:hover{

background:#0b478f;

}

.btn-outline{

border:2px solid #0b5ea8;

color:#0b5ea8;

}

.btn-outline:hover{

background:#0b5ea8;

color:#fff;

}

.features{

display:flex;

gap:45px;

flex-wrap:wrap;

}

.feature{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:10px;

font-size:14px;

font-weight:600;

color:#18355b;

}

.icon{

width:58px;

height:58px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#fff;

}

.orange{

background:#ff8126;

}

.green{

background:#2bb673;

}

.blue{

background:#3178f6;

}

.navy{

background:#0d2f62;

}

.hero-image img{

width:100%;

display:block;

}

/* MOBILE */

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.features{

justify-content:center;

}

nav{

display:none;

}

.mobile-btn{

display:block;

}

.hero h1{

font-size:48px;

}

}

@media(max-width:600px){

.hero h1{

font-size:36px;

}

.hero p{

font-size:17px;

}

.btn{

width:100%;

justify-content:center;

}

.hero-buttons{

flex-direction:column;

}

}
/*==============================
BUSINESS VERTICALS
==============================*/

.verticals{
    padding:70px 0;
    background:#fff;
}

.section-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    margin-bottom:40px;
}

.section-title span{
    width:70px;
    height:3px;
    background:#1eb7b0;
    border-radius:20px;
}

.section-title h2{
    font-family:'Playfair Display',serif;
    font-size:34px;
    color:#12386d;
    letter-spacing:.5px;
}

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

.vertical-card{

    background:#fff;

    border:1px solid #e7edf4;

    border-radius:16px;

    overflow:hidden;

    transition:.35s;

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

}

.vertical-card:hover{

    transform:translateY(-8px);

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

}

.card-image{

    position:relative;

    height:170px;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.vertical-card:hover .card-image img{

    transform:scale(1.08);

}

.card-icon{

    position:absolute;

    top:14px;

    left:14px;

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.card-icon img{

    width:28px;

    height:28px;

    object-fit:contain;

}

.orange{background:#F58220;}
.teal{background:#009E9A;}
.green{background:#67B43D;}
.blue{background:#1D5BBF;}
.cyan{background:#148F8A;}
.gold{background:#E3A116;}

.card-content{

    padding:20px;

}

.card-content h3{

    font-size:23px;

    color:#14396d;

    margin-bottom:14px;

    font-family:'Playfair Display',serif;

    line-height:1.3;

}

.card-content p{

    font-size:15px;

    color:#56697d;

    line-height:1.7;

}

/*==============================
Responsive
==============================*/

@media(max-width:1400px){

.vertical-grid{

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

}

}

@media(max-width:992px){

.vertical-grid{

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

}

}

@media(max-width:768px){

.section-title h2{

font-size:28px;

}

.vertical-grid{

grid-template-columns:1fr;

}

}

/*=========================
Transformation Journey
=========================*/

.journey{

    padding:90px 0;

    background:#fff;

}

.section-heading{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:60px;

}

.section-heading span{

    width:60px;

    height:3px;

    background:#2ba69a;

    border-radius:20px;

}

.section-heading h2{

    font-family:'Playfair Display',serif;

    font-size:34px;

    color:#157c68;

    letter-spacing:.5px;

}

.journey-wrapper{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

}

.journey-item{

    flex:1;

    text-align:center;

    max-width:250px;

}

.circle{

    width:88px;

    height:88px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:22px;

    transition:.35s;

}

.circle img{

    width:42px;

}

.circle:hover{

    transform:translateY(-8px);

}

.light{

    background:#edf6fb;

}

.green{

    background:#2f8c65;

}

.orange{

    background:#f57f17;

}

.navy{

    background:#143b73;

}

.journey-item h3{

    font-size:28px;

    font-family:'Playfair Display',serif;

    color:#17416d;

    margin-bottom:15px;

}

.orange-text{

    color:#f57f17 !important;

}

.journey-item p{

    font-size:15px;

    line-height:1.8;

    color:#59697a;

    margin-bottom:20px;

}

.journey-item h4{

    color:#177f63;

    font-size:24px;

    font-weight:700;

}

.journey-line{

    flex:0 0 120px;

    margin-top:42px;

    position:relative;

}

.journey-line::before{

    content:"";

    position:absolute;

    top:14px;

    left:0;

    width:100%;

    border-top:2px dotted #56a6b2;

}

.dot{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:26px;

    height:26px;

    border-radius:50%;

    background:#0d7f6f;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    font-weight:700;

}

.dot.blue{

    background:#163f79;

}

/*=========================
Responsive
=========================*/

@media(max-width:1100px){

    .journey-wrapper{

        flex-direction:column;

        align-items:center;

        gap:35px;

    }

    .journey-line{

        width:2px;

        height:60px;

        margin:0;

    }

    .journey-line::before{

        width:2px;

        height:100%;

        border:none;

        border-left:2px dotted #5aa8b0;

        left:50%;

        top:0;

        transform:translateX(-50%);

    }

    .dot{

        top:50%;

        transform:translate(-50%,-50%);

    }

}
/*==================================================
HOW WE OPERATE
PART 2A
==================================================*/

.operate-section{
    position:relative;
    padding:110px 0;
    background:#ffffff;
    overflow:hidden;
}

.operate-section .container{
    max-width:1400px;
    margin:auto;
    position:relative;
}

/*============================
TITLE
============================*/

.section-heading{
    text-align:center;
    margin-bottom:70px;
    position:relative;
}

.section-heading h2{

    font-family:'Inter',sans-serif;
    font-size:68px;
    font-weight:800;
    color:#072b63;
    letter-spacing:-2px;
    margin-bottom:10px;
    text-transform:uppercase;

}

.section-heading p{

    font-size:24px;
    color:#243B63;
    font-weight:500;
    margin-bottom:22px;

}

.heading-line{

    width:100%;
    height:3px;
    position:absolute;
    top:34px;
    left:0;
    z-index:-1;
    background:
        linear-gradient(to right,
        transparent 0%,
        transparent 18%,
        #7ba7d6 18%,
        #7ba7d6 30%,
        transparent 30%,
        transparent 70%,
        #7ba7d6 70%,
        #7ba7d6 82%,
        transparent 82%);

    opacity:.5;

}

.heading-accent{

    width:120px;
    height:6px;
    background:#16b8b3;
    border-radius:50px;
    margin:auto;

}

/*============================
FLOW WRAPPER
============================*/

.operate-wrapper{

    position:relative;
    min-height:760px;

}

/*============================
ROWS
============================*/

.top-row{

    display:grid;
    grid-template-columns:270px 560px 270px;
    justify-content:center;
    align-items:center;
    gap:70px;

}

.bottom-row{

    display:grid;
    grid-template-columns:repeat(4,280px);
    justify-content:center;
    gap:40px;

    margin-top:120px;

}

/*============================
COMMON CARD
============================*/

.flow-card{

    position:relative;
    background:#fff;
    border-radius:24px;
    padding:35px 30px;
    text-align:center;

    box-shadow:
        0 20px 45px rgba(20,40,90,.08),
        0 4px 12px rgba(0,0,0,.04);

    transition:.35s ease;

    z-index:10;

}

.flow-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 55px rgba(20,40,90,.12);

}

/*============================
SIDE CARDS
============================*/

.side-card{

    height:300px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    border:2px solid #dbe5f5;

}

.side-card span{

    display:block;

    width:70px;

    height:4px;

    margin:18px auto 0;

    background:#2d62df;

    border-radius:50px;

}

.side-card h3{

    color:#15396a;

    font-size:22px;

    line-height:1.35;

    font-weight:700;

    margin-top:22px;

}

/*============================
MAIN CARD
============================*/

.main-card{

    height:320px;

    border-radius:28px;

    background:
        linear-gradient(135deg,#082d67,#163f80);

    border:4px solid #15bcb5;

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

}

.main-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at 30% 20%,
    rgba(255,255,255,.06),
    transparent 45%);

    pointer-events:none;

}

.vb-logo{

    width:170px;

    margin:0 auto 18px;

}

.main-card h2{

    font-size:54px;

    font-weight:700;

    margin-bottom:16px;

}

.main-card p{

    font-size:28px;

    line-height:1.45;

    font-weight:400;

}

.mini-accent{

    width:90px;

    height:5px;

    background:#18d0c4;

    border-radius:50px;

    margin:10px auto 22px;

}

/*============================
BOTTOM FEATURE CARDS
============================*/

.feature-card{

    height:300px;

    border:1px solid #e8edf5;

}

.feature-card h4{

    font-size:21px;

    line-height:1.4;

    color:#16386d;

    font-weight:700;

    margin-top:20px;

}

.feature-card span{

    width:70px;

    height:4px;

    display:block;

    margin:18px auto 0;

    border-radius:40px;

    background:#2d62df;

}

/*============================
ICONS
============================*/

.icon-circle,

.feature-icon{

    width:92px;

    height:92px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

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

}

.icon-circle{

    background:#173f82;

}

.feature-icon.blue{

    background:#2f69df;

}

.feature-icon.royal{

    background:#1b59c7;

}

.feature-icon.teal{

    background:#20afb4;

}

.feature-icon.green{

    background:#53b03b;

}

.icon-circle img,

.feature-icon img{

    width:44px;
    height:44px;
    object-fit:contain;

}

/*============================
ACCENT COLORS
============================*/

.feature-card:nth-child(2) span{

    background:#20afb4;

}

.feature-card:nth-child(4) span{

    background:#53b03b;

}
/*==================================================
HOW WE OPERATE
PART 2B
==================================================*/

/* SVG CONNECTIONS */

.flow-lines{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:1;

    pointer-events:none;

    overflow:visible;

}

.flow-lines line{

    stroke:#1c4ea2;

    stroke-width:3;

    stroke-linecap:round;

}

.flow-lines polygon{

    fill:#1c4ea2;

}

.flow-lines circle{

    fill:#14c2c2;

    stroke:#1c4ea2;

    stroke-width:3;

}

/*=============================
BACKGROUND DECORATION
=============================*/

.operate-section::before{

    content:"";

    position:absolute;

    top:30px;

    left:-220px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:
    repeating-radial-gradient(

        circle,

        rgba(18,92,190,.08) 0,

        rgba(18,92,190,.08) 2px,

        transparent 2px,

        transparent 18px

    );

    opacity:.45;

}

.operate-section::after{

    content:"";

    position:absolute;

    right:-120px;

    top:0;

    width:320px;

    height:320px;

    background-image:radial-gradient(#1f58b7 1.6px, transparent 1.6px);

    background-size:14px 14px;

    opacity:.22;

}

/* decorative corner circles */

.operate-wrapper::before{

    content:"";

    position:absolute;

    right:-160px;

    bottom:-80px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:

    repeating-radial-gradient(

        circle,

        rgba(16,180,170,.08) 0,

        rgba(16,180,170,.08) 2px,

        transparent 2px,

        transparent 18px

    );

}

.operate-wrapper::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    repeating-radial-gradient(

        circle,

        rgba(32,72,180,.05) 0,

        rgba(32,72,180,.05) 2px,

        transparent 2px,

        transparent 18px

    );

}

/*=============================
HOVER EFFECTS
=============================*/

.side-card:hover{

    border-color:#0ab8b2;

}

.main-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 35px 70px rgba(0,0,0,.18);

}

.feature-card:hover{

    border-color:#17bdb7;

}

.icon-circle,

.feature-icon{

    transition:.35s;

}

.flow-card:hover .icon-circle,

.flow-card:hover .feature-icon{

    transform:scale(1.08);

}

/* underline animation */

.side-card span,

.feature-card span,

.mini-accent{

    transition:.35s;

}

.flow-card:hover span,

.flow-card:hover .mini-accent{

    width:95px;

}

/*=============================
SVG ANIMATION
=============================*/

.flow-lines line{

    stroke-dasharray:10 6;

    animation:dashMove 18s linear infinite;

}

@keyframes dashMove{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-320;

    }

}

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

@media(max-width:1200px){

.section-heading h2{

    font-size:52px;

}

.top-row{

    grid-template-columns:1fr;

    gap:40px;

}

.bottom-row{

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

}

.main-card{

    width:100%;

}

.flow-lines{

    display:none;

}

.operate-wrapper{

    min-height:auto;

}

}

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

@media(max-width:768px){

.operate-section{

    padding:70px 0;

}

.section-heading{

    margin-bottom:45px;

}

.section-heading h2{

    font-size:38px;

    letter-spacing:-1px;

}

.section-heading p{

    font-size:18px;

}

.heading-line{

    display:none;

}

.heading-accent{

    width:90px;

}

.bottom-row{

    grid-template-columns:1fr;

    gap:25px;

    margin-top:35px;

}

.side-card{

    height:auto;

    padding:35px 25px;

}

.main-card{

    height:auto;

    padding:50px 25px;

}

.main-card h2{

    font-size:34px;

}

.main-card p{

    font-size:22px;

}

.vb-logo{

    width:130px;

}

.icon-circle,

.feature-icon{

    width:76px;

    height:76px;

}

.icon-circle img,

.feature-icon img{

    width:36px;

}

.feature-card{

    height:auto;

    padding:35px 25px;

}

.feature-card h4{

    font-size:20px;

}

}

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

@media(max-width:480px){

.section-heading h2{

    font-size:30px;

}

.section-heading p{

    font-size:16px;

}

.main-card h2{

    font-size:28px;

}

.main-card p{

    font-size:18px;

}

.side-card h3{

    font-size:20px;

}

.feature-card h4{

    font-size:18px;

}

}
/*=========================================
PART 3
Responsive CSS
==========================================*/

/**************
Large Laptop
***************/

@media (max-width:1400px){

    .operate-section .container{
        max-width:1200px;
        padding:0 30px;
    }

    .top-row{
        grid-template-columns:240px 480px 240px;
        gap:40px;
    }

    .bottom-row{
        grid-template-columns:repeat(4,240px);
        gap:25px;
    }

    .main-card{
        height:300px;
    }

    .main-card h2{
        font-size:44px;
    }

    .main-card p{
        font-size:24px;
    }

}


/**************
Laptop
***************/

@media (max-width:1200px){

    .operate-wrapper{
        min-height:auto;
    }

    .flow-lines{
        display:none;
    }

    .top-row{

        display:grid;
        grid-template-columns:1fr;
        gap:35px;

        max-width:700px;
        margin:auto;

    }

    .bottom-row{

        margin-top:45px;

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

        gap:30px;

        max-width:700px;
        margin-left:auto;
        margin-right:auto;

    }

    .side-card,
    .main-card,
    .feature-card{

        width:100%;
        height:auto;

    }

}


/**************
Tablet
***************/

@media (max-width:992px){

    .operate-section{

        padding:80px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:46px;

        letter-spacing:-1px;

    }

    .section-heading p{

        font-size:22px;

    }

    .main-card{

        padding:50px 30px;

    }

    .vb-logo{

        width:140px;

    }

    .main-card h2{

        font-size:40px;

    }

    .main-card p{

        font-size:22px;

    }

    .icon-circle,
    .feature-icon{

        width:80px;
        height:80px;

    }

    .icon-circle img,
    .feature-icon img{

        width:38px;
        height:38px;

    }

    .side-card h3{

        font-size:22px;

    }

    .feature-card h4{

        font-size:20px;

    }

}


/**************
Large Mobile
***************/

@media (max-width:768px){

    .operate-section{

        padding:70px 20px;

    }

    .heading-line{

        display:none;

    }

    .section-heading h2{

        font-size:34px;

    }

    .section-heading p{

        font-size:18px;

    }

    .heading-accent{

        width:80px;
        height:5px;

    }

    .top-row{

        gap:25px;

    }

    .bottom-row{

        grid-template-columns:1fr;

        gap:25px;

        margin-top:30px;

    }

    .main-card{

        padding:40px 25px;

    }

    .main-card h2{

        font-size:32px;

    }

    .main-card p{

        font-size:20px;

    }

    .vb-logo{

        width:120px;

    }

    .side-card{

        padding:35px 25px;

    }

    .feature-card{

        padding:35px 25px;

    }

    .side-card h3{

        font-size:20px;

        line-height:1.5;

    }

    .feature-card h4{

        font-size:18px;

        line-height:1.5;

    }

}


/**************
Small Mobile
***************/

@media (max-width:576px){

    .operate-section{

        padding:60px 15px;

    }

    .section-heading{

        margin-bottom:35px;

    }

    .section-heading h2{

        font-size:28px;

    }

    .section-heading p{

        font-size:16px;

    }

    .heading-accent{

        width:60px;

    }

    .main-card{

        border-width:3px;

        border-radius:20px;

        padding:35px 20px;

    }

    .vb-logo{

        width:100px;

        margin-bottom:15px;

    }

    .main-card h2{

        font-size:26px;

        margin-bottom:12px;

    }

    .mini-accent{

        width:70px;

        margin:12px auto 18px;

    }

    .main-card p{

        font-size:17px;

        line-height:1.6;

    }

    .side-card,
    .feature-card{

        border-radius:20px;

        padding:30px 20px;

    }

    .icon-circle,
    .feature-icon{

        width:68px;

        height:68px;

    }

    .icon-circle img,
    .feature-icon img{

        width:30px;

        height:30px;

    }

    .side-card h3{

        font-size:18px;

    }

    .feature-card h4{

        font-size:17px;

    }

}


/**************
Very Small Devices
***************/

@media (max-width:360px){

    .section-heading h2{

        font-size:24px;

    }

    .section-heading p{

        font-size:15px;

    }

    .main-card h2{

        font-size:22px;

    }

    .main-card p{

        font-size:15px;

    }

    .side-card h3{

        font-size:16px;

    }

    .feature-card h4{

        font-size:16px;

    }

}
/*=================================
VALUE & REVENUE MODEL
=================================*/

.revenue-model{

    padding:70px 0;

    background:#fff;

}

.revenue-model .section-title{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:45px;

}

.revenue-model .section-title span{

    width:80px;

    height:2px;

    background:#d9dde7;

}

.revenue-model .section-title h2{

    font-family:'Playfair Display',serif;

    color:#14386d;

    font-size:38px;

    font-weight:700;

}

.revenue-grid{

    display:grid;

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

    border:1px solid #e8edf4;

}

.revenue-item{

    padding:35px 20px;

    text-align:center;

    border-right:1px solid #e8edf4;

    border-bottom:1px solid #e8edf4;

    transition:.35s;

    background:#fff;

}

.revenue-item:nth-child(4),
.revenue-item:nth-child(8){

    border-right:none;

}

.revenue-item:nth-last-child(-n+4){

    border-bottom:none;

}

.revenue-item:hover{

    background:#f7fbff;

    transform:translateY(-4px);

}

.revenue-item .icon{

    width:60px;

    height:60px;

    margin:auto auto 18px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.revenue-item img{

    width:48px;

    height:48px;

}

.revenue-item h4{

    font-size:18px;

    color:#14386d;

    margin-bottom:6px;

    font-weight:600;

    line-height:1.4;

}

.revenue-item p{

    color:#6d7888;

    font-size:16px;

    line-height:1.5;

}

/*========================
Responsive
========================*/

@media(max-width:992px){

.revenue-grid{

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

}

.revenue-item{

border-right:1px solid #e8edf4 !important;
border-bottom:1px solid #e8edf4 !important;

}

.revenue-item:nth-child(even){

border-right:none !important;

}

}

@media(max-width:576px){

.revenue-grid{

grid-template-columns:1fr;

}

.revenue-item{

border-right:none !important;

}

.revenue-model .section-title h2{

font-size:28px;

}

}
/*==================================
LEADERSHIP
==================================*/

.leadership{

    padding:80px 0;

    background:#fff;

}

.leadership .section-title{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-bottom:15px;

}

.leadership .section-title span{

    width:80px;

    height:2px;

    background:#d7dde7;

}

.leadership .section-title h2{

    font-family:'Playfair Display', serif;

    color:#15386b;

    font-size:34px;

    text-align:center;

}

.section-desc{

    max-width:900px;

    margin:0 auto 45px;

    text-align:center;

    color:#64748b;

    line-height:1.7;

    font-size:16px;

}

.leadership-grid{

    display:grid;

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

    gap:30px;

}

.leader-card{

    background:#fff;

    border:1px solid #dfe7f2;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.leader-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.leader-image{

    height:280px;

    overflow:hidden;

}

.leader-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.leader-card:hover img{

    transform:scale(1.08);

}

.leader-info{

    padding:18px;

    text-align:center;

}

.leader-info h3{

    font-size:22px;

    color:#15386b;

    margin-bottom:6px;

    font-weight:700;

}

.leader-info span{

    color:#64748b;

    font-size:15px;

}

.leadership-footer{

    margin-top:45px;

    display:grid;

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

    gap:20px;

}

.footer-item{

    background:#f7fbff;

    border-radius:14px;

    padding:20px;

    text-align:center;

}

.footer-item strong{

    display:block;

    color:#15386b;

    font-size:22px;

    margin-bottom:8px;

}

.footer-item span{

    color:#64748b;

    font-size:15px;

}

/*==========================
Responsive
==========================*/

@media(max-width:992px){

    .leadership-grid{

        grid-template-columns:1fr 1fr;

    }

    .leadership-footer{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .leadership{

        padding:60px 20px;

    }

    .leadership-grid{

        grid-template-columns:1fr;

    }

    .leader-image{

        height:320px;

    }

    .leadership .section-title h2{

        font-size:28px;

    }

}
/*=================================
CTA SECTION
==================================*/

.cta-section{

    padding:40px 0;

    background:#ffffff;

}

.cta-wrapper{

    background:linear-gradient(180deg,#072B63,#082550);

    border-radius:18px;

    display:grid;

    grid-template-columns:
    1.6fr
    1fr
    1fr
    1fr
    auto;

    align-items:center;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

}

/* left */

.cta-intro{

    padding:38px 45px;

    position:relative;

}

.orange-line{

    width:100%;

    height:4px;

    background:#F68A1F;

    position:absolute;

    bottom:0;
    left:0;

}

.cta-intro h2{

    color:#fff;

    font-size:34px;

    margin-bottom:10px;

    font-family:'Playfair Display',serif;

}

.cta-intro p{

    color:rgba(255,255,255,.75);

    font-size:17px;

}

/* columns */

.cta-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:30px;

    border-left:1px solid rgba(255,255,255,.15);

}

.cta-icon{

    width:55px;
    height:55px;

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

    flex-shrink:0;

}

.cta-icon img{

    width:34px;

}

.cta-item h4{

    color:#fff;

    font-size:17px;

    margin-bottom:6px;

}

.cta-item p{

    color:rgba(255,255,255,.65);

    font-size:14px;

    line-height:1.5;

}

/* button */

.cta-button{

    padding:30px;

    border-left:1px solid rgba(255,255,255,.15);

}

.btn-contact{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 30px;

    border-radius:10px;

    background:#14B8A6;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.btn-contact:hover{

    background:#0fa392;

    transform:translateY(-3px);

}

/*==========================
Responsive
==========================*/

@media(max-width:1200px){

.cta-wrapper{

grid-template-columns:1fr 1fr;

}

.cta-intro{

grid-column:1/-1;

}

.cta-button{

grid-column:1/-1;

text-align:center;

border-left:none;

border-top:1px solid rgba(255,255,255,.15);

}

}

@media(max-width:768px){

.cta-wrapper{

grid-template-columns:1fr;

}

.cta-item{

border-left:none;

border-top:1px solid rgba(255,255,255,.15);

}

.cta-button{

border-top:1px solid rgba(255,255,255,.15);

}

.cta-intro{

padding:30px;

}

.cta-intro h2{

font-size:28px;

}

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

.footer{

    background:#072b63;

    color:#fff;

    padding-top:40px;

    position:relative;

}

/* Orange Top Border */

.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:320px;

    height:4px;

    background:#f58220;

}

.footer-top{

    display:grid;

    grid-template-columns:
    1.2fr
    .8fr
    1fr
    1fr;

    gap:45px;

    padding-bottom:35px;

}

.footer-company{

    padding-right:30px;

    border-right:1px solid rgba(255,255,255,.15);

}

.footer-logo{

    width:230px;

    margin-bottom:15px;

}

.cin{

    font-size:13px;

    opacity:.75;

    margin-bottom:20px;

}

.social-icons{

    display:flex;

    gap:18px;

}

.social-icons a{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.social-icons a:hover{

    background:#16b8b3;

}

/* Headings */

.footer h4{

    font-size:15px;

    margin-bottom:20px;

    font-weight:700;

    color:#fff;

    letter-spacing:.5px;

}

/* Links */

.footer-links ul,

.footer-office ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:10px;

    font-size:14px;

    color:rgba(255,255,255,.8);

}

.footer-links a{

    color:rgba(255,255,255,.8);

    text-decoration:none;

}

.footer-links a:hover{

    color:#16b8b3;

}

/* Office */

.footer-office li{

    display:flex;

    gap:12px;

    margin-bottom:12px;

    line-height:1.6;

    color:rgba(255,255,255,.8);

    font-size:14px;

}

.footer-office i{

    width:18px;

    color:#16b8b3;

}

/* Bottom */

.footer-bottom{

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

    padding:18px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

}

.footer-policy{

    display:flex;

    gap:12px;

    align-items:center;

}

.footer-policy a{

    color:rgba(255,255,255,.8);

    text-decoration:none;

}

.footer-policy a:hover{

    color:#16b8b3;

}

/*==========================
Responsive
==========================*/

@media(max-width:1100px){

.footer-top{

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

}

.footer-company{

border-right:none;

}

}

@media(max-width:768px){

.footer{

padding:50px 20px;

}

.footer-top{

grid-template-columns:1fr;

gap:40px;

}

.footer-company{

padding-right:0;

}

.footer-bottom{

flex-direction:column;

gap:15px;

text-align:center;

}

.footer-policy{

flex-wrap:wrap;

justify-content:center;

}

}
/* ==========================================
   LEADERSHIP & EXPERT NETWORK
========================================== */

.expert-network {

    padding: 65px 0 45px;

    background: #f7fafc;

    color: #092d5f;

}


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

.expert-heading {

    margin-bottom: 22px;

}

.expert-heading h2 {

    margin: 0 0 8px;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 750;

    color: #092f62;

}

.expert-heading p {

    margin: 0;

    font-size: 22px;

    line-height: 1.45;

    color: #65758c;

    font-weight: 400;

}


/* ==========================================
   INTRO BOX
========================================== */

.expert-intro {

    background: #edf8f9;

    border: 1px solid #c8e0e5;

    border-radius: 18px;

    padding: 17px 30px 20px;

    margin-bottom: 30px;

}

.expert-intro h3 {

    margin: 0 0 20px;

    font-size: 17px;

    font-weight: 750;

    color: #092f62;

}

.expert-intro p {

    margin: 0;

    font-size: 14px;

    line-height: 1.55;

    color: #24364e;

}


/* ==========================================
   EXPERT GRID
========================================== */

.expert-grid {

    display: grid;

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

    gap: 18px;

}


/* ==========================================
   EXPERT CARD
========================================== */

.expert-card {

    min-height: 172px;

    background: #ffffff;

    border: 1px solid #c8dce8;

    border-radius: 25px;

    padding: 17px 16px;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    box-shadow:
        0 5px 15px rgba(16, 51, 91, 0.03);

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

}

.expert-card:hover {

    transform: translateY(-5px);

    border-color: #8db7ca;

    box-shadow:
        0 15px 30px rgba(16, 51, 91, 0.10);

}


/* ==========================================
   NUMBER CIRCLE
========================================== */

.expert-number {

    width: 54px;

    height: 54px;

    min-width: 54px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

}

.expert-number.navy {

    background: #062d61;

}

.expert-number.teal {

    background: #008f88;

}

.expert-number.orange {

    background: #f56820;

}


/* ==========================================
   CARD CONTENT
========================================== */

.expert-content {

    flex: 1;

}

.expert-content h3 {

    margin: 5px 0 27px;

    font-size: 16px;

    line-height: 1.2;

    color: #082f63;

    font-weight: 750;

}

.expert-content p {

    margin: 0;

    font-size: 13.5px;

    line-height: 1.32;

    color: #27384e;

}


/* ==========================================
   EXPERIENCE STRIP
========================================== */

.expert-highlight {

    margin-top: 22px;

    min-height: 52px;

    padding: 13px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 8px;

    border-radius: 8px;

    background: #062e62;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 700;

}

.expert-highlight span {

    color: #ffffff;

}


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

.expert-footer {

    text-align: center;

    padding-top: 15px;

}

.expert-footer h3 {

    margin: 0;

    font-size: 19px;

    line-height: 1.4;

    font-weight: 750;

    color: #092f62;

}


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

@media (max-width: 1200px) {

    .expert-grid {

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

    }

    .expert-card {

        min-height: 180px;

    }

}


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

@media (max-width: 900px) {

    .expert-network {

        padding: 55px 25px 40px;

    }

    .expert-heading h2 {

        font-size: 30px;

    }

    .expert-heading p {

        font-size: 19px;

    }

    .expert-grid {

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

    }

    .expert-highlight {

        flex-wrap: wrap;

    }

}


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

@media (max-width: 600px) {

    .expert-network {

        padding: 45px 18px 35px;

    }

    .expert-heading h2 {

        font-size: 27px;

    }

    .expert-heading p {

        font-size: 17px;

    }

    .expert-intro {

        padding: 17px 20px;

        border-radius: 15px;

    }

    .expert-intro h3 {

        font-size: 16px;

        margin-bottom: 14px;

    }

    .expert-intro p {

        font-size: 13px;

    }

    .expert-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }

    .expert-card {

        min-height: auto;

        padding: 20px;

    }

    .expert-number {

        width: 50px;

        height: 50px;

        min-width: 50px;

    }

    .expert-content h3 {

        margin-bottom: 15px;

    }

    .expert-highlight {

        font-size: 13px;

        padding: 14px;

        gap: 5px;

    }

    .expert-footer h3 {

        font-size: 16px;

    }

}
html {
    scroll-behavior: smooth;
}

section {
    scroll-margin-top: 90px;
}