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

        
.hero{
    position: relative;
    overflow: hidden;
    padding: 120px 0 220px;

    background: url("../../images/banners/herobg.png") center center/cover no-repeat;
}

.hero-curve {
    position: absolute;
    left: 51%;
    bottom: -286px;
    transform: translateX(-50%);
    width: 111%;
    height: 650px;
    background: #fff;
    border-radius: 63%;
    z-index: 0;
}

.hero-container{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:0px;
    position:relative;
    z-index:2;
}

.hero-left img{
    width: 100%;
    max-width: 430px;
    display: block;
    position: relative;
    bottom: -217px;
    left: -23px;
    transform: rotate(-2deg);
}

.hero-right img{
    width:100%;
    max-width:400px;
    display:block;

    position:relative;

    bottom:-232px;
    right:-10px;
    transform: rotate(2deg);


}
.hero-left,
.hero-right{

    flex:0 0 28%;

    display:flex;

    align-items:flex-end;

}

.hero-content{
    flex: 1;
    display: flex;
    max-width:650px;
    flex-direction: column;
    align-items: center;          /* Center content horizontally */
    justify-content: center;      /* Center content vertically */
    text-align: center;
    margin:auto;
    transform: translateY(-60px);
}

.hero-left img,
.hero-right img{

     width:100%;

    max-width:420px;

    display:block;
    height:auto;
    position:relative;

}

.hero-content h1{
    font-size:58px;
    line-height:1.15;
    color: #FFFFFF;
    font-weight:700;
    max-width:700px;
    margin:10px auto;
    
}

.hero-content p{
    margin:0px auto 0;   /* Was 20px */
    font-size:18px;
    max-width:540px;
    color:#CADFFF;
    line-height:1.6;
}
.sub-title{
    display: inline-block;
    color: #73E1FF;
    margin-top: 50px;      /* Move down */
    margin-bottom: 15px;
}
/*=========================
              BUTTON
        =========================*/

        .explore-btn{
            display:inline-block;
            margin-top:15px;
           background: linear-gradient(90deg, #73E1FF 0%, #C3EAF5 50%, #73E1FF 100%);
            color:#0E3F8A;
            text-decoration:none;
            padding:14px 34px;
            font-size:18px;
            border-radius:12px;
            font-weight:600;
            border:1px solid rgba(255,255,255,.2);
            box-shadow:0 8px 20px rgba(0,0,0,.2);
            transition:.3s;
             position: relative;
    top: 17px;
        }

        .explore-btn:hover{
            transform:translateY(-4px);
            background:#ffffff;
        }

        /*=========================
              STATISTICS
        =========================*/

        .stats{
    width:80%;
    max-width:950px;

    margin:-0px auto 0;

    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:30px;

    position:relative;
    z-index:3;
}

.card {
    width: 230px;
    background: #fff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,.15);
    transition: .35s;
}

/* Middle card up */
.stats .card:nth-child(2) {
    transform: translateY(-25px);
    z-index: 2;
}

.card:hover {
    transform: translateY(-35px); /* 25px + extra 10px */
}

.stats .card:nth-child(2):hover {
    transform: translateY(-35px);
}


.card h2 {
    font-size: 40px;
    color: #173979;
    margin-bottom: 8px;
    font-style: bold;
    font-weight: 700;
}

.card p {
    font-size: 15px;
    color: #29354C;
    font-style: bold;

    
}
/* PNG Image - Same place as old icon */
.stat-icon{
    width: 33px;
    height: 33px;
    display: block;
    object-fit: contain;
    margin: 0 auto 20px;   /* Same spacing as old icon */
}

/* 
       .stats {
    width: 80%;
    max-width: 950px;
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
    gap: 30px;
    position: relative;
    z-index: 10;
}

        .card {
            width:250px;
            background: #fff;
            border-radius: 20px;
            padding: 35px 25px;
            text-align: center;
            box-shadow: 0 15px 35px rgba(0,0,0,.15);
            transition: .35s;
        }

        .card:hover {
            transform: translateY(-10px);
        }

        .card i {
            font-size: 42px;
            color: #214da0;
            margin-bottom: 18px;
        }

        .card h2 {
            font-size: 40px;
            color: #214da0;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .card p {
            font-size: 15px;
            color: #444;
        } */

        /*=========================
              WAVE - FIXED CURVE
        =========================*/
       

        .hero-left,
.hero-right,
.hero-content{
    position: relative;
    z-index: 2;
}

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


        .card {
            animation: fadeUp .8s ease;
        }

        .hero-content {
            animation: fadeIn 1s ease;
        }

        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
            100% { transform: translateY(0); }
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: scale(.95); }
            to { opacity: 1; transform: scale(1); }
        }
/* ==========================================
   TABLET (1024px)
========================================== */
@media (max-width:1024px){

    .hero{
        padding:120px 0 60px;
    }

    .hero-curve{
    width:220%;
    height:320px;
    bottom:-170px;
}

    .hero-container{
        gap:25px;
    }

    .hero-left,
    .hero-right{
        width:25%;
    }

    .hero-left img{
    max-width:300px;
    margin-left:0;
    bottom:-30px;
    display: none;
    transform: rotate(0deg);
}

.hero-right img{
    max-width:280px;
    margin-right:0;
    bottom:-30px;
    display: none;
}

    .hero-content{
        width:50%;
        margin: 55px 0px;
    }

    .hero-content h1{
        font-size:40px;
    }

    .hero-content p{
        font-size:17px;
    }

    .stats{
        width:90%;
        gap:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .card{
        width:210px;
    }


}


/* ==========================================
   MOBILE / TABLET (820px)
========================================== */
@media (max-width:820px){

    .hero{
        padding:100px 0 40px;
    }
    .hero-curve{
    width:260%;
    height:260px;
    bottom:-150px;
}

    .hero-container{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .hero-left,
    .hero-right{
        width:180px;
        margin:0;
        display:flex;
        justify-content:center;
    }

    .hero-left img,
    .hero-right img{
        width:260px;
        bottom:-20px;
        position:static;
        transform:none;
        animation:none;
    }

    .hero-content{
        width:100%;
        text-align:center;
        order:1;
    }

    .hero-left{

display:none;

}

    .hero-right{
        order:2;
    }

    .hero-content h1{
        font-size:32px;
    }

    .hero-content p{
        font-size:15px;
    }

    .explore-btn{
        padding:12px 28px;
        font-size:16px;
    }

    .stats{
        width:95%;
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .card{
        width:220px;
    }


}


/* ==========================================
   MOBILE (480px)
========================================== */
@media (max-width:480px){

    .hero{
        padding:90px 0 40px;
        overflow:hidden;
    }
    .hero-curve{
    width:320%;
    height:220px;
    bottom:-130px;
}

    .hero-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:20px;
    }

    /* Hide Girl */
    .hero-left{
        display:none;
    }

    /* Content */
    .hero-content{
        width:100%;
        order:1;
        padding:0 20px;
        text-align:center;
    }

    .sub-title{
        font-size:13px;
    }

    .hero-content h1{
        font-size:28px;
        line-height:1.3;
        margin:12px 0;
    }

    .hero-content p{
        font-size:14px;
        line-height:1.7;
    }

    .explore-btn{
        padding:12px 26px;
        font-size:15px;
        border-radius:30px;
        margin-top:18px;
    }

/* Boy Image */
.hero-right{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    order: 2;
    margin-top: -20px; /* Move the whole container up */
}

.hero-right img{
    display: none;
    width:240px;
    bottom:-10px;
    height: auto;
    position: relative;
    top: 20px;          /* Remove the extra gap */
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: none;
    animation: none;
}

    /* Cards */
    .stats{
        width:92%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        margin-top:25px;
    }

    .card{
        width:100%;
        max-width:300px;
        padding:20px;
    }

    .stats .card:nth-child(2),
    .card:hover{
        transform:none;
    }




}


/* ==========================================
   SMALL MOBILE (360px)
========================================== */
@media (max-width:360px){

    .hero-content h1{
        font-size:24px;
    }

    .hero-content p{
        font-size:13px;
    }

    .hero-right img{
        width:120px;
    }

    .explore-btn{
        padding:10px 22px;
        font-size:14px;
    }

    .card{
        max-width:260px;
    }
}

/* ==========================================
   DESKTOP (1025px - 1200px)
========================================== */
@media (min-width:1025px) and (max-width:1200px){

    .hero{
        padding:120px 0 180px;
    }

    .hero-content{
        max-width:560px;
    }

    .hero-content h1{
        font-size:48px;
    }

    .hero-content p{
        font-size:17px;
    }

    .hero-left img{
        max-width:320px;
        bottom:-170px;
        left:-10px;
        transform: rotate(0deg);
    }

    .hero-right img{
        max-width:300px;
        bottom:-180px;
        right:-10px;
    }

    .stats{
        width:90%;
    }
}

/* ==========================================
   LARGE DESKTOP (1201px - 1400px)
========================================== */
@media (min-width:1201px) and (max-width:1400px){

    .hero{
        padding:130px 0 200px;
    }

    .hero-content{
        max-width:620px;
    }

    .hero-content h1{
        font-size:54px;
    }

        .hero-left img {
        max-width: 390px;
        bottom: -177px;
        transform: rotate(-3deg);
    }

    .hero-right img{
        max-width:370px;
        bottom:-196px;
        transform: rotate(1deg);
    }

    .stats{
        max-width:1000px;
    }
}

/* ==========================================
   XL DESKTOP (1401px - 1800px)
========================================== */
@media (min-width:1401px) and (max-width:1800px){

    .hero{
        padding:150px 0 230px;
    }

    .hero-content{
        max-width:700px;
    }

    .hero-content h1{
        font-size:62px;
    }

    .hero-content p{
        font-size:19px;
    }

    .hero-left img{
        max-width:460px;
        bottom:-224px;
        transform: rotate(-3deg);
    }

    .hero-right img{
        max-width:430px;
        bottom:-241px;
        transform: rotate(3deg);
    }

    .stats{
        max-width:1100px;
    }
}

/* ==========================================
   2K DESKTOP (1801px - 2000px)
========================================== */
@media (min-width:1801px) and (max-width:2000px){

    .hero{
        padding:170px 0 260px;
    }

    .hero-content{
        max-width:760px;
    }

    .hero-content h1{
        font-size:70px;
        line-height:1.15;
    }

    .hero-content p{
        font-size:21px;
        max-width:650px;
    }

    .sub-title{
        font-size:20px;
    }

    .explore-btn{
        padding:18px 42px;
        font-size:20px;
    }

    .hero-left img{
        max-width:520px;
        bottom:-255px;
        left:-20px;
        transform: rotate(0deg);
    }

    .hero-right img{
        max-width:500px;
        bottom:-270px;
        right:-20px;
        transform: rotate(0deg);
    }

    .stats{
        max-width:1200px;
        gap:40px;
    }

    .card{
        width:260px;
        padding:40px 30px;
    }

    .card h2{
        font-size:46px;
    }

    .card p{
        font-size:17px;
    }
}

/*==================================================
                    ABOUT
==================================================*/
/* .about{
    position: relative;
        margin-top: -410px;
    padding-top: 250px;
    padding-bottom: 100px;
    background: transparent;
    z-index: 10;
} */

.about .container{

    width:1320px;

    max-width:95%;

    margin:auto;

}

/* .about-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

} */

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

.about-left{

    position:relative;

    width:520px;

    height:500px;

    flex-shrink:0;

}

/*============================
        BIG IMAGE
============================*/

/* .about-big{

    position:absolute;

    top:0;

    left:0;

    /* width:370px;

    height:430px; *

    padding:12px;

    /* border:2px dashed #D8D8D8; *

     border-radius:38px;

   

    z-index:1;

} */

/* .about-big img{ */

    /* width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center; */

    /* border-radius:28px; *

}

/*============================
        SMALL IMAGE
============================*/

/* .about-small{

    position:absolute;

    right:0;

    bottom:20px;

    width:235px;

    height:295px;

    padding:10px;

    /* border:2px dashed #D8D8D8; *

    border-radius:34px;

    /* background:#fff; *

    z-index:5;

} */

/* .about-small img{ */

    /* width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center top; */

    /* border-radius:26px; */

/* } */

/*============================
        COURSE BADGE
============================*/

.course-badge{

    
    position: absolute;
    left: 89px;
    bottom: 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 6px 30px;
    border-radius: 60px;
box-shadow: 0 5px 20px rgb(0 21 0 / 40%);
    z-index: 80;
}

.badge-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#EEF5FF;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.badge-icon img{
    width:38px;
    height:38px;
    object-fit:contain;
    display:block;
}

.course-badge span{

    font-size:20px;

    font-weight:700;

    color:#111;

}

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

.about-right{

    flex:1;

}

.about-right .sub-title{

    display:flex;

    align-items:center;

    gap:10px;

    color:#2F5CA8;

    font-size:18px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

}

.about-right .dot{

    width:18px;

    height:18px;

    border-radius:50%;

    background:#AFC4E8;

    position:relative;

}

.about-right .dot::after{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#2F5CA8;

    left:50%;

    top:50%;

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

}

.about-right h2{

    font-size:52px;

    line-height:1.2;

    font-weight:700;

    color:#111;

    margin-bottom:30px;

}

/* .about-text{

    font-size:18px;

    line-height:34px;

    color:#555;

    margin-bottom:22px;

    text-align:justify;

} */

/*==================================================
                FEATURES
==================================================*/

.about-features{

    display:grid;

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

    gap:18px 45px;

    margin-top:35px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

}

.feature-item img{

    width:28px;

    height:28px;

}

.feature-item span{

    font-size:17px;

    font-weight:500;

    color:#222;

}

/*==================================================
            TABLET (991px)
==================================================*/

@media (max-width:991px){

.about{

    margin-top:-260px;
    padding-top:260px;
    padding-bottom:80px;

}

.about-wrapper{

    flex-direction:column;
    align-items:center;
    gap:60px;

}

.about-left{

    width:460px;
    height:470px;
    margin:auto;
    transform:translateY(-20px);

}

.about-big{

    width:320px;
    height:390px;

}

.about-small{

    width:205px;
    height:255px;
    right:0;
    bottom:20px;

}

.course-badge{

    left:10px;

    bottom:20px;

    padding:14px 22px;

}

.badge-icon{

    width:42px;

    height:42px;

    font-size:20px;

}

.course-badge span{

    font-size:18px;

}

.about-right{

    width:100%;

    text-align:center;

}

.about-right .sub-title{

    justify-content:center;

}

.about-right h2{

    font-size:42px;

    margin-bottom:20px;

}

.about-text{

    font-size:17px;

    line-height:30px;

    text-align:justify;

}

.about-features{

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

    gap:20px 25px;

    margin-top:30px;

}

.feature-item{

    justify-content:flex-start;

}

.feature-item img{

    width:26px;

    height:26px;

}

.feature-item span{

    font-size:16px;

}
}

/*==================================================
                MOBILE (767px)
==================================================*/

@media (max-width:767px){

.about{

    margin-top:-140px;
    padding-top:140px;
    padding-bottom:60px;

}

.about-wrapper{

    flex-direction:column;
    gap:45px;

}

.about-left{

    width:320px;
    height:360px;
    margin:auto;
    transform:none;

}
/* Big Image */

.about-big{

    width:220px;

    height:280px;

    top:0;

    left:0;

    padding:8px;

    border-radius:28px;

}

.about-big img{

    border-radius:20px;

}

/* Small Image */

.about-small{

    width:145px;

    height:185px;

    right:0;

    bottom:25px;

    padding:8px;

    border-radius:24px;

}

.about-small img{

    border-radius:18px;

}

/* Badge */

.course-badge{

    left:0;

    bottom:0;

    padding:10px 18px;

    gap:10px;

    border-radius:50px;

}

.badge-icon{

    width:36px;

    height:36px;

    font-size:18px;

}

.course-badge span{

    font-size:15px;

}

/* Right Content */

.about-right{

    width:100%;

    text-align:center;

}

.about-right .sub-title{

    justify-content:center;

    font-size:16px;

}

.about-right h2{

    font-size:30px;

    margin-bottom:18px;

}

.about-text{

    font-size:15px;

    line-height:28px;

    text-align:justify;

}

/* Features */

.about-features{

    grid-template-columns:1fr;

    gap:16px;

    margin-top:25px;

}

.feature-item{

    justify-content:flex-start;

    gap:10px;

}

.feature-item img{

    width:24px;

    height:24px;

}

.feature-item span{

    font-size:15px;

}

}


/*==================================================
            SMALL MOBILE (480px)
==================================================*/

@media (max-width:480px){

.about{

    margin-top:-90px;
    /* padding-top:90px; */
      padding: 90px 12px;
    padding-bottom:50px;

}

.about-left{

    width:280px;
    height:320px;

}


/* Big */

.about-big{

    width:195px;

    height:245px;

}

/* Small */

.about-small{

    width:125px;

    height:165px;

    bottom:20px;

}

/* Badge */

.course-badge{
        left: 17px;
        bottom: 44px;
        padding: 8px 6px;
        transform: scale(.9);
    }
.badge-icon{

    width:32px;

    height:32px;

    font-size:16px;

}

.course-badge span{

    font-size:14px;

}

/* Heading */

.about-right h2{

    font-size:26px;

}

.about-text{

    font-size:14px;

    line-height:25px;

}

.feature-item span{

    font-size:14px;

}

}

/*==================================================
            FINAL POLISH
==================================================*/

/* Smooth Animation */

.about-big,
.about-small{

    overflow:hidden;

    transition:all .45s ease;


}

.about-big img,
.about-small img{

    transition:transform .45s ease;

}

/* Hover */

.about-big:hover{

    transform:translateY(-8px);


}

.about-small:hover{

    transform:translateY(-8px);

    
}

.about-big:hover img,
.about-small:hover img{

    transform:scale(1.05);

}

/*==================================================
                BADGE
==================================================*/

.course-badge{

    transition:.35s ease;

    cursor:pointer;

}

.course-badge:hover{

    transform:translateY(-5px);

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

}

/*==================================================
            FEATURE ITEMS
==================================================*/

.feature-item{

    transition:.3s ease;

}

.feature-item:hover{

    transform:translateX(6px);

}

.feature-item img{

    transition:.3s;

}

.feature-item:hover img{

    transform:rotate(-8deg) scale(1.08);

}

/*==================================================
            IMAGE SHADOW
==================================================*/



/*==================================================
            TYPOGRAPHY
==================================================*/

.about-right h2{

    letter-spacing:-1px;

}


/*==================================================
            BORDER
==================================================*/

/* .about-big,
.about-small{

    border:2px dashed #D9D9D9;

} */

/*==================================================
        FIX IMAGE ALIGNMENT
==================================================*/

/* .about-big img{

    object-position:center center;

}

.about-small img{

    object-position:center top;

} */













































































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

.why-choose{
    padding:100px 0;
    background:#fff;
    /* font-family: 'Hanken Grotesk'; */
}

.why-choose .container{
    width:1320px;
    max-width:95%;
    margin:auto;
}

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

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

.heading-title{

    display:inline-flex;
    align-items:center;
    gap:12px;

    color:#2F5CA8;
    font-size:33px;
    font-weight:700;
    text-transform:uppercase;

}

.heading-dot{

    width:18px;
    height:18px;

    border-radius:50%;

    background:#8EA8D9;

    position:relative;

}

.heading-dot::after{

    content:"";

    width:8px;
    height:8px;

    background:#567CC5;

    border-radius:50%;

    position:absolute;

    left:50%;
    top:50%;

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

}

.section-heading p{
    font-family: 'Poppins', sans-serif;
    font-size:20px;
    line-height:34px;
    color:#222;

}

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

.why-grid{

    display:grid;

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

    gap:30px;

    align-items:start;

}

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

.why-card{

    position:relative;

    width:100%;

    max-width:420px;

    height:290px;

    margin:auto;

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-8px);

}

.card-svg{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

    filter:drop-shadow(0 10px 20px rgba(0,0,0,.10));

}

/*=========================================
ICON
=========================================*/

.icon-box{

    position:absolute;

    top:-35px;

    left:28px;

    width:72px;
    height:72px;

    z-index:20;

}

.icon-svg{

    width:100%;
    height:100%;

    display:block;

}

.icon-box img{

    position:absolute;

    width:30px;

    left:50%;
    top:50%;

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

}

/*=========================================
TEXT
=========================================*/

.card-content{

    position:absolute;

    left:34px;
    right:34px;

    top:82px;

}

.card-content h3{

    font-size:22px;

    font-weight:700;

    color:#141414;

    margin-bottom:22px;

}

.card-content p{

    font-size:15px;

    line-height:30px;

    color:#666690;

}
/*=========================================
        LARGE LAPTOP
=========================================*/

@media (max-width:1200px){

.why-choose .container{
    max-width:95%;
}

.why-grid{
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.why-card{
    max-width:360px;
    height:255px;
}

.card-content{
    top:72px;
    left:26px;
    right:26px;
}

.card-content h3{
    font-size:20px;
    margin-bottom:15px;
}

.card-content p{
    font-size:14px;
    line-height:26px;
}

.icon-box{
    width:64px;
    height:64px;
    top:-32px;
}

.icon-box img{
    width:26px;
}

}

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

@media (max-width:992px){

.why-choose{
    padding:80px 0;
}

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

.section-heading p{
    width:90%;
    font-size:18px;
    line-height:30px;
}

.why-grid{

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

    gap:35px;

    justify-items:center;

}

.why-card{

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

    height:280px;

}

}

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

@media (max-width:768px){

.why-choose{

    padding:70px 0;

}

.heading-title{

    font-size:16px;

}

.heading-dot{

    width:16px;
    height:16px;

}

.heading-dot::after{

    width:7px;
    height:7px;

}

.section-heading{

    margin-bottom:45px;

}

.section-heading p{

    width:100%;

    font-size:17px;

    line-height:28px;

}

.why-grid{

    grid-template-columns:1fr;

    gap:45px;

}

.why-card{

    max-width:360px;

    height:255px;

}

.card-content{

    left:24px;
    right:24px;

    top:72px;

}

.card-content h3{

    font-size:20px;

}

.card-content p{

    font-size:14px;

    line-height:25px;

}

.icon-box{

    left:24px;

    top:-30px;

    width:62px;

    height:62px;

}

.icon-box img{

    width:24px;

}

}

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

@media (max-width:480px){

.why-card{

    max-width:100%;

    height:245px;

}

.card-content{

    top:68px;

}

.card-content h3{

    font-size:18px;

}

.card-content p{

    font-size:13px;

    line-height:23px;

}
}




/* 
 scroll banner  */

.scroll-banner{
    width:100%;
    overflow:hidden;
    background:linear-gradient(90deg,#0B225E,#355CA8,#0B225E);
    padding:22px 0;
    white-space:nowrap;
}

.scroll-track{
    display:flex;
    width:max-content;
    animation:scroll-left 20s linear infinite;
}

.scroll-track span{
    display:flex;
    align-items:center;
    font-family:'Poppins',sans-serif;
    font-size:32px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:2px;
    padding-right:8px;
    flex-shrink:0;
}

@keyframes scroll-left{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}
@media(max-width:992px){

.scroll-track span{
    font-size:38px;
    padding-right:60px;
}

}

@media(max-width:768px){

.scroll-banner{
    padding:16px 0;
}

.scroll-track span{
    font-size:26px;
    letter-spacing:1px;
    padding-right:40px;
}

}























/*==================================================
                GALLERY
==================================================*/

.gallery{

    padding:100px 0;

    background:#fff;

    overflow:hidden;

}

.gallery .container{

    width:1320px;

    max-width:95%;

    margin:auto;

}

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

.gallery-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:50px;

    gap:30px;

}

.gallery-left .sub-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:28px;

    font-weight:700;

    color:#2F5CA8;

    text-transform:uppercase;

    margin-bottom:15px;

}

.gallery-left .dot{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#AFC4E8;

    position:relative;

}

.gallery-left .dot::after{

    content:"";

    width:11px;

    height:11px;

    border-radius:50%;

    background:#2F5CA8;

    position:absolute;

    left:50%;

    top:50%;

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

}

.gallery-left p{

    width:460px;
font-family: 'Poppins', sans-serif;
    max-width:100%;

    font-size:18px;

    line-height:30px;

    color:#555;

}

.gallery-btn{

    width:170px;

    height:54px;

    background:#2F5CA8;

    color:#fff;

    text-decoration:none;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:6px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.gallery-btn:hover{

    background:#173F84;

}

/*==================================================
                SWIPER
==================================================*/

.galleryTop,
.galleryBottom{

    width:100%;

    overflow:hidden;

    margin-bottom:28px;

}

.galleryTop:last-child,
.galleryBottom:last-child{

    margin-bottom:0;

}

.galleryTop .swiper-wrapper,
.galleryBottom .swiper-wrapper{

    transition-timing-function:linear !important;

    align-items:center;

}

.galleryTop .swiper-slide,
.galleryBottom .swiper-slide{

    width:auto !important;

    flex-shrink:0;

}

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

.galleryTop img,
.galleryBottom img{

    width:420px;

    height:260px;

    display:block;

    object-fit:cover;

    border-radius:32px;

    transition:.4s ease;

}

.galleryTop .swiper-slide:hover img,
.galleryBottom .swiper-slide:hover img{

    transform:scale(1.05);

}

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

@media(max-width:1199px){

.gallery{

padding:80px 0;

}

.galleryTop img,
.galleryBottom img{

width:360px;

height:230px;

}

}

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

@media(max-width:991px){

.gallery-header{

flex-direction:column;

align-items:flex-start;

gap:25px;

}

.gallery-left p{

width:100%;

}

.gallery-btn{

margin-top:10px;

}

.galleryTop img,
.galleryBottom img{

width:300px;

height:200px;

}

}

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

@media(max-width:767px){

.gallery{

padding:60px 0;

}

.gallery-header{

margin-bottom:35px;

}

.gallery-left .sub-title{

font-size:16px;

}

.gallery-left p{

font-size:16px;

line-height:28px;

}

.gallery-btn{

width:150px;

height:48px;

font-size:15px;

}

.galleryTop{

margin-bottom:20px;

}

.galleryTop img,
.galleryBottom img{

width:260px;

height:170px;

border-radius:10px;

}

}