:root{
    --primary:#0d6b44;
    --secondary:#f7b926;
    --dark:#1c1c1c;
    --text:#000;
    --white:#fff;
    --border:#ececec;
    --bodyFont: "Roboto", sans-serif;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    font-family: var(--bodyFont);
    background:#fff;
}
a{
    text-decoration:underline;
}
/* Remove black focus box from buttons and links */
a:focus,
a:active,
a:focus-visible,
button:focus,
button:active,
button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    color: var(--secondary) !important;
}
ul{
    list-style:disc;
    padding-left: 20px;
}
ul li{
    font-size: 18px;
    color: rgb(102, 102, 102);
}
.container{
    width:1320px;
    max-width:100%;
    margin:auto;
}


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

.main-header {
    background: #fff;
    height: 85px;
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.main-header .header-inner {
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.logo img{
    height:58px;
    width:auto;
    display:block;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.main-nav{
    margin-left:auto;
    margin-right:35px;
}

.main-nav > ul{
    list-style:none;
    margin:0;
    padding:0;

    display:flex;
    align-items:center;

    gap:28px;
}

.main-nav > ul > li{
    position:relative;
}

.main-nav > ul > li > a{
    display:flex;
    align-items:center;

    color:#111;

    font-size:18px;
    font-weight:500;

    text-decoration:none !important;

    transition:.3s;

    padding:15px 0;
}

.main-nav > ul > li:hover > a{
    color:#04572f;
}

.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-menu-ancestor > a{
    color:#04572f;
}


/* =========================================================
   DESKTOP DROPDOWN
========================================================= */

.main-nav ul li > .sub-menu,
.main-nav ul li > .dropdown{

    position:absolute;

    top:100%;
    left:0;

    min-width:240px;

    margin:0;
    padding:10px 0;

    background:#fff;

    display:none;

    flex-direction:column;

    gap:0;

    list-style:none;

    border-radius:10px;

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

    z-index:9999;
}


/* Show dropdown on desktop hover */

.main-nav ul li:hover > .sub-menu,
.main-nav ul li:hover > .dropdown{
    display:flex;
}


/* =========================================================
   DESKTOP DROPDOWN ITEMS
========================================================= */

.main-nav ul li > .sub-menu > li,
.main-nav ul li > .dropdown > li{

    width:100%;

    margin:0;

    padding:0;

    border-bottom:1px solid #e7e7e7;
}

.main-nav ul li > .sub-menu > li:last-child,
.main-nav ul li > .dropdown > li:last-child{
    border-bottom:0;
}


.main-nav ul li > .sub-menu > li > a,
.main-nav ul li > .dropdown > li > a{

    display:block;

    width:100%;

    padding:11px 20px;

    color:#333;

    font-size:16px;
    font-weight:500;

    text-decoration:none !important;

    background:none;

    transition:.3s;
}

.main-nav ul li > .sub-menu > li > a:hover,
.main-nav ul li > .dropdown > li > a:hover{

    background:#04572f;

    color:#fff;
}


/* =========================================================
   DESKTOP DROPDOWN ARROW
========================================================= */

.main-nav .menu-item-has-children > a::after{

    content:"\f107";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    margin-left:8px;

    font-size:12px;

    transition:transform .3s ease;
}

.main-nav .menu-item-has-children:hover > a::after{

    transform:rotate(180deg);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-toggle{

    display:none;

    width:45px;
    height:45px;

    padding:0;
    margin:0;

    border:0;

    background:transparent;

    cursor:pointer;

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

    flex-direction:column;

    gap:5px;

    position:relative;

    z-index:10001;
}

.mobile-menu-toggle span{

    display:block;

    width:27px;
    height:3px;

    background:#04572f;

    border-radius:5px;

    transition:.3s;
}


/* =========================================================
   MOBILE MENU OVERLAY
========================================================= */

.mobile-menu-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:all .3s ease;

    z-index:9998;
}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;
}


/* =========================================================
   MOBILE MENU PANEL
========================================================= */

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:340px;

    max-width:90%;

    height:100vh;

    background:#fff;

    z-index:100000;

    overflow-y:auto;

    transition:right .35s ease;

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

.mobile-menu.active{
    right:0;
}


/* =========================================================
   MOBILE MENU HEADER
========================================================= */

.mobile-menu-header{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
    border-bottom:1px solid #eee;
}

.mobile-menu-logo img{
    height:48px;
    width:auto;
    display:block;
}


/* Close button */

.mobile-menu-close{
    width:35px;
    height:35px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#f3f3f3;
    color:#04572f;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.mobile-menu-close:hover{

    background:#04572f;

    color:#fff;
}


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

.mobile-nav{

    padding:10px 20px 40px;
}

.mobile-main-menu{

    display:block !important;

    list-style:none !important;

    margin:0 !important;

    padding:0 !important;
}

.mobile-main-menu > li{

    display:block;

    width:100%;

    position:relative;

    margin:0;

    padding:0;

    border-bottom:1px solid #eee;
}


/* Main mobile links */

.mobile-main-menu > li > a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    padding:15px 5px;

    color:#222;

    font-size:16px;

    font-weight:500;

    line-height:1.4;

    text-decoration:none !important;

    background:#fff;
}

.mobile-main-menu > li > a:hover{

    color:#04572f;
}


/* =========================================================
   IMPORTANT:
   MOBILE SUBMENUS CLOSED BY DEFAULT
========================================================= */

/* Hide BOTH .sub-menu and .dropdown */

.mobile-main-menu .sub-menu,
.mobile-main-menu .dropdown{

    display:none !important;

    position:static !important;

    top:auto !important;
    left:auto !important;

    width:100% !important;

    min-width:0 !important;

    height:auto !important;

    margin:0 !important;

    padding:5px 0 5px 15px !important;

    list-style:none !important;

    background:#f7faf8 !important;

    box-shadow:none !important;

    border-radius:0 !important;

    flex-direction:column !important;
}


/* =========================================================
   OPEN SUBMENU ONLY WHEN .open IS ADDED BY JS
========================================================= */

.mobile-main-menu .sub-menu.open,
.mobile-main-menu .dropdown.open{

    display:block !important;
}


/* =========================================================
   MOBILE SUBMENU ITEMS
========================================================= */

.mobile-main-menu .sub-menu li,
.mobile-main-menu .dropdown li{

    display:block;

    width:100%;

    margin:0;

    padding:0;

    border-bottom:1px solid #e5e5e5;
}

.mobile-main-menu .sub-menu li:last-child,
.mobile-main-menu .dropdown li:last-child{

    border-bottom:0;
}


.mobile-main-menu .sub-menu li a,
.mobile-main-menu .dropdown li a{

    display:flex;

    align-items:center;

    width:100%;

    padding:11px 10px;

    color:#444;

    font-size:15px;

    font-weight:500;

    line-height:1.4;

    text-decoration:none !important;

    background:transparent !important;
}

.mobile-main-menu .sub-menu li a:hover,
.mobile-main-menu .dropdown li a:hover{

    color:#04572f;

    background:transparent !important;
}


/* =========================================================
   MOBILE PARENT ARROW
========================================================= */

.mobile-main-menu .menu-item-has-children > a::after{

    content:"\f107";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    font-size:12px;

    margin-left:auto;

    transition:transform .3s ease;
}


/* Rotate arrow when submenu is open */

.mobile-main-menu
.menu-item-has-children > a.active::after{

    transform:rotate(180deg);
}


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

@media(max-width:1200px){

    .main-nav > ul{

        gap:22px;
    }

    .main-nav > ul > li > a{

        font-size:17px;
    }

    .logo img{

        height:50px;
    }
}


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

@media(max-width:991px){

    .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 85px !important;
        background: #ffffff !important;
        z-index: 99999 !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
        margin: 0 !important;
        padding: 0 !important;
    }


     .main-header .container {
        height: 100%;
    }

    .main-header .header-inner {
        height: 85px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Logo */
    .main-header .logo {
        flex-shrink: 0;
    }

    .main-header .logo img {
        height: 58px;
        width: auto;
        display: block;
    }

    /* Menu */
    .main-header .main-nav {
        margin-left: auto;
        margin-right: 35px;
    }

    .main-header .main-menu {
        display: flex;
        align-items: center;
        gap: 28px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    .main-header .main-menu > li {
        position: relative;
    }

    .main-header .main-menu > li > a {
        display: flex;
        align-items: center;

        height: 85px;

        font-size: 17px;
        font-weight: 500;
        color: #222;
        text-decoration: none;

        white-space: nowrap;
        transition: 0.3s ease;
    }

    .main-header .main-menu > li > a:hover {
        color: var(--primary);
    }

    /* =========================================
       DESKTOP DROPDOWN
    ========================================= */

    .main-header .main-menu li {
        position: relative;
    }

    .main-header .main-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;

        min-width: 230px;

        margin: 0;
        padding: 10px 0;

        background: #fff;

        list-style: none;

        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);

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

        transition: all 0.25s ease;

        z-index: 999999;
    }

    .main-header .main-menu li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-header .main-menu .sub-menu li {
        width: 100%;
    }

    .main-header .main-menu .sub-menu li a {
        display: block;

        padding: 10px 18px;

        font-size: 15px;
        line-height: 1.4;

        color: #222;
        text-decoration: none;

        transition: 0.25s ease;
    }

    .main-header .main-menu .sub-menu li a:hover {
        background: #f5f5f5;
        color: var(--primary);
    }

    /* =========================================
       MOBILE BUTTON HIDDEN
    ========================================= */

    .mobile-menu-toggle {
        display: none !important;
    }


    /* Hide desktop navigation */

    .main-nav{

        display:none !important;
    }


    /* Show hamburger */

    .mobile-menu-toggle{

        display:flex !important;
    }


    /* Mobile logo */

    .logo img{

        height:48px;
    }
}


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

@media(max-width:480px){
    
    .main-header{

        height:70px;
    }

    .header-inner{

        height:70px;
    }

    .logo img{

        height:43px;
    }


    .mobile-menu{

        width:310px;
    }

    .mobile-menu-header{

        height:70px;
    }
}

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

.hero{
    position:relative;
    overflow:hidden;
    background:#fff;
    width:100%;
    margin-top: 5%;
}


/* =========================================================
   HERO BACKGROUND MAP
========================================================= */

.hero-bg-map{
    position:absolute;

    top:20px;
    left:50%;

    transform:translateX(-50%);

    width:900px;
    height:420px;

    background:url("../images/world-map.png") center center no-repeat;
    background-size:contain;

    opacity:.08;

    z-index:0;

    pointer-events:none;
}


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

.hero-grid{
    position:relative;
    z-index:2;

    display:grid;

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

    align-items:center;

    gap:40px;

    min-height:650px;
}


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

.hero-content{
    width:100%;
    max-width:620px;

    animation:heroFadeLeft .9s ease both;
}


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

.hero-tag{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    color:#0a6d39;

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

    line-height:1.4;

    letter-spacing:.5px;

    text-transform:uppercase;
}

.hero-tag span{
    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:#0a6d39;
}


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

.hero-content h1{

    margin:0 0 28px;

    color:#111;

    font-family:var(--bodyFont);

    font-size:65px;

    line-height:1.04;

    font-weight:700;

    letter-spacing:-1px;
}

.hero-content h1 .green{

    display:block;

    color:#056634;
}


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

.hero-content p{

    max-width:560px;

    margin:0 0 42px;

    color:#000;

    font-size:25px;

    line-height:1.65;

    font-weight:400;
}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;
}


/* =========================================================
   GREEN BUTTON
========================================================= */

.btn-green{

    display:inline-flex;

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

    gap:15px;

    min-height:62px;

    padding:0 34px;

    border:1px solid #066432;

    border-radius:14px;

    background:#066432;

    color:#fff;

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

    line-height:1;

    text-decoration:none !important;

    transition:all .35s ease;

    box-shadow:0 10px 30px rgba(0,100,50,.25);
}

.btn-green:hover{

    background:#055429;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(6,100,50,.35);
}

.btn-green i{

    font-size:22px;
}


/* =========================================================
   WHITE BUTTON
========================================================= */

.btn-white{

    display:inline-flex;

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

    gap:14px;

    min-height:62px;

    padding:0 34px;

    border:1px solid #e7e7e7;

    border-radius:14px;

    background:#fff;

    color:#222;

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

    line-height:1;

    text-decoration:none !important;

    transition:all .35s ease;

    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.btn-white:hover{

    background:#066432 !important;

    border-color:#066432 !important;

    color:#fff !important;

    transform:translateY(-3px);

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

.btn-white i{

    font-size:22px;

    color:#066432;

    transition:.3s;
}

.btn-white:hover i{

    color:#fff !important;
}


/* =========================================================
   HERO IMAGE AREA
========================================================= */

.hero .hero-image{

    position:relative;

    width:100%;

    min-height:650px;

    display:flex;

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

    animation:heroFadeRight 1s ease both;
}


/* =========================================================
   STUDENT IMAGE CIRCLE
========================================================= */

.student-wrap{

    position:relative;

    width:650px;
    height:650px;

    max-width:100%;
    max-height:650px;

    border-radius:50%;

    overflow:hidden;

    background:#fff;

    z-index:5;

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

    animation:floatImage 5s ease-in-out infinite;
}


/* Student image */

.student-wrap img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center top;
}


/* Image highlight */

.student-wrap::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18),
            rgba(255,255,255,0)
        );

    z-index:2;

    pointer-events:none;
}


/* Inner shadow */

.student-wrap::after{

    content:"";

    position:absolute;

    inset:18px;

    border-radius:50%;

    box-shadow:
        inset 0 0 45px rgba(0,0,0,.08);

    pointer-events:none;

    z-index:3;
}


/* =========================================================
   YELLOW RING
========================================================= */

.ring{

    position:absolute;

    top:50%;
    left:50%;

    border-radius:50%;

    pointer-events:none;
}


.ring-yellow{

    width:760px;
    height:760px;

    border:22px solid #F3BE24;

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

    z-index:2;
}


/* =========================================================
   GREEN RING
========================================================= */

.ring-green{

    width:705px;
    height:705px;

    border:26px solid #066432;

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

    clip-path:
        polygon(
            0 55%,
            100% 35%,
            100% 100%,
            0 100%
        );

    box-shadow:
        0 0 45px rgba(6,100,50,.18);

    z-index:1;
}


/* =========================================================
   HERO IMAGE BACKGROUND
========================================================= */

.hero .hero-image::before{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    background:rgba(6,100,50,.02);

    z-index:0;

    pointer-events:none;
}


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

.floating-card{

    position:absolute;

    right:0;

    bottom:80px;

    width:210px;

    padding:26px 24px;

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

    border-radius:24px;

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

    backdrop-filter:blur(8px);

    z-index:20;

    transition:.35s;

    animation:cardFloat 4s ease-in-out infinite;
}

.floating-card:hover{

    transform:translateY(-8px);
}

.floating-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

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

    pointer-events:none;
}


/* =========================================================
   FLOATING CARD ICON
========================================================= */

.floating-icon{

    width:58px;
    height:58px;

    display:flex;

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

    margin-bottom:18px;

    border-radius:50%;

    background:#066432;

    color:#fff;
}

.floating-icon i{

    font-size:28px;
}


/* =========================================================
   FLOATING CARD TEXT
========================================================= */

.floating-card h3{

    margin:0 0 12px;

    color:#066432;

    font-size:52px;

    line-height:1;

    font-weight:700;
}

.floating-card h5{

    margin:0 0 5px;

    color:#222;

    font-size:22px;

    line-height:1.3;

    font-weight:600;
}

.floating-card p{

    margin:0;

    color:#666;

    font-size:18px;

    line-height:1.5;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.hero::after{

    content:"";

    position:absolute;

    right:80px;
    bottom:110px;

    width:130px;
    height:130px;

    background-image:
        radial-gradient(
            #0b6b39 2px,
            transparent 2px
        );

    background-size:15px 15px;

    opacity:.18;

    pointer-events:none;

    z-index:1;
}


/* =========================================================
   TOP ARC
========================================================= */

.hero-top-arc{

    position:absolute;

    width:170px;
    height:170px;

    left:-90px;
    top:-90px;

    border:2px solid #F3BE24;

    border-radius:50%;

    z-index:1;
}


/* =========================================================
   OTHER DECORATIVE CIRCLES
========================================================= */

.hero-circle1{

    position:absolute;

    width:160px;
    height:160px;

    top:-80px;
    left:-70px;

    border:2px solid #F3BE24;

    border-radius:50%;
}

.hero-circle2{

    position:absolute;

    width:320px;
    height:320px;

    right:-180px;
    bottom:-180px;

    background:rgba(6,100,50,.04);

    border-radius:50%;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatImage{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }
}


@keyframes cardFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }
}


@keyframes heroFadeLeft{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

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


@keyframes heroFadeRight{

    from{
        opacity:0;
        transform:translateX(60px);
    }

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


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width:1600px){

    .hero-grid{
        gap:30px;
    }

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

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

    .hero .hero-image{
        min-height:620px;
    }

    .student-wrap{

        width:620px;
        height:620px;
    }

    .ring-yellow{

        width:690px;
        height:690px;
    }

    .ring-green{

        width:720px;
        height:720px;
    }
}


/* =========================================================
   1400px
========================================================= */

@media (max-width:1400px){

    .hero-grid{
        gap:20px;
    }

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

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

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

    .hero .hero-image{
        min-height:560px;
    }

    .student-wrap{

        width:530px;
        height:530px;
    }

    .ring-yellow{

        width:590px;
        height:590px;

        border-width:18px;
    }

    .ring-green{

        width:620px;
        height:620px;

        border-width:22px;
    }

    .floating-card{

        right:0;
        bottom:50px;
    }
}


/* =========================================================
   1200px
========================================================= */

@media (max-width:1200px){

    .hero-grid{

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

        gap:15px;
    }

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

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

    .hero-tag{
        font-size:16px;
    }

    .hero .hero-image{
        min-height:520px;
    }

    .student-wrap{

        width:470px;
        height:470px;
    }

    .ring-yellow{

        width:530px;
        height:530px;

        border-width:16px;
    }

    .ring-green{

        width:555px;
        height:555px;

        border-width:20px;
    }

    .btn-green,
    .btn-white{

        min-height:58px;

        padding:0 26px;

        font-size:18px;
    }
}


/* =========================================================
   TABLET / 992px
========================================================= */

@media (max-width:991px){

    .hero{

        padding:0px 0 0px;
    }

    .hero-grid{

        grid-template-columns:1fr;

        min-height:auto;

        gap:50px;

        text-align:center;
    }


    /* Content */

    .hero-content{

        max-width:760px;

        margin:0 auto;
    }

    .hero-tag{

        justify-content:center;

        margin-bottom:20px;

        font-size:16px;
    }

    .hero-content h1{

        margin-bottom:22px;

        font-size:50px;

        line-height:1.1;
    }

    .hero-content p{

        max-width:650px;

        margin:0 auto 35px;

        font-size:19px;
    }


    /* Buttons */

    .hero-buttons{

        justify-content:center;
    }


    /* Image */

    .hero .hero-image{

        min-height:500px;

        margin-top:0;
    }

    .student-wrap{

        width:460px;
        height:460px;
    }

    .ring-yellow{

        width:510px;
        height:510px;

        border-width:16px;
    }

    .ring-green{

        width:540px;
        height:540px;

        border-width:20px;
    }


    /* Floating card */

    .floating-card{

        right:30px;

        bottom:20px;

        width:190px;

        padding:20px;
    }

    .floating-card h3{

        font-size:40px;
    }

    .floating-card h5{

        font-size:18px;
    }

    .floating-card p{

        font-size:15px;
    }
}


/* =========================================================
   768px
========================================================= */

@media (max-width:768px){

    .hero{

        padding:50px 0 60px;
    }

    .hero-grid{

        gap:40px;
    }


    /* Tag */

    .hero-tag{

        font-size:14px;

        gap:9px;
    }

    .hero-tag span{

        width:5px;
        height:5px;

        flex:0 0 5px;
    }


    /* Heading */

    .hero-content h1{

        font-size:40px;

        line-height:1.15;

        letter-spacing:-.5px;

        margin-bottom:20px;
    }


    /* Description */

    .hero-content p{

        font-size:17px;

        line-height:1.65;

        margin-bottom:30px;
    }


    /* Buttons */

    .hero-buttons{

        width:100%;

        flex-direction:column;

        gap:12px;
    }

    .btn-green,
    .btn-white{

        width:100%;

        max-width:320px;

        min-height:56px;

        padding:0 22px;

        font-size:17px;
    }


    /* Image */

    .hero .hero-image{

        min-height:410px;
    }

    .student-wrap{

        width:370px;
        height:370px;
    }

    .ring-yellow{

        width:415px;
        height:415px;

        border-width:15px;
    }

    .ring-green{

        width:445px;
        height:445px;

        border-width:18px;
    }


    /* Floating card */

    .floating-card{

        width:175px;

        right:0;

        bottom:10px;

        padding:18px;
    }

    .floating-icon{

        width:50px;
        height:50px;

        margin-bottom:12px;
    }

    .floating-icon i{

        font-size:23px;
    }

    .floating-card h3{

        font-size:32px;

        margin-bottom:8px;
    }

    .floating-card h5{

        font-size:17px;
    }

    .floating-card p{

        font-size:14px;
    }


    /* Hide large decorative elements */

    .hero::after{

        right:15px;
        bottom:30px;

        width:90px;
        height:90px;

        background-size:12px 12px;
    }
}


/* =========================================================
   576px
========================================================= */

@media (max-width:576px){

    .hero{
        padding:50px 0 0px;
    }

    .hero-grid{
        gap:35px;
    }


    /* Tag */

    .hero-tag{
        font-size:13px;
        gap:7px;
        margin-bottom:18px;
        letter-spacing:.3px;
    }


    /* Heading */

    .hero-content h1{
        font-size:33px;
        line-height:1.16;
        letter-spacing:0;
        margin-bottom:18px;
    }


    /* Paragraph */

    .hero-content p{
        font-size:16px;
        line-height:1.65;
        margin-bottom:28px;
    }


    /* Buttons */

    .btn-green,
    .btn-white{
        max-width:300px;
        min-height:54px;
        font-size:16px;
        padding:0 20px;
        border-radius:12px;
    }

    .btn-green i,
    .btn-white i{

        font-size:19px;
    }


    /* Image */

    .hero .hero-image{

        min-height:340px;
    }

    .student-wrap{

        width:300px;
        height:300px;
    }

    .ring-yellow{

        width:340px;
        height:340px;

        border-width:13px;
    }

    .ring-green{

        width:365px;
        height:365px;

        border-width:16px;
    }


    /* Floating card */

    .floating-card{

        position:relative;

        right:auto;
        bottom:auto;

        width:220px;

        margin:25px auto 0;

        padding:18px;
    }


    /* Background map */

    .hero-bg-map{

        display:none;
    }

    .hero-circle1,
    .hero-circle2,
    .hero-top-arc{

        display:none;
    }

    .hero::after{

        display:none;
    }
}


/* =========================================================
   420px
========================================================= */

@media (max-width:420px){

    .hero{

        padding:35px 0 45px;
    }


    .hero-grid{

        gap:30px;
    }


    .hero-tag{

        font-size:12px;

        gap:6px;
    }


    .hero-content h1{

        font-size:29px;

        line-height:1.18;
    }


    .hero-content p{

        font-size:15px;

        line-height:1.65;
    }


    .btn-green,
    .btn-white{

        width:100%;

        max-width:280px;

        min-height:52px;

        font-size:15px;
    }


    /* Image */

    .hero .hero-image{

        min-height:290px;
    }

    .student-wrap{

        width:250px;
        height:250px;
    }

    .ring-yellow{

        width:285px;
        height:285px;

        border-width:11px;
    }

    .ring-green{

        width:305px;
        height:305px;

        border-width:14px;
    }


    /* Floating card */

    .floating-card{

        width:200px;

        margin-top:20px;

        padding:16px;
    }

    .floating-card h3{

        font-size:28px;
    }

    .floating-card h5{

        font-size:16px;
    }

    .floating-card p{

        font-size:13px;
    }
}


/* =========================================================
   360px
========================================================= */

@media (max-width:360px){

    .hero{

        padding:30px 0 40px;
    }


    .hero-content h1{

        font-size:26px;
    }


    .hero-content p{

        font-size:14px;
    }


    .hero-tag{

        font-size:11px;

        gap:5px;
    }


    .btn-green,
    .btn-white{

        max-width:260px;

        min-height:50px;

        font-size:14px;
    }


    /* Image */

    .hero .hero-image{

        min-height:255px;
    }

    .student-wrap{

        width:220px;
        height:220px;
    }

    .ring-yellow{

        width:250px;
        height:250px;

        border-width:10px;
    }

    .ring-green{

        width:270px;
        height:270px;

        border-width:12px;
    }


    /* Floating card */

    .floating-card{

        width:180px;
    }

    .floating-icon{

        width:45px;
        height:45px;
    }

    .floating-icon i{

        font-size:20px;
    }

    .floating-card h3{

        font-size:24px;
    }

    .floating-card h5{

        font-size:15px;
    }

    .floating-card p{

        font-size:12px;
    }
}


/* =========================================================
   PREVENT HORIZONTAL SCROLL
========================================================= */

html,
body{

    max-width:100%;

    overflow-x:hidden;
}


/* =========================================================
   STATS SECTION
========================================================= */

.stats-section{
    position:relative;

    padding:45px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at top,
            #ffffff 0%,
            #f9f9f9 100%
        );
}


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

.stats-section::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    left:-450px;
    top:-450px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(6,112,60,.05),
            transparent 70%
        );

    pointer-events:none;
}


.stats-section::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-350px;
    bottom:-350px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(246,181,29,.05),
            transparent 70%
        );

    pointer-events:none;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.stats-dots{

    position:absolute;

    width:140px;
    height:90px;

    opacity:.35;

    background-image:
        radial-gradient(
            var(--primary) 2px,
            transparent 2px
        );

    background-size:16px 16px;

    z-index:1;

    pointer-events:none;
}


.dots-left{

    left:70px;
    top:100px;
}


.dots-right{

    right:70px;
    bottom:70px;

    background-image:
        radial-gradient(
            #f8b81f 2px,
            transparent 2px
        );
}


/* =========================================================
   STATS WRAPPER
========================================================= */

.stats-wrapper{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    padding:28px 30px;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    z-index:5;

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

    transition:
        transform .4s ease,
        box-shadow .4s ease;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}


/* Glass overlay */

.stats-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.10)
        );

    pointer-events:none;

    z-index:0;
}


.stats-wrapper:hover{

    transform:translateY(-4px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.14);
}


/* =========================================================
   STAT ITEM
========================================================= */

.stat-item{

    position:relative;

    z-index:2;

    flex:1;

    min-width:0;

    display:flex;

    align-items:center;

    gap:18px;

    padding:8px 10px;

    transition:
        transform .35s ease;
}


.stat-item:hover{

    transform:translateY(-6px);
}


/* =========================================================
   DIVIDER
========================================================= */

.stat-divider{

    width:1px;

    min-width:1px;

    align-self:stretch;

    margin:0 18px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(6,112,60,.35),
            transparent
        );
}


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

.stat-icon{

    position:relative;

    width:92px;
    height:92px;

    flex:0 0 92px;

    display:flex;

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


/* Outer ring */

.icon-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    border:7px solid #e9f7ef;

    transition:
        transform .35s ease;
}


/* Decorative partial ring */

.icon-ring::before{

    content:"";

    position:absolute;

    width:90px;
    height:90px;

    left:-6px;
    top:-6px;

    border-radius:50%;

    border:3px solid transparent;

    border-top-color:currentColor;

    border-left-color:currentColor;

    transform:rotate(-18deg);
}


/* Ring dot */

.icon-ring::after{

    content:"";

    position:absolute;

    width:13px;
    height:13px;

    border-radius:50%;

    background:currentColor;

    top:-6px;
    right:7px;
}


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

.stats-wrapper .icon-circle{

    position:relative;

    z-index:2;

    width:78px;
    height:78px;

    border-radius:50%;

    display:flex;

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

    box-shadow:
        inset 0 -8px 20px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.stats-wrapper .icon-circle i{

    font-size:30px;

    color:#fff;

    line-height:1;
}


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

.stat-icon.green{

    color:var(--primary);
}


.stat-icon.green .icon-circle{

    background:
        linear-gradient(
            180deg,
            #0b8a4a,
            #056735
        );
}


.stat-icon.green .icon-ring{

    border-color:#d8f2e6;
}


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

.stat-icon.yellow{

    color:#f8b81f;
}


.stat-icon.yellow .icon-circle{

    background:
        linear-gradient(
            180deg,
            #ffc637,
            #f0ad0f
        );
}


.stat-icon.yellow .icon-ring{

    border-color:#fff1cf;
}


/* =========================================================
   STAT CONTENT
========================================================= */

.stat-content{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;
}


/* Number */

.stat-content h2{

    margin:0 0 4px;

    color:var(--primary);

    font-size:38px;

    line-height:1;

    font-weight:700;

    letter-spacing:.5px;

    white-space:nowrap;

    transition:
        color .35s ease;
}


/* Title */

.stat-content h4{

    margin:0 0 9px;

    color:#111;

    font-size:19px;

    line-height:1.3;

    font-weight:600;

    letter-spacing:-.2px;

    white-space:nowrap;
}


/* Yellow underline */

.stat-content .line{

    display:block;

    width:55px;
    height:4px;

    border-radius:50px;

    background:#f8b81f;

    transition:
        width .35s ease;
}


/* =========================================================
   STAT HOVER
========================================================= */

.stat-item:hover .icon-circle{

    transform:
        scale(1.08)
        rotate(5deg);

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


.stat-item:hover .icon-ring{

    transform:rotate(15deg);
}


.stat-item:hover .stat-content h2{

    color:#0b8a4a;
}


.stat-item:hover .line{

    width:72px;
}


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

.stat-item .icon-circle{

    animation:
        statsPulse 4s ease-in-out infinite;
}


@keyframes statsPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.035);
    }

    100%{
        transform:scale(1);
    }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width:1400px){

    .stats-section{

        padding:40px 0;
    }


    .stats-wrapper{

        padding:24px 22px;

        border-radius:28px;
    }


    .stat-item{

        gap:14px;

        padding:6px;
    }


    .stat-divider{

        margin:0 12px;
    }


    .stat-icon{

        width:86px;
        height:86px;

        flex:0 0 86px;
    }


    .stats-wrapper .icon-circle{

        width:73px;
        height:73px;
    }


    .stats-wrapper .icon-circle i{

        font-size:28px;
    }


    .icon-ring::before{

        width:84px;
        height:84px;
    }


    .stat-content h2{

        font-size:32px;
    }


    .stat-content h4{

        font-size:17px;
    }
}


/* =========================================================
   1200px
========================================================= */

@media (max-width:1200px){

    .stats-wrapper{

        padding:25px 20px;
    }


    .stat-item{

        gap:12px;
    }


    .stat-divider{

        margin:0 8px;
    }


    .stat-icon{

        width:78px;
        height:78px;

        flex:0 0 78px;
    }


    .stats-wrapper .icon-circle{

        width:66px;
        height:66px;
    }


    .stats-wrapper .icon-circle i{

        font-size:25px;
    }


    .icon-ring{

        border-width:6px;
    }


    .icon-ring::before{

        width:76px;
        height:76px;

        left:-5px;
        top:-5px;
    }


    .icon-ring::after{

        width:11px;
        height:11px;
    }


    .stat-content h2{

        font-size:29px;
    }


    .stat-content h4{

        font-size:16px;
    }


    .stat-content .line{

        width:48px;
    }
}


/* =========================================================
   TABLET - 992px
========================================================= */

@media (max-width:991px){

    .stats-section{

        padding:45px 0;
    }


    .stats-wrapper{

        display:grid;

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

        gap:0;

        padding:35px 30px;

        border-radius:26px;
    }


    .stat-divider{

        display:none;
    }


    .stat-item{

        width:100%;

        padding:22px 15px;

        gap:16px;
    }


    .stat-icon{

        width:82px;
        height:82px;

        flex:0 0 82px;
    }


    .stats-wrapper .icon-circle{

        width:70px;
        height:70px;
    }


    .stats-wrapper .icon-circle i{

        font-size:27px;
    }


    .icon-ring::before{

        width:80px;
        height:80px;
    }


    .stat-content h2{

        font-size:32px;
    }


    .stat-content h4{

        font-size:17px;
    }


    .dots-left,
    .dots-right{

        display:none;
    }
}


/* =========================================================
   MOBILE - 768px
========================================================= */

@media (max-width:768px){

    .stats-section{

        padding:40px 0;
    }


    .stats-wrapper{

        grid-template-columns:1fr;

        padding:25px 20px;

        border-radius:24px;
    }


    .stat-item{

        flex-direction:row;

        justify-content:flex-start;

        width:100%;

        padding:20px 10px;

        gap:18px;

        border-bottom:1px solid #edf2ef;
    }


    .stat-item:last-child{

        border-bottom:0;
    }


    .stat-content{

        align-items:flex-start;

        text-align:left;
    }


    .stat-icon{

        width:80px;
        height:80px;

        flex:0 0 80px;
    }


    .stats-wrapper .icon-circle{

        width:68px;
        height:68px;
    }


    .stats-wrapper .icon-circle i{

        font-size:26px;
    }


    .icon-ring::before{

        width:78px;
        height:78px;
    }


    .stat-content h2{

        font-size:30px;
    }


    .stat-content h4{

        font-size:17px;

        margin-bottom:7px;
    }
}


/* =========================================================
   MOBILE - 576px
========================================================= */

@media (max-width:576px){

    .stats-section{

        padding:10px 0;
    }


    .stats-wrapper{

        padding:18px 15px;

        border-radius:20px;
    }


    .stat-item{

        padding:18px 8px;

        gap:15px;
    }


    .stat-icon{

        width:72px;
        height:72px;

        flex:0 0 72px;
    }


    .icon-ring{

        border-width:5px;
    }


    .icon-ring::before{

        width:70px;
        height:70px;

        left:-4px;
        top:-4px;

        border-width:2px;
    }


    .icon-ring::after{

        width:10px;
        height:10px;

        top:-5px;
        right:6px;
    }


    .stats-wrapper .icon-circle{

        width:60px;
        height:60px;
    }


    .stats-wrapper .icon-circle i{

        font-size:23px;
    }


    .stat-content h2{

        font-size:26px;

        margin-bottom:3px;
    }


    .stat-content h4{

        font-size:15px;

        margin-bottom:6px;
    }


    .stat-content .line{

        width:45px;

        height:3px;
    }


    .stat-item:hover{

        transform:none;
    }


    .stat-item:hover .icon-circle{

        transform:scale(1.04);
    }


    .stat-item:hover .line{

        width:55px;
    }
}


/* =========================================================
   SMALL MOBILE - 420px
========================================================= */

@media (max-width:420px){

    .stats-section{

        padding:30px 0;
    }


    .stats-wrapper{

        padding:12px 12px;

        border-radius:18px;
    }


    .stat-item{

        padding:16px 5px;

        gap:13px;
    }


    .stat-icon{

        width:65px;
        height:65px;

        flex:0 0 65px;
    }


    .icon-ring{

        border-width:5px;
    }


    .icon-ring::before{

        width:63px;
        height:63px;

        left:-4px;
        top:-4px;
    }


    .stats-wrapper .icon-circle{

        width:54px;
        height:54px;
    }


    .stats-wrapper .icon-circle i{

        font-size:21px;
    }


    .stat-content h2{

        font-size:24px;
    }


    .stat-content h4{

        font-size:14px;

        margin-bottom:5px;
    }


    .stat-content .line{

        width:42px;

        height:3px;
    }
}


/* =========================================================
   VERY SMALL MOBILE - 360px
========================================================= */

@media (max-width:360px){

    .stats-section{

        padding:25px 0;
    }


    .stats-wrapper{

        padding:8px 10px;

        border-radius:16px;
    }


    .stat-item{

        padding:14px 3px;

        gap:11px;
    }


    .stat-icon{

        width:58px;
        height:58px;

        flex:0 0 58px;
    }


    .icon-ring{

        border-width:4px;
    }


    .icon-ring::before{

        width:56px;
        height:56px;

        left:-4px;
        top:-4px;

        border-width:2px;
    }


    .icon-ring::after{

        width:8px;
        height:8px;

        top:-4px;
        right:5px;
    }


    .stats-wrapper .icon-circle{

        width:48px;
        height:48px;
    }


    .stats-wrapper .icon-circle i{

        font-size:19px;
    }


    .stat-content h2{

        font-size:22px;
    }


    .stat-content h4{

        font-size:13px;
    }


    .stat-content .line{

        width:38px;

        height:3px;
    }
}


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

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

    .stats-wrapper,
    .stat-item,
    .icon-circle,
    .icon-ring,
    .stat-content h2,
    .stat-content .line{

        transition:none;
    }


    .stat-item .icon-circle{

        animation:none;
    }
}


/* =========================================================
   PREVENT HORIZONTAL OVERFLOW
========================================================= */

.stats-section,
.stats-wrapper{

    max-width:100%;
}

.stats-section *{

    box-sizing:border-box;
}

/* =========================================================
   UNIVERSITY SECTION
========================================================= */

.university-section {
    position: relative;
    overflow: hidden;
    padding: 70px 0;
    background: linear-gradient(
        180deg,
        #055f30 0%,
        #024b27 100%
    );
}

/* =========================================================
   BACKGROUND ELEMENTS
========================================================= */

.university-section .world-map {
    position: absolute;
    width: 900px;
    height: 500px;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background: url("../images/world-map.png") center center no-repeat;
    background-size: contain;
    opacity: 0.06;
    pointer-events: none;
}

.university-section .bg-building {
    position: absolute;
    opacity: 0.06;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.university-section .left-building {
    width: 260px;
    height: 400px;
    left: 0;
    bottom: 0;
    background-image: url("../images/building-left.png");
}

.university-section .right-building {
    width: 320px;
    height: 460px;
    right: 0;
    bottom: 0;
    background-image: url("../images/building-right.png");
}

/* Decorative Glow */

.university-section::before {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    left: -300px;
    top: -300px;

    background: radial-gradient(
        circle,
        rgba(255,255,255,0.06),
        transparent 70%
    );

    pointer-events: none;
}

.university-section::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    right: -300px;
    bottom: -300px;

    background: radial-gradient(
        circle,
        rgba(255,255,255,0.05),
        transparent 70%
    );

    pointer-events: none;
}


/* =========================================================
   SECTION TITLE
   EVERYTHING SCOPED TO UNIVERSITY SECTION
========================================================= */

.university-section .section-title {
    position: relative;
    z-index: 5;
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;

    animation: universityFadeDown 0.8s ease;
}

.university-section .section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 9px 24px;

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

    background: rgba(255,255,255,0.06);

    color: #ffffff;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.university-section .section-badge i {
    color: #f8b81f;
    font-size: 18px;
}


/* Heading */

.university-section .section-title h2 {
    margin: 18px 0 15px;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
}

.university-section .section-title h2 span {
    color: #f8b81f;
}


/* Description */

.university-section .section-title p {
    max-width: 760px;

    margin: 0 auto;

    color: rgba(255,255,255,0.90);

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


/* Divider */

.university-section .title-divider {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 18px;
}

.university-section .title-divider span {
    display: block;

    width: 120px;
    height: 2px;

    background: #f8b81f;
}

.university-section .title-divider i {
    color: #f8b81f;
    font-size: 24px;
}


/* =========================================================
   SLIDER WRAPPER
========================================================= */

.university-section .university-slider {
    width: 100%;
    min-width: 0;
}

.university-section .universitySwiper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
.university-section .universitySwiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.university-section .universitySwiper .swiper-slide {
    width: auto;
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

.university-section .universitySwiper .university-card {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #fff;
}


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

    box-shadow:
        0 30px 60px rgba(0,0,0,0.25);
}


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

.university-section .university-card .card-image {
    position: relative;

    width: 100%;
    height: 225px;

    overflow: hidden;

    flex-shrink: 0;
}

.university-section .university-card .card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;
}

.university-section .university-card:hover .card-image img {
    transform: scale(1.08);
}


/* Image Overlay */

.university-section .university-card .card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.18),
        transparent 55%
    );

    pointer-events: none;
}


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

.university-section .university-card .card-number {
    position: absolute;

    top: 0;
    left: 0;

    width: 68px;
    height: 44px;

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

    color: #ffffff;

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

    border-radius: 20px 0 20px 0;

    z-index: 5;
}

.university-section .university-card .card-number.green {
    background: #06703c;
}

.university-section .university-card .card-number.yellow {
    background: #f7b718;
}


/* =========================================================
   UNIVERSITY LOGO
========================================================= */

.university-section .university-card .card-logo {
    position: absolute;

    left: 50%;
    top: 180px;

    transform: translateX(-50%);

    width: 88px;
    height: 88px;

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

    background: #ffffff;

    border: 5px solid #ffffff;
    border-radius: 50%;

    overflow: hidden;

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

    z-index: 10;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.university-section .university-card .card-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}

.university-section .university-card:hover .card-logo {
    transform: translateX(-50%) scale(1.08);

    box-shadow:
        0 14px 30px rgba(0,0,0,0.20);
}


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

.university-section .university-card .card-content {
    width: 100%;

    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 52px 18px 28px;

    text-align: center;
}

.university-section .university-card .card-content h3 {
    width: 100%;

    margin: 10px 0 12px;

    color: #063f2b;

    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}


/* =========================================================
   SMALL LINE
========================================================= */

.university-section .university-card .small-line {
    width: 60px;
    height: 4px;

    margin: 0 auto 13px;

    background: #f7b718;

    border-radius: 50px;

    transition: width 0.35s ease;
}

.university-section .university-card:hover .small-line {
    width: 90px;
}


/* =========================================================
   POPULAR FOR
========================================================= */

.university-section .university-card .card-content p {
    width: 100%;

    margin: 0 0 18px;

    color: #666666;

    font-size: 17px;
    line-height: 1.7;

    min-height: 76px;
}

.university-section .university-card .card-content p span {
    color: #333333;
    font-weight: 600;
}

.university-section .university-card .card-content p strong {
    color: #555555;
    font-weight: 600;
}


/* =========================================================
   COUNTRY / RANKING
========================================================= */

.university-section .university-card .country {
    width: 100%;

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

    gap: 10px;

    margin-bottom: 25px;
}

.university-section .university-card .country img {
    width: 25px;
    height: 25px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 4px;
}

.university-section .university-card .country span {
    color: #222222;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}


/* =========================================================
   VIEW DETAILS BUTTON
========================================================= */

.university-section .university-card .btn-outline {
    position: relative;

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

    gap: 12px;

    min-width: 155px;
    min-height: 46px;

    padding: 9px 16px;

    color: #06703c;

    background: #ffffff;

    border: 2px solid #06703c;
    border-radius: 12px;

    font-size: 15px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;

    overflow: hidden;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.university-section .university-card .btn-outline i {
    position: relative;
    z-index: 2;

    font-size: 18px;

    transition: transform 0.35s ease;
}

.university-section .university-card .btn-outline:hover {
    color: #ffffff;
    background: #06703c;
    border-color: #06703c;
}

.university-section .university-card .btn-outline:hover i {
    transform: translateX(5px);
}


/* Button shine */

.university-section .university-card .btn-outline::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background: rgba(255,255,255,0.15);

    transition: left 0.45s ease;
}

.university-section .university-card .btn-outline:hover::before {
    left: 100%;
}


/* =========================================================
   CARD BOTTOM SHADOW
========================================================= */

.university-section .university-card::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    bottom: -18px;

    height: 18px;

    border-radius: 50%;

    background: rgba(0,0,0,0.12);

    filter: blur(14px);

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}

.university-section .university-card:hover::after {
    opacity: 1;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.university-section .slider-arrow {
    position: absolute;

    top: 50%;

    width: 58px;
    height: 58px;

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

    padding: 0;

    border: none;
    outline: none;

    border-radius: 50%;

    background: #ffffff;

    color: #06703c;

    font-size: 22px;

    cursor: pointer;

    z-index: 50;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.18);

    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.university-section .slider-arrow:hover {
    background: #06703c;
    color: #ffffff;

    transform: translateY(-50%) scale(1.08);
}

.university-section .slider-arrow.prev {
    left: -30px;

    transform: translateY(-50%);
}

.university-section .slider-arrow.next {
    right: -30px;

    transform: translateY(-50%);
}

.university-section .slider-arrow.prev:hover,
.university-section .slider-arrow.next:hover {
    transform: translateY(-50%) scale(1.08);
}


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

@keyframes universityFadeDown {

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

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

}


/* =========================================================
   LARGE DESKTOP
   1400px
========================================================= */

@media (max-width: 1400px) {

    .university-section {
        padding: 65px 0;
    }

    .university-section .university-card .card-image {
        height: 215px;
    }

    .university-section .university-card .card-logo {
        top: 170px;
    }

    .university-section .university-card .card-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 18px;
    }

    .university-section .university-card .card-content p {
        font-size: 16px;
    }

    .university-section .slider-arrow.prev {
        left: -20px;
    }

    .university-section .slider-arrow.next {
        right: -20px;
    }

}


/* =========================================================
   1200px
   3 CARDS
========================================================= */

@media (max-width: 1200px) {

    .university-section .section-title {
        max-width: 800px;
        margin-bottom: 40px;
    }

    .university-section .section-title h2 {
        font-size: 38px;
    }

    .university-section .section-title p {
        font-size: 17px;
    }

    .university-section .university-card .card-image {
        height: 225px;
    }

    .university-section .university-card .card-logo {
        top: 180px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 19px;
    }

    .university-section .university-card .card-content p {
        min-height: 80px;
    }

    .university-section .slider-arrow {
        width: 52px;
        height: 52px;
    }

    .university-section .slider-arrow.prev {
        left: -10px;
    }

    .university-section .slider-arrow.next {
        right: -10px;
    }

}


/* =========================================================
   992px
   2 CARDS
========================================================= */

@media (max-width: 992px) {

    .university-section {
        padding: 60px 0;
    }

    .university-section .section-title {
        margin-bottom: 40px;
    }

    .university-section .section-title h2 {
        font-size: 36px;
    }

    .university-section .section-title p {
        font-size: 17px;
    }

    .university-section .title-divider span {
        width: 90px;
    }

    .university-section .university-card .card-image {
        height: 230px;
    }

    .university-section .university-card .card-logo {
        width: 92px;
        height: 92px;

        top: 183px;
    }

    .university-section .university-card .card-content {
        padding: 55px 20px 28px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 20px;
    }

    .university-section .university-card .card-content p {
        font-size: 15px;
        min-height: 78px;
    }

    .university-section .university-card .country span {
        font-size: 16px;
    }

    /* Hide arrows */

    .university-section .slider-arrow {
        display: none;
    }

}


/* =========================================================
   768px
   1 CARD
========================================================= */

@media (max-width: 768px) {

    .university-section {
        padding: 55px 0;
    }

    .university-section .section-title {
        max-width: 650px;

        margin-bottom: 35px;
    }

    .university-section .section-badge {
        padding: 8px 18px;

        font-size: 13px;
    }

    .university-section .section-title h2 {
        font-size: 32px;
        line-height: 1.25;
    }

    .university-section .section-title p {
        font-size: 16px;
        line-height: 1.6;
    }

    .university-section .title-divider {
        gap: 12px;
    }

    .university-section .title-divider span {
        width: 65px;
    }

    .university-section .title-divider i {
        font-size: 21px;
    }

    .university-section .university-card .card-image {
        height: 240px;
    }

    .university-section .university-card .card-logo {
        width: 100px;
        height: 100px;

        top: 190px;
    }

    .university-section .university-card .card-content {
        padding: 65px 25px 30px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 24px;
    }

    .university-section .university-card .card-content p {
        font-size: 15px;
        min-height: auto;

        max-width: 500px;
    }

    .university-section .university-card .country {
        margin-bottom: 22px;
    }

    .university-section .university-card .country span {
        font-size: 15px;
    }

    .university-section .university-card .btn-outline {
        min-width: 165px;
        min-height: 48px;

        font-size: 15px;
    }

    /* Remove background decorations */

    .university-section .world-map,
    .university-section .bg-building {
        display: none;
    }

}


/* =========================================================
   576px
========================================================= */

@media (max-width: 576px) {

    .university-section {
        padding: 25px 0;
    }

    .university-section .section-title {
        margin-bottom: 30px;
    }

    .university-section .section-badge {
        padding: 8px 14px;

        font-size: 11px;
        letter-spacing: 0.7px;

        gap: 7px;
    }

    .university-section .section-badge i {
        font-size: 15px;
    }

    .university-section .section-title h2 {
        margin-top: 15px;

        font-size: 28px;
        line-height: 1.3;
    }

    .university-section .section-title p {
        font-size: 15px;
        line-height: 1.65;
    }

    .university-section .section-title p br {
        display: none;
    }

    .university-section .title-divider {
        margin-top: 15px;
    }

    .university-section .title-divider span {
        width: 55px;
    }

    .university-section .title-divider i {
        font-size: 19px;
    }

    .university-section .university-card {
        border-radius: 20px;
    }

    .university-section .university-card .card-image {
        height: 210px;
    }

    .university-section .university-card .card-logo {
        width: 92px;
        height: 92px;

        top: 165px;

        border-width: 4px;
    }

    .university-section .university-card .card-number {
        width: 60px;
        height: 40px;

        font-size: 20px;

        border-radius: 18px 0 18px 0;
    }

    .university-section .university-card .card-content {
        padding: 62px 20px 25px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 21px;
        line-height: 1.3;

        margin-top: 5px;
    }

    .university-section .university-card .small-line {
        width: 55px;
        height: 3px;

        margin-bottom: 12px;
    }

    .university-section .university-card .card-content p {
        font-size: 16px;
        line-height: 1.65;

        margin-bottom: 15px;
    }

    .university-section .university-card .country {
        gap: 8px;

        margin-bottom: 20px;
    }

    .university-section .university-card .country img {
        width: 24px;
        height: 24px;
    }

    .university-section .university-card .country span {
        font-size: 13px;
        line-height: 1.4;
    }

    .university-section .university-card .btn-outline {
        min-width: 155px;
        width: auto;

        min-height: 45px;

        padding: 8px 14px;

        font-size: 14px;
    }

}


/* =========================================================
   420px
========================================================= */

@media (max-width: 420px) {

    .university-section {
        padding: 45px 0;
    }

    .university-section .section-title {
        margin-bottom: 28px;
    }

    .university-section .section-badge {
        font-size: 10px;
        padding: 7px 12px;
    }

    .university-section .section-title h2 {
        font-size: 25px;
    }

    .university-section .section-title p {
        font-size: 14px;
    }

    .university-section .title-divider span {
        width: 45px;
    }

    .university-section .university-card {
        border-radius: 18px;
    }

    .university-section .university-card .card-image {
        height: 190px;
    }

    .university-section .university-card .card-logo {
        width: 82px;
        height: 82px;

        top: 150px;
    }

    .university-section .university-card .card-content {
        padding: 57px 16px 22px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 19px;
    }

    .university-section .university-card .small-line {
        width: 50px;
    }

    .university-section .university-card .card-content p {
        font-size: 15px;
    }

    .university-section .university-card .country span {
        font-size: 12px;
    }

    .university-section .university-card .btn-outline {
        min-width: 145px;
        min-height: 43px;

        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   360px
========================================================= */

@media (max-width: 360px) {

    .university-section .section-badge {
        font-size: 9px;
        letter-spacing: 0.4px;
    }

    .university-section .section-title h2 {
        font-size: 23px;
    }

    .university-section .section-title p {
        font-size: 13px;
    }

    .university-section .university-card .card-image {
        height: 175px;
    }

    .university-section .university-card .card-logo {
        width: 76px;
        height: 76px;

        top: 138px;
    }

    .university-section .university-card .card-content {
        padding-top: 53px;
    }

    .university-section .university-card .card-content h3 {
        font-size: 18px;
    }

    .university-section .university-card .country {
        align-items: flex-start;
    }

    .university-section .university-card .country span {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

.university-section .slider-arrow:focus-visible,
.university-section .btn-outline:focus-visible {
    outline: 3px solid #f7b718;
    outline-offset: 3px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .university-section .section-title,
    .university-section .university-card,
    .university-section .university-card .card-image img,
    .university-section .university-card .card-logo,
    .university-section .university-card .small-line,
    .university-section .university-card .btn-outline,
    .university-section .university-card .btn-outline i,
    .university-section .slider-arrow {
        animation: none !important;
        transition: none !important;
    }

}



@media (max-width: 575px) {

    .university-section .university-slider {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .university-section .universitySwiper {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .university-section .universitySwiper .swiper-slide {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .university-section .universitySwiper .university-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

}


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

@media (max-width: 420px) {

    .university-section .universitySwiper {
        width: 100%;
    }

    .university-section .universitySwiper .swiper-slide {
        width: 100%;
    }

}

/* =========================================================
   FAQ SECTION - COMPLETE RESPONSIVE CSS
========================================================= */

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


/* =========================================================
   BOX SIZING
========================================================= */

.faq-section *,
.faq-section *::before,
.faq-section *::after{
    box-sizing:border-box;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.faq-section::before{
    content:"";
    position:absolute;
    left:-260px;
    top:-250px;

    width:600px;
    height:600px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(13,107,68,.06),
        transparent 70%
    );

    pointer-events:none;
}

.faq-section::after{
    content:"";
    position:absolute;
    right:-260px;
    bottom:-260px;

    width:580px;
    height:580px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(247,185,38,.07),
        transparent 70%
    );

    pointer-events:none;
}


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

.faq-section .faq-heading{
    position:relative;
    z-index:2;

    max-width:950px;
    margin:0 auto 50px;

    text-align:center;

    animation:faqHeadingFade .7s ease both;
}


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

.faq-section .faq-badge{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:15px;

    margin-bottom:22px;
}

.faq-section .badge-line{
    display:block;

    width:45px;
    height:2px;

    background:var(--secondary, #f7b926);
    border-radius:20px;
}

.faq-section .badge-text{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    min-height:44px;

    padding:7px 20px;

    border:1px solid var(--border, #dfe8e2);
    border-radius:50px;

    background:#f7fbf8;

    color:var(--primary, #0d6b44);

    font-size:16px;
    font-weight:600;
    line-height:1;
}

.faq-section .badge-text i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:26px;
    height:26px;

    border-radius:50%;

    background:var(--primary, #0d6b44);
    color:#fff;

    font-size:15px;
}


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

.faq-section .faq-heading h2{
    margin:0 0 15px;

    color:var(--primary, #0d6b44);

    font-size:42px;
    line-height:1.2;
    font-weight:700;
}

.faq-section .faq-heading h2 span{
    color:var(--secondary, #f7b926);
}


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

.faq-section .heading-line{
    width:85px;
    height:4px;

    margin:0 auto 20px;

    background:var(--secondary, #f7b926);

    border-radius:50px;
}


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

.faq-section .faq-heading p{
    max-width:900px;

    margin:0 auto;

    color:#6d7477;

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


/* =========================================================
   MAIN FAQ WRAPPER
========================================================= */

.faq-section .faq-wrapper{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:350px minmax(0,1fr);

    gap:40px;

    align-items:start;
}


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

.faq-section .faq-support{
    position:relative;

    width:100%;

    padding:38px 32px;

    background:#f8fcfa;

    border:1px solid var(--border, #dfe8e2);

    border-radius:28px;

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

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.faq-section .faq-support:hover{
    transform:translateY(-6px);

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


/* =========================================================
   SUPPORT PATTERN
========================================================= */

.faq-section .support-pattern{
    position:absolute;

    top:18px;
    left:18px;

    width:115px;
    height:75px;

    background-image:
        radial-gradient(
            #b9e6c8 2px,
            transparent 2px
        );

    background-size:18px 18px;

    opacity:.8;

    pointer-events:none;
}


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

.faq-section .support-image{
    position:relative;

    z-index:2;

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

    width:100%;

    margin:0 0 28px;

    text-align:center;

    animation:faqFloat 5s ease-in-out infinite;
}

.faq-section .support-image img{
    display:block;

    width:195px;
    max-width:100%;
    height:auto;

    margin:0 auto;

    object-fit:contain;

    transition:
        transform .4s ease;
}

.faq-section .faq-support:hover .support-image img{
    transform:translateY(-7px) scale(1.03);
}


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

.faq-section .faq-support h3{
    position:relative;
    z-index:2;

    margin:0 0 12px;

    color:var(--dark, #1b1b1b);

    font-size:25px;
    line-height:1.3;
    font-weight:700;

    text-align:center;
}


/* =========================================================
   SUPPORT DESCRIPTION
========================================================= */

.faq-section .faq-support > p{
    position:relative;
    z-index:2;

    margin:0 0 28px;

    color:#666;

    font-size:17px;
    line-height:1.65;

    text-align:center;
}


/* =========================================================
   COUNSELLOR BUTTON
========================================================= */

.faq-section .btn-counselor{
    position:relative;
    z-index:2;

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

    gap:12px;

    width:100%;
    min-height:55px;

    padding:12px 18px;

    border:0;
    border-radius:15px;

    background:linear-gradient(
        135deg,
        var(--primary, #0d6b44),
        #0b5f3d
    );

    color:#fff;

    font-size:17px;
    font-weight:600;
    line-height:1.2;

    text-decoration:none;

    box-shadow:
        0 12px 28px rgba(13,107,68,.20);

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

.faq-section .btn-counselor i{
    font-size:23px;
}

.faq-section .btn-counselor:hover{
    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(13,107,68,.28);
}


/* =========================================================
   OR DIVIDER
========================================================= */

.faq-section .or-divider{
    display:flex;
    align-items:center;

    gap:13px;

    margin:25px 0;
}

.faq-section .or-divider span{
    flex:1;

    height:1px;

    background:#dfe8e2;
}

.faq-section .or-divider strong{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    width:48px;
    height:48px;

    border-radius:50%;

    border:1px solid var(--border, #dfe8e2);

    background:#fff;

    color:var(--primary, #0d6b44);

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

    box-shadow:0 6px 15px rgba(0,0,0,.05);
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.faq-section .btn-whatsapp{
    position:relative;
    z-index:2;

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

    gap:12px;

    width:100%;
    min-height:52px;

    padding:11px 18px;

    border:2px solid var(--primary, #0d6b44);
    border-radius:15px;

    background:#fff;

    color:var(--primary, #0d6b44);

    font-size:17px;
    font-weight:600;
    line-height:1.2;

    text-decoration:none;

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

.faq-section .btn-whatsapp i{
    color:#25D366;

    font-size:25px;

    transition:color .3s ease;
}

.faq-section .btn-whatsapp:hover{
    color:#fff;

    background:var(--primary, #0d6b44);

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(13,107,68,.18);
}

.faq-section .btn-whatsapp:hover i{
    color:#fff;
}


/* =========================================================
   FAQ CONTENT
========================================================= */

.faq-section .faq-content{
    display:flex;
    flex-direction:column;

    gap:15px;

    width:100%;
    min-width:0;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-section .faq-item{
    width:100%;

    background:#fff;

    border:1px solid #e7ece9;

    border-radius:20px;

    overflow:hidden;

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

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

    animation:faqItemFade .6s ease both;
}

.faq-section .faq-item:hover{
    transform:translateY(-2px);

    box-shadow:0 14px 32px rgba(0,0,0,.07);

    border-color:#dce8e1;
}

.faq-section .faq-item.active{
    background:#f8fcfa;

    border-color:#d8ebe0;

    box-shadow:0 12px 30px rgba(13,107,68,.07);
}


/* =========================================================
   FAQ QUESTION BUTTON
========================================================= */

.faq-section .faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    min-height:76px;

    margin:0;

    padding:15px 24px;

    border:0;
    outline:0;

    background:transparent;

    color:inherit;

    text-align:left;

    cursor:pointer;

    font-family:inherit;
}


/* =========================================================
   LEFT QUESTION AREA
========================================================= */

.faq-section .faq-left{
    display:flex;
    align-items:center;

    gap:17px;

    flex:1;

    min-width:0;
}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.faq-section .icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 38px;

    width:38px;
    height:38px;

    border:2px solid var(--primary, #0d6b44);

    border-radius:50%;

    background:#fff;

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

.faq-section .icon i{
    color:var(--primary, #0d6b44);

    font-size:16px;

    transition:color .3s ease;
}

.faq-section .faq-item.active .icon{
    background:var(--primary, #0d6b44);
}

.faq-section .faq-item.active .icon i{
    color:#fff;
}


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

.faq-section .faq-question h4{
    margin:0;

    color:#1b1b1b;

    font-size:18px;
    line-height:1.5;
    font-weight:600;

    transition:color .3s ease;
}

.faq-section .faq-item:hover .faq-question h4{
    color:var(--primary, #0d6b44);
}


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

.faq-section .arrow{
    flex:0 0 auto;

    margin-left:15px;

    color:var(--primary, #0d6b44);

    font-size:19px;

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

.faq-section .faq-item.active .arrow{
    transform:rotate(180deg);
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.faq-section .faq-answer{
    max-height:0;

    overflow:hidden;

    padding:0 24px 0 79px;

    transition:
        max-height .45s ease,
        padding .35s ease;
}

.faq-section .faq-item.active .faq-answer{
    max-height:1000px;

    padding:0 24px 22px 79px;
}


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

.faq-section .faq-answer p{
    margin:0;

    color:#666;

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


/* =========================================================
   ANSWER LIST
========================================================= */

.faq-section .faq-answer ul{
    margin:10px 0 0;
    padding-left:20px;
}

.faq-section .faq-answer li{
    margin-bottom:7px;

    color:#666;

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

.faq-section .faq-answer li::marker{
    color:var(--primary, #0d6b44);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes faqHeadingFade{

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

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

}

@keyframes faqItemFade{

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

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

}

@keyframes faqFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-7px);
    }

    100%{
        transform:translateY(0);
    }

}


/* =========================================================
   DESKTOP
   1200px+
========================================================= */

@media (min-width:1200px){

    .faq-section{
        padding:75px 0;
    }

    .faq-section .faq-wrapper{
        grid-template-columns:350px minmax(0,1fr);
        gap:42px;
    }

    .faq-section .faq-support{
        padding:40px 34px;
    }

    .faq-section .faq-question h4{
        font-size:18px;
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
========================================================= */

@media (min-width:992px) and (max-width:1199px){

    .faq-section{
        padding:65px 0;
    }

    .faq-section .faq-heading{
        margin-bottom:40px;
    }

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

    .faq-section .faq-wrapper{
        grid-template-columns:300px minmax(0,1fr);
        gap:28px;
    }

    .faq-section .faq-support{
        padding:32px 25px;
    }

    .faq-section .support-image img{
        width:170px;
    }

    .faq-section .faq-support h3{
        font-size:22px;
    }

    .faq-section .faq-support > p{
        font-size:16px;
    }

    .faq-section .faq-question{
        padding:14px 20px;
    }

    .faq-section .faq-left{
        gap:14px;
    }

    .faq-section .faq-question h4{
        font-size:16px;
    }

    .faq-section .faq-answer{
        padding-left:72px;
    }

    .faq-section .faq-item.active .faq-answer{
        padding-left:72px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (min-width:768px) and (max-width:991px){

    .faq-section{
        padding:60px 0;
    }

    .faq-section .faq-heading{
        max-width:750px;
        margin-bottom:38px;
    }

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

    .faq-section .faq-heading p{
        font-size:16px;
    }

    /*
       Support card goes above FAQ list
    */

    .faq-section .faq-wrapper{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .faq-section .faq-support{
        width:100%;
        max-width:600px;

        margin:0 auto;

        padding:35px 30px;
    }

    .faq-section .support-image img{
        width:175px;
    }

    .faq-section .faq-content{
        width:100%;
    }

    .faq-section .faq-question{
        min-height:72px;

        padding:14px 20px;
    }

    .faq-section .faq-question h4{
        font-size:16px;
    }

    .faq-section .faq-answer{
        padding-left:72px;
        padding-right:20px;
    }

    .faq-section .faq-item.active .faq-answer{
        padding-left:72px;
        padding-right:20px;
    }

}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (max-width:767px){

    .faq-section{
        padding:50px 0;
    }

    .faq-section .faq-heading{
        margin-bottom:32px;
        padding:0 10px;
    }

    /* Badge */

    .faq-section .faq-badge{
        gap:10px;
        margin-bottom:18px;
    }

    .faq-section .badge-line{
        width:30px;
    }

    .faq-section .badge-text{
        min-height:40px;
        padding:7px 16px;

        font-size:14px;
    }

    .faq-section .badge-text i{
        width:23px;
        height:23px;

        font-size:13px;
    }

    /* Heading */

    .faq-section .faq-heading h2{
        font-size:30px;
        line-height:1.3;
    }

    .faq-section .heading-line{
        width:70px;
        height:3px;

        margin-bottom:17px;
    }

    .faq-section .faq-heading p{
        font-size:15px;
        line-height:1.7;
    }

    /* Wrapper */

    .faq-section .faq-wrapper{
        display:flex;
        flex-direction:column;

        gap:25px;
    }

    /* Support */

    .faq-section .faq-support{
        width:100%;
        max-width:100%;

        padding:30px 22px;

        border-radius:22px;
    }

    .faq-section .support-image{
        margin-bottom:22px;
    }

    .faq-section .support-image img{
        width:160px;
    }

    .faq-section .faq-support h3{
        font-size:22px;
    }

    .faq-section .faq-support > p{
        font-size:16px;
        margin-bottom:24px;
    }

    .faq-section .btn-counselor{
        min-height:52px;
        font-size:16px;
    }

    .faq-section .btn-whatsapp{
        min-height:50px;
        font-size:16px;
    }

    /* FAQ Content */

    .faq-section .faq-content{
        gap:12px;
    }

    .faq-section .faq-item{
        border-radius:17px;
    }

    .faq-section .faq-question{
        min-height:68px;

        padding:13px 15px;
    }

    .faq-section .faq-left{
        gap:12px;
    }

    .faq-section .icon{
        flex:0 0 34px;

        width:34px;
        height:34px;
    }

    .faq-section .icon i{
        font-size:14px;
    }

    .faq-section .faq-question h4{
        font-size:15px;
        line-height:1.45;
    }

    .faq-section .arrow{
        margin-left:10px;
        font-size:17px;
    }

    .faq-section .faq-answer{
        padding:0 15px 0 61px;
    }

    .faq-section .faq-item.active .faq-answer{
        padding:0 15px 18px 61px;
    }

    .faq-section .faq-answer p{
        font-size:15px;
        line-height:1.7;
    }

    .faq-section .faq-answer li{
        font-size:15px;
    }

}


/* =========================================================
   SMALL MOBILE
   <=575px
========================================================= */

@media (max-width:575px){

    .faq-section{
        padding:45px 0;
    }

    .faq-section .faq-heading{
        padding:0 5px;
        margin-bottom:28px;
    }

    .faq-section .faq-badge{
        gap:8px;
    }

    .faq-section .badge-line{
        width:24px;
    }

    .faq-section .badge-text{
        gap:8px;

        padding:7px 13px;

        font-size:13px;
    }

    .faq-section .badge-text i{
        width:22px;
        height:22px;
        font-size:12px;
    }

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

    .faq-section .faq-heading p{
        font-size:14px;
        line-height:1.65;
    }

    .faq-section .faq-support{
        padding:27px 18px;
    }

    .faq-section .support-image img{
        width:145px;
    }

    .faq-section .faq-support h3{
        font-size:20px;
    }

    .faq-section .faq-support > p{
        font-size:15px;
    }

    .faq-section .or-divider{
        gap:10px;
        margin:20px 0;
    }

    .faq-section .or-divider strong{
        width:42px;
        height:42px;
        font-size:13px;
    }

    .faq-section .faq-question{
        align-items:flex-start;

        min-height:64px;

        padding:12px;
    }

    .faq-section .faq-left{
        align-items:flex-start;
        gap:10px;
    }

    .faq-section .icon{
        flex:0 0 31px;

        width:31px;
        height:31px;

        margin-top:1px;
    }

    .faq-section .icon i{
        font-size:13px;
    }

    .faq-section .faq-question h4{
        font-size:14px;
        line-height:1.5;
    }

    .faq-section .arrow{
        margin-left:7px;
        padding-top:5px;

        font-size:15px;
    }

    .faq-section .faq-answer{
        padding-left:53px;
        padding-right:12px;
    }

    .faq-section .faq-item.active .faq-answer{
        padding-left:53px;
        padding-right:12px;
        padding-bottom:16px;
    }

    .faq-section .faq-answer p{
        font-size:14px;
        line-height:1.7;
    }

    .faq-section .faq-answer ul{
        padding-left:18px;
    }

    .faq-section .faq-answer li{
        font-size:14px;
        line-height:1.6;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   <=400px
========================================================= */

@media (max-width:400px){

    .faq-section{
        padding:40px 0;
    }

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

    .faq-section .faq-heading p{
        font-size:13.5px;
    }

    .faq-section .badge-text{
        padding:6px 11px;
        font-size:12px;
    }

    .faq-section .badge-line{
        width:18px;
    }

    .faq-section .faq-support{
        padding:24px 15px;
        border-radius:19px;
    }

    .faq-section .support-image img{
        width:130px;
    }

    .faq-section .faq-support h3{
        font-size:19px;
    }

    .faq-section .faq-support > p{
        font-size:14px;
    }

    .faq-section .btn-counselor{
        min-height:49px;
        font-size:15px;
    }

    .faq-section .btn-whatsapp{
        min-height:48px;
        font-size:15px;
    }

    .faq-section .faq-item{
        border-radius:15px;
    }

    .faq-section .faq-question{
        padding:11px;
    }

    .faq-section .faq-left{
        gap:8px;
    }

    .faq-section .icon{
        flex-basis:29px;
        width:29px;
        height:29px;
    }

    .faq-section .faq-question h4{
        font-size:13.5px;
    }

    .faq-section .arrow{
        margin-left:5px;
        font-size:14px;
    }

    .faq-section .faq-answer{
        padding-left:48px;
        padding-right:11px;
    }

    .faq-section .faq-item.active .faq-answer{
        padding-left:48px;
        padding-right:11px;
        padding-bottom:14px;
    }

    .faq-section .faq-answer p,
    .faq-section .faq-answer li{
        font-size:13.5px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

    .faq-section .faq-support:hover{
        transform:none;
        box-shadow:0 15px 40px rgba(0,0,0,.06);
    }

    .faq-section .faq-support:hover .support-image img{
        transform:none;
    }

    .faq-section .faq-item:hover{
        transform:none;
        box-shadow:0 8px 25px rgba(0,0,0,.04);
    }

    .faq-section .faq-item:hover .faq-question h4{
        color:#1b1b1b;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .faq-section *,
    .faq-section *::before,
    .faq-section *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}




/* =========================================================
   PROCESS SECTION
========================================================= */

.process-section {
    position: relative;
    overflow: hidden;
    padding: 50px 0 55px;
    background: #fff;
    isolation: isolate;
}

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


/* =========================================================
   BACKGROUND BLUR
========================================================= */

.process-section .blur {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(110px);
    pointer-events: none;
    z-index: 0;
}

.process-section .blur-left {
    top: 180px;
    left: -180px;
    background: rgba(247, 185, 38, 0.16);
}

.process-section .blur-right {
    top: 120px;
    right: -180px;
    background: rgba(13, 107, 68, 0.12);
}


/* =========================================================
   BACKGROUND DECORATIVE CIRCLES
========================================================= */

.process-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -220px;
    border-radius: 50%;
    background: rgba(13, 107, 68, 0.035);
    pointer-events: none;
    z-index: 0;
}

.process-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -220px;
    bottom: -220px;
    border-radius: 50%;
    background: rgba(247, 185, 38, 0.05);
    pointer-events: none;
    z-index: 0;
}


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

.process-section .section-title {
    text-align: center;
    margin: 0 auto 35px;
    max-width: 900px;
}

.process-section .section-title .sub-title {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.process-section .section-title h2 {
    margin: 0 0 18px;
    color: var(--dark);
    font-size: 43px;
    line-height: 1.15;
    font-weight: 800;
}

.process-section .section-title h2 span {
    color: var(--primary);
}

.process-section .section-title p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text);
    font-size: 18px;
    line-height: 30px;
}


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

.process-section .title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.process-section .title-divider > span {
    display: block;
    width: 42px;
    height: 2px;
    border-radius: 50px;
    background: var(--primary);
}

.process-section .dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.process-section .dots i {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.process-section .dots i:nth-child(1) {
    background: var(--secondary);
}

.process-section .dots i:nth-child(2) {
    background: var(--primary);
}

.process-section .dots i:nth-child(3) {
    background: var(--secondary);
}


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

.process-section .processSlider {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 18px 10px 5px;
    overflow: hidden;
    box-sizing: border-box;
}

.process-section .processSlider .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.process-section .processSlider .swiper-slide {
    height: auto;
    display: flex;
    flex-shrink: 0;
    box-sizing: border-box;
}


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

.process-section .process-card {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 310px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 34px 26px 28px;

    background: #fff;
    border: 1px solid var(--border);
    border-radius: 24px;

    text-align: center;

    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.05),
        0 2px 10px rgba(0, 0, 0, 0.025);

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


/* =========================================================
   TOP COLOR LINE
========================================================= */

.process-section .process-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 5px;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.4s ease;

    z-index: 2;
}

.process-section .process-card:hover::before {
    transform: scaleX(1);
}


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

.process-section .process-card::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: inherit;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4),
        transparent 45%
    );

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.4s ease;

    z-index: -1;
}

.process-section .process-card:hover::after {
    opacity: 1;
}


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

.process-section .process-card:hover {
    transform: translateY(-9px);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.11),
        0 5px 20px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   STEP NUMBER
========================================================= */

.process-section .step-number {
    position: relative;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

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

    margin-bottom: 22px;

    border-radius: 50%;

    color: #fff;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;

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

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.process-section .process-card:hover .step-number {
    transform: scale(1.08);

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


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

.process-section .process-card h3 {
    width: 100%;

    margin: 0 0 14px;

    color: #1f1f1f;

    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;

    transition: color 0.35s ease;
}

.process-section .process-card:hover h3 {
    color: var(--primary);
}


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

.process-section .process-card p {
    width: 100%;

    margin: 0;

    color: #666;

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

    transition: color 0.35s ease;
}

.process-section .process-card:hover p {
    color: #444;
}


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

/* GREEN */

.process-section .process-card.green .step-number {
    background: #0d6b44;
}

.process-section .process-card.green::before {
    background: #0d6b44;
}


/* YELLOW */

.process-section .process-card.yellow .step-number {
    background: #f7b926;
}

.process-section .process-card.yellow::before {
    background: #f7b926;
}


/* BLUE */

.process-section .process-card.blue .step-number {
    background: #2878ff;
}

.process-section .process-card.blue::before {
    background: #2878ff;
}


/* PURPLE */

.process-section .process-card.purple .step-number {
    background: #8c56db;
}

.process-section .process-card.purple::before {
    background: #8c56db;
}


/* PINK */

.process-section .process-card.pink .step-number {
    background: #ff5f9c;
}

.process-section .process-card.pink::before {
    background: #ff5f9c;
}


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

.process-section .process-prev,
.process-section .process-next {
    width: 54px;
    height: 54px;

    margin-top: 0;

    top: 50%;
    transform: translateY(-50%);

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

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

    background: #fff;

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

    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease;
}

.process-section .process-prev {
    left: 0;
}

.process-section .process-next {
    right: 0;
}

.process-section .process-prev::after,
.process-section .process-next::after {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    transition: color 0.3s ease;
}

.process-section .process-prev:hover,
.process-section .process-next:hover {
    background: var(--primary);
    border-color: var(--primary);

    transform: translateY(-50%) scale(1.05);
}

.process-section .process-prev:hover::after,
.process-section .process-next:hover::after {
    color: #fff;
}


/* =========================================================
   PAGINATION
========================================================= */

.process-section .process-pagination {
    position: relative;

    left: auto;
    bottom: auto;

    width: 100%;

    margin-top: 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.process-section .process-pagination
.swiper-pagination-bullet {
    width: 28px;
    height: 4px;

    margin: 0 !important;

    border-radius: 30px;

    background: #d8d8d8;

    opacity: 1;

    transition:
        width 0.35s ease,
        background 0.35s ease;
}

.process-section .process-pagination
.swiper-pagination-bullet-active {
    width: 45px;
    background: var(--primary);
}


/* =========================================================
   REMOVE UNUSED / PROBLEMATIC ANIMATIONS
========================================================= */

/*
   No floating animation on cards.
   This is intentionally removed because animated
   Swiper slides can cause visual movement/jumping
   while swiping on mobile.
*/


/* =========================================================
   TABLET - 1199px
========================================================= */

@media (max-width: 1199px) {

    .process-section {
        padding: 45px 0 50px;
    }

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

    .process-section .section-title p {
        font-size: 17px;
        line-height: 28px;
    }

    .process-section .process-card {
        min-height: 300px;
        padding: 32px 22px 26px;
    }

    .process-section .process-card h3 {
        font-size: 19px;
    }

    .process-section .process-card p {
        font-size: 15px;
        line-height: 25px;
    }
}


/* =========================================================
   SMALL TABLET - 991px
========================================================= */

@media (max-width: 991px) {

    .process-section {
        padding: 45px 0 50px;
    }

    .process-section .section-title {
        margin-bottom: 25px;
    }

    .process-section .section-title h2 {
        font-size: 36px;
    }

    .process-section .section-title p {
        max-width: 650px;
        font-size: 16px;
        line-height: 27px;
    }

    .process-section .processSlider {
        padding: 15px 5px 5px;
    }

    .process-section .process-card {
        min-height: 285px;
        padding: 30px 20px 25px;
        border-radius: 22px;
    }

    .process-section .step-number {
        width: 50px;
        height: 50px;
        flex-basis: 50px;

        margin-bottom: 19px;

        font-size: 18px;
    }

    .process-section .process-card h3 {
        font-size: 19px;
        margin-bottom: 12px;
    }

    .process-section .process-card p {
        font-size: 15px;
        line-height: 25px;
    }

    /* Hide arrows on tablet/mobile */
    .process-section .process-prev,
    .process-section .process-next {
        display: none;
    }

    .process-section .blur,
    .process-section::before,
    .process-section::after {
        display: none;
    }
}


/* =========================================================
   MOBILE - 767px
========================================================= */

@media (max-width: 767px) {

    .process-section {
        padding: 40px 0 42px;
    }

    .process-section .section-title {
        margin-bottom: 20px;
        padding: 0 12px;
    }

    .process-section .section-title .sub-title {
        margin-bottom: 8px;

        font-size: 13px;
        letter-spacing: 1.2px;
    }

    .process-section .section-title h2 {
        margin-bottom: 13px;

        font-size: 31px;
        line-height: 1.2;
    }

    .process-section .section-title p {
        max-width: 500px;

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

    .process-section .title-divider {
        gap: 10px;
        margin-top: 17px;
    }

    .process-section .title-divider > span {
        width: 30px;
        height: 2px;
    }

    .process-section .dots {
        gap: 5px;
    }

    .process-section .dots i {
        width: 7px;
        height: 7px;
    }


    /* ---------------------------------------------
       MOBILE SWIPER
    --------------------------------------------- */

    .process-section .processSlider {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 12px 0 4px;

        overflow: hidden;
        box-sizing: border-box;
    }

    .process-section .processSlider .swiper-wrapper {
        align-items: stretch;
    }

    .process-section .processSlider .swiper-slide {
        width: 100%;
        max-width: 100%;

        height: auto;

        display: flex;

        box-sizing: border-box;
    }


    /* ---------------------------------------------
       MOBILE CARD
    --------------------------------------------- */

    .process-section .process-card {
        width: 100%;
        max-width: 100%;

        min-height: 275px;

        margin: 0;

        padding: 27px 20px 25px;

        border-radius: 20px;

        box-sizing: border-box;
    }

    .process-section .step-number {
        width: 48px;
        height: 48px;
        flex-basis: 48px;

        margin-bottom: 18px;

        font-size: 17px;
    }

    .process-section .process-card h3 {
        margin-bottom: 11px;

        font-size: 20px;
        line-height: 1.35;
    }

    .process-section .process-card p {
        font-size: 14px;
        line-height: 24px;
    }


    /* ---------------------------------------------
       PAGINATION
    --------------------------------------------- */

    .process-section .process-pagination {
        margin-top: 20px;
    }

    .process-section .process-pagination
    .swiper-pagination-bullet {
        width: 22px;
        height: 4px;
    }

    .process-section .process-pagination
    .swiper-pagination-bullet-active {
        width: 35px;
    }


    /* Disable hover movement on touch devices */

    .process-section .process-card:hover {
        transform: none;
        box-shadow:
            0 10px 35px rgba(0, 0, 0, 0.06),
            0 2px 8px rgba(0, 0, 0, 0.025);
    }

    .process-section .process-card:hover .step-number {
        transform: none;
    }

    .process-section .process-card:hover::after {
        opacity: 0;
    }

    .process-section .process-card:hover::before {
        transform: scaleX(0);
    }

    .process-section .process-card:hover h3 {
        color: #1f1f1f;
    }

    .process-section .process-card:hover p {
        color: #666;
    }
}


/* =========================================================
   SMALL MOBILE - 575px
========================================================= */

@media (max-width: 575px) {

    .process-section {
        padding: 36px 0 38px;
    }

    .process-section .section-title {
        padding: 0 15px;
    }

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

    .process-section .section-title p {
        font-size: 14px;
        line-height: 23px;
    }

    .process-section .processSlider {
        padding: 10px 0 3px;
    }

    .process-section .processSlider .swiper-slide {
        width: 100%;
        max-width: 100%;
    }

    .process-section .process-card {
        min-height: 270px;

        padding: 25px 18px 23px;

        border-radius: 18px;
    }

    .process-section .step-number {
        width: 46px;
        height: 46px;
        flex-basis: 46px;

        margin-bottom: 17px;

        font-size: 16px;
    }

    .process-section .process-card h3 {
        font-size: 19px;
        line-height: 1.35;
    }

    .process-section .process-card p {
        font-size: 14px;
        line-height: 23px;
    }

    .process-section .process-pagination {
        margin-top: 17px;
    }
}


/* =========================================================
   VERY SMALL MOBILE - 400px
========================================================= */

@media (max-width: 400px) {

    .process-section {
        padding: 32px 0 35px;
    }

    .process-section .section-title h2 {
        font-size: 26px;
    }

    .process-section .section-title p {
        font-size: 13px;
        line-height: 22px;
    }

    .process-section .process-card {
        min-height: 260px;
        padding: 23px 16px 21px;
    }

    .process-section .step-number {
        width: 44px;
        height: 44px;
        flex-basis: 44px;

        font-size: 15px;
    }

    .process-section .process-card h3 {
        font-size: 18px;
    }

    .process-section .process-card p {
        font-size: 13px;
        line-height: 22px;
    }

    .process-section .process-pagination
    .swiper-pagination-bullet {
        width: 18px;
    }

    .process-section .process-pagination
    .swiper-pagination-bullet-active {
        width: 30px;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .process-section .process-card,
    .process-section .step-number,
    .process-section .process-pagination
    .swiper-pagination-bullet {
        transition: none;
    }
}

/* =========================================================
   COURSE SECTION
========================================================= */

.course-section{
    position:relative;
    padding:70px 0;
    background:#fff;
    overflow:hidden;
}

.course-section *,
.course-section *::before,
.course-section *::after{
    box-sizing:border-box;
}


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

.course-section .section-title{
    text-align:center;
    margin:0 auto 45px;
    max-width:850px;
}

.course-section .section-title h2{
    margin:0 0 12px;
    font-size:42px;
    line-height:1.2;
    font-weight:700;
    color:var(--primary, #0b6b43);
}

.course-section .section-title h2 span{
    color:var(--secondary, #f7b926);
}

.course-section .section-title p{
    margin:0;
    color:#6d7477;
    font-size:18px;
    line-height:1.7;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.course-section .course-wrapper{
    display:grid;
    grid-template-columns:270px minmax(0, 1fr);
    gap:40px;
    align-items:start;
}


/* =========================================================
   COUNTRY TABS - DESKTOP
========================================================= */

.course-section .course-tabs{
    width:100%;
    background:#fff;
    padding:18px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

    position:sticky;
    top:100px;

    /* IMPORTANT:
       NO horizontal scrolling on desktop */
    overflow:visible;
}

.course-section .course-tab-btn{
    display:block;
    width:100%;
    min-height:54px;
    margin:0 0 12px;
    padding:13px 18px;
    border:0;
    border-radius:13px;
    background:#eef2f6;
    color:#222;
    font-family:inherit;
    font-size:18px;
    line-height:1.3;
    font-weight:600;
    text-align:left;
    white-space:normal;

    cursor:pointer;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.course-section .course-tab-btn:last-child{
    margin-bottom:0;
}

.course-section .course-tab-btn:hover{
    background:var(--primary, #0b6b43);
    color:#fff;
    transform:translateX(3px);
}

.course-section .course-tab-btn.active{
    background:var(--primary, #0b6b43);
    color:#fff;
    box-shadow:0 8px 20px rgba(11,107,67,.20);
}


/* =========================================================
   COURSE CONTENT
========================================================= */

.course-section .course-content{
    width:100%;
    min-width:0;
}

.course-section .course-tab-content{
    display:none;
    width:100%;
    animation:courseFade .4s ease;
}

.course-section .course-tab-content.active{
    display:block;
}


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

.course-section .course-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:25px;
    width:100%;
}


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

.course-section .course-card{
    width:100%;
    min-width:0;

    background:#fff;
    border-radius:20px;
    overflow:hidden;

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

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.course-section .course-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 45px rgba(0,0,0,.13);
}


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

.course-section .course-card img{
    display:block;

    width:100%;
    height:215px;

    object-fit:cover;
    object-position:center;

    transition:transform .45s ease;
}

.course-section .course-card:hover img{
    transform:scale(1.04);
}


/* =========================================================
   COURSE CARD TITLE
========================================================= */

.course-section .course-card h3{
    margin:0;
    padding:18px 18px 20px;

    color:#222;
    font-size:18px;
    line-height:1.4;
    font-weight:600;
}


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

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

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


/* =========================================================
   LARGE DESKTOP
   1200px+
========================================================= */

@media (min-width:1200px){

    .course-section .course-wrapper{
        grid-template-columns:270px minmax(0,1fr);
        gap:40px;
    }

    .course-section .course-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:25px;
    }

    .course-section .course-tab-btn{
        font-size:18px;
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
========================================================= */

@media (min-width:992px) and (max-width:1199px){

    .course-section{
        padding:60px 0;
    }

    .course-section .course-wrapper{
        grid-template-columns:240px minmax(0,1fr);
        gap:30px;
    }

    /*
       Still NOT scrollable on desktop/tablet landscape.
       Countries remain vertically stacked.
    */
    .course-section .course-tabs{
        overflow:visible;
    }

    .course-section .course-tab-btn{
        min-height:52px;
        padding:12px 15px;
        font-size:15px;
    }

    .course-section .course-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .course-section .course-card img{
        height:205px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (min-width:768px) and (max-width:991px){

    .course-section{
        padding:55px 0;
    }

    .course-section .section-title{
        margin-bottom:35px;
    }

    .course-section .section-title h2{
        font-size:36px;
    }

    .course-section .section-title p{
        font-size:17px;
    }

    /*
       Tablet:
       Country tabs become horizontal.
    */

    .course-section .course-wrapper{
        display:block;
    }

    .course-section .course-tabs{
        position:static;
        display:flex;
        flex-wrap:nowrap;
        gap:10px;
        width:100%;
        margin-bottom:30px;
        padding:12px;
        overflow-x:auto;
        overflow-y:hidden;
        border-radius:16px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }

    .course-section .course-tab-btn{
        flex:0 0 auto;
        width:auto;
        min-width:max-content;
        min-height:48px;
        margin:0;
        padding:11px 18px;
        font-size:15px;
        white-space:nowrap;
        text-align:center;
    }

    .course-section .course-tab-btn:hover{
        transform:none;
    }

    .course-section .course-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .course-section .course-card img{
        height:210px;
    }

}

@media (max-width:767px){
    .course-section{
        padding:50px 0;
    }

    .course-section .section-title{
        margin-bottom:30px;
        padding:0 10px;
    }

    .course-section .section-title h2{
        font-size:30px;
        line-height:1.3;
    }

    .course-section .section-title p{
        font-size:16px;
        line-height:1.6;
    }

    .course-section .course-wrapper{
        display:block;
    }

    /* Mobile country tabs */
    .course-section .course-tabs{
        position:static;
        display:flex;
        flex-wrap:nowrap;
        gap:9px;
        width:100%;
        margin-bottom:25px;
        padding:10px;
        overflow-x:auto;
        overflow-y:hidden;
        border-radius:15px;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .course-section .course-tabs::-webkit-scrollbar{
        display:none;
    }

    .course-section .course-tab-btn{
        flex:0 0 auto;
        width:auto;
        min-width:max-content;
        min-height:46px;
        margin:0;
        padding:10px 16px;
        font-size:14px;
        white-space:nowrap;
        text-align:center;
    }

    .course-section .course-tab-btn:hover{
        transform:none;
    }

    /* One card per row */
    .course-section .course-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .course-section .course-card{
        border-radius:18px;
    }

    .course-section .course-card img{
        height:220px;
    }

    .course-section .course-card h3{
        padding:16px 16px 18px;
        font-size:17px;
    }

}

@media (max-width:575px){

    .course-section{
        padding:42px 0;
    }

    .course-section .section-title{
        margin-bottom:25px;
        padding:0 8px;
    }

    .course-section .section-title h2{
        font-size:27px;
    }

    .course-section .section-title p{
        font-size:15px;
    }

    .course-section .course-tabs{
        margin-bottom:22px;
        padding:9px;
        border-radius:13px;
    }

    .course-section .course-tab-btn{
        min-height:44px;
        padding:9px 14px;
        font-size:13px;
        border-radius:11px;
    }

    .course-section .course-grid{
        gap:18px;
    }

    .course-section .course-card img{
        height:200px;
    }

    .course-section .course-card h3{
        padding:15px;
        font-size:16px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   <=400px
========================================================= */

@media (max-width:400px){

    .course-section{
        padding:38px 0;
    }

    .course-section .section-title h2{
        font-size:24px;
    }

    .course-section .section-title p{
        font-size:14px;
    }

    .course-section .course-tab-btn{
        padding:9px 12px;
        font-size:12.5px;
    }

    .course-section .course-card img{
        height:185px;
    }

    .course-section .course-card h3{
        font-size:15px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

    .course-section .course-card:hover{
        transform:none;
        box-shadow:0 12px 35px rgba(0,0,0,.08);
    }

    .course-section .course-card:hover img{
        transform:none;
    }

    .course-section .course-tab-btn:hover{
        transform:none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .course-section *,
    .course-section *::before,
    .course-section *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}

.footer{
    background:#0b5d3b;
    color:#fff;
    padding:55px 0 25px;
    position:relative;
}

.footer .container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px;
    margin-bottom:30px;
}

.footer-logo{
    width: 275px;
    margin-bottom: 25px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
}

.footer-col p{
    color:#d5e6dd;
    line-height:1.8;
    font-size:15px;
}

.footer-col h3{
    font-size:18px;
    margin-bottom:25px;
    position:relative;
    line-height: 28px;
}

.footer-col h3::after{
    content:"";
    width:55px;
    height:3px;
    background:#ffc107;
    position:absolute;
    left:0;
    bottom:-10px;
}

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-col ul li{
    font-size: 16px;
    margin-bottom:7px;
}

.footer-col ul li a{
    color:#d5e6dd;
    text-decoration:none;
    transition:.3s;
}

.footer-col ul li a:hover{
    color:var(--secondary);
    padding-left:8px;
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:5px;
}

.contact-item i{
    color:#ffc107;
    width:18px;
    margin-top:4px;
}

.contact-item a,
.contact-item span{
    color:#d5e6dd;
    text-decoration:none;
    line-height:1.7;
}

.footer-social{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.footer-social a{
    width:45px;
    height:45px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.footer-social a:hover{
    background:#ffc107;
    color:#0b5d3b;
    transform:translateY(-5px);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.15);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{
    color:#d5e6dd;
    margin:0;
}

.footer-links{
    display:flex;
    gap:25px;
}

.footer-links a{
    color:#d5e6dd;
    text-decoration:none;
}

.footer-links a:hover{
    color:var(--secondary);
}

@media(max-width:991px){

.footer-grid{
grid-template-columns:repeat(2,1fr);
gap:40px;
}

}

@media(max-width:767px){

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

.footer-bottom{
flex-direction:column;
text-align:center;
}

.footer-links{
justify-content:center;
}

.footer-logo{
width:180px;
}

}




.study-container{
    display:flex;
    gap:18px;
    align-items:flex-start;
}

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

.study-left{
    position:relative;
    width: 100%;
}

.script-text{
    display:block;
    font-family: var(--bodyFont);
    color:var(--primary);
    font-size:70px;
    line-height:1;
    margin-bottom:5px;
}

.heading h2{

    font-size:44px;
    font-weight:800;
    color:var(--black);
    line-height:1.08;
}

.heading h2 span{
    color:var(--primary);
}

.cost-study-section .title-line{
    width:170px;
    height:5px;
    background:var(--secondary);
    border-radius:50px;
    margin-top:0px;
    margin-bottom:20px;
}


.cost-study-section{
    position:relative;
    padding:50px 0;
    overflow:hidden;
    background:
    radial-gradient(circle at left top,#edf7f2 0%,#ffffff 60%);
}

/* Container */

.cost-container{
    display:grid;
    grid-template-columns:470px 1fr;
    gap:90px;
    align-items:center;
}

/*==============================
Background Decorations
==============================*/


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

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

.cost-right{
    display:flex;
    flex-direction:column;
    gap:72px;
}

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

.cost-card{
    position:relative;
    background:#fff;
    border-radius:24px;
    overflow:visible;
    box-shadow:
    0 15px 40px rgba(0,0,0,.08);
    border:1px solid #ececec;
}

/* Right Accent */

.cost-card::after{
    content:"";
    position:absolute;
    width:8px;
    top:66px;
    bottom:32px;
    right:-8px;
    border-radius:0 12px 12px 0;
}

/* Green Card */

.tuition-card::after{
    background:#0d6b44;
}

/* Yellow Card */

.living-card::after{
    background:#ffba08;
}



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

.fee-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid #ededed;
}

.fee-row:last-child{
    border-bottom:none;
}

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

.fee-left{
    display:flex;
    align-items:center;
    gap:22px;
}

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

.fee-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#f6faf6;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    font-size:24px;
    color:#0d6b44;
    border:1px solid #edf0ed;
}

/* Yellow Version */

.living-card .fee-icon{
    color:#f4a300;
    background:#fffaf0;
}

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

.fee-left h4{
    font-size:31px;
    font-weight:500;
    color:#1f1f1f;
}

/*======================================
PRICE BOX
======================================*/

.price-box{
    min-width:230px;
    text-align:center;
    padding:18px 25px;
    border-radius:12px;
    font-size:28px;
    font-weight:700;
    letter-spacing:.2px;
}

/* Green */

.tuition-card .price-box{
    background:#f5fbf5;
    color:#0d6b44;
}

/* Yellow */

.living-card .price-box{
    background:#fff8ea;
    color:#1d1d1d;
}


.card-title{
    position:absolute;
    left:22px;
    top:-38px;
    min-width:460px;
    height:56px;
    display:flex;
    align-items:center;
    padding-left:96px;
    padding-right:48px;
    color:#fff;
    font-size:28px;
    font-weight:600;
    border-radius:0 12px 12px 0;
    z-index:5;
}

/* Ribbon Shape */

.card-title::after{
    content:"";
    position:absolute;
    right:-42px;
    top:0;
    width:0;
    height:0;
    border-top:28px solid transparent;
    border-bottom:28px solid transparent;
}

/* Green */

.card-title.green{
    background:#0d6b44;
}

.card-title.green::after{
    border-left:42px solid #0d6b44;
}

/* Yellow */

.card-title.yellow{
    color:#222;
    background:#ffbc11;
}

.card-title.yellow::after{
    border-left:42px solid #ffbc11;
}


.tuition-card .title-icon{
    position:absolute;
    width:72px;
    height:72px;
    left:-10px;
    top:-8px;
    border-radius:50%;
    background:#0d6b44;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.yellow .title-icon{
    background:#ffbc11;
    color:#222;
}

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

.cost-left{
    position:relative;
    z-index:2;
    padding-right:20px;
}

.cost-study-section .section-tag{
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:#fff7e8;
    border-radius:50px;
    padding:8px 22px 8px 8px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.cost-study-section .tag-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#fff;
    border:2px solid #ffd366;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f6a800;
    font-size:20px;
}

.cost-study-section .section-tag span{
    font-size:22px;
    font-weight:600;
    color:#f5a100;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.cost-left h2{
    font-size:50px;
    line-height:1.08;
    font-weight:700;
    color:#045a34;
    
}

.cost-left h2 span{
    display:block;
    margin-top:8px;
    color:#111;
    font-weight:500;
}

/*=========================
Green Line
=========================*/

.study-left  .title-line{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.study-left  .title-line .line{
    width:82px;
    height:6px;
    background:#0d6b44;
    border-radius:10px;
}

.study-left  .title-line .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ffba08;
}

/*=========================
Paragraphs
=========================*/

.cost-left p{
    font-size:24px;
    line-height:1.8;
    color:#333;
    margin-bottom:18px;
    max-width:540px;
}

.cost-left p strong{
    color:#0d6b44;
    font-weight:700;
    text-transform:lowercase;
}

/*=========================
UK Skyline Image
=========================*/

.uk-image{
    position:relative;
    margin-top:45px;
    margin-left:-60px;
}

.uk-image img{
    width:700px;
    max-width:none;
    display:block;
    user-select:none;
    pointer-events:none;
}


/*=========================
Light Background Glow
=========================*/

.cost-left::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:#edf8f2;
    border-radius:50%;
    top:110px;
    left:-120px;
    z-index:-1;
    filter:blur(10px);
}

/*=========================
Desktop Alignment
=========================*/

.cost-left{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

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

.tuition-card{
    position:relative;
    background:#fff;
    border:1px solid #e9e9e9;
    border-radius:24px;
    overflow:visible;
    box-shadow:
        0 15px 45px rgba(0,0,0,.08);
}

/* Right Green Strip */

.tuition-card::after{
    content:"";
    position:absolute;
    top:68px;
    right:-9px;
    width:9px;
    height:230px;
    background:#0b6b41;
    border-radius:0 12px 12px 0;
}

.tuition-card .card-title{
    position:absolute;
    left:18px;
    top:-36px;
    height:48px;
    min-width:455px;
    padding:0 38px 0 75px;
    display:flex;
    align-items:center;
    background:#0c6b40;
    border-radius:0 8px 8px 0;
    color:#fff;
    font-size:17px;
    font-weight:600;
    letter-spacing:.2px;
    z-index:5;
}

/* Triangle */

.tuition-card .card-title::after{
    content:"";
    position:absolute;
    right:-38px;
    top:0;
    width:0;
    height:0;
    border-top:24px solid transparent;
    border-bottom:24px solid transparent;
    border-left:38px solid #0c6b40;
}

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

.tuition-card .title-icon{
    position:absolute;
    left:-12px;
    top:-11px;
    width:74px;
    height:74px;
    background:#0b6b40;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    border:6px solid #fff;
    box-shadow:
        0 12px 28px rgba(0,0,0,.16);
}

.tuition-card .card-content{
    padding:20px 42px 10px;
}

.tuition-card .fee-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #ececec;
}

.tuition-card .fee-row:last-child{
    border-bottom:none;
}

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

.tuition-card .fee-left{
    display:flex;
    align-items:center;
    gap:20px;
}

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

.tuition-card .fee-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#f6faf6;
    color:#0c6b40;
    border:1px solid #edf1ee;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    flex-shrink:0;
    transition:.35s;
}

/* Hover */

.tuition-card .fee-row:hover .fee-icon{
    background:#0c6b40;
    color:#fff;
    transform:rotate(8deg);
}

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

.tuition-card .fee-left h4{
    font-size:19px;
    font-weight:500;
    color:#1d1d1d;
}

/*=================================================
            PRICE
=================================================*/

.tuition-card .price-box{
    min-width:230px;
    text-align:center;
    background:#f5faf5;
    color:#0b6b40;
    border-radius:10px;
    padding:12px 20px;
    font-size:17px;
    font-weight:700;
    transition:.35s;
}

/* Hover */

.tuition-card .fee-row:hover .price-box{
    background:#0c6b40;
    color:#fff;
}
.cost-card h3{
    margin-top:10px !important;
    font-size:18px;
}

.tuition-card{
    transition:.4s;
}

.tuition-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 30px 60px rgba(0,0,0,.12);
}

.tuition-card .fee-row:first-child{
    padding-top:14px;
}

.tuition-card .fee-row:last-child{
    padding-bottom:8px;
}

/*==================================================
            LIVING EXPENSES CARD
==================================================*/

.living-card{
    position:relative;
    background:#fff;
    border:1px solid #ececec;
    border-radius:24px;
    overflow:visible;
    box-shadow:
        0 15px 45px rgba(0,0,0,.08);
    transition:.4s;
}

/* Hover */

.living-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 30px 65px rgba(0,0,0,.12);
}

.living-card::after{
    content:"";
    position:absolute;
    top:68px;
    right:-9px;
    width:9px;
    height:150px;
    background:#f6b000;
    border-radius:0 12px 12px 0;
}

.living-card .card-title{
    position:absolute;
    left:18px;
    top:-36px;
    height:48px;
    min-width:470px;
    padding:0 38px 0 75px;
    display:flex;
    align-items:center;
    background:#f7b500;
    color:#1d1d1d;
    border-radius:0 8px 8px 0;
    font-size:17px;
    font-weight:600;

    letter-spacing:.2px;

    z-index:5;
}

/* Triangle */

.living-card .card-title::after{

    content:"";

    position:absolute;

    right:-38px;
    top:0;

    width:0;
    height:0;

    border-top:24px solid transparent;
    border-bottom:24px solid transparent;

    border-left:38px solid #f7b500;
}

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

.living-card .title-icon{

    position:absolute;

    left:-12px;
    top:-11px;

    width:74px;
    height:74px;

    border-radius:50%;

    background:#f7b500;
    color:#1d1d1d;

    border:6px solid #fff;

    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    box-shadow:
        0 12px 30px rgba(0,0,0,.16);
}

.living-card .card-content{
    padding:20px 42px 10px;
}

.living-card .fee-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #ececec;
}

.living-card .fee-row:last-child{
    border-bottom:none;
}


.living-card .fee-left{
    display:flex;
    align-items:center;
    gap:20px;
}


.living-card .fee-icon{

    width:58px;
    height:58px;

    border-radius:50%;

    background:#fffaf0;

    border:1px solid #fde3a0;

    color:#f6b000;

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

    font-size:24px;

    flex-shrink:0;

    transition:.35s;
}

/* Hover */

.living-card .fee-row:hover .fee-icon{

    background:#f7b500;
    color:#fff;

    transform:rotate(10deg);
}

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

.living-card .fee-left h4{

    font-size:19px;
    font-weight:500;
    color:#222;
}

.living-card .price-box{

    min-width:170px;

    padding:12px 20px;

    border-radius:10px;

    background:#fff7e5;

    color:#222;

    font-size:17px;

    font-weight:700;

    text-align:center;

    transition:.35s;
}

.living-card .fee-row:hover .price-box{

    background:#f7b500;

    color:#fff;
}

/*==================================================
            FIRST & LAST ROW SPACING
==================================================*/

.living-card .fee-row:first-child{
    padding-top:14px;
}

.living-card .fee-row:last-child{
    padding-bottom:8px;
}

/*==================================================
            SMOOTH TRANSITIONS
==================================================*/

.living-card *,
.tuition-card *{
    transition:.3s ease;
}

/*==================================================
            LARGE LAPTOP (1400px)
==================================================*/

@media (max-width:1400px){

    .cost-left h2{
        font-size:50px;
    }

    .cost-left p{
        font-size:18px;
    }

    .uk-image img{
        width:580px;
    }

    .card-title{
        min-width:420px;
    }

    .tuition-card .card-title,
    .living-card .card-title{
        min-width:420px;
    }

}

/*==================================================
            LAPTOP (1200px)
==================================================*/

@media (max-width:1200px){


    .cost-left{

        text-align:center;
        padding-right:0;

    }

    .title-line{

        justify-content:center;

    }

    .cost-left p{

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

    }

    .uk-image{

        margin-left:0;
        display:flex;
        justify-content:center;

    }

    .uk-image img{

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

    }

    .cost-right{

        width:100%;

    }

}

/*==================================================
            TABLET (992px)
==================================================*/

@media (max-width:992px){

    .cost-study-section{

        padding:80px 0;

    }

    .cost-left h2{

        font-size:50px;

    }

    .section-tag span{

        font-size:18px;

    }

    .cost-left p{

        font-size:18px;
        line-height:1.8;

    }

    .card-content{

        padding:55px 30px 25px;

    }

    .fee-row{

        gap:20px;

    }

    .fee-left h4{

        font-size:18px;

    }

    .price-box{

        min-width:180px;
        font-size:17px;
        padding:14px 20px;

    }

    .card-title,
    .tuition-card .card-title,
    .living-card .card-title{

        min-width:auto;
        width:calc(100% - 20px);

        font-size:16px;

        padding-left:82px;

    }

}

/*==================================================
            MOBILE (768px)
==================================================*/

@media (max-width:768px){

    .cost-study-section{

        padding:70px 0;

    }

    .cost-left h2{

        font-size:40px;
        line-height:1.2;

    }

    .section-tag{

        padding:8px 18px 8px 8px;

    }

    .tag-icon{

        width:40px;
        height:40px;
        font-size:18px;

    }

    .section-tag span{

        font-size:16px;

    }

    .cost-left p{

        font-size:17px;

    }

    .uk-image{

        margin-top:30px;

    }

    .uk-image img{

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

    }

    /* Stack each fee row */

    .fee-row{

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

    }

    .price-box{

        width:100%;
        margin-top:15px;
        min-width:100%;

    }

    .card-title,
    .tuition-card .card-title,
    .living-card .card-title{

        position:relative;

        left:0;
        top:0;

        width:100%;
        min-width:100%;

        border-radius:20px 20px 0 0;

        padding:18px 20px 18px 80px;

        height:auto;

    }

    .card-title::after{

        display:none;

    }

    .title-icon{

        left:15px !important;
        top:50% !important;
        transform:translateY(-50%);

        width:52px !important;
        height:52px !important;

        font-size:20px !important;

        border:4px solid #fff;

    }

    .card-content{

        padding:25px 20px;

    }

    .fee-icon{

        width:48px;
        height:48px;
        font-size:18px;

    }

}

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

@media (max-width:576px){

  

    .cost-left h2{

        font-size:32px;

    }

    .cost-left p{

        font-size:16px;

    }

    .section-tag{

        transform:scale(.95);

    }

    .fee-left{

        gap:14px;

    }

    .fee-left h4{

        font-size:16px;

    }

    .price-box{

        font-size:16px;
        padding:14px 16px;

    }

    .card-title,
    .tuition-card .card-title,
    .living-card .card-title{

        font-size:15px;
        line-height:1.4;

        padding-left:72px;

    }

    .title-icon{

        width:46px !important;
        height:46px !important;

        font-size:18px !important;

    }

}

/*==================================================
            EXTRA SMALL (400px)
==================================================*/

@media (max-width:400px){

    .cost-left h2{

        font-size:28px;

    }

    .section-tag span{

        font-size:14px;

    }

    .cost-left p{

        font-size:15px;
        line-height:1.7;

    }

    .fee-left{
        flex-direction:column;
        align-items:flex-start;
    }

    .fee-icon{
        margin-bottom:8px;
    }

    .card-title,
    .tuition-card .card-title,
    .living-card .card-title{
        font-size:14px;
        padding:16px 15px 16px 65px;
    }

    .title-icon{
        width:42px !important;
        height:42px !important;
        font-size:16px !important;
    }

    .price-box{
        font-size:15px;
    }
}

/* =========================================================
   TOP UNIVERSITIES - MAIN SECTION
========================================================= */

.top-universities{
    position:relative;
    width:100%;
    padding:75px 0 45px;
    overflow:hidden;
    background-color:#fff;
    background-image:url('https://earthydigital.xyz/saraswationline/wp-content/themes/saraswationline/assets/images/back.jpg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.top-universities *,
.top-universities *::before,
.top-universities *::after{
    box-sizing:border-box;
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.top-universities::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    left:-250px;
    bottom:-260px;
    border-radius:50%;
    background:rgba(13,107,68,.035);
    pointer-events:none;
}

.top-universities::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-210px;
    bottom:-210px;
    border-radius:50%;
    background:rgba(247,185,38,.06);
    pointer-events:none;
}


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

.top-universities .section-title{
    position:relative;
    z-index:2;
    width:100%;
    max-width:900px;
    margin:0 auto 35px;
    text-align:center;
}

.top-universities .title-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:0 0 22px;
    padding:10px 25px;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        #ffcf3a,
        #f4b900
    );
    color:#171717;
    font-size:14px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.3px;
    text-transform:uppercase;
}

.top-universities .title-badge i{
    font-size:15px;
}

.top-universities .title-badge::before,
.top-universities .title-badge::after{
    content:"";
    position:absolute;
    top:50%;
    width:55px;
    height:2px;
    background:var(--secondary,#f7b926);
    transform:translateY(-50%);
}

.top-universities .title-badge::before{
    right:100%;
    margin-right:15px;
}

.top-universities .title-badge::after{
    left:100%;
    margin-left:15px;
}


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

.top-universities .section-title h2{
    margin:0 0 17px;
    color:#071a43;
    font-size:44px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.7px;
}

.top-universities .section-title h2 span{
    color:var(--primary,#0d6b44);
}


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

.top-universities .heading-line{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:0 auto 20px;
}

.top-universities .heading-line span{
    display:block;
    width:125px;
    height:5px;
    border-radius:50px;
    background:linear-gradient(
        90deg,
        var(--primary,#0d6b44) 0%,
        var(--primary,#0d6b44) 60%,
        var(--secondary,#f7b926) 60%,
        var(--secondary,#f7b926) 100%
    );
}


/* =========================================================
   DESCRIPTION
========================================================= */

.top-universities .section-title p{
    max-width:850px;
    margin:0 auto;
    color:#5c6470;
    font-size:16px;
    line-height:1.8;
    font-weight:400;
}

.top-universities .section-title p strong{
    color:var(--primary,#0d6b44);
    font-weight:700;
}


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

.top-universities .universitySwiper{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:25px 5px 40px;
    overflow:visible;
}


/*
   IMPORTANT:
   Do NOT use display:grid or display:flex on
   .swiper-wrapper.
   Swiper controls it.
*/

.top-universities .universitySwiper .swiper-wrapper{
    align-items:stretch;
}

.top-universities .universitySwiper .swiper-slide{
    height:auto;
    min-width:0;
    display:flex;
    align-items:stretch;
}


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

.top-universities .university-card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    height:100%;
    overflow:hidden;
    background:#fff;
    border:1px solid #e7ece9;
    border-radius:24px;
    box-shadow:0 12px 35px rgba(18,44,74,.07);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.top-universities .university-card:hover{
    transform:translateY(-7px);
    border-color:rgba(13,107,68,.16);
    box-shadow:0 24px 55px rgba(18,44,74,.13);
}


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

.top-universities .image-box{
    position:relative;
    width:100%;
    height:220px;
    overflow:hidden;
    background:#f1f1f1;
}

.top-universities .image-box > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .55s ease;
}

.top-universities .university-card:hover .image-box > img{
    transform:scale(1.06);
}


/* =========================================================
   UNIVERSITY LOGO
========================================================= */

.top-universities .university-logo{
    position:absolute;
    top:18px;
    left:18px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    width:68px;
    height:68px;
    padding:5px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 8px 22px rgba(0,0,0,.15);
    overflow:hidden;
    transition:transform .35s ease;
}

.top-universities .university-logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:10px;
}

.top-universities .university-card:hover .university-logo{
    transform:scale(1.06);
}


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

.top-universities .university-card .content{
    position:relative;
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    padding:42px 22px 22px;
}


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

.top-universities .graduate-icon{
    position:absolute;
    top:-29px;
    left:50%;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border:4px solid #fff;
    border-radius:50%;
    background:var(--primary,#0d6b44);
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.16);
    transform:translateX(-50%);
    transition:transform .7s ease;
}

.top-universities .graduate-icon i{
    font-size:21px;
}

.top-universities .university-card:hover .graduate-icon{
    transform:translateX(-50%) rotate(360deg);
}


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

.top-universities .university-card .content h3{
    min-height:42px;
    margin:0 0 12px;
    color:#101010;
    font-size:18px;
    line-height:1.3;
    font-weight:750;
    text-align:center;
}


/* =========================================================
   MINI DIVIDER
========================================================= */

.top-universities .mini-divider{
    width:55px;
    height:3px;
    margin:0 auto 20px;
    border-radius:50px;
    background:var(--primary,#0d6b44);
}


/* =========================================================
   INFORMATION LIST
========================================================= */

.top-universities .university-card .content ul{
    list-style:none;
    width:100%;
    margin:0;
    padding:0;
}

.top-universities .university-card .content ul li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    margin:0 0 15px;
    padding:0;
}

.top-universities .university-card .content ul li:last-child{
    margin-bottom:25px;
}


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

.top-universities .university-card .content ul li .icon{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eaf6f0;
}

.top-universities .university-card .content ul li .icon i{
    color:var(--primary,#0d6b44);
    font-size:13px;
}


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

.top-universities .university-card .content ul li > div:last-child{
    flex:1;
    min-width:0;
}

.top-universities .university-card .content ul li span{
    display:block;
    margin:0 0 4px;
    color:#777;
    font-size:13px;
    line-height:1.3;
    font-weight:500;
}

.top-universities .university-card .content ul li strong{
    display:block;
    color:#202020;
    font-size:14px;
    line-height:1.45;
    font-weight:700;
}


/* =========================================================
   DETAILS BUTTON
========================================================= */

.top-universities .university-card .details-btn{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    min-height:50px;
    margin-top:auto;
    padding:5px 7px 5px 20px;
    border-radius:50px;
    background:#eef7f2;
    color:var(--primary,#0d6b44);
    text-decoration:none;
    font-size:14px;
    line-height:1.2;
    font-weight:750;
    transition:
        background .3s ease,
        color .3s ease;
}

.top-universities .details-btn i{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary,#0d6b44);
    color:#fff;
    font-size:13px;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}

.top-universities .details-btn:hover{
    background:var(--primary,#0d6b44);
    color:#fff;
}

.top-universities .details-btn:hover i{
    background:#fff;
    color:var(--primary,#0d6b44);
    transform:translateX(3px);
}


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

.top-universities .universitySwiper .swiper-button-prev,
.top-universities .universitySwiper .swiper-button-next{
    width:54px;
    height:54px;
    margin-top:-27px;
    border:1px solid #e5eae7;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.09);
    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.top-universities .universitySwiper .swiper-button-prev{
    left:-65px;
}

.top-universities .universitySwiper .swiper-button-next{
    right:-65px;
}

.top-universities .universitySwiper .swiper-button-prev::after,
.top-universities .universitySwiper .swiper-button-next::after{
    color:var(--primary,#0d6b44);
    font-size:17px;
    font-weight:800;
}

.top-universities .universitySwiper .swiper-button-prev:hover,
.top-universities .universitySwiper .swiper-button-next:hover{
    background:var(--primary,#0d6b44);
    border-color:var(--primary,#0d6b44);
    transform:translateY(-3px);
}

.top-universities .universitySwiper .swiper-button-prev:hover::after,
.top-universities .universitySwiper .swiper-button-next:hover::after{
    color:#fff;
}

.top-universities .universitySwiper .swiper-button-disabled{
    opacity:.35;
}


/* =========================================================
   PAGINATION
========================================================= */

.top-universities .universitySwiper .swiper-pagination{
    bottom:18px !important;
    left:0;
    width:100%;
    text-align:center;
}

.top-universities .universitySwiper .swiper-pagination-bullet{
    width:9px;
    height:9px;
    margin:0 4px !important;
    border-radius:20px;
    background:#cfd8d3;
    opacity:1;
    transition:
        width .3s ease,
        background .3s ease;
}

.top-universities .universitySwiper .swiper-pagination-bullet-active{
    width:30px;
    background:var(--primary,#0d6b44);
}


/* =========================================================
   PARTNER BUTTON
========================================================= */

.top-universities .partner-btn{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    width:100%;
    margin-top:5px;
}

.top-universities .partner-btn a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:54px;
    padding:6px 9px 6px 22px;
    border-radius:50px;
    background:var(--primary,#0d6b44);
    color:#fff;
    text-decoration:none;
    font-size:15px;
    line-height:1.2;
    font-weight:700;
    box-shadow:0 14px 30px rgba(13,107,68,.20);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.top-universities .partner-btn a:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(13,107,68,.28);
}

.top-universities .partner-btn .left-icon,
.top-universities .partner-btn .right-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    flex:0 0 40px;
    border-radius:50%;
    background:var(--secondary,#f7b926);
    color:var(--primary,#0d6b44);
}

.top-universities .partner-btn .right-icon{
    background:rgba(255,255,255,.15);
    color:#fff;
    transition:transform .3s ease;
}

.top-universities .partner-btn a:hover .right-icon{
    transform:translateX(4px);
}


/* =========================================================
   LARGE DESKTOP - 1400px+
========================================================= */

@media (min-width:1400px){

    .top-universities{
        padding:85px 0 50px;
    }

    .top-universities .section-title{
        margin-bottom:40px;
    }

    .top-universities .section-title h2{
        font-size:48px;
    }

    .top-universities .section-title p{
        font-size:17px;
    }

    .top-universities .universitySwiper{
        max-width:1250px;
    }

    .top-universities .image-box{
        height:230px;
    }

    .top-universities .university-card .content{
        padding:43px 24px 24px;
    }

    .top-universities .university-card .content h3{
        font-size:19px;
    }

}


/* =========================================================
   1200px - 1399px
========================================================= */

@media (max-width:1399px){

    .top-universities .universitySwiper .swiper-button-prev{
        left:-25px;
    }

    .top-universities .universitySwiper .swiper-button-next{
        right:-25px;
    }

}


/* =========================================================
   LAPTOP - 992px to 1199px
========================================================= */

@media (max-width:1199px){

    .top-universities{
        padding:65px 0 45px;
    }

    .top-universities .section-title h2{
        font-size:40px;
    }

    .top-universities .section-title p{
        max-width:760px;
        font-size:15px;
    }

    .top-universities .universitySwiper{
        max-width:960px;
        padding-left:5px;
        padding-right:5px;
    }

    .top-universities .universitySwiper .swiper-button-prev{
        left:-5px;
    }

    .top-universities .universitySwiper .swiper-button-next{
        right:-5px;
    }

    .top-universities .image-box{
        height:205px;
    }

    .top-universities .university-card .content{
        padding:40px 18px 20px;
    }

    .top-universities .university-card .content h3{
        font-size:17px;
    }

    .top-universities .university-card .content ul li strong{
        font-size:13px;
    }

}


/* =========================================================
   TABLET - 768px to 991px
========================================================= */

@media (max-width:991px){

    .top-universities{
        padding:60px 0 40px;
    }

    .top-universities .section-title{
        max-width:700px;
        margin-bottom:30px;
    }

    .top-universities .title-badge{
        font-size:13px;
        padding:9px 20px;
    }

    .top-universities .title-badge::before,
    .top-universities .title-badge::after{
        width:35px;
    }

    .top-universities .title-badge::before{
        margin-right:10px;
    }

    .top-universities .title-badge::after{
        margin-left:10px;
    }

    .top-universities .section-title h2{
        font-size:35px;
        line-height:1.25;
    }

    .top-universities .section-title p{
        font-size:15px;
        line-height:1.75;
    }

    .top-universities .universitySwiper{
        max-width:700px;
        padding:20px 5px 55px;
    }

    .top-universities .universitySwiper .swiper-button-prev,
    .top-universities .universitySwiper .swiper-button-next{
        display:none;
    }

    .top-universities .image-box{
        height:220px;
    }

    .top-universities .university-card .content{
        padding:42px 22px 22px;
    }

    .top-universities .university-card .content h3{
        font-size:18px;
    }

}


/* =========================================================
   MOBILE - 767px
========================================================= */

@media (max-width:767px){

    .top-universities{
        padding:50px 0 35px;
        background-size:cover;
        background-position:center;
    }

    .top-universities::before{
        width:300px;
        height:300px;
        left:-160px;
        bottom:-160px;
    }

    .top-universities::after{
        width:260px;
        height:260px;
        right:-140px;
        bottom:-140px;
    }


    /* Heading */

    .top-universities .section-title{
        width:100%;
        max-width:100%;
        margin:0 auto 25px;
        padding:0 15px;
    }

    .top-universities .title-badge{
        gap:7px;
        margin-bottom:17px;
        padding:8px 15px;
        font-size:11px;
    }

    .top-universities .title-badge i{
        font-size:12px;
    }

    .top-universities .title-badge::before,
    .top-universities .title-badge::after{
        display:none;
    }

    .top-universities .section-title h2{
        margin-bottom:14px;
        font-size:29px;
        line-height:1.25;
        letter-spacing:-.3px;
    }

    .top-universities .heading-line{
        margin-bottom:16px;
    }

    .top-universities .heading-line span{
        width:90px;
        height:4px;
    }

    .top-universities .section-title p{
        font-size:13.5px;
        line-height:1.75;
    }


    /* Swiper */

    .top-universities .universitySwiper{
        width:100%;
        max-width:100%;
        padding:15px 15px 40px;
        overflow:hidden;
    }

    /*
       Keep slide width controlled by Swiper.
       Do not add grid/flex widths here.
    */

    .top-universities .universitySwiper .swiper-slide{
        width:100%;
        min-width:0;
    }


    /* Card */

    .top-universities .university-card{
        width:100%;
        border-radius:18px;
    }

    .top-universities .university-card:hover{
        transform:none;
    }


    /* Image */

    .top-universities .image-box{
        height:210px;
    }

    .top-universities .university-logo{
        top:14px;
        left:14px;
        width:60px;
        height:60px;
        border-radius:13px;
    }

    .top-universities .university-logo img{
        border-radius:8px;
    }



    /* Content */

    .top-universities .university-card .content{
        padding:39px 18px 18px;
    }

    .top-universities .graduate-icon{
        top:-28px;
        width:56px;
        height:56px;
        border-width:4px;
    }

    .top-universities .graduate-icon i{
        font-size:19px;
    }

    .top-universities .university-card .content h3{
        min-height:auto;
        margin-bottom:10px;
        font-size:18px;
        line-height:1.35;
    }

    .top-universities .mini-divider{
        width:50px;
        margin-bottom:18px;
    }


    /* List */

    .top-universities .university-card .content ul li{
        gap:10px;
        margin-bottom:13px;
    }

    .top-universities .university-card .content ul li:last-child{
        margin-bottom:20px;
    }

    .top-universities .university-card .content ul li .icon{
        flex:0 0 34px;
        width:34px;
        height:34px;
    }

    .top-universities .university-card .content ul li .icon i{
        font-size:12px;
    }

    .top-universities .university-card .content ul li span{
        font-size:12px;
    }

    .top-universities .university-card .content ul li strong{
        font-size:13.5px;
        line-height:1.45;
    }


    /* Button */

    .top-universities .university-card .details-btn{
        min-height:47px;
        padding-left:17px;
        font-size:13.5px;
    }

    .top-universities .details-btn i{
        flex-basis:36px;
        width:36px;
        height:36px;
        font-size:12px;
    }


    /* Pagination */

    .top-universities .universitySwiper .swiper-pagination{
        bottom:14px !important;
    }

    .top-universities .universitySwiper .swiper-pagination-bullet{
        width:8px;
        height:8px;
        margin:0 3px !important;
    }

    .top-universities .universitySwiper .swiper-pagination-bullet-active{
        width:25px;
    }


    /* Partner Button */

    .top-universities .partner-btn{
        padding:0 15px;
    }

    .top-universities .partner-btn a{
        width:100%;
        max-width:340px;
        min-height:50px;
        padding:5px 7px 5px 16px;
        font-size:13px;
    }

    .top-universities .partner-btn .left-icon,
    .top-universities .partner-btn .right-icon{
        width:36px;
        height:36px;
        flex-basis:36px;
    }

}


/* =========================================================
   SMALL MOBILE - 575px
========================================================= */

@media (max-width:575px){

    .top-universities{
        padding:42px 0 30px;
    }

    .top-universities .section-title{
        padding:0 12px;
    }

    .top-universities .section-title h2{
        font-size:26px;
    }

    .top-universities .section-title p{
        font-size:13px;
        line-height:1.7;
    }

    .top-universities .universitySwiper{
        padding:10px 12px 5px;
    }

    .top-universities .image-box{
        height:195px;
    }

    .top-universities .university-logo{
        width:56px;
        height:56px;
        top:12px;
        left:12px;
    }


    .top-universities .university-card .content{
        padding:38px 16px 17px;
    }

    .top-universities .university-card .content h3{
        font-size:17px;
    }

    .top-universities .university-card .content ul li strong{
        font-size:13px;
    }

    .top-universities .partner-btn{
        padding:0 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE - 400px
========================================================= */

@media (max-width:400px){

    .top-universities{
        padding:38px 0 28px;
    }

    .top-universities .section-title h2{
        font-size:23px;
    }

    .top-universities .title-badge{
        font-size:10px;
        padding:7px 13px;
    }

    .top-universities .section-title p{
        font-size:12.5px;
    }

    .top-universities .heading-line span{
        width:75px;
        height:3px;
    }

    .top-universities .universitySwiper{
        padding-left:10px;
        padding-right:10px;
    }

    .top-universities .image-box{
        height:180px;
    }

    .top-universities .university-logo{
        width:52px;
        height:52px;
        top:10px;
        left:10px;
    }

    .top-universities .university-card .content{
        padding:37px 14px 15px;
    }

    .top-universities .graduate-icon{
        width:52px;
        height:52px;
        top:-26px;
    }

    .top-universities .graduate-icon i{
        font-size:17px;
    }

    .top-universities .university-card .content h3{
        font-size:16px;
    }

    .top-universities .university-card .content ul li .icon{
        flex-basis:31px;
        width:31px;
        height:31px;
    }

    .top-universities .university-card .content ul li span{
        font-size:11px;
    }

    .top-universities .university-card .content ul li strong{
        font-size:12px;
    }

    .top-universities .details-btn{
        font-size:12px !important;
    }

    .top-universities .details-btn i{
        width:33px;
        height:33px;
        flex-basis:33px;
    }

}


/* =========================================================
   EXTRA SMALL - 350px
========================================================= */

@media (max-width:350px){

    .top-universities .section-title h2{
        font-size:21px;
    }

    .top-universities .section-title p{
        font-size:12px;
    }

    .top-universities .image-box{
        height:165px;
    }

    .top-universities .university-card .content{
        padding:35px 12px 13px;
    }

    .top-universities .university-card .content h3{
        font-size:15px;
    }

    .top-universities .university-card .content ul li{
        gap:8px;
    }

    .top-universities .university-card .content ul li strong{
        font-size:11.5px;
    }

    .top-universities .partner-btn a{
        font-size:12px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

    .top-universities .university-card:hover{
        transform:none;
    }

    .top-universities .university-card:hover .image-box > img{
        transform:none;
    }

   

    .top-universities .university-card:hover .university-logo{
        transform:none;
    }

    .top-universities .university-card:hover .graduate-icon{
        transform:translateX(-50%);
    }

    .top-universities .partner-btn a:hover{
        transform:none;
    }

}

.courses-section{
    position:relative;
    padding:50px 0;
    background:#fff;
    overflow:hidden;
}

.courses-section::before{
    content:"";
    position:absolute;
    top:-180px;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(0,122,69,.08) 0%,
    rgba(0,122,69,0) 72%);
}

.courses-section::after{
    content:"";
    position:absolute;
    right:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(255,193,7,.08) 0%,
    rgba(255,193,7,0) 72%);
}

.courses-section .section-title{
    text-align:center;
    margin-bottom:48px;
}

.courses-section .title-top{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:22px;
}

.courses-section .title-top span{
    width:78px;
    height:2px;
    background:#007847;
    position:relative;
}

.courses-section .title-top span::after{
    content:"";
    position:absolute;
    right:-4px;
    top:50%;
    transform:translateY(-50%);
    width:8px;
    height:8px;
    background:#007847;
    border-radius:50%;
}

.courses-section .title-top span:first-child::after{
    right:-4px;
}

.courses-section .title-top span:last-child::after{
    left:-4px;
}

.courses-section .title-top h6{
    margin:0;
    padding:10px 22px;
    background:#ffc107;
    border-radius:40px;
    font-size:15px;
    font-weight:700;
    color:#111;
    text-transform:uppercase;
    letter-spacing:.8px;
    line-height:1;
}

.courses-section .section-title h2{
    margin:0;
    font-size:42px;
    line-height:1.15;
    font-weight:700;
    color:#111;
}

.courses-section .section-title h2 span{
    color:#007847;
}

.courses-section .title-shape{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:15px 0 23px;
}

.courses-section .title-shape span{
    width:44px;
    height:4px;
    border-radius:20px;
    background:#ffc107;
}

.courses-section .title-shape .active{
    width:62px;
    background:#007847;
}

.courses-section .section-title p{
    max-width:820px;
    margin:auto;
    color:#555;
    font-size:18px;
    line-height:1.75;
    font-weight:400;
}

.courses-section .section-title p strong{
    color:#007847;
    font-weight:700;
}

.course-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
    align-items:stretch;
}

/*=========================================
        Course Card
=========================================*/

.course-card{
    position:relative;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.10);
    transition:.35s ease;
}

.course-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

/*=========================================
        Course Image
=========================================*/

.course-image{
    position:relative;
    height:190px;
    overflow:hidden;
}

.course-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.course-card:hover .course-image img{
    transform:scale(1.08);
}

.course-content{
    position:relative;
    background:#fff;
    padding:34px 28px 13px;
}

.course-icon{
    position:absolute;
    top:-44px;
    left:28px;
    width:60px;
    height:60px;
    background:#03663f;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:4px solid #fff;
    box-shadow:0 12px 30px rgba(0,122,69,.28);
    transition:.35s;
}

.course-card:hover .course-icon{
    transform:translateY(-6px) rotate(-5deg);
}

.course-icon img{
    width:42px;
    height:42px;
    object-fit:contain;
}

/*=========================================
        Title
=========================================*/

.courses-section .course-card h3{
    margin:0 0 14px;
    font-size:20px;
    line-height:1.35;
    font-weight:700;
    color:#161616;
}

/*=========================================
        Info Row
=========================================*/

.course-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    padding-bottom:22px;
    border-bottom:1px solid #e7e7e7;
}

.info-item{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    color:#555;
    white-space:nowrap;
}

.info-item i{
    color:#007847;
    font-size:16px;
}

.divider{
    width:1px;
    height:18px;
    background:#d8d8d8;
}

.course-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:8px;
}

.course-footer a{
    text-decoration:none;
}

/* Explore Button */

.course-footer>a:first-child{
    color:#007847;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}

.course-footer>a:first-child:hover{
    color:#ffc107;
}

/*=========================================
        Arrow Button
=========================================*/

.arrow-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#ffc107;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#111;
    font-size:18px;
    transition:.35s;
    flex-shrink:0;
}

.arrow-btn:hover{
    background:#007847;
    color:#fff;
    transform:rotate(-45deg);
}

/*=========================================
        Card Hover
=========================================*/

.course-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0;
    height:5px;
    background:#007847;
    transition:.45s;
    z-index:5;
}

.course-card:hover::before{
    width:100%;
}

.course-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:4px;
    background:#ffc107;
    transition:.45s;
}

.course-card:hover::after{
    width:100%;
}

/* Large Laptop */
@media (max-width: 1400px){
    .course-grid{
        gap:28px;
    }

    .courses-section .section-title h2{
        font-size:42px;
    }

}

@media (max-width:1200px){
    .courses-section{
        padding:90px 0;
    }

    .courses-section .section-title{
        margin-bottom:60px;
    }

    .courses-section .section-title h2{
        font-size:48px;
    }

    .courses-section .section-title p{
        font-size:18px;
        line-height:1.8;
    }

    .course-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

    .course-image{
        height:220px;
    }

}

@media (max-width:991px){

    .courses-section{
        padding:80px 0;
    }

    .courses-section .section-title{
        margin-bottom:55px;
    }

    .courses-section .title-top{
        gap:14px;
    }

    .courses-section .title-top span{
        width:60px;
    }

    .courses-section .title-top h6{
        font-size:13px;
        padding:8px 18px;
    }

    .courses-section .section-title h2{
        font-size:40px;
        line-height:1.25;
    }

    .courses-section .section-title p{
        font-size:17px;
        line-height:1.8;
        max-width:650px;
    }

    .course-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .course-image{
        height:200px;
    }

    .course-content{
        padding:55px 24px 24px;
    }

    .course-icon{
        width:72px;
        height:72px;
        left:24px;
        top:-38px;
    }

    .course-icon img{
        width:38px;
        height:38px;
    }

    .courses-section .course-card h3{
        font-size:24px;
    }

    .info-item{
        font-size:14px;
    }

    .course-footer>a:first-child{
        font-size:22px;
    }

}

@media (max-width:767px){

    .courses-section{
        padding:70px 0;
    }

    .courses-section .section-title{
        margin-bottom:45px;
    }

    .courses-section .title-top{
        gap:10px;
    }

    .courses-section .title-top span{
        width:45px;
    }

    .courses-section .title-top h6{
        font-size:12px;
        padding:8px 16px;
    }

    .courses-section .section-title h2{
        font-size:34px;
    }

    .courses-section .section-title p{
        font-size:16px;
        line-height:1.7;
    }

    .course-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

    .course-card{
        max-width:560px;
        margin:auto;
    }

    .course-image{
        height:220px;
    }

}

@media (max-width:575px){
    .courses-section{
        padding:60px 0;
    }

    .courses-section .title-top{
        flex-wrap:nowrap;
    }

    .courses-section .title-top span{
        width:32px;
    }

    .courses-section .title-top h6{
        font-size:11px;
        padding:8px 14px;
    }

    .courses-section .section-title h2{
        font-size:30px;
        line-height:1.35;
    }

    .courses-section .title-shape{
        margin:20px 0 22px;
        gap:8px;
    }

    .courses-section .title-shape span{
        width:28px;
        height:4px;
    }

    .courses-section .title-shape .active{
        width:46px;
    }

    .courses-section .section-title p{
        font-size:15px;
        line-height:1.7;
    }

    .course-image{
        height:200px;
    }

    .course-content{
        padding:52px 20px 20px;
    }

    .course-icon{
        width:68px;
        height:68px;
        left:20px;
        top:-34px;
        border-radius:16px;
    }

    .course-icon img{
        width:34px;
        height:34px;
    }

    .courses-section .course-card h3{
        font-size:20px;
        margin-bottom:16px;
    }

    .course-info{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .divider{
        display:none;
    }

    .info-item{
        font-size:14px;
    }

    .course-footer{
        margin-top:6px;
    }

    .course-footer>a:first-child{
        font-size:18px;
    }

    .arrow-btn{
        width:42px;
        height:42px;
        font-size:16px;
    }

}

@media (max-width:380px){

    .courses-section .section-title h2{
        font-size:26px;
    }

    .courses-section .section-title p{
        font-size:14px;
    }

    .course-image{
        height:180px;
    }

    .course-content{
        padding:50px 18px 18px;
    }

    .course-icon{
        width:62px;
        height:62px;
    }

    .course-icon img{
        width:30px;
        height:30px;
    }

    .courses-section .course-card h3{
        font-size:18px;
    }

    .info-item{
        font-size:13px;
    }

    .course-footer>a:first-child{
        font-size:17px;
    }

    .arrow-btn{
        width:40px;
        height:40px;
    }

}




.study-usa{
    position:relative;
    padding:55px 0%;
    overflow:hidden;
    background:#f8f8f6;
}


.study-usa::before{

    content:"";
    position:absolute;
    left:15px;
    top:25px;
    width:90px;
    height:90px;

    background-image:
    radial-gradient(#dddddd 2px,transparent 2px);

    background-size:18px 18px;

    opacity:.8;

}


/* light glow */

.study-usa::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:
    radial-gradient(circle,
    rgba(246,184,20,.12),
    transparent 70%);
    left:-150px;
    bottom:-180px;
}



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

.universe-hero {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 75px 0 0px;
    isolation: isolate;
    margin: 50px 0px 0px;
}

.universe-hero *,
.universe-hero *::before,
.universe-hero *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.universe-hero .hero-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
    position: relative;
    z-index: 5;
}


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

.universe-hero .hero-left {
    width: 52%;
    flex: 0 0 52%;
    position: relative;
    z-index: 10;
}

.universe-hero .country-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    margin-bottom: 20px;
    border: 2px solid var(--primary);
    border-radius: 14px;
    background: #ffffff;
    color: var(--primary);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.universe-hero .country-tag img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}


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

.universe-hero .hero-title {
    margin: 0 0 18px;
    padding: 0;
    color: #071a43;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.universe-hero .hero-title .red {
    color: var(--primary);
}


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

.universe-hero .hero-subtitle {
    max-width: 760px;
    margin: 0 0 18px;
    padding: 0;
    color: #071a43;
    font-size: clamp(20px, 2vw, 27px);
    line-height: 1.25;
    font-weight: 700;
}

.universe-hero .hero-subtitle span {
    color: var(--secondary);
}


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

.universe-hero .heading-line {
    width: 145px;
    height: 5px;
    margin: 0 0 25px;
    border-radius: 50px;
    background: var(--secondary);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.universe-hero .hero-description {
    max-width: 760px;
    margin: 0 0 38px;
    padding: 0;
    color: #27324f;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
}


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

.universe-hero .hero-features {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 42px;
}

.universe-hero .feature-item {
    width: 150px;
    min-width: 0;
    text-align: center;
}

.universe-hero .feature-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    line-height: 1;
}

.universe-hero .feature-item:nth-child(1) .feature-icon {
    background: #eaf2ff;
    color: #245fd8;
}

.universe-hero .feature-item:nth-child(2) .feature-icon {
    background: #ffeef0;
    color: #ff5058;
}

.universe-hero .feature-item:nth-child(3) .feature-icon {
    background: #e8fbef;
    color: #23a65b;
}

.universe-hero .feature-item:nth-child(4) .feature-icon {
    background: #f3ebff;
    color: #7a4fe4;
}

.universe-hero .feature-item h4 {
    margin: 0;
    padding: 0;
    color: #25324d;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
}


/* =========================================================
   BUTTONS
========================================================= */

.universe-hero .hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.universe-hero .btn-primary,
.universe-hero .btn-secondary {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 30px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
    font-weight: 700;
    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.universe-hero .btn-primary {
    background: var(--primary);
    color: #ffffff;
    border: 2px solid var(--primary);
    box-shadow: 0 12px 30px rgba(13, 107, 68, .18);
}

.universe-hero .btn-primary:hover {
    transform: translateY(-3px);
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 15px 35px rgba(13, 107, 68, .25);
}

.universe-hero .btn-secondary {
    background: #ffffff;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.universe-hero .btn-secondary:hover {
    transform: translateY(-3px);
    background: var(--primary);
    color: #ffffff;
}

.universe-hero .hero-buttons i {
    font-size: 17px;
}


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

.universe-hero .hero-right {
    width: 48%;
    flex: 0 0 48%;
    min-height: 670px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 4;
}


/* =========================================================
   CANADA BANNER IMAGE
========================================================= */

.universe-hero .cap-icon {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: auto;
    display: block;
    object-fit: contain;
    z-index: 5;
}


/* =========================================================
   DECORATIVE BLUE SHAPE
========================================================= */

.universe-hero .blue-shape {
    position: absolute;
    width: 620px;
    height: 620px;
    right: -120px;
    bottom: -110px;
    background: #1f5fd8;
    border-radius: 58% 42% 0 100%;
    z-index: 1;
    pointer-events: none;
}


/* =========================================================
   CANADA CIRCLE
========================================================= */

.universe-hero .canada-circle {
    position: absolute;
    right: -10px;
    top: 230px;
    width: 165px;
    height: 165px;
    padding: 15px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    z-index: 8;
}

.universe-hero .canada-circle img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}


/* =========================================================
   FLIGHT PATH
========================================================= */

.universe-hero .flight-path {
    position: absolute;
    right: 15px;
    top: 75px;
    width: 190px;
    height: 450px;
    border: 3px dashed #2b63d8;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 220px 0 0;
    opacity: .8;
    z-index: 2;
    pointer-events: none;
}


/* =========================================================
   ARROW
========================================================= */

.universe-hero .arrow-icon {
    position: absolute;
    right: 150px;
    top: 100px;
    color: #1d57d7;
    font-size: 32px;
    z-index: 4;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.universe-hero .hero-dots {
    position: absolute;
    width: 105px;
    height: 105px;
    background-image: radial-gradient(
        #d4ddfb 2px,
        transparent 2px
    );
    background-size: 17px 17px;
    z-index: 1;
    pointer-events: none;
}

.universe-hero .hero-dots-left {
    left: 35px;
    top: 55px;
}

.universe-hero .hero-dots-right {
    right: -5px;
    top: 20px;
}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.universe-hero .hero-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    left: -280px;
    bottom: -280px;
    border-radius: 50%;
    border: 70px solid #f4f8ff;
    z-index: 0;
    pointer-events: none;
}


/* =========================================================
   OLD / UNUSED DECORATIVE ELEMENTS
   Kept safe in case they exist in another version
========================================================= */

.universe-hero .blue-blob,
.universe-hero .big-ben,
.universe-hero .student-image,
.universe-hero .flag-circle,
.universe-hero .hero-arrow,
.universe-hero .bigben-bg,
.universe-hero .parliament-bg {
    pointer-events: none;
}


/* =========================================================
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .universe-hero {
        padding-top: 85px;
        padding-bottom: 90px;
    }

    .universe-hero .hero-wrapper {
        gap: 60px;
    }

    .universe-hero .hero-left {
        width: 53%;
        flex-basis: 53%;
    }

    .universe-hero .hero-right {
        width: 47%;
        flex-basis: 47%;
        min-height: 670px;
    }

    .universe-hero .cap-icon {
        max-width: 680px;
    }

    .universe-hero .blue-shape {
        width: 680px;
        height: 680px;
    }
}


/* =========================================================
   1200px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .universe-hero .hero-wrapper {
        gap: 30px;
    }

    .universe-hero .hero-left {
        width: 53%;
        flex-basis: 53%;
    }

    .universe-hero .hero-right {
        width: 47%;
        flex-basis: 47%;
        min-height: 670px;
    }

    .universe-hero .hero-title {
        font-size: 56px;
    }

    .universe-hero .hero-subtitle {
        font-size: 24px;
    }

    .universe-hero .hero-description {
        font-size: 17px;
    }

    .universe-hero .cap-icon {
        max-width: 570px;
    }

    .universe-hero .blue-shape {
        width: 540px;
        height: 540px;
        right: -110px;
        bottom: -80px;
    }

    .universe-hero .canada-circle {
        width: 145px;
        height: 145px;
        right: 0;
        top: 210px;
    }

    .universe-hero .canada-circle img {
        width: 105px;
        height: 105px;
    }

    .universe-hero .flight-path {
        width: 165px;
        height: 400px;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .universe-hero {
        padding: 65px 0 70px;
    }

    .universe-hero .hero-wrapper {
        gap: 25px;
    }

    .universe-hero .hero-left {
        width: 55%;
        flex-basis: 55%;
    }

    .universe-hero .hero-right {
        width: 45%;
        flex-basis: 45%;
        min-height: 500px;
    }

    .universe-hero .hero-title {
        font-size: 50px;
        letter-spacing: -1px;
    }

    .universe-hero .hero-subtitle {
        font-size: 22px;
    }

    .universe-hero .hero-description {
        font-size: 16px;
        line-height: 1.55;
        margin-bottom: 30px;
    }

    .universe-hero .hero-features {
        margin-bottom: 32px;
    }

    .universe-hero .feature-item {
        width: 125px;
    }

    .universe-hero .feature-icon {
        width: 68px;
        height: 68px;
        font-size: 27px;
    }

    .universe-hero .feature-item h4 {
        font-size: 16px;
    }

    .universe-hero .cap-icon {
        max-width: 470px;
    }

    .universe-hero .blue-shape {
        width: 460px;
        height: 460px;
        right: -90px;
    }

    .universe-hero .canada-circle {
        width: 125px;
        height: 125px;
        top: 190px;
    }

    .universe-hero .canada-circle img {
        width: 90px;
        height: 90px;
    }

    .universe-hero .flight-path {
        display: none;
    }

    .universe-hero .arrow-icon {
        display: none;
    }
}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .universe-hero {
        padding: 60px 0 70px;
    }

    .universe-hero .hero-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .universe-hero .hero-left,
    .universe-hero .hero-right {
        width: 100%;
        flex-basis: 100%;
    }

    .universe-hero .hero-left {
        text-align: center;
    }

    .universe-hero .country-tag {
        margin-bottom: 18px;
    }

    .universe-hero .hero-title {
        font-size: 54px;
    }

    .universe-hero .hero-subtitle {
        max-width: 850px;
        margin-left: auto;
        margin-right: auto;
        font-size: 23px;
    }

    .universe-hero .heading-line {
        margin-left: auto;
        margin-right: auto;
    }

    .universe-hero .hero-description {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        font-size: 17px;
    }

    .universe-hero .hero-features {
        justify-content: center;
        gap: 15px 10px;
    }

    .universe-hero .feature-item {
        width: 145px;
    }

    .universe-hero .hero-buttons {
        justify-content: center;
    }

    .universe-hero .hero-right {
        min-height: 500px;
        margin-top: 20px;
    }

    .universe-hero .cap-icon {
        width: 100%;
        max-width: 520px;
    }

    .universe-hero .blue-shape {
        width: 480px;
        height: 480px;
        right: 50%;
        transform: translateX(50%);
        bottom: -90px;
    }

    .universe-hero .canada-circle {
        right: calc(50% - 250px);
        top: 180px;
        width: 130px;
        height: 130px;
    }

    .universe-hero .canada-circle img {
        width: 92px;
        height: 92px;
    }

    .universe-hero .hero-dots-left {
        left: 20px;
        top: 30px;
    }
}


/* =========================================================
   MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .universe-hero {
        padding: 0px 0 0px;
    }

    .universe-hero .hero-wrapper {
        gap: 5px;
    }

    .universe-hero .hero-left {
        padding: 0 5px;
    }

    .universe-hero .country-tag {
        gap: 9px;
        padding: 7px 13px;
        margin-bottom: 15px;
        border-width: 1.5px;
        border-radius: 10px;
        font-size: 13px;
    }

    .universe-hero .country-tag img {
        width: 24px;
        height: 24px;
    }

    .universe-hero .hero-title {
        margin-bottom: 14px;
        font-size: clamp(38px, 11vw, 48px);
        line-height: 1.02;
        letter-spacing: -.8px;
    }

    .universe-hero .hero-subtitle {
        margin-bottom: 15px;
        font-size: 19px;
        line-height: 1.3;
    }

    .universe-hero .heading-line {
        width: 90px;
        height: 4px;
        margin-bottom: 20px;
    }

    .universe-hero .hero-description {
        margin-bottom: 30px;
        font-size: 15px;
        line-height: 1.6;
    }

    .universe-hero .hero-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 5px;
        margin-bottom: 32px;
    }

    .universe-hero .feature-item {
        width: 100%;
    }

    .universe-hero .feature-icon {
        width: 66px;
        height: 66px;
        margin-bottom: 10px;
        font-size: 26px;
    }

    .universe-hero .feature-item h4 {
        font-size: 14px;
        line-height: 1.3;
    }

    .universe-hero .hero-buttons {
        width: 100%;
        justify-content: center;
    }

    .universe-hero .btn-primary,
    .universe-hero .btn-secondary {
        width: 100%;
        max-width: 320px;
        min-height: 51px;
        padding: 12px 20px;
        border-radius: 13px;
        font-size: 15px;
    }

    .universe-hero .hero-right {
        min-height: 380px;
        margin-top: 20px;
    }

    .universe-hero .cap-icon {
        width: 100%;
        max-width: 400px;
    }

    .universe-hero .blue-shape {
        width: 350px;
        height: 350px;
        bottom: -70px;
    }

    .universe-hero .canada-circle {
        width: 95px;
        height: 95px;
        padding: 10px;
        right: calc(50% - 175px);
        top: 150px;
    }

    .universe-hero .canada-circle img {
        width: 70px;
        height: 70px;
    }

    .universe-hero .flight-path,
    .universe-hero .arrow-icon {
        display: none;
    }

    .universe-hero .hero-dots {
        width: 70px;
        height: 70px;
        background-size: 13px 13px;
    }

    .universe-hero .hero-dots-left {
        left: -10px;
        top: 25px;
    }

    .universe-hero .hero-dots-right {
        right: -20px;
        top: 100px;
    }

    .universe-hero .hero-circle {
        width: 280px;
        height: 280px;
        left: -180px;
        bottom: -180px;
        border-width: 40px;
    }
}


/* =========================================================
   SMALL MOBILE
   400px - 575px
========================================================= */

@media (max-width: 575px) {

    .universe-hero {
        padding: 30px 0 0px;
    }

    .universe-hero .hero-title {
        font-size: 39px;
    }

    .universe-hero .hero-subtitle {
        font-size: 18px;
    }

    .universe-hero .hero-description {
        font-size: 14.5px;
    }

    .universe-hero .hero-features {
        gap: 22px 0;
    }

    .universe-hero .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .universe-hero .feature-item h4 {
        font-size: 13px;
    }

    .universe-hero .hero-right {
        min-height: 325px;
    }

    .universe-hero .cap-icon {
        max-width: 350px;
    }

    .universe-hero .blue-shape {
        width: 300px;
        height: 300px;
        bottom: -55px;
    }

    .universe-hero .canada-circle {
        width: 80px;
        height: 80px;
        right: calc(50% - 150px);
        top: 125px;
    }

    .universe-hero .canada-circle img {
        width: 58px;
        height: 58px;
    }
}


/* =========================================================
   EXTRA SMALL MOBILE
   399px and below
========================================================= */

@media (max-width: 399px) {

    .universe-hero {
        padding: 32px 0 40px;
    }

    .universe-hero .country-tag {
        font-size: 12px;
        padding: 6px 11px;
    }

    .universe-hero .country-tag img {
        width: 22px;
        height: 22px;
    }

    .universe-hero .hero-title {
        font-size: 35px;
    }

    .universe-hero .hero-subtitle {
        font-size: 17px;
    }

    .universe-hero .hero-description {
        font-size: 14px;
        line-height: 1.55;
    }

    .universe-hero .hero-features {
        gap: 20px 0;
    }

    .universe-hero .feature-icon {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .universe-hero .feature-item h4 {
        font-size: 12px;
    }

    .universe-hero .hero-right {
        min-height: 290px;
    }

    .universe-hero .cap-icon {
        max-width: 315px;
    }

    .universe-hero .blue-shape {
        width: 270px;
        height: 270px;
        bottom: -50px;
    }

    .universe-hero .canada-circle {
        width: 70px;
        height: 70px;
        right: calc(50% - 135px);
        top: 110px;
    }

    .universe-hero .canada-circle img {
        width: 50px;
        height: 50px;
    }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .universe-hero .btn-primary:hover,
    .universe-hero .btn-secondary:hover {
        transform: none;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .universe-hero .btn-primary,
    .universe-hero .btn-secondary {
        transition: none;
    }
}





/* document */
/*=========================================
        About UK Section
=========================================*/

.about-uk-section{
    position:relative;
    padding:50px 0;
    background:#fff;
    overflow:hidden;
}

/* Decorative Background */

.about-uk-section::before{
    content:"";
    position:absolute;
    top:40px;
    left:0;
    width:120px;
    height:120px;
    background-image:radial-gradient(#d6eadb 2px, transparent 2px);
    background-size:20px 20px;
    opacity:.9;
}

.about-uk-section::after{
    content:"";
    position:absolute;
    right:0;
    bottom:20px;
    width:150px;
    height:150px;
    background-image:radial-gradient(#d6eadb 2px, transparent 2px);
    background-size:20px 20px;
    opacity:.8;
}

.about-uk-section .section-title{
    text-align:center;
    margin-bottom:60px;
}

.about-uk-section .section-title h2{
    margin:0;
    font-size:42px;
    font-weight:700;
    color:#1c1c1c;
    line-height:1.2;
}

.about-uk-section .section-title h2 span{
    color:#0d6b44;
}

.about-uk-section .title-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:10px 0 15px;
}

.about-uk-section .title-divider span{
    display:block;
    width:52px;
    height:4px;
    border-radius:20px;
    background:#f7b926;
}

.about-uk-section .title-divider .active{
    width:10px;
    height:10px;
    border-radius:50%;
}

.about-uk-section .section-title p{
    margin:0 auto;
    font-size:18px;
    color:#666;
    line-height:1.7;
}

.uk-wrapper{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:35px;
    align-items:flex-start;
}

/*=========================================
            Sidebar
=========================================*/

.uk-sidebar{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

/*=========================================
            Sidebar Item
=========================================*/

.uk-tab{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 28px;
    background:#fff;
    border-bottom:1px solid #ececec;
    cursor:pointer;
    transition:.35s;
}

.uk-tab:last-child{
    border-bottom:none;
}

.uk-tab:hover{
    background:#f8fbf9;
}

.tab-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.uk-sidebar .tab-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.uk-sidebar .tab-icon img{
    width:34px;
    height:34px;
    object-fit:contain;
}

.uk-sidebar .tab-left span{
    font-size:18px;
    font-weight:500;
    color:#1c1c1c;
}

.uk-tab i{
    color:#666;
    font-size:18px;
    transition:.3s;
}

.uk-tab:hover i{
    transform:translateX(4px);
}

/*=========================================
            Active Menu
=========================================*/

.uk-tab.active{
    background:#0d6b44;
    color:#fff;
    position:relative;
}

.uk-tab.active::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:8px;
    height:100%;
    background:#f7b926;
}

.uk-tab.active .tab-left span{
    color:#fff;
}

.uk-tab.active i{
    color:#fff;
}

.uk-tab.active .tab-icon{
    width:58px;
    height:58px;
    background:#f7b926;
    border-radius:50%;
}

.uk-tab.active .tab-icon img{
    width:34px;
    height:34px;
    filter:brightness(0) invert(1);
}

.uk-content-card{
    position:relative;
    background:#fff;
    border-radius:26px;
    padding:24px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    overflow:hidden;
}

.uk-content-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:120px;
    height:8px;
    background:#0d6b44;
    border-bottom-right-radius:40px;
}

.uk-content-card::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:160px;
    height:10px;
    background:#f7b926;
    border-bottom-left-radius:50px;
}

.uk-content-card .content-header{
    display:flex;
    align-items:flex-start;
    gap:30px;
    margin-bottom:15px;
}

.uk-content-card .content-icon{
    width:80px;
    min-width:80px;
    height:80px;
    border-radius:50%;
    background:linear-gradient(135deg,#0d6b44,#0b5d3b);
    display:flex;
    align-items:center;
    justify-content:center;
    border:8px solid #fff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.uk-content-card .content-icon img{
    width:45px;
    height:45px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.uk-content-card .content-title{
    flex:1;
    padding-top:12px;
}

.uk-content-card .content-title h3{
    margin:0;
    font-size:22px;
    line-height:1.25;
    color:#1c1c1c;
    font-weight:700;
}

.uk-content-card .content-title span{
    display:block;
    width:90px;
    height:4px;
    border-radius:30px;
    background:#f7b926;
    margin:12px 0 15px;
}

.uk-content-card .content-title p{
    margin:0;
    font-size:18px;
    color:#555;
    line-height:1.8;
}

/*=========================================
        Checklist Grid
=========================================*/

.checklist-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
    margin-top:10px;
}

.check-column{
    display:flex;
    flex-direction:column;
}

/*=========================================
        Checklist Item
=========================================*/

.check-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:9px 0;
    border-bottom:1px solid #ececec;
}

.check-item:last-child{
    border-bottom:none;
}

.check-item i{
    color:#0d6b44;
    font-size:26px;
    margin-top:4px;
    flex-shrink:0;
}

.check-item p{
    margin:0;
    color:#333;
    font-size:16px;
    line-height:1.8;
}

.check-item strong{
    color:#0d6b44;
    font-weight:700;
}

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

.consult-box{
    margin-top:45px;
    padding:28px 32px;
    border-radius:22px;
    background:linear-gradient(90deg,#eef8f3,#f8faf8);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

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

.consult-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.consult-icon{
    width:78px;
    height:78px;
    min-width:78px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.consult-icon img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.consult-text h4{
    margin:0 0 8px;
    font-size:30px;
    color:#0d6b44;
    font-weight:700;
}

.consult-text p{
    margin:0;
    color:#666;
    font-size:18px;
    line-height:1.6;
}

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

.consult-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    min-width:330px;
    padding:20px 36px;
    border-radius:60px;
    background:#0d6b44;
    color:#fff;
    text-decoration:none;
    font-size:20px;
    font-weight:600;
    transition:.35s;
    white-space:nowrap;
}

.consult-btn i{
    transition:.35s;
}

.consult-btn:hover{
    background:#f7b926;
    color:#1c1c1c;
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(0,0,0,.15);
}

.consult-btn:hover i{
    transform:translateX(6px);
}

/*=========================================
        Hover Effects
=========================================*/

.check-item{
    transition:.3s;
}

.check-item:hover{
    padding-left:10px;
}

.check-item:hover i{
    transform:scale(1.1);
}

.content-icon{
    transition:.4s;
}

.uk-content-card:hover .content-icon{
    transform:rotate(-8deg) scale(1.05);
}

.uk-content-card{
    transition:.35s;
}

.uk-content-card:hover{
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.uk-tab{
    transition:.3s;
}

.uk-tab:hover{
    padding-left:34px;
}

.uk-wrapper .tab-content{
    width:100%;
}

.uk-wrapper .content-panel{
    display:none;
}

.uk-wrapper .content-panel.active{
    display:block;
}

@media (max-width:1400px){
    .uk-wrapper{
        grid-template-columns:310px 1fr;
        gap:30px;
    }

    .uk-content-card .content-title h3{
        font-size:22px;
    }

    .consult-btn{
        min-width:290px;
    }

}

/*=========================
        Laptop
=========================*/

@media (max-width:1200px){
    .about-uk-section{
        padding:90px 0;
    }

    .section-title h2{
        font-size:48px;
    }

    .section-title p{
        font-size:18px;
    }

    .uk-wrapper{
        grid-template-columns:280px 1fr;
        gap:25px;
    }

    .uk-tab{
        padding:20px;
    }

    .tab-left span{
        font-size:18px;
    }

    .content-icon{
        width:110px;
        height:110px;
        min-width:110px;
    }

    .content-icon img{
        width:55px;
        height:55px;
    }

    .uk-content-card .content-title h3{
        font-size:22px;
    }

    .content-title p{
        font-size:18px;
    }

    .check-item p{
        font-size:16px;
    }

    .consult-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .consult-btn{
        width:100%;
        min-width:100%;
    }

}

/*=========================
        Tablet
=========================*/

@media (max-width:991px){

    .about-uk-section{
        padding:80px 0;
    }

    .section-title{
        margin-bottom:45px;
    }

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

    .section-title p{
        font-size:17px;
    }

    .uk-wrapper{
        grid-template-columns:1fr;
    }

    .uk-sidebar{
        width:100%;
    }

    .uk-content-card{
        padding:35px;
    }

    .content-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .content-title span{
        margin:18px auto 22px;
    }

    .content-icon{
        width:100px;
        height:100px;
        min-width:100px;
    }

    .content-icon img{
        width:50px;
        height:50px;
    }

    .uk-content-card .content-title h3{
        font-size:30px;
    }

    .checklist-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .consult-box{
        padding:25px;
    }

}

/*=========================
        Mobile
=========================*/

@media (max-width:767px){

    .about-uk-section{
        padding:70px 0;
    }
    .section-title h2{
        font-size:34px;
    }

    .section-title p{
        font-size:16px;
        line-height:1.7;
    }

    .uk-content-card{
        padding:25px;
        border-radius:20px;
    }

    .uk-content-card .content-title h3{
        font-size:26px;
        line-height:1.4;
    }

    .content-title p{
        font-size:16px;
        line-height:1.7;
    }

    .content-icon{
        width:90px;
        height:90px;
        min-width:90px;
    }

    .content-icon img{
        width:45px;
        height:45px;
    }

    .check-item{
        gap:15px;
        padding:18px 0;
    }

    .check-item i{
        font-size:22px;
    }

    .check-item p{
        font-size:15px;
        line-height:1.7;
    }

    .consult-box{
        padding:22px;
        text-align:center;
    }

    .consult-left{
        flex-direction:column;
    }

    .consult-text h4{
        font-size:24px;
    }

    .consult-text p{
        font-size:15px;
    }

    .consult-btn{
        font-size:17px;
        padding:16px 25px;
    }

}

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

@media (max-width:575px){

    .about-uk-section{
        padding:20px 0;
    }

    .section-title{
        margin-bottom:35px;
    }

    .section-title h2{
        font-size:30px;
    }

    .title-divider{
        margin:16px 0 18px;
    }

    .title-divider span{
        width:38px;
    }

    .title-divider .active{
        width:8px;
        height:8px;
    }

    .uk-tab{
        padding:18px 16px;
    }

    .tab-left{
        gap:12px;
    }

    .tab-icon{
        width:36px;
        height:36px;
    }

    .tab-icon img{
        width:28px;
        height:28px;
    }

    .uk-tab.active .tab-icon{
        width:48px;
        height:48px;
    }

    .tab-left span{
        font-size:16px;
    }

    .uk-content-card{
        padding:20px;
    }

    .uk-content-card .content-title h3{
        font-size:22px;
    }

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

    .content-icon{
        width:80px;
        height:80px;
        min-width:80px;
    }

    .content-icon img{
        width:38px;
        height:38px;
    }

    .content-title span{
        width:70px;
    }

    .check-item{
        gap:12px;
    }

    .check-item i{
        font-size:20px;
    }

    .check-item p{
        font-size:14px;
    }

    .consult-icon{
        width:60px;
        height:60px;
        min-width:60px;
    }

    .consult-icon img{
        width:32px;
        height:32px;
    }

    .consult-text h4{
        font-size:20px;
    }

    .consult-text p{
        font-size:14px;
    }

    .consult-btn{
        width:100%;
        min-width:100%;
        font-size:16px;
        padding:15px 20px;
    }

}

/*=========================
        Extra Small
=========================*/

@media (max-width:380px){

    .section-title h2{
        font-size:26px;
    }

    .section-title p{
        font-size:14px;
    }

    .tab-left span{
        font-size:15px;
    }

    .uk-content-card .content-title h3{
        font-size:20px;
    }

    .check-item p{
        font-size:13px;
    }

    .consult-text h4{
        font-size:18px;
    }

    .consult-text p{
        font-size:13px;
    }

    .consult-btn{
        font-size:15px;
        gap:10px;
    }

}

.about-career h2{
    font-size: 33px;
    line-height: 1;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 15px;
}
.about-career p{
    font-size: 18px;
    color: rgb(102, 102, 102);
    line-height: 1.8;
}


/* Career Counselling */
/* =========================================================
   ADMISSION TESTS / APTITUDE SECTION
========================================================= */

.aptitude-section {
    position: relative;
    padding: 80px 0 100px;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
}

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

.aptitude-section::before {
    content: "";
    position: absolute;

    top: 100px;
    left: 35px;

    width: 95px;
    height: 95px;

    background-image: radial-gradient(
        #d7e8dc 2px,
        transparent 2px
    );

    background-size: 18px 18px;

    opacity: 0.9;

    pointer-events: none;
    z-index: -1;
}

.aptitude-section::after {
    content: "";

    position: absolute;

    top: 180px;
    right: 150px;

    width: 70px;
    height: 2px;

    background: #ececec;

    pointer-events: none;
}

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

.aptitude-section .section-heading {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 65px;

    text-align: center;

    position: relative;
    z-index: 2;
}

/* Heading glow */

.aptitude-section .section-heading::before {
    content: "";

    position: absolute;

    width: 340px;
    height: 130px;

    top: -25px;
    left: 50%;

    transform: translateX(-50%);

    background: radial-gradient(
        circle,
        rgba(13, 107, 68, 0.05),
        transparent 72%
    );

    z-index: -1;

    pointer-events: none;
}

/* Heading */

.aptitude-section .section-heading h2 {
    margin: 0;

    font-size: 44px;
    line-height: 1.2;

    font-weight: 800;

    color: #111;
}

.aptitude-section .section-heading h2 span {
    color: var(--primary, #0d6b44);
}

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

.aptitude-section .heading-line {
    display: flex;

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

    gap: 8px;

    margin: 18px auto 22px;
}

.aptitude-section .heading-line span {
    display: block;

    width: 80px;
    height: 5px;

    background: var(--secondary, #f7b926);

    border-radius: 50px;
}

.aptitude-section .heading-line .dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: var(--secondary, #f7b926);
}

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

.aptitude-section .section-heading p {
    max-width: 850px;

    margin: 0 auto;

    color: #555;

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

/* =========================================================
   MAIN WRAPPER
========================================================= */

.aptitude-section .aptitude-wrapper {
    width: 100%;

    display: grid;

    grid-template-columns: 350px minmax(0, 1fr);

    gap: 55px;

    align-items: center;

    position: relative;
    z-index: 2;
}

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

.aptitude-section .aptitude-image {
    position: relative;

    width: 100%;

    padding: 0;
}

/* Main image */

.aptitude-section .aptitude-image img {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    border-radius: 26px;

    object-fit: cover;

    z-index: 3;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.10);
}

/* =========================================================
   IMAGE BACKGROUND SHAPE
========================================================= */

.aptitude-section .image-shape {
    position: absolute;

    inset: 0;

    background: #eef6f2;

    border-radius: 26px;

    transform: translate(
        14px,
        14px
    );

    z-index: 1;
}

/* Green circle */

.aptitude-section .image-shape::before {
    content: "";

    position: absolute;

    width: 165px;
    height: 165px;

    left: 25px;
    bottom: 75px;

    background: var(--primary, #0d6b44);

    border-radius: 50%;

    opacity: 0.95;
}

/* =========================================================
   IMAGE DOT PATTERN
========================================================= */

.aptitude-section .dot-pattern {
    position: absolute;

    width: 95px;
    height: 95px;

    right: -32px;
    top: 115px;

    background-image: radial-gradient(
        #b8d5c2 2px,
        transparent 2px
    );

    background-size: 16px 16px;

    z-index: 4;

    pointer-events: none;
}

/* =========================================================
   IMAGE YELLOW STROKE
========================================================= */

.aptitude-section .aptitude-image::after {
    content: "";

    position: absolute;

    left: -12px;
    bottom: 8px;

    width: 55px;
    height: 120px;

    border-left: 5px solid var(--secondary, #f7b926);
    border-bottom: 5px solid var(--secondary, #f7b926);

    border-radius: 0 0 0 30px;

    z-index: 5;

    pointer-events: none;
}

/* =========================================================
   CARDS WRAPPER
========================================================= */

.aptitude-section .aptitude-cards {
    display: flex;

    flex-direction: column;

    gap: 14px;

    min-width: 0;
}

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

.aptitude-section .aptitude-card {
    position: relative;

    display: flex;

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

    gap: 18px;

    width: 100%;

    padding: 14px 15px 14px 18px;

    background: #fff;

    border-radius: 22px;

    border: 1px solid rgba(0, 0, 0, 0.04);

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.07);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

    box-sizing: border-box;
}

/* Top hover line */

.aptitude-section .aptitude-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 4px;

    background: var(--primary, #0d6b44);

    transition: width 0.4s ease;

    z-index: 2;
}

.aptitude-section .aptitude-card:hover::before {
    width: 100%;
}

/* Hover */

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

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.12);
}

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

.aptitude-section .card-left {
    display: flex;

    align-items: center;

    gap: 20px;

    flex: 1;

    min-width: 0;
}

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

.aptitude-section .card-icon {
    width: 66px;
    min-width: 66px;

    height: 66px;

    display: flex;

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

    border-radius: 50%;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* Green */

.aptitude-section .aptitude-card.green .card-icon {
    background: var(--primary, #0d6b44);

    box-shadow:
        0 10px 24px rgba(13, 107, 68, 0.25);
}

/* Yellow */

.aptitude-section .aptitude-card.yellow .card-icon {
    background: var(--secondary, #f7b926);

    box-shadow:
        0 10px 24px rgba(247, 185, 38, 0.28);
}

/* Icon image */

.aptitude-section .card-icon img {
    width: 32px;
    height: 32px;

    display: block;

    object-fit: contain;
}

/* Icon hover */

.aptitude-section .aptitude-card:hover .card-icon {
    transform:
        rotate(-8deg)
        scale(1.08);
}

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

.aptitude-section .aptitude-card .card-content {
    flex: 1;

    min-width: 0;

    padding: 0;

    text-align: left;
}

/* Title */

.aptitude-section .aptitude-card .card-content h3 {
    margin: 0;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 700;

    color: var(--primary, #0d6b44);
}

/* Yellow card title */

.aptitude-section .aptitude-card.yellow .card-content h3 {
    color: #222;
}

/* =========================================================
   SMALL LINE
========================================================= */

.aptitude-section .aptitude-card .card-content .line {
    display: block;

    width: 52px;
    height: 4px;

    margin: 10px 0 10px;

    border-radius: 50px;

    background: var(--secondary, #f7b926);

    transition: width 0.35s ease;
}

.aptitude-section .aptitude-card:hover .card-content .line {
    width: 78px;
}

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

.aptitude-section .aptitude-card .card-content p {
    margin: 0;

    color: #555;

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

/* =========================================================
   NUMBER BOX
========================================================= */

.aptitude-section .number-box {
    width: 58px;
    min-width: 58px;

    height: 58px;

    display: flex;

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

    gap: 7px;

    border-radius: 16px;

    text-decoration: none;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

    flex-shrink: 0;
}

/* Green number */

.aptitude-section .aptitude-card.green .number-box {
    background: var(--primary, #0d6b44);

    color: #fff;

    box-shadow:
        0 8px 20px rgba(13, 107, 68, 0.20);
}

/* Yellow number */

.aptitude-section .aptitude-card.yellow .number-box {
    background: var(--secondary, #f7b926);

    color: #111;

    box-shadow:
        0 8px 20px rgba(247, 185, 38, 0.20);
}

/* Number */

.aptitude-section .number-box span {
    font-size: 18px;

    line-height: 1;

    font-weight: 700;
}

/* Arrow */

.aptitude-section .number-box i {
    font-size: 12px;

    transition:
        transform 0.3s ease;
}

/* Hover */

.aptitude-section .aptitude-card:hover .number-box {
    transform: scale(1.06);
}

.aptitude-section .aptitude-card:hover .number-box i {
    transform: translateX(4px);
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1401px) {

    .aptitude-section {
        padding-top: 90px;
        padding-bottom: 110px;
    }

    .aptitude-section .aptitude-wrapper {
        grid-template-columns: 370px minmax(0, 1fr);

        gap: 65px;
    }

    .aptitude-section .aptitude-card {
        padding-left: 20px;
        padding-right: 18px;
    }

    .aptitude-section .aptitude-card .card-content h3 {
        font-size: 22px;
    }

    .aptitude-section .aptitude-card .card-content p {
        font-size: 16px;
    }

}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) and (min-width: 992px) {

    .aptitude-section {
        padding: 75px 0 90px;
    }

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

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

    .aptitude-section .aptitude-wrapper {
        grid-template-columns: 285px minmax(0, 1fr);

        gap: 30px;
    }

    .aptitude-section .aptitude-cards {
        gap: 12px;
    }

    .aptitude-section .aptitude-card {
        padding: 12px;
        gap: 12px;

        border-radius: 18px;
    }

    .aptitude-section .card-left {
        gap: 15px;
    }

    .aptitude-section .card-icon {
        width: 58px;
        min-width: 58px;

        height: 58px;
    }

    .aptitude-section .card-icon img {
        width: 29px;
        height: 29px;
    }

    .aptitude-section .aptitude-card .card-content h3 {
        font-size: 18px;
    }

    .aptitude-section .aptitude-card .card-content p {
        font-size: 14px;
        line-height: 1.55;
    }

    .aptitude-section .number-box {
        width: 50px;
        min-width: 50px;

        height: 50px;

        border-radius: 14px;
    }

    .aptitude-section .number-box span {
        font-size: 16px;
    }

}

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

@media (max-width: 991px) {

    .aptitude-section {
        padding: 75px 0 85px;
    }

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

        margin-bottom: 55px;
    }

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

    .aptitude-section .section-heading p {
        font-size: 17px;
    }

    /* Image first */

    .aptitude-section .aptitude-wrapper {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .aptitude-section .aptitude-image {
        width: 100%;
        max-width: 430px;

        margin: 0 auto;
    }

    /* Cards become 2 columns */

    .aptitude-section .aptitude-cards {
        display: grid;

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

        gap: 18px;
    }

    .aptitude-section .aptitude-card {
        height: 100%;

        align-items: flex-start;

        padding: 20px;

        flex-direction: column;

        border-radius: 20px;
    }

    .aptitude-section .card-left {
        width: 100%;

        align-items: flex-start;

        flex-direction: column;

        gap: 15px;
    }

    .aptitude-section .card-icon {
        width: 62px;
        min-width: 62px;

        height: 62px;
    }

    .aptitude-section .aptitude-card .card-content h3 {
        font-size: 20px;
    }

    .aptitude-section .aptitude-card .card-content p {
        font-size: 15px;
    }

    /* Number at bottom */

    .aptitude-section .number-box {
        width: 100%;
        min-width: 100%;

        height: 48px;

        border-radius: 13px;

        margin-top: auto;
    }

    .aptitude-section .number-box span {
        font-size: 17px;
    }

}

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

@media (max-width: 767px) {

    .aptitude-section {
        padding: 60px 0 70px;
    }

    /* Hide large decorations */

    .aptitude-section::before,
    .aptitude-section::after {
        display: none;
    }

    .aptitude-section .section-heading {
        margin-bottom: 45px;
    }

    .aptitude-section .section-heading::before {
        width: 280px;
        height: 110px;
    }

    .aptitude-section .section-heading h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .aptitude-section .heading-line {
        margin-top: 16px;
        margin-bottom: 20px;
    }

    .aptitude-section .heading-line span {
        width: 60px;
        height: 4px;
    }

    .aptitude-section .heading-line .dot {
        width: 8px;
        height: 8px;
    }

    /* Single column */

    .aptitude-section .aptitude-wrapper {
        display: flex;

        flex-direction: column;

        gap: 40px;
    }

    /* Image */

    .aptitude-section .aptitude-image {
        width: 100%;
        max-width: 360px;
    }

    .aptitude-section .image-shape {
        transform: translate(10px, 10px);
    }

    .aptitude-section .image-shape::before {
        width: 130px;
        height: 130px;

        left: 20px;
        bottom: 60px;
    }

    .aptitude-section .dot-pattern {
        width: 70px;
        height: 70px;

        right: -15px;
        top: 80px;

        background-size: 13px 13px;
    }

    .aptitude-section .aptitude-image::after {
        left: -7px;
        bottom: 5px;

        width: 40px;
        height: 85px;

        border-width: 4px;
    }

    /* Cards */

    .aptitude-section .aptitude-cards {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 15px;
    }

    .aptitude-section .aptitude-card {
        width: 100%;

        padding: 20px;

        border-radius: 18px;
    }

    .aptitude-section .card-icon {
        width: 60px;
        min-width: 60px;

        height: 60px;
    }

    .aptitude-section .card-icon img {
        width: 29px;
        height: 29px;
    }

    .aptitude-section .aptitude-card .card-content h3 {
        font-size: 20px;
        line-height: 1.35;
    }

    .aptitude-section .aptitude-card .card-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .aptitude-section .number-box {
        height: 52px;

        margin-top: 5px;
    }

}

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

@media (max-width: 575px) {

    .aptitude-section {
        padding: 0px 0 0px;
    }

    .aptitude-section .section-heading {
        margin-bottom: 40px;
    }

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

    .aptitude-section .section-heading p {
        font-size: 15px;
        line-height: 1.65;
    }

    .aptitude-section .heading-line span {
        width: 50px;
    }

    .aptitude-section .aptitude-image {
        max-width: 310px;
    }

    /* Remove excessive decoration */

    .aptitude-section .dot-pattern {
        display: none;
    }

    .aptitude-section .image-shape::before {
        width: 105px;
        height: 105px;

        left: 15px;
        bottom: 50px;
    }

    .aptitude-section .aptitude-card {
        padding: 18px;

        border-radius: 16px;
    }

    .aptitude-section .card-left {
        gap: 14px;
    }

    .aptitude-section .card-icon {
        width: 56px;
        min-width: 56px;

        height: 56px;
    }

    .aptitude-section .card-icon img {
        width: 27px;
        height: 27px;
    }

    .aptitude-section .aptitude-card .card-content h3 {
        font-size: 18px;
    }

    .aptitude-section .aptitude-card .card-content .line {
        width: 45px;

        height: 4px;

        margin: 9px 0 10px;
    }

    .aptitude-section .aptitude-card .card-content p {
        font-size: 14px;

        line-height: 1.7;
    }

    .aptitude-section .number-box {
        height: 48px;

        border-radius: 12px;
    }

    .aptitude-section .number-box span {
        font-size: 16px;
    }

    .aptitude-section .number-box i {
        font-size: 11px;
    }

}

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

@media (max-width: 380px) {

    .aptitude-section {
        padding: 45px 0 55px;
    }

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

    .aptitude-section .section-heading p {
        font-size: 14px;
    }

    .aptitude-section .aptitude-image {
        max-width: 275px;
    }

    .aptitude-section .aptitude-card {
        padding: 16px;
    }

    .aptitude-section .card-icon {
        width: 52px;
        min-width: 52px;

        height: 52px;
    }

    .aptitude-section .card-icon img {
        width: 25px;
        height: 25px;
    }

    .aptitude-section .aptitude-card .card-content h3 {
        font-size: 17px;
    }

    .aptitude-section .aptitude-card .card-content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .aptitude-section .number-box {
        height: 45px;
    }

}

/* =========================================================
   CAREER / ABOUT HERO
   COMPLETE RESPONSIVE CSS
========================================================= */

.career-hero{
    position:relative;
    width:100%;
    padding:35px 0 0;
    background:#fff;
    overflow:hidden;
}

.career-hero *,
.career-hero *::before,
.career-hero *::after{
    box-sizing:border-box;
}


/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.career-hero .shape{
    position:absolute;
    display:block;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
}

.career-hero .shape.top-right{
    width:420px;
    height:420px;
    top:-250px;
    right:-190px;
    background:radial-gradient(
        circle,
        rgba(13,107,68,.08),
        transparent 70%
    );
}

.career-hero .shape.bottom-left{
    width:360px;
    height:360px;

    bottom:-220px;
    left:-180px;

    background:radial-gradient(
        circle,
        rgba(247,185,38,.10),
        transparent 70%
    );
}


/* =========================================================
   ROW
========================================================= */

.career-hero .row{
    position:relative;
    z-index:2;

    align-items:center;
}


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

.career-hero .hero-content{
    position:relative;

    max-width:650px;

    padding:25px 20px 65px 0;
}


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

.career-hero .hero-tag{
    display:inline-flex;
    align-items:center;

    gap:11px;

    min-height:44px;

    padding:9px 18px;

    margin-bottom:22px;

    border:1px solid var(--primary, #0d6b44);

    border-radius:50px;

    background:#fff;

    color:var(--primary, #0d6b44);

    font-size:14px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:.4px;

    box-shadow:0 6px 18px rgba(13,107,68,.06);
}

.career-hero .hero-tag span{
    display:block;

    flex:0 0 auto;

    width:15px;
    height:15px;

    border-radius:50%;

    background:var(--secondary, #f7b926);

    box-shadow:0 0 0 5px rgba(247,185,38,.12);
}


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

.career-hero .hero-content h1{
    margin:0 0 25px;

    color:var(--primary, #0d6b44);

    font-size:52px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-1px;
}

.career-hero .hero-content h1 span{
    color:var(--secondary, #f7b926);
}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.career-hero .line{
    width:95px;
    height:5px;

    margin:0 0 22px;

    background:var(--secondary, #f7b926);

    border-radius:50px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.career-hero .hero-content p{
    max-width:620px;

    margin:0 0 32px;

    color:#4d5557;

    font-size:18px;
    line-height:1.75;
    font-weight:400;
}


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

.career-hero .hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;

    gap:28px;

    min-height:56px;

    padding:8px 10px 8px 28px;

    background:var(--primary, #0d6b44);

    color:#fff;

    border-radius:18px;

    text-decoration:none;

    font-size:17px;
    line-height:1.2;
    font-weight:700;

    box-shadow:
        0 15px 35px rgba(13,107,68,.22);

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

.career-hero .hero-btn span{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 40px;

    width:40px;
    height:40px;

    border-radius:50%;

    background:var(--secondary, #f7b926);

    color:#111;

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

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

.career-hero .hero-btn:hover{
    color:#fff;

    transform:translateY(-4px);

    box-shadow:
        0 20px 45px rgba(13,107,68,.28);
}

.career-hero .hero-btn:hover span{
    transform:translateX(3px) rotate(-5deg);
}


/* =========================================================
   HERO IMAGE WRAPPER
========================================================= */

.career-hero .hero-image{
    position:relative;

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

    width:100%;

    min-height:500px;

    padding:0 10px 0 20px;

    text-align:right;
}


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

.career-hero .hero-image img{
    display:block;

    width:100%;
    max-width:480px;
    height:auto;

    margin-left:auto;

    object-fit:contain;

    transition:
        transform .5s ease;
}

.career-hero .hero-image:hover img{
    transform:translateY(-6px);
}


/* =========================================================
   OPTIONAL SECOND IMAGE CLASS
   If .hero-image1 is used elsewhere
========================================================= */

.career-hero .hero-image1{
    position:relative;

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

    width:100%;

    text-align:right;
}

.career-hero .hero-image1 img{
    display:block;

    width:100%;
    max-width:500px;
    height:auto;

    margin-left:auto;

    object-fit:contain;
}


/* =========================================================
   DESKTOP
   1200px+
========================================================= */

@media (min-width:1200px){

    .career-hero{
        padding-top:100px;
    }

    .career-hero .hero-content{
        padding-top:30px;
        padding-bottom:75px;
    }

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

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

    .career-hero .hero-image{
        min-height:540px;
    }

    .career-hero .hero-image img{
        max-width:500px;
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
========================================================= */

@media (min-width:992px) and (max-width:1199px){

    .career-hero{
        padding-top:60px;
    }

    .career-hero .hero-content{
        padding-right:15px;
        padding-bottom:60px;
    }

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

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

    .career-hero .hero-image{
        min-height:450px;

        padding-left:10px;
    }

    .career-hero .hero-image img{
        max-width:430px;
    }

    .career-hero .hero-tag{
        font-size:13px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (min-width:768px) and (max-width:991px){

    .career-hero{
        padding-top:50px;
    }

    .career-hero .hero-content{
        padding:15px 10px 50px 0;
    }

    .career-hero .hero-tag{
        padding:8px 15px;

        font-size:12px;

        margin-bottom:18px;
    }

    .career-hero .hero-tag span{
        width:13px;
        height:13px;
    }

    .career-hero .hero-content h1{
        font-size:38px;
        line-height:1.12;
        letter-spacing:-.5px;

        margin-bottom:20px;
    }

    .career-hero .line{
        width:75px;
        height:4px;

        margin-bottom:18px;
    }

    .career-hero .hero-content p{
        font-size:15px;
        line-height:1.7;

        margin-bottom:27px;
    }

    .career-hero .hero-btn{
        min-height:52px;

        padding-left:22px;

        font-size:15px;

        gap:20px;
    }

    .career-hero .hero-btn span{
        flex-basis:36px;

        width:36px;
        height:36px;

        font-size:20px;
    }

    .career-hero .hero-image{
        min-height:390px;

        padding:0;
    }

    .career-hero .hero-image img{
        max-width:390px;
    }

}


/* =========================================================
   MOBILE
   <=767px
========================================================= */

@media (max-width:767px){

    .career-hero{
        padding:45px 0 0;
    }

    /* Stack columns */
    .career-hero .row{
        display:flex;
        flex-direction:column;
    }

    .career-hero .row > [class*="col-"]{
        width:100%;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .career-hero .hero-content{
        width:100%;
        max-width:100%;

        padding:10px 0 30px;

        text-align:center;
    }

    .career-hero .hero-tag{
        margin-bottom:18px;

        padding:8px 15px;

        font-size:12px;
    }

    .career-hero .hero-tag span{
        width:12px;
        height:12px;
    }


    /* -----------------------------------------
       HEADING
    ----------------------------------------- */

    .career-hero .hero-content h1{
        margin-bottom:20px;

        font-size:34px;
        line-height:1.15;
        letter-spacing:-.5px;
    }


    /* -----------------------------------------
       LINE
    ----------------------------------------- */

    .career-hero .line{
        width:70px;
        height:4px;

        margin:0 auto 18px;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .career-hero .hero-content p{
        max-width:100%;

        margin-bottom:27px;

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


    /* -----------------------------------------
       BUTTON
    ----------------------------------------- */

    .career-hero .hero-btn{
        min-height:52px;

        padding:7px 9px 7px 22px;

        gap:20px;

        font-size:15px;

        border-radius:16px;
    }

    .career-hero .hero-btn span{
        flex-basis:37px;

        width:37px;
        height:37px;

        font-size:20px;
    }


    /* -----------------------------------------
       IMAGE
    ----------------------------------------- */

    .career-hero .hero-image{
        display:flex;

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

        min-height:auto;

        padding:10px 0 0;

        text-align:center;
    }

    .career-hero .hero-image img{
        width:100%;
        max-width:420px;

        margin:0 auto;
    }


    /* Disable hover movement on mobile */
    .career-hero .hero-image:hover img{
        transform:none;
    }


    /* Decorative shapes */
    .career-hero .shape.top-right{
        width:280px;
        height:280px;

        top:-150px;
        right:-140px;
    }

    .career-hero .shape.bottom-left{
        width:260px;
        height:260px;

        bottom:-150px;
        left:-130px;
    }

}


/* =========================================================
   SMALL MOBILE
   <=575px
========================================================= */

@media (max-width:575px){

    .career-hero{
        padding-top:65px;
    }

    .career-hero .hero-content{
        padding-top:5px;
        padding-bottom:25px;
    }


    /* Tag */

    .career-hero .hero-tag{
        gap:8px;

        min-height:39px;

        padding:7px 13px;

        font-size:11px;
        letter-spacing:.25px;
    }

    .career-hero .hero-tag span{
        width:10px;
        height:10px;
    }


    /* Heading */

    .career-hero .hero-content h1{
        font-size:29px;
        line-height:1.18;

        margin-bottom:18px;
    }


    /* Line */

    .career-hero .line{
        width:60px;
        height:3px;

        margin-bottom:17px;
    }


    /* Description */

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

        margin-bottom:24px;
    }


    /* Button */

    .career-hero .hero-btn{
        min-height:49px;

        padding:6px 8px 6px 18px;

        gap:17px;

        font-size:14px;

        border-radius:15px;
    }

    .career-hero .hero-btn span{
        flex-basis:35px;

        width:35px;
        height:35px;

        font-size:19px;
    }


    /* Image */

    .career-hero .hero-image{
        padding-top:5px;
    }

    .career-hero .hero-image img{
        max-width:360px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   <=400px
========================================================= */

@media (max-width:400px){

    .career-hero{
        padding-top:35px;
    }

    .career-hero .hero-content{
        padding-bottom:20px;
    }


    /* Tag */

    .career-hero .hero-tag{
        min-height:36px;

        padding:6px 11px;

        font-size:10px;
    }

    .career-hero .hero-tag span{
        width:9px;
        height:9px;
    }


    /* Heading */

    .career-hero .hero-content h1{
        font-size:25px;
        line-height:1.2;
    }


    /* Description */

    .career-hero .hero-content p{
        font-size:13.5px;
        line-height:1.65;
    }


    /* Button */

    .career-hero .hero-btn{
        min-height:47px;

        padding-left:16px;

        font-size:13px;

        gap:13px;
    }

    .career-hero .hero-btn span{
        flex-basis:33px;

        width:33px;
        height:33px;

        font-size:18px;
    }


    /* Image */

    .career-hero .hero-image img{
        max-width:320px;
    }


    /* Background shapes */

    .career-hero .shape.top-right{
        width:220px;
        height:220px;

        top:-120px;
        right:-110px;
    }

    .career-hero .shape.bottom-left{
        width:210px;
        height:210px;

        bottom:-120px;
        left:-105px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   <=350px
========================================================= */

@media (max-width:350px){

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

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

    .career-hero .hero-tag{
        font-size:9.5px;
    }

    .career-hero .hero-btn{
        font-size:12.5px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover:none){

    .career-hero .hero-btn:hover{
        transform:none;

        box-shadow:
            0 15px 35px rgba(13,107,68,.22);
    }

    .career-hero .hero-btn:hover span{
        transform:none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .career-hero *,
    .career-hero *::before,
    .career-hero *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}

/* =========================================================
   STUDENT-FIRST COUNSELLING PROCESS
========================================================= */

.process-section-one {
    position: relative;
    padding: 80px 0 100px;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
}

/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.process-section-one::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -260px;
    top: -220px;
    border-radius: 50%;
    background: rgba(13, 107, 68, 0.04);
    z-index: -1;
    pointer-events: none;
}

.process-section-one::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    right: -220px;
    bottom: -240px;
    border-radius: 50%;
    background: rgba(247, 185, 38, 0.05);
    z-index: -1;
    pointer-events: none;
}

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

.process-section-one .section-title {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 105px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.process-section-one .section-title::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 140px;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(13, 107, 68, 0.05),
        transparent 72%
    );
    z-index: -1;
    pointer-events: none;
}

.process-section-one .section-title h2 {
    margin: 0 0 20px;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--dark, #222);
}

.process-section-one .section-title h2 span {
    color: var(--primary, #0d6b44);
}

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

.process-section-one .title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 22px;
}

.process-section-one .title-divider span {
    display: block;
    width: 74px;
    height: 5px;
    border-radius: 50px;
    background: var(--secondary, #f7b926);
}

.process-section-one .title-divider span.active {
    width: 14px;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.process-section-one .section-title p {
    max-width: 860px;
    margin: 0 auto;
    font-size: 19px;
    line-height: 1.75;
    font-weight: 400;
    color: #555;
}

/* =========================================================
   PROCESS WRAPPER
========================================================= */

.process-section-one .process-wrapper {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

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

.process-section-one .process-card {
    position: relative;
    width: 300px;
    min-height: 380px;
    padding: 95px 28px 75px;
    background: #fff;
    border-radius: 20px;
    text-align: center;
    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    flex-shrink: 0;
}

/* Card hover */

.process-section-one .process-card:hover {
    transform: translateY(-12px);
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.14);
}

/* Active card */

.process-section-one .process-card.active {
    transform: translateY(-10px);
}

.process-section-one .process-card.active:hover {
    transform: translateY(-18px);
}

/* =========================================================
   CARD BOTTOM SHADOW
========================================================= */

.process-section-one .process-card::before {
    content: "";
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: -15px;
    height: 28px;

    background: rgba(0, 0, 0, 0.10);
    border-radius: 50%;

    filter: blur(18px);

    z-index: -1;
}

/* =========================================================
   CARD TOP ICON AREA
========================================================= */

.process-section-one .card-top {
    position: absolute;

    width: 180px;
    height: 130px;

    top: -65px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 10;
}

/* =========================================================
   TOP HALF CIRCLE
========================================================= */

.process-section-one .circle-bg {
    position: absolute;

    width: 180px;
    height: 90px;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 180px 180px 0 0;
}

.process-section-one .circle-bg.green {
    background: var(--primary, #0d6b44);
}

.process-section-one .circle-bg.yellow {
    background: var(--secondary, #f7b926);
}

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

.process-section-one .icon-circle {
    position: absolute;

    width: 120px;
    height: 120px;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

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

    border-radius: 50%;

    background: #eef6f1;

    border: 8px solid #fff;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.13);

    z-index: 20;

    transition:
        transform 0.35s ease;
}

/* Yellow icon */

.process-section-one .icon-circle.yellow-light {
    background: #fff7df;
}

/* Icon dashed ring */

.process-section-one .icon-circle::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 2px dashed rgba(13, 107, 68, 0.16);

    pointer-events: none;
}

.process-section-one .icon-circle.yellow-light::before {
    border-color: rgba(247, 185, 38, 0.30);
}

/* Image */

.process-section-one .icon-circle img {
    width: 60px;
    height: 60px;

    object-fit: contain;

    display: block;
}

/* Icon hover */

.process-section-one .process-card:hover .icon-circle {
    transform: translateX(-50%) rotate(7deg);
}

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

.process-section-one .number {
    display: inline-flex;

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

    min-width: 64px;
    height: 34px;

    padding: 0 15px;

    border-radius: 50px;

    color: #fff;

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

    font-weight: 700;

    margin-bottom: 20px;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.12);
}

.process-section-one .number.green {
    background: var(--primary, #0d6b44);
}

.process-section-one .number.yellow {
    background: var(--secondary, #f7b926);
}

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

.process-section-one .process-card h3 {
    margin: 0 0 17px;

    font-size: 22px;
    line-height: 1.35;

    font-weight: 700;

    color: var(--primary, #0d6b44);
}

/* =========================================================
   SMALL DIVIDER
========================================================= */

.process-section-one .small-divider {
    width: 70px;
    height: 5px;

    margin: 0 auto 24px;

    border-radius: 50px;

    background: var(--secondary, #f7b926);
}

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

.process-section-one .process-card p {
    margin: 0;

    font-size: 16px;
    line-height: 1.75;

    color: #555;
}

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

.process-section-one .card-wave {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 70px;

    overflow: hidden;

    border-radius: 0 0 20px 20px;

    pointer-events: none;
}

.process-section-one .card-wave::before {
    content: "";

    position: absolute;

    width: 150%;
    height: 140px;

    left: -25%;
    bottom: -80px;

    border-radius: 50%;
}

/* Green wave */

.process-section-one .green-wave::before {
    background: #edf6ef;
}

/* Yellow wave */

.process-section-one .yellow-wave::before {
    background: #fff5d7;
}

/* =========================================================
   CONNECTOR
========================================================= */

.process-section-one .connector {
    width: 55px;

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

    flex-shrink: 0;

    margin-top: 190px;

    color: var(--primary, #0d6b44);
}

/* Dashed line */

.process-section-one .connector span {
    display: block;

    width: 30px;

    border-top: 3px dashed var(--primary, #0d6b44);
}

/* Arrow */

.process-section-one .connector i {
    margin-left: -2px;

    font-size: 24px;

    color: var(--primary, #0d6b44);
}

/* =========================================================
   ACTIVE CARD FLOATING
========================================================= */

@keyframes processFloat {

    0% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(-16px);
    }

    100% {
        transform: translateY(-10px);
    }

}

.process-section-one .process-card.active {
    animation: processFloat 4s ease-in-out infinite;
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1401px) {

    .process-section-one .process-wrapper {
        gap: 25px;
    }

    .process-section-one .process-card {
        width: 310px;
    }

    .process-section-one .connector {
        width: 60px;
    }

    .process-section-one .connector span {
        width: 35px;
    }

}

/* =========================================================
   DESKTOP / LAPTOP
========================================================= */

@media (max-width: 1400px) and (min-width: 1201px) {

    .process-section-one .process-wrapper {
        gap: 15px;
    }

    .process-section-one .process-card {
        width: 280px;
        padding-left: 22px;
        padding-right: 22px;
    }

    .process-section-one .connector {
        width: 42px;
    }

    .process-section-one .connector span {
        width: 20px;
    }

}

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

@media (max-width: 1200px) and (min-width: 992px) {

    .process-section-one {
        padding: 70px 0 90px;
    }

    .process-section-one .section-title {
        margin-bottom: 100px;
    }

    .process-section-one .section-title h2 {
        font-size: 40px;
    }

    .process-section-one .section-title p {
        font-size: 18px;
    }

    .process-section-one .process-wrapper {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            45px
            minmax(0, 1fr);

        gap: 55px 10px;

        align-items: start;
    }

    .process-section-one .process-card {
        width: 100%;
        min-height: 400px;

        padding-left: 25px;
        padding-right: 25px;
    }

    /*
       Position connectors between
       card 1 → card 2
       card 3 → card 4
    */

    .process-section-one .connector:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .process-section-one .connector:nth-of-type(4) {
        grid-column: 2;
        grid-row: 2;
    }

    .process-section-one .process-card:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .process-section-one .process-card:nth-of-type(3) {
        grid-column: 3;
        grid-row: 1;
    }

    .process-section-one .process-card:nth-of-type(5) {
        grid-column: 1;
        grid-row: 2;
    }

    .process-section-one .process-card:nth-of-type(7) {
        grid-column: 3;
        grid-row: 2;
    }

    .process-section-one .connector {
        margin-top: 185px;
        width: 45px;
    }

    .process-section-one .connector span {
        width: 25px;
    }

}

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

@media (max-width: 991px) {

    .process-section-one {
        padding: 70px 0 80px;
    }

    .process-section-one .section-title {
        max-width: 760px;
        margin-bottom: 100px;
    }

    .process-section-one .section-title h2 {
        font-size: 38px;
    }

    .process-section-one .section-title p {
        font-size: 17px;
        line-height: 1.7;
    }

    /*
       Two cards per row
    */

    .process-section-one .process-wrapper {
        display: grid;

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

        gap: 90px 25px;

        align-items: start;
    }

    .process-section-one .process-card {
        width: 100%;
        min-height: 390px;

        padding: 95px 25px 70px;
    }

    /*
       Hide horizontal connectors.
       We create vertical flow between rows.
    */

    .process-section-one .connector {
        display: none;
    }

    .process-section-one .process-card h3 {
        font-size: 21px;
    }

    .process-section-one .process-card p {
        font-size: 16px;
    }

}

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

@media (max-width: 767px) {

    .process-section-one {
        padding: 60px 0 70px;
    }

    .process-section-one::before,
    .process-section-one::after {
        display: none;
    }

    .process-section-one .section-title {
        margin-bottom: 90px;
    }

    .process-section-one .section-title h2 {
        font-size: 32px;
        line-height: 1.3;
    }

    .process-section-one .section-title p {
        font-size: 16px;
        line-height: 1.65;
        padding: 0 10px;
    }

    .process-section-one .title-divider {
        margin-bottom: 20px;
    }

    .process-section-one .title-divider span {
        width: 55px;
        height: 4px;
    }

    .process-section-one .title-divider span.active {
        width: 11px;
    }

    /*
       ONE CARD PER ROW
    */

    .process-section-one .process-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 65px;
    }

    .process-section-one .process-card {
        width: 100%;
        max-width: 460px;

        min-height: auto;

        padding: 90px 25px 70px;

        border-radius: 18px;
    }

    .process-section-one .process-card.active {
        transform: translateY(0);
        animation: none;
    }

    .process-section-one .process-card.active:hover {
        transform: translateY(-8px);
    }

    .process-section-one .process-card:hover {
        transform: translateY(-8px);
    }

    /* =====================================================
       MOBILE VERTICAL CONNECTOR
    ===================================================== */

    .process-section-one .connector {
        display: flex;

        width: auto;
        height: 45px;

        margin: -35px 0;

        flex-direction: column;

        transform: none;
    }

    .process-section-one .connector span {
        width: auto;
        height: 25px;

        border-top: none;
        border-left: 3px dashed var(--primary, #0d6b44);
    }

    .process-section-one .connector i {
        margin: -2px 0 0;

        transform: rotate(90deg);

        font-size: 22px;
    }

    .process-section-one .card-top {
        width: 165px;
        height: 120px;

        top: -60px;
    }

    .process-section-one .circle-bg {
        width: 165px;
        height: 82px;
    }

    .process-section-one .icon-circle {
        width: 105px;
        height: 105px;

        top: 13px;
    }

    .process-section-one .icon-circle img {
        width: 48px;
        height: 48px;
    }

    .process-section-one .number {
        min-width: 58px;
        height: 32px;

        font-size: 19px;

        margin-bottom: 18px;
    }

    .process-section-one .process-card h3 {
        font-size: 22px;
    }

    .process-section-one .process-card p {
        font-size: 15px;
        line-height: 1.7;
    }

}

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

@media (max-width: 480px) {

    .process-section-one {
        padding: 50px 0 60px;
    }

    .process-section-one .section-title {
        margin-bottom: 80px;
    }

    .process-section-one .section-title h2 {
        font-size: 28px;
    }

    .process-section-one .section-title p {
        font-size: 15px;
        line-height: 1.65;
        padding: 0 5px;
    }

    .process-section-one .process-wrapper {
        gap: 60px;
    }

    .process-section-one .process-card {
        max-width: 100%;

        padding: 85px 20px 65px;

        border-radius: 16px;
    }

    .process-section-one .card-top {
        width: 150px;
        height: 110px;

        top: -55px;
    }

    .process-section-one .circle-bg {
        width: 150px;
        height: 75px;
    }

    .process-section-one .icon-circle {
        width: 92px;
        height: 92px;

        top: 12px;

        border-width: 7px;
    }

    .process-section-one .icon-circle img {
        width: 40px;
        height: 40px;
    }

    .process-section-one .number {
        min-width: 52px;
        height: 30px;

        padding: 0 12px;

        font-size: 17px;
    }

    .process-section-one .process-card h3 {
        font-size: 20px;
        line-height: 1.4;
    }

    .process-section-one .small-divider {
        width: 60px;
        height: 4px;

        margin-bottom: 20px;
    }

    .process-section-one .process-card p {
        font-size: 14px;
        line-height: 1.7;
    }

    .process-section-one .card-wave {
        height: 58px;

        border-radius: 0 0 16px 16px;
    }

}

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

@media (max-width: 360px) {

    .process-section-one .section-title h2 {
        font-size: 25px;
    }

    .process-section-one .section-title p {
        font-size: 14px;
    }

    .process-section-one .process-card {
        padding-left: 17px;
        padding-right: 17px;
    }

    .process-section-one .process-card h3 {
        font-size: 19px;
    }

    .process-section-one .process-card p {
        font-size: 13px;
    }

    .process-section-one .icon-circle {
        width: 85px;
        height: 85px;
    }

    .process-section-one .icon-circle img {
        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   ADMISSION TEST SUPPORT / REPORT SECTION
========================================================= */

.report-section {
    position: relative;
    width: 100%;
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
}

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

.report-section .section-title {
    width: 100%;
    margin-bottom: 40px;
}

.report-section .section-title h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--dark, #222);
}

.report-section .section-title h2 span {
    color: var(--primary, #0d6b44);
}

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

.report-section .title-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.report-section .title-divider span {
    display: block;
    width: 55px;
    height: 5px;
    background: var(--secondary, #f7b926);
    border-radius: 50px;
}

.report-section .title-divider span.active {
    width: 10px;
}

/* =========================================================
   REPORT ITEM
========================================================= */

.report-section .report-item {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 56px;
    align-items: center;
    column-gap: 25px;
    padding: 20px 0;
    transition: transform 0.3s ease;
}

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

.report-section .report-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 50%;
    background: #eef6f1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.report-section .report-icon img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

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

.report-section .report-text {
    min-width: 0;
}

.report-section .report-text h3 {
    margin: 0;
    color: var(--primary, #0d6b44);
    font-size: 19px;
    line-height: 1.5;
    font-weight: 700;
}

.report-section .report-text h4 {
    margin: 0 0 8px;
    color: var(--primary, #0d6b44);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.report-section .report-text p {
    margin: 8px 0 0;
    max-width: 700px;
    color: #555;
    font-size: 16px;
    line-height: 1.7;
}

/* =========================================================
   BEAUTIFUL BULLET LIST
========================================================= */

.report-section .report-text ul {
    list-style: none;

    margin: 0;
    padding: 0;

    color: #555;

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

/* List item */

.report-section .report-text ul li {
    position: relative;

    padding-left: 27px;

    margin-bottom: 10px;
}

.report-section .report-text ul li:last-child {
    margin-bottom: 0;
}

/* Custom bullet */

.report-section .report-text ul li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 3px;

    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: var(--secondary, #f7b926);

    color: #222;

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

    line-height: 1;
}

/* Strong text */

.report-section .report-text ul li strong {
    color: #333;
    font-weight: 700;
}

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

/* =========================================
   BEAUTIFUL UL
========================================= */

.report-section .report-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.report-section .report-content ul li {
    position: relative;
    margin-bottom: 14px;
    padding: 15px 18px 15px 52px;

    font-size: 15.5px;
    line-height: 1.7;
    color: var(--text);

    background: #f8fbf9;
    border: 1px solid rgba(13, 107, 68, 0.08);
    border-radius: 12px;

    transition: all 0.3s ease;
}

/* Check icon */
.report-section .report-content ul li::before {
    content: "✓";

    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);

    width: 25px;
    height: 25px;

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

    border-radius: 50%;

    background: var(--primary, #0d6b44);
    color: #ffffff;

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

    box-shadow: 0 4px 10px rgba(13, 107, 68, 0.20);
}

/* Small yellow line */
.report-section .report-content ul li::after {
    content: "";

    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;

    width: 3px;

    border-radius: 5px;

    background: var(--secondary, #f7b926);

    transition: all 0.3s ease;
}

/* Hover */
.report-section .report-content ul li:hover {
    background: #ffffff;
    border-color: rgba(13, 107, 68, 0.20);
    transform: translateX(5px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.06);
}

.report-section .report-content ul li:hover::before {
    background: var(--secondary, #f7b926);
    color: #222;
}

.report-section .report-content ul li:hover::after {
    width: 5px;
}


/* =========================================
   LAST ITEM
========================================= */

.report-section .report-content ul li:last-child {
    margin-bottom: 0;
}



.report-section .report-number {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    background: var(--primary, #0d6b44);
    color: #ffffff;

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

    font-size: 19px;
    line-height: 1;
    font-weight: 700;

    box-shadow: 0 8px 22px rgba(13, 107, 68, 0.20);

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

/* =========================================================
   DIVIDER
========================================================= */

.report-section .report-divider {
    width: calc(100% - 100px);
    height: 1px;
    margin-left: 95px;
    background: #e5ebe7;
}

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

.report-section .report-item:hover {
    transform: translateX(8px);
}

.report-section .report-item:hover .report-icon {
    background: var(--primary, #0d6b44);
    transform: scale(1.05);
}

.report-section .report-item:hover .report-number {
    background: var(--secondary, #f7b926);
    color: #222;
    transform: translateY(-2px);
}

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

@media (max-width: 1199px) {

    .report-section {
        padding: 70px 0;
    }

    .report-section .section-title h2 {
        font-size: 38px;
    }

    .report-section .report-item {
        grid-template-columns: 70px minmax(0, 1fr) 54px;
        column-gap: 22px;
    }

    .report-section .report-divider {
        width: calc(100% - 95px);
        margin-left: 92px;
    }
}

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

@media (max-width: 991px) {

    .report-section {
        padding: 65px 0;
    }

    .report-section .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .report-section .section-title {
        margin-bottom: 30px;
    }

    .report-section .section-title h2 {
        font-size: 36px;
    }

    .report-section .report-item {
        grid-template-columns: 68px minmax(0, 1fr) 52px;
        column-gap: 20px;
        padding: 18px 0;
    }

    .report-section .report-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
    }

    .report-section .report-icon img {
        width: 38px;
        height: 38px;
    }

    .report-section .report-text h3 {
        font-size: 18px;
        line-height: 1.5;
    }

    .report-section .report-number {
        width: 52px;
        height: 52px;
        min-width: 52px;
        font-size: 18px;
        border-radius: 13px;
    }

    .report-section .report-divider {
        width: calc(100% - 88px);
        margin-left: 88px;
    }
}

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

@media (max-width: 767px) {

    .report-section {
        padding: 55px 0;
    }

    .report-section .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Heading */

    .report-section .section-title {
        margin-bottom: 25px;
    }

    .report-section .section-title h2 {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .report-section .title-divider {
        gap: 7px;
    }

    .report-section .title-divider span {
        width: 45px;
        height: 4px;
    }

    .report-section .title-divider span.active {
        width: 9px;
    }

    /* Report item */

    .report-section .report-item {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) 45px;
        column-gap: 12px;
        align-items: center;
        padding: 16px 0;
    }

    /* Icon */

    .report-section .report-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .report-section .report-icon img {
        width: 32px;
        height: 32px;
    }

    /* Text */

    .report-section .report-text h3 {
        font-size: 16px;
        line-height: 1.45;
    }

    .report-section .report-text h4 {
        font-size: 19px;
    }

    .report-section .report-text p {
        font-size: 14px;
        line-height: 1.6;
    }

    .report-section .report-text ul {
        font-size: 14px;
    }

    /* Number */

    .report-section .report-number {
        width: 45px;
        height: 45px;
        min-width: 45px;
        border-radius: 11px;
        font-size: 15px;
        box-shadow: 0 6px 15px rgba(13, 107, 68, 0.15);
    }

    /* Divider */

    .report-section .report-divider {
        width: calc(100% - 70px);
        margin-left: 70px;
    }

    /* Smaller hover movement */

    .report-section .report-item:hover {
        transform: translateX(3px);
    }
}

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

@media (max-width: 480px) {

    .report-section {
        padding: 0px 0;
    }

    .report-section .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .report-section .section-title h2 {
        font-size: 27px;
        line-height: 1.22;
    }

    .report-section .report-item {
        grid-template-columns: 50px minmax(0, 1fr) 40px;
        column-gap: 10px;
        padding: 14px 0;
    }

    .report-section .report-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .report-section .report-icon img {
        width: 28px;
        height: 28px;
    }

    .report-section .report-text h3 {
        font-size: 15px;
        line-height: 1.45;
    }

    .report-section .report-number {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 9px;
        font-size: 13px;
    }

    .report-section .report-divider {
        width: calc(100% - 60px);
        margin-left: 60px;
    }
}

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

@media (max-width: 360px) {

    .report-section .section-title h2 {
        font-size: 24px;
    }

    .report-section .report-item {
        grid-template-columns: 45px minmax(0, 1fr) 36px;
        column-gap: 8px;
    }

    .report-section .report-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .report-section .report-icon img {
        width: 25px;
        height: 25px;
    }

    .report-section .report-text h3 {
        font-size: 14px;
    }

    .report-section .report-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 12px;
    }

    .report-section .report-divider {
        width: calc(100% - 53px);
        margin-left: 53px;
    }
}


/* =========================================================
   ADMISSION GUIDANCE SECTION
========================================================= */

.admission-guidance {
    position: relative;
    width: 100%;
    padding: 85px 0;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}

/* =========================================================
   CONTAINER
========================================================= */

.admission-guidance .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

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

.admission-guidance .section-title {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
}

.admission-guidance .section-title h2 {
    margin: 0 0 18px;
    color: var(--dark, #222);
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.admission-guidance .section-title h2 span {
    color: var(--primary, #0d6b44);
}

.admission-guidance .title-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.admission-guidance .title-divider span {
    display: block;
    width: 65px;
    height: 5px;
    background: var(--secondary, #f7b926);
    border-radius: 50px;
}

.admission-guidance .title-divider span.active {
    width: 11px;
}

.admission-guidance .section-title p {
    max-width: 750px;
    margin: 0 auto;
    color: #666;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
}

/* Decorative heading glow */

.admission-guidance .section-title::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 130px;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(13, 107, 68, 0.06),
        transparent 72%
    );
    z-index: -1;
}

/* =========================================================
   SECTION DECORATION
========================================================= */

.admission-guidance::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -280px;
    left: -280px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(13, 107, 68, 0.06),
        transparent 70%
    );
    z-index: -1;
}

.admission-guidance::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -280px;
    bottom: -280px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(247, 185, 38, 0.07),
        transparent 70%
    );
    z-index: -1;
}

/* =========================================================
   TIMELINE
========================================================= */

.admission-guidance .timeline {
    position: relative;
    width: 100%;
    margin-top: 20px;
}

/* =========================================================
   TIMELINE ROW
========================================================= */

.admission-guidance .timeline-row {
    position: relative;
    display: grid;
    grid-template-columns: 250px 90px minmax(0, 1fr);
    align-items: center;
    column-gap: 35px;
    width: 100%;
    margin-bottom: 75px;
    z-index: 2;
}

/* Reverse row */

.admission-guidance .timeline-row.reverse {
    grid-template-columns: minmax(0, 1fr) 90px 250px;
}

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

.admission-guidance .timeline-image {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease;
}

.admission-guidance .timeline-image img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 7px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   IMAGE DOUBLE BORDER
========================================================= */

.admission-guidance .image-border {
    position: absolute;
    inset: -12px;
    border: 3px solid var(--primary, #0d6b44);
    border-radius: 50%;
}

.admission-guidance .image-border::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 2px dashed rgba(13, 107, 68, 0.45);
    border-radius: 50%;
}

/* Yellow image */

.admission-guidance .yellow-border .image-border {
    border-color: var(--secondary, #f7b926);
}

.admission-guidance .yellow-border .image-border::before {
    border-color: rgba(247, 185, 38, 0.55);
}

/* =========================================================
   IMAGE DECORATIVE DOTS
========================================================= */

.admission-guidance .timeline-image::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 30px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary, #0d6b44);
    z-index: 5;
}

.admission-guidance .timeline-image::after {
    content: "";
    position: absolute;
    right: -12px;
    bottom: 45px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--secondary, #f7b926);
    z-index: 5;
}

/* Yellow image dots */

.admission-guidance .yellow-border::before {
    background: var(--secondary, #f7b926);
}

.admission-guidance .yellow-border::after {
    background: var(--primary, #0d6b44);
}

/* =========================================================
   TIMELINE NUMBER
========================================================= */

.admission-guidance .timeline-number {
    position: relative;
    z-index: 10;
    width: 82px;
    height: 82px;
    margin: 0 auto;
    border-radius: 50%;
    border: 7px solid #fff;
    background: var(--primary, #0d6b44);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

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

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.admission-guidance .timeline-number span {
    color: #fff;
    font-size: 21px;
    line-height: 1;
    font-weight: 700;
}

.admission-guidance .timeline-number.yellow {
    background: var(--secondary, #f7b926);
}

.admission-guidance .timeline-number.yellow span {
    color: #222;
}

/* Horizontal lines around number */

.admission-guidance .timeline-number::before,
.admission-guidance .timeline-number::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 2px;
    background: var(--secondary, #f7b926);
    transform: translateY(-50%);
}

.admission-guidance .timeline-number::before {
    right: 100%;
}

.admission-guidance .timeline-number::after {
    left: 100%;
}

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

.admission-guidance .timeline-card {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 200px;

    display: flex;
    align-items: flex-start;
    gap: 25px;

    padding: 28px 30px;

    background: #fff;
    border: 1px solid #edf0ed;
    border-radius: 22px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

/* Card right/left accent */

.admission-guidance .timeline-card::after {
    content: "";
    position: absolute;
    top: 25px;
    right: 0;
    width: 6px;
    height: calc(100% - 50px);
    background: var(--primary, #0d6b44);
    border-radius: 20px 0 0 20px;
    transition: background 0.35s ease;
}

/* Reverse card accent */

.admission-guidance .timeline-row.reverse .timeline-card::after {
    left: 0;
    right: auto;
    border-radius: 0 20px 20px 0;
}

/* Card glow */

.admission-guidance .timeline-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -90px;
    border-radius: 50%;
    background: rgba(13, 107, 68, 0.04);
    z-index: 0;
}

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

.admission-guidance .card-icon {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 78px;
    min-width: 78px;
    border-radius: 50%;
    background: #eef8f2;

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

    transition:
        background 0.35s ease,
        transform 0.35s ease;
}

.admission-guidance .card-icon img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Reverse card icon */

.admission-guidance .timeline-row.reverse .card-icon {
    background: #fff7e5;
}

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

.admission-guidance .card-content {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

.admission-guidance .card-content h3 {
    margin: 0 0 14px;
    color: var(--primary, #0d6b44);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 700;
}

.admission-guidance .small-divider {
    width: 65px;
    height: 5px;
    margin-bottom: 17px;
    border-radius: 50px;
    background: var(--secondary, #f7b926);
}

.admission-guidance .card-content p {
    margin: 0 0 13px;
    color: #555;
    font-size: 16px;
    line-height: 1.8;
}

.admission-guidance .card-content p:last-child {
    margin-bottom: 0;
}

.admission-guidance .card-content strong {
    color: #444;
    font-weight: 700;
}

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

.admission-guidance .timeline-row:hover .timeline-image {
    transform: translateY(-7px);
}

.admission-guidance .timeline-row:hover .timeline-number {
    transform: scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.20);
}

.admission-guidance .timeline-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.14);
}

.admission-guidance .timeline-card:hover .card-icon {
    background: var(--primary, #0d6b44);
    transform: scale(1.05);
}

.admission-guidance .timeline-card:hover::after {
    background: var(--secondary, #f7b926);
}

/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1199px) {

    .admission-guidance {
        padding: 75px 0;
    }

    .admission-guidance .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .admission-guidance .section-title h2 {
        font-size: 40px;
    }

    .admission-guidance .timeline-row {
        grid-template-columns: 210px 80px minmax(0, 1fr);
        column-gap: 25px;
    }

    .admission-guidance .timeline-row.reverse {
        grid-template-columns: minmax(0, 1fr) 80px 210px;
    }

    .admission-guidance .timeline-image {
        width: 180px;
        height: 180px;
    }

    .admission-guidance .timeline-number {
        width: 76px;
        height: 76px;
    }

    .admission-guidance .timeline-card {
        padding: 25px;
        gap: 20px;
    }

    .admission-guidance .card-icon {
        width: 70px;
        height: 70px;
        min-width: 70px;
    }

    .admission-guidance .card-icon img {
        width: 36px;
        height: 36px;
    }

    .admission-guidance .card-content h3 {
        font-size: 21px;
    }
}

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

@media (max-width: 991px) {

    .admission-guidance {
        padding: 65px 0;
    }

    .admission-guidance .section-title {
        margin-bottom: 55px;
    }

    .admission-guidance .section-title h2 {
        font-size: 36px;
    }

    .admission-guidance .section-title p {
        font-size: 16px;
    }

    /* Single column timeline */

    .admission-guidance .timeline-row,
    .admission-guidance .timeline-row.reverse {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 28px;
        margin-bottom: 65px;
    }

    /* Reset reverse ordering */

    .admission-guidance .timeline-row .timeline-image,
    .admission-guidance .timeline-row .timeline-number,
    .admission-guidance .timeline-row .timeline-card {
        order: initial !important;
    }

    /* Image */

    .admission-guidance .timeline-image {
        width: 190px;
        height: 190px;
    }

    /* Number */

    .admission-guidance .timeline-number {
        width: 72px;
        height: 72px;
    }

    .admission-guidance .timeline-number span {
        font-size: 19px;
    }

    /* Hide horizontal connectors */

    .admission-guidance .timeline-number::before,
    .admission-guidance .timeline-number::after {
        display: none;
    }

    /* Card */

    .admission-guidance .timeline-card {
        width: 100%;
        max-width: 720px;
    }
}

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

@media (max-width: 767px) {

    .admission-guidance {
        padding: 55px 0;
    }

    .admission-guidance .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Heading */

    .admission-guidance .section-title {
        margin-bottom: 45px;
    }

    .admission-guidance .section-title h2 {
        font-size: 30px;
        line-height: 1.25;
        letter-spacing: 0;
    }

    .admission-guidance .section-title p {
        padding: 0;
        font-size: 15px;
        line-height: 1.7;
    }

    .admission-guidance .title-divider {
        margin-bottom: 18px;
    }

    .admission-guidance .title-divider span {
        width: 50px;
        height: 4px;
    }

    .admission-guidance .title-divider span.active {
        width: 9px;
    }

    /* Timeline */

    .admission-guidance .timeline {
        margin-top: 10px;
    }

    .admission-guidance .timeline-row,
    .admission-guidance .timeline-row.reverse {
        gap: 25px;
        margin-bottom: 60px;
    }

    /* Image */

    .admission-guidance .timeline-image {
        width: 165px;
        height: 165px;
    }

    .admission-guidance .timeline-image::before {
        width: 14px;
        height: 14px;
        left: -10px;
        top: 25px;
    }

    .admission-guidance .timeline-image::after {
        width: 12px;
        height: 12px;
        right: -9px;
        bottom: 35px;
    }

    .admission-guidance .image-border {
        inset: -9px;
        border-width: 2px;
    }

    .admission-guidance .image-border::before {
        inset: -7px;
        border-width: 1px;
    }

    /* Number */

    .admission-guidance .timeline-number {
        width: 62px;
        height: 62px;
        border-width: 5px;
    }

    .admission-guidance .timeline-number span {
        font-size: 17px;
    }

    /* Card */

    .admission-guidance .timeline-card {
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        padding: 25px 20px 28px;
        border-radius: 18px;
    }

    .admission-guidance .timeline-card::after,
    .admission-guidance .timeline-row.reverse .timeline-card::after {
        top: auto;
        right: 20px;
        bottom: 0;
        left: 20px;
        width: auto;
        height: 5px;
        border-radius: 20px;
    }

    .admission-guidance .card-icon {
        width: 65px;
        height: 65px;
        min-width: 65px;
    }

    .admission-guidance .card-icon img {
        width: 34px;
        height: 34px;
    }

    .admission-guidance .card-content {
        width: 100%;
    }

    .admission-guidance .card-content h3 {
        margin-bottom: 12px;
        font-size: 19px;
        line-height: 1.35;
    }

    .admission-guidance .small-divider {
        width: 55px;
        height: 4px;
        margin: 0 auto 17px;
    }

    .admission-guidance .card-content p {
        font-size: 14px;
        line-height: 1.75;
        margin-bottom: 12px;
    }

    /* Hide large background decorations */

    .admission-guidance::before,
    .admission-guidance::after,
    .admission-guidance .section-title::before {
        opacity: 0.5;
    }
}

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

@media (max-width: 480px) {

    .admission-guidance {
        padding: 45px 0;
    }

    .admission-guidance .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .admission-guidance .section-title {
        margin-bottom: 40px;
    }

    .admission-guidance .section-title h2 {
        font-size: 27px;
    }

    .admission-guidance .section-title p {
        font-size: 14px;
        line-height: 1.65;
    }

    .admission-guidance .timeline-row,
    .admission-guidance .timeline-row.reverse {
        margin-bottom: 50px;
        gap: 22px;
    }

    .admission-guidance .timeline-image {
        width: 145px;
        height: 145px;
    }

    .admission-guidance .timeline-number {
        width: 58px;
        height: 58px;
    }

    .admission-guidance .timeline-number span {
        font-size: 16px;
    }

    .admission-guidance .timeline-card {
        padding: 22px 16px 25px;
    }

    .admission-guidance .card-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .admission-guidance .card-icon img {
        width: 31px;
        height: 31px;
    }

    .admission-guidance .card-content h3 {
        font-size: 18px;
    }

    .admission-guidance .card-content p {
        font-size: 13.5px;
        line-height: 1.7;
    }
}

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

@media (max-width: 360px) {

    .admission-guidance .section-title h2 {
        font-size: 24px;
    }

    .admission-guidance .timeline-image {
        width: 130px;
        height: 130px;
    }

    .admission-guidance .timeline-number {
        width: 54px;
        height: 54px;
    }

    .admission-guidance .timeline-number span {
        font-size: 15px;
    }

    .admission-guidance .timeline-card {
        padding: 20px 14px 23px;
    }

    .admission-guidance .card-content h3 {
        font-size: 17px;
    }

    .admission-guidance .card-content p {
        font-size: 13px;
    }
}


/* =========================================================
   CORE VALUES SECTION
   CLEAN + FULLY RESPONSIVE
========================================================= */

.core-values-section{
    position:relative;
    width:100%;
    padding:0px 0 75px;
    background:#fff;
    overflow:hidden;
}

.core-values-section *,
.core-values-section *::before,
.core-values-section *::after{
    box-sizing:border-box;
}

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

.core-values-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    top:-250px;
    left:-230px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(13,107,68,.06),
        transparent 70%
    );
    pointer-events:none;
}

.core-values-section::after{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    right:-230px;
    bottom:-250px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(247,185,38,.08),
        transparent 70%
    );
    pointer-events:none;
}


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

.core-values-section .section-title{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:55px;
}

.core-values-section .section-title h2{
    margin:0;
    color:var(--dark,#222);
    font-size:44px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-1px;
}

.core-values-section .section-title h2 span{
    color:var(--primary,#0d6b44);
}

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

.core-values-section .title-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:20px;
}

.core-values-section .title-divider span{
    display:block;
    width:85px;
    height:5px;
    border-radius:50px;
    background:var(--primary,#0d6b44);
}

.core-values-section .title-divider .active{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--secondary,#f7b926);
}


/* =========================================================
   CARDS WRAPPER
========================================================= */

.core-values-section .core-values-wrapper{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:25px;

    width:100%;
}


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

.core-values-section .core-card{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    min-width:0;
    min-height:355px;

    padding:40px 25px 35px;

    text-align:center;

    background:var(--white,#fff);

    border:1px solid #e7ece9;
    border-radius:24px;

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

    overflow:hidden;

    cursor:pointer;

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


/* =========================================================
   CARD BACKGROUND GLOW
========================================================= */

.core-values-section .core-card::before{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    top:-150px;
    left:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(13,107,68,.08),
        transparent 70%
    );

    opacity:0;

    transform:scale(.5);

    transition:
        transform .5s ease,
        opacity .5s ease;

    pointer-events:none;
}


/* =========================================================
   CARD BOTTOM ACCENT
========================================================= */

.core-values-section .core-card::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:5px;

    transform:translateX(-50%);

    background:var(--primary,#0d6b44);

    border-radius:10px 10px 0 0;

    transition:width .4s ease;
}


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

.core-values-section .core-card:hover{
    transform:translateY(-10px);

    border-color:rgba(13,107,68,.18);

    box-shadow:
        0 22px 50px rgba(13,107,68,.11),
        0 8px 20px rgba(0,0,0,.06);
}

.core-values-section .core-card:hover::before{
    opacity:1;
    transform:scale(1);
}

.core-values-section .core-card:hover::after{
    width:100%;
}


/* =========================================================
   ALTERNATE CARD ACCENT
========================================================= */

.core-values-section .core-card:nth-child(even)::after{
    background:var(--secondary,#f7b926);
}


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

.core-values-section .core-icon{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100px;
    height:100px;
    flex:0 0 100px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#f2f8f4;
    overflow:hidden;
    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* Inner circle */

.core-values-section .core-icon::before{
    content:"";

    position:absolute;

    inset:11px;

    border-radius:50%;

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

    transition:background .4s ease;
}


/* Outer ring */

.core-values-section .core-icon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1px solid rgba(13,107,68,.10);
    transition:border-color .4s ease;
}


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

.core-values-section .core-icon img{
    position:relative;
    z-index:2;
    display:block;
    width:50px;
    height:50px;
    object-fit:contain;
    transition:
        transform .4s ease,
        filter .4s ease;
}


/* =========================================================
   ALTERNATE ICON BACKGROUND
========================================================= */

.core-values-section .core-card:nth-child(even) .core-icon{
    background:#fff8e8;
}

.core-values-section .core-card:nth-child(even) .core-icon::before{
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff7df
        );
}


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

.core-values-section .core-card:hover .core-icon{
    background:var(--primary,#0d6b44);

    transform:
        translateY(-5px)
        rotate(6deg);

    box-shadow:
        0 15px 35px rgba(13,107,68,.20);
}

.core-values-section .core-card:hover .core-icon::before{
    background:rgba(255,255,255,.10);
}

.core-values-section .core-card:hover .core-icon::after{
    border-color:rgba(255,255,255,.25);
}

.core-values-section .core-card:hover .core-icon img{
    transform:scale(1.1);
}


/* Even cards hover */

.core-values-section .core-card:nth-child(even):hover .core-icon{
    background:var(--secondary,#f7b926);

    box-shadow:
        0 15px 35px rgba(247,185,38,.22);
}


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

.core-values-section .core-card h3{
    position:relative;
    z-index:2;

    margin:0 0 14px;

    color:var(--primary,#0d6b44);

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

    line-height:1.25;

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

.core-values-section .core-card:hover h3{
    color:var(--secondary,#f7b926);
    transform:translateY(-2px);
}


/* =========================================================
   SMALL DIVIDER
========================================================= */

.core-values-section .small-divider{
    position:relative;

    width:60px;
    height:4px;

    margin:0 auto 20px;

    border-radius:50px;

    background:var(--secondary,#f7b926);

    transition:width .35s ease;
}

.core-values-section .small-divider::after{
    content:"";

    position:absolute;

    top:50%;
    right:-12px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--secondary,#f7b926);

    transform:translateY(-50%);

    transition:transform .35s ease;
}

.core-values-section .core-card:hover .small-divider{
    width:78px;
}

.core-values-section .core-card:hover .small-divider::after{
    transform:
        translateY(-50%)
        scale(1.25);
}


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

.core-values-section .core-card p{
    position:relative;
    z-index:2;

    max-width:250px;

    margin:0 auto;

    color:#666;

    font-size:17px;
    font-weight:400;

    line-height:1.75;

    transition:color .3s ease;
}

.core-values-section .core-card:hover p{
    color:#444;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width:1400px){

    .core-values-section{
        padding:85px 0;
    }

    .core-values-section .section-title{
        margin-bottom:60px;
    }

    .core-values-section .section-title h2{
        font-size:46px;
    }

    .core-values-section .core-values-wrapper{
        gap:30px;
    }

    .core-values-section .core-card{
        min-height:400px;
        padding:45px 30px 38px;
    }

    .core-values-section .core-icon{
        width:140px;
        height:140px;
        flex-basis:140px;
    }

    .core-values-section .core-icon img{
        width:72px;
        height:72px;
    }

    .core-values-section .core-card h3{
        font-size:29px;
    }

    .core-values-section .core-card p{
        font-size:18px;
    }
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width:1199px){

    .core-values-section{
        padding:70px 0;
    }

    .core-values-section .section-title{
        margin-bottom:50px;
    }

    .core-values-section .section-title h2{
        font-size:40px;
    }

    .core-values-section .core-values-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:25px;
    }

    .core-values-section .core-card{
        min-height:370px;
        padding:35px 25px;
    }

    .core-values-section .core-icon{
        width:120px;
        height:120px;
        flex-basis:120px;
        margin-bottom:22px;
    }

    .core-values-section .core-icon img{
        width:62px;
        height:62px;
    }

    .core-values-section .core-card h3{
        font-size:26px;
    }

    .core-values-section .core-card p{
        font-size:16px;
        line-height:1.75;
    }
}


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

@media (max-width:991px){

    .core-values-section{
        padding:65px 0;
    }

    .core-values-section .section-title{
        margin-bottom:45px;
    }

    .core-values-section .section-title h2{
        font-size:38px;
    }

    .core-values-section .title-divider{
        margin-top:17px;
    }

    .core-values-section .title-divider span{
        width:70px;
        height:4px;
    }

    .core-values-section .title-divider .active{
        width:9px;
        height:9px;
    }

    .core-values-section .core-values-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }

    .core-values-section .core-card{
        min-height:350px;
        padding:32px 22px;
        border-radius:22px;
    }

    .core-values-section .core-icon{
        width:110px;
        height:110px;
        flex-basis:110px;
        margin-bottom:20px;
    }

    .core-values-section .core-icon img{
        width:56px;
        height:56px;
    }

    .core-values-section .core-card h3{
        font-size:24px;
        margin-bottom:13px;
    }

    .core-values-section .small-divider{
        margin-bottom:17px;
    }

    .core-values-section .core-card p{
        max-width:230px;
        font-size:15px;
        line-height:1.7;
    }
}


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

@media (max-width:767px){

    .core-values-section{
        padding:55px 0;
    }

    .core-values-section .section-title{
        margin-bottom:38px;
    }

    .core-values-section .section-title h2{
        font-size:32px;
        line-height:1.25;
        letter-spacing:-.5px;
    }

    .core-values-section .title-divider{
        gap:8px;
        margin-top:15px;
    }

    .core-values-section .title-divider span{
        width:55px;
        height:4px;
    }

    .core-values-section .title-divider .active{
        width:8px;
        height:8px;
    }

    .core-values-section .core-values-wrapper{
        grid-template-columns:1fr;
        gap:20px;
    }

    .core-values-section .core-card{
        width:100%;
        min-height:auto;

        padding:32px 25px 35px;

        border-radius:20px;
    }

    .core-values-section .core-icon{
        width:100px;
        height:100px;
        flex-basis:100px;

        margin-bottom:20px;
    }

    .core-values-section .core-icon img{
        width:50px;
        height:50px;
    }

    .core-values-section .core-card h3{
        font-size:22px;
        margin-bottom:12px;
    }

    .core-values-section .small-divider{
        width:52px;
        height:4px;
        margin-bottom:17px;
    }

    .core-values-section .small-divider::after{
        width:6px;
        height:6px;
        right:-10px;
    }

    .core-values-section .core-card p{
        max-width:100%;
        font-size:15px;
        line-height:1.7;
    }

    .core-values-section .core-card:hover{
        transform:translateY(-5px);
    }

    .core-values-section .core-card:hover .core-icon{
        transform:translateY(-3px) rotate(4deg);
    }

    .core-values-section::before{
        width:300px;
        height:300px;
        top:-150px;
        left:-150px;
    }

    .core-values-section::after{
        width:300px;
        height:300px;
        right:-150px;
        bottom:-150px;
    }
}


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

@media (max-width:575px){

    .core-values-section{
        padding:48px 0;
    }

    .core-values-section .section-title{
        margin-bottom:32px;
    }

    .core-values-section .section-title h2{
        font-size:28px;
    }

    .core-values-section .title-divider span{
        width:45px;
        height:3px;
    }

    .core-values-section .title-divider .active{
        width:7px;
        height:7px;
    }

    .core-values-section .core-values-wrapper{
        gap:17px;
    }

    .core-values-section .core-card{
        padding:28px 20px 30px;
        border-radius:18px;
    }

    .core-values-section .core-icon{
        width:90px;
        height:90px;
        flex-basis:90px;
        margin-bottom:18px;
    }

    .core-values-section .core-icon::before{
        inset:9px;
    }

    .core-values-section .core-icon img{
        width:44px;
        height:44px;
    }

    .core-values-section .core-card h3{
        font-size:20px;
    }

    .core-values-section .small-divider{
        width:45px;
        height:3px;
        margin-bottom:15px;
    }

    .core-values-section .small-divider::after{
        width:6px;
        height:6px;
    }

    .core-values-section .core-card p{
        font-size:14px;
        line-height:1.7;
    }
}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width:400px){

    .core-values-section{
        padding:42px 0;
    }

    .core-values-section .section-title h2{
        font-size:25px;
    }

    .core-values-section .section-title{
        margin-bottom:28px;
    }

    .core-values-section .title-divider{
        margin-top:13px;
    }

    .core-values-section .title-divider span{
        width:38px;
    }

    .core-values-section .core-card{
        padding:25px 17px 28px;
        border-radius:16px;
    }

    .core-values-section .core-icon{
        width:82px;
        height:82px;
        flex-basis:82px;
    }

    .core-values-section .core-icon img{
        width:40px;
        height:40px;
    }

    .core-values-section .core-card h3{
        font-size:19px;
    }

    .core-values-section .core-card p{
        font-size:13.5px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width:350px){

    .core-values-section .section-title h2{
        font-size:23px;
    }

    .core-values-section .core-card{
        padding-left:15px;
        padding-right:15px;
    }

    .core-values-section .core-card h3{
        font-size:18px;
    }

    .core-values-section .core-card p{
        font-size:13px;
    }

    .core-values-section .core-icon{
        width:76px;
        height:76px;
        flex-basis:76px;
    }

    .core-values-section .core-icon img{
        width:36px;
        height:36px;
    }
}


/* =========================================================
   TOUCH DEVICES
   Remove hover movement on touch screens
========================================================= */

@media (hover:none){

    .core-values-section .core-card:hover{
        transform:none;
    }

    .core-values-section .core-card:hover .core-icon{
        transform:none;
    }

    .core-values-section .core-card:hover h3{
        transform:none;
    }

    .core-values-section .core-card:hover .small-divider{
        width:60px;
    }

    .core-values-section .core-card:hover .small-divider::after{
        transform:translateY(-50%);
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.core-values-section .core-card:focus-within{
    outline:2px solid var(--primary,#0d6b44);
    outline-offset:4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .core-values-section *,
    .core-values-section *::before,
    .core-values-section *::after{
        animation:none !important;
        transition:none !important;
    }
}


/*=========================================
        FOUNDER VISIT SECTION
=========================================*/

.founder-visit-section{
    position:relative;
    padding:50px 0;
    background:#fff;
    overflow:hidden;
}


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

.founder-visit-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    left:-180px;
    bottom:-180px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(13,107,68,.06),
        transparent 70%);
}

.founder-visit-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:-170px;
    top:-170px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(247,185,38,.05),
        transparent 70%);
}

.founder-visit-section .section-title{
    text-align:center;
    max-width:900px;
    margin:0 auto 40px;
}

.founder-visit-section .section-title h2{
    font-size:42px;
    font-weight:800;
    line-height:1.15;
    color:var(--dark);
    margin:0;
    letter-spacing:-1px;

}

.founder-visit-section .section-title h2 span{

    color:var(--primary);

}

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

.founder-visit-section .title-divider{

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

    margin:22px auto 28px;

}

.founder-visit-section .title-divider span{

    width:90px;
    height:5px;

    border-radius:30px;

    background:var(--primary);

}

.founder-visit-section .title-divider .active{

    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--secondary);

}

.founder-visit-section .section-title p{
    max-width:720px;
    margin:auto;
    font-size:18px;
    line-height:1.8;
    color:#666;
    font-weight:400;
}

.visit-dots{

    position:absolute;
    width:90px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;

}

.visit-dots span{

    width:6px;
    height:6px;

    border-radius:50%;

    background:#dfeee5;

}

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

@media(max-width:1200px){

    .founder-visit-section{

        padding:90px 0;

    }

    .founder-visit-section .section-title{

        margin-bottom:60px;

    }

    .founder-visit-section .section-title h2{

        font-size:52px;

    }

    .founder-visit-section .section-title p{
        font-size:19px;
    }
}

@media(max-width:991px){

    .founder-visit-section{
        padding:80px 0;
    }

    .founder-visit-section .section-title{
        margin-bottom:50px;
    }

    .founder-visit-section .section-title h2{
        font-size:42px;
    }

    .founder-visit-section .section-title p{
        font-size:17px;
        line-height:1.7;
    }
}

@media(max-width:767px){

    .founder-visit-section{

        padding:70px 0;

    }

    .founder-visit-section .section-title{

        margin-bottom:40px;

    }

    .founder-visit-section .section-title h2{
        font-size:34px;
        line-height:1.3;
    }

    .founder-visit-section .title-divider{
        margin:18px auto 22px;
    }

    .founder-visit-section .title-divider span{
        width:60px;
        height:4px;
    }

    .founder-visit-section .title-divider .active{
        width:8px;
        height:8px;
    }

    .founder-visit-section .section-title p{
        font-size:15px;
        line-height:1.7;
    }
}

@media(max-width:480px){

    .founder-visit-section{
        padding:60px 0;
    }

    .founder-visit-section .section-title h2{
        font-size:28px;
    }

    .founder-visit-section .title-divider span{
        width:45px;
    }

    .founder-visit-section .section-title p{
        font-size:14px;
    }

}

/*=========================================================
        FOUNDER GALLERY WRAPPER
=========================================================*/

.founder-slider-wrapper{
    position:relative;
    max-width:1500px;
    margin:0 auto;
    overflow:hidden;
}

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

.founderSwiper{
    width:100%;
    overflow:visible;
    padding:20px 0 80px;
}

.founderSwiper .swiper-wrapper{
    align-items:center;
}

/*=========================================================
        SLIDE
=========================================================*/

.founderSwiper .swiper-slide{
    width:340px;
    height:auto;
    transition:all .45s ease;
    transform:scale(.82);
    opacity:.45;
    filter:blur(3px);
}

/*=========================================================
        ACTIVE SLIDE
=========================================================*/

.founderSwiper .swiper-slide-active{
    width:760px;
    transform:scale(1);
    opacity:1;
    filter:blur(0);
    z-index:5;
}

/* Previous & Next */

.founderSwiper .swiper-slide-prev,
.founderSwiper .swiper-slide-next{
    opacity:.85;
    filter:blur(2px);
    transform:scale(.88);
    z-index:2;
}

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

.visit-image{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    background:#fff;
    border:6px solid #fff;
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

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

.visit-image img{
    width:100%;
    height:460px;
    object-fit:cover;
    display:block;
    transition:.45s;
}

.swiper-slide-active .visit-image img{
    height:520px;
}

/*=========================================================
        HOVER EFFECT
=========================================================*/

.swiper-slide-active:hover .visit-image img{
    transform:scale(1.04);
}

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

.visit-image::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
    pointer-events:none;
}

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

@media (max-width:1400px){

    .founderSwiper .swiper-slide{
        width:300px;
    }

    .founderSwiper .swiper-slide-active{
        width:680px;
    }

    .visit-image img{
        height:420px;
    }

    .swiper-slide-active .visit-image img{
        height:480px;
    }

}

@media (max-width:1200px){

    .founderSwiper .swiper-slide{
        width:260px;
    }

    .founderSwiper .swiper-slide-active{
        width:600px;
    }

    .visit-image img{
        height:380px;
    }

    .swiper-slide-active .visit-image img{
        height:430px;
    }

}

@media (max-width:991px){

    .founderSwiper{
        overflow:hidden;
        padding-bottom:70px;
    }

    .founderSwiper .swiper-slide,
    .founderSwiper .swiper-slide-active{

        width:100%;
        transform:scale(1);
        filter:none;
        opacity:1;

    }

    .visit-image img{
        height:420px;
    }

}

@media (max-width:767px){

    .visit-image{
        border-radius:18px;
        border-width:4px;
    }

    .visit-image img,
    .swiper-slide-active .visit-image img{

        height:300px;

    }

}

@media (max-width:480px){

    .visit-image img,
    .swiper-slide-active .visit-image img{

        height:240px;

    }

    .visit-image{
        border-radius:15px;
    }

}

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

.visit-image{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:22px;
    background:var(--white);

    border:6px solid #fff;

    box-shadow:
        0 20px 45px rgba(0,0,0,.10),
        0 6px 18px rgba(0,0,0,.05);

    transition:all .45s ease;
}

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

.visit-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    transition:all .6s ease;

}

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

.visit-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        rgba(0,0,0,.02) 40%,
        transparent 80%
    );

    opacity:.5;

    z-index:2;

    transition:.4s;

}

/*=========================================
        INNER WHITE BORDER
=========================================*/

.visit-image::after{

    content:"";

    position:absolute;

    top:10px;
    left:10px;
    right:10px;
    bottom:10px;

    border-radius:16px;

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

    pointer-events:none;

    z-index:3;

}

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

.swiper-slide-active .visit-image{

    border-color:#fff;

    box-shadow:
        0 30px 60px rgba(0,0,0,.16),
        0 10px 25px rgba(0,0,0,.08);

}

/*=========================================
        SIDE IMAGES
=========================================*/

.swiper-slide-prev .visit-image,
.swiper-slide-next .visit-image{

    opacity:.9;

    transform:scale(.96);

}

/*=========================================
        HOVER EFFECT
=========================================*/

.swiper-slide-active:hover .visit-image{

    transform:translateY(-6px);

    box-shadow:
        0 35px 70px rgba(0,0,0,.18),
        0 12px 30px rgba(13,107,68,.12);

}

.swiper-slide-active:hover .visit-image img{

    transform:scale(1.08);

}

.swiper-slide-active:hover .visit-image::before{

    opacity:.15;

}

/*=========================================
        SHINE EFFECT
=========================================*/

.visit-image .shine{

    position:absolute;

    top:0;
    left:-130%;

    width:55%;
    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:1s;

    z-index:5;

}

.swiper-slide-active:hover .shine{

    left:160%;

}

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

.visit-image img{

    border-radius:16px;

}

/*=========================================
        CURSOR
=========================================*/

.swiper-slide{

    cursor:pointer;

}

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

@media(max-width:1200px){

    .visit-image{

        border-width:5px;

    }

}

@media(max-width:991px){

    .visit-image{

        border-radius:20px;

    }

    .visit-image::after{

        top:8px;
        left:8px;
        right:8px;
        bottom:8px;

    }

}

@media(max-width:767px){

    .visit-image{

        border-width:4px;
        border-radius:18px;

    }

    .visit-image img{

        border-radius:14px;

    }

    .visit-image::after{

        border-radius:12px;

    }

}

@media(max-width:480px){

    .visit-image{

        border-radius:15px;

    }

    .visit-image img{

        border-radius:11px;

    }

    .visit-image::after{

        display:none;

    }

}

/*=========================================
        SLIDER NAVIGATION
=========================================*/

.visit-prev,
.visit-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:62px;
    height:62px;
    border-radius:50%;
    background:var(--white);
    border:2px solid rgba(13,107,68,.08);
    box-shadow:0 12px 35px rgba(0,0,0,.12);

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

    cursor:pointer;
    z-index:20;

    transition:all .35s ease;
}

/* Left Button */

.visit-prev{
    left:70px;
}

/* Right Button */

.visit-next{
    right:70px;
}

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

.visit-prev i,
.visit-next i{
    font-size:22px;
    color:var(--primary);
    transition:.35s;
}

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

.visit-prev:hover,
.visit-next:hover{

    background:var(--primary);

    border-color:var(--primary);

    transform:translateY(-50%) scale(1.08);

    box-shadow:
        0 20px 40px rgba(13,107,68,.25);

}

.visit-prev:hover i,
.visit-next:hover i{

    color:#fff;

}

/*=========================================
        ACTIVE
=========================================*/

.visit-prev:active,
.visit-next:active{

    transform:translateY(-50%) scale(.95);

}

/*=========================================
        DISABLED BUTTON
=========================================*/

.swiper-button-disabled{

    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;

}

/*=========================================
        OPTIONAL PULSE
=========================================*/

.visit-prev::before,
.visit-next::before{

    content:"";

    position:absolute;

    inset:-7px;

    border-radius:50%;

    border:2px solid rgba(13,107,68,.10);

    opacity:0;

    transition:.35s;

}

.visit-prev:hover::before,
.visit-next:hover::before{

    opacity:1;

    transform:scale(1.12);

}

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

@media(max-width:1200px){

    .visit-prev{

        left:30px;

    }

    .visit-next{

        right:30px;

    }

}

@media(max-width:991px){

    .visit-prev,
    .visit-next{

        width:56px;
        height:56px;

    }

    .visit-prev i,
    .visit-next i{

        font-size:20px;

    }

}

@media(max-width:767px){

    .visit-prev,
    .visit-next{

        width:48px;
        height:48px;

        top:auto;
        bottom:15px;

        transform:none;

    }

    .visit-prev{

        left:calc(50% - 65px);

    }

    .visit-next{

        right:calc(50% - 65px);

    }

    .visit-prev:hover,
    .visit-next:hover{

        transform:scale(1.05);

    }

}

@media(max-width:480px){

    .visit-prev,
    .visit-next{

        width:42px;
        height:42px;

    }

    .visit-prev{

        left:calc(50% - 55px);

    }

    .visit-next{

        right:calc(50% - 55px);

    }

    .visit-prev i,
    .visit-next i{

        font-size:16px;

    }

}

/*=========================================
        PAGINATION WRAPPER
=========================================*/

.visit-pagination{
    position:relative;
    margin-top:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    z-index:10;
}

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

.visit-pagination .swiper-pagination-bullet{

    width:14px;
    height:14px;

    margin:0 6px !important;

    border-radius:50%;

    background:#d9d9d9;

    opacity:1;

    transition:all .35s ease;

    cursor:pointer;

    position:relative;

}

/* Small Inner Dot */

.visit-pagination .swiper-pagination-bullet::after{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#fff;

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

    transition:.35s;

}

/*=========================================
        ACTIVE BULLET
=========================================*/

.visit-pagination .swiper-pagination-bullet-active{

    width:42px;

    border-radius:30px;

    background:var(--primary);

    box-shadow:0 6px 18px rgba(13,107,68,.25);

}

.visit-pagination .swiper-pagination-bullet-active::after{

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

}

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

.visit-pagination .swiper-pagination-bullet:hover{

    background:var(--secondary);

    transform:scale(1.15);

}

.visit-pagination .swiper-pagination-bullet-active:hover{

    background:var(--primary);

}

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

.visit-pagination .swiper-pagination-bullet{

    animation:bulletFade .5s ease;

}

@keyframes bulletFade{

    from{

        opacity:0;
        transform:scale(.6);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

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

@media (max-width:991px){

    .visit-pagination{

        margin-top:35px;

    }

    .visit-pagination .swiper-pagination-bullet{

        width:12px;
        height:12px;

    }

    .visit-pagination .swiper-pagination-bullet-active{

        width:34px;

    }

}

@media (max-width:767px){

    .visit-pagination{

        margin-top:28px;
        gap:10px;

    }

    .visit-pagination .swiper-pagination-bullet{

        width:10px;
        height:10px;

        margin:0 4px !important;

    }

    .visit-pagination .swiper-pagination-bullet-active{

        width:28px;

    }

}

@media (max-width:480px){

    .visit-pagination{

        margin-top:24px;

    }

    .visit-pagination .swiper-pagination-bullet{

        width:9px;
        height:9px;

    }

    .visit-pagination .swiper-pagination-bullet-active{

        width:24px;

    }

}

/*====================================================
        LARGE DESKTOP (1600px)
====================================================*/

@media (max-width:1600px){

    .founder-slider-wrapper{
        max-width:1400px;
    }

    .founderSwiper .swiper-slide-active{
        width:700px;
    }

}

/*====================================================
        DESKTOP
====================================================*/

@media (max-width:1400px){

    .founder-visit-section{
        padding:100px 0;
    }

    .founderSwiper{
        padding-bottom:70px;
    }

    .founderSwiper .swiper-slide{
        width:300px;
    }

    .founderSwiper .swiper-slide-active{
        width:650px;
    }

    .visit-image img{
        height:430px;
    }

    .swiper-slide-active .visit-image img{
        height:470px;
    }

}

/*====================================================
        LAPTOP
====================================================*/

@media (max-width:1200px){

    .founder-visit-section{
        padding:90px 0;
    }

    .founder-slider-wrapper{
        max-width:100%;
    }

    .founderSwiper{
        padding-bottom:65px;
    }

    .founderSwiper .swiper-slide{
        width:260px;
    }

    .founderSwiper .swiper-slide-active{
        width:560px;
    }

    .visit-image img{
        height:360px;
    }

    .swiper-slide-active .visit-image img{
        height:420px;
    }

    .visit-prev{
        left:20px;
    }

    .visit-next{
        right:20px;
    }

}

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

@media (max-width:991px){

    .founder-visit-section{
        padding:80px 0;
    }

    .founderSwiper{
        overflow:hidden;
        padding-bottom:60px;
    }

    .founderSwiper .swiper-slide,
    .founderSwiper .swiper-slide-prev,
    .founderSwiper .swiper-slide-next,
    .founderSwiper .swiper-slide-active{

        width:100%;

        transform:none;

        filter:none;

        opacity:1;

    }

    .visit-image{

        border-width:4px;

        border-radius:18px;

    }

    .visit-image img{

        height:420px;

    }

    .swiper-slide-active .visit-image img{

        height:420px;

    }

    .visit-prev,
    .visit-next{

        width:54px;
        height:54px;

    }

    .visit-prev i,
    .visit-next i{

        font-size:18px;

    }

}

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

@media (max-width:767px){

    .founder-visit-section{
        padding:70px 0;
    }

    .founderSwiper{

        padding-bottom:90px;

    }

    .visit-image{

        border-radius:16px;

        border-width:4px;

    }

    .visit-image img{

        height:300px;

    }

    .swiper-slide-active .visit-image img{

        height:300px;

    }

    /* Bottom Navigation */

    .visit-prev,
    .visit-next{

        top:auto;

        bottom:15px;

        transform:none;

        width:46px;
        height:46px;

    }

    .visit-prev{

        left:calc(50% - 60px);

    }

    .visit-next{

        right:calc(50% - 60px);

    }

    .visit-prev:hover,
    .visit-next:hover{

        transform:scale(1.05);

    }

    .visit-pagination{

        margin-top:25px;

    }

}

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

@media (max-width:575px){

    .founder-visit-section{

        padding:60px 0;

    }

    .visit-image{

        border-width:3px;

        border-radius:14px;

    }

    .visit-image img{

        height:240px;

    }

    .swiper-slide-active .visit-image img{

        height:240px;

    }

    .visit-prev,
    .visit-next{

        width:42px;
        height:42px;

    }

    .visit-prev{

        left:calc(50% - 52px);

    }

    .visit-next{

        right:calc(50% - 52px);

    }

    .visit-prev i,
    .visit-next i{

        font-size:15px;

    }

}

/*====================================================
        EXTRA SMALL DEVICES
====================================================*/

@media (max-width:380px){

    .visit-image{

        border-radius:12px;

    }

    .visit-image img{

        height:210px;

    }

    .swiper-slide-active .visit-image img{

        height:210px;

    }

    .visit-prev,
    .visit-next{
        width:38px;
        height:38px;
        bottom:12px;
    }

    .visit-prev{
        left:calc(50% - 48px);
    }

    .visit-next{
        right:calc(50% - 48px);
    }

    .visit-prev i,
    .visit-next i{
        font-size:14px;
    }

    .visit-pagination{
        margin-top:18px;
    }

    .visit-pagination .swiper-pagination-bullet{
        width:8px;
        height:8px;
    }

    .visit-pagination .swiper-pagination-bullet-active{
        width:22px;
    }

}

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

    .founderSwiper *,
    .visit-image,
    .visit-prev,
    .visit-next,
    .swiper-slide{
        animation:none !important;
        transition:none !important;
    }
}



.career-section{
    position:relative;
    padding:50px 0;
    background:#fff;
    overflow:hidden;
}

.career-section::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    left:-180px;
    bottom:-180px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(13,107,68,.06),
        transparent 70%);
}

.career-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(247,185,38,.05),
        transparent 70%);
}

.career-section .section-title{
    text-align:center;
    margin-bottom:60px;
}

.career-section .section-title h2{
    font-size:42px;
    font-weight:800;
    color:var(--dark);
    line-height:1.15;
    margin:0;
    letter-spacing:-1px;
}

.career-section .section-title h2 span{
    color:var(--primary);
}

.career-section .title-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:22px auto 0;
    position:relative;
}

.career-section .title-divider span:first-child{
    width:170px;
    height:10px;
    border-bottom:5px solid var(--secondary);
    border-radius:0 0 100px 100px;
    transform:rotate(-3deg);
}

.career-section .title-divider .active{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--secondary);
    margin-left:10px;
}

.career-section .section-title p{
    max-width:700px;
    margin:22px auto 0;
    font-size:18px;
    line-height:1.8;
    color:#666;
}

@media(max-width:1200px){

    .career-section{
        padding:50px 0;
    }

    .career-section .section-title{
        margin-bottom:50px;
    }

    .career-section .section-title h2{
        font-size:42px;
    }

}

@media(max-width:991px){

    .career-section{
        padding:80px 0;
    }

    .career-section .section-title h2{
        font-size:34px;
    }

    .career-section .title-divider span:first-child{
        width:140px;
    }

}

@media(max-width:767px){

    .career-section{
        padding:70px 0;
    }

    .career-section .section-title{
        margin-bottom:40px;
    }

    .career-section .section-title h2{
        font-size:24px;
        line-height:1.3;
    }

    .career-section .title-divider{
        margin-top:18px;
    }

    .career-section .title-divider span:first-child{
        width:110px;
        height:8px;
        border-bottom-width:4px;
    }

}

@media(max-width:480px){

    .career-section{
        padding:60px 0;
    }
    .career-section .section-title h2{
        font-size:20px;
    }
    .career-section .title-divider span:first-child{
        width:90px;
    }

}

/*=========================================
        SEARCH FILTER WRAPPER
=========================================*/

.career-filter{
    background:var(--white);
    border:1px solid var(--border);
    border-radius:22px;
    padding:24px;
    margin-bottom:45px;

    display:grid;
    grid-template-columns:1fr 1fr 300px;
    gap:22px;

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

/*=========================================
        FILTER ITEM
=========================================*/

.filter-item{
    position:relative;
}

.filter-item i{
    position:absolute;
    left:24px;
    top:40%;
    transform:translateY(-50%);
    color:var(--primary);
    font-size:22px;
    pointer-events:none;
}

/*=========================================
        SELECT
=========================================*/

.filter-item select{
    width:100%;
    height:55px;
    border:1px solid #dcdcdc;
    border-radius:14px;
    background:#fff;
    padding:0 60px;
    font-size:18px;
    font-weight:400;
    color:#555;
    font-family:var(--bodyFont);
    outline:none;
    cursor:pointer;
    transition:.35s;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
}

.filter-item::after{
    content:"\f107";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    right:24px;
    top:40%;
    transform:translateY(-50%);
    font-size:18px;
    color:#777;
    pointer-events:none;
}

.filter-item select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(13,107,68,.08);
}

/*=========================================
        SEARCH BUTTON
=========================================*/

.search-btn{
    height:55px;
    border:none;
    border-radius:14px;
    background:var(--primary);
    color:#fff;
    font-size:18px;
    font-weight:700;
    font-family:var(--bodyFont);
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;

    transition:.35s;

}

.search-btn i{

    font-size:22px;

}

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

.search-btn:hover{

    background:#095737;

    transform:translateY(-3px);

    box-shadow:0 14px 30px rgba(13,107,68,.25);

}

.search-btn:active{

    transform:scale(.98);

}

/*=========================================
        PLACEHOLDER COLOR
=========================================*/

.filter-item select option{

    color:#444;

}

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

@media(max-width:1200px){

    .career-filter{

        grid-template-columns:1fr 1fr 240px;

        gap:18px;

    }

    .filter-item select{

        font-size:18px;

        height:64px;

    }

    .search-btn{

        height:64px;

        font-size:20px;

    }

}

@media(max-width:991px){

    .career-filter{

        grid-template-columns:1fr;

        padding:20px;

    }

    .search-btn{

        width:100%;

    }

}

@media(max-width:767px){

    .career-filter{

        padding:18px;

        border-radius:18px;

        gap:15px;

    }

    .filter-item select{

        height:58px;

        padding:0 52px;

        font-size:17px;

    }

    .filter-item i{

        left:18px;

        font-size:18px;

    }

    .filter-item::after{

        right:18px;

        font-size:15px;

    }

    .search-btn{

        height:58px;

        font-size:18px;

    }

}

@media(max-width:480px){

    .career-filter{

        padding:15px;

    }

    .filter-item select{

        height:54px;

        font-size:16px;

        padding:0 46px;

    }

    .search-btn{

        height:54px;

        font-size:17px;

        gap:10px;

    }

    .search-btn i{

        font-size:16px;

    }

}


.career-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.career-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:22px;
    padding:35px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 15px 35px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    min-height:430px;
}

.card-accent{
    position:absolute;
    top:0;
    right:22px;
    width:48px;
    height:4px;
    background:var(--secondary);
    border-radius:30px;
}

.career-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background:#f3faf6;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:28px;
}

.career-icon img{
    width:48px;
    height:48px;
    object-fit:contain;
}

.career-card h3{
    font-size:20px;
    font-weight:700;
    color:var(--dark);
    margin:0 0 18px;
    line-height:1.25;
}

.job-location{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    border:1.5px solid var(--secondary);
    border-radius:30px;
    background:#fffdf4;
    color:var(--dark);
    font-size:15px;
    font-weight:600;
    width:max-content;
    margin-bottom:28px;
    text-transform:uppercase;
}

.job-location i{
    color:var(--dark);
    font-size:13px;
}


.card-divider{
    width:100%;
    height:1px;
    background:#ececec;
    margin-bottom:12px;
}

.career-card p{
    font-size:20px;
    color:#555;
    line-height:1.8;
    margin:0;
}

/* Push buttons to bottom */

.career-btns{
    margin-top:auto;
}

.career-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 60px rgba(13,107,68,.12);
    border-color:#d9efe4;
}

.career-card:hover .career-icon{
    transform:rotate(8deg) scale(1.05);
}

.career-icon{
    transition:.35s;
}


@media(max-width:1200px){
    .career-grid{
        gap:24px;
    }

    .career-card{
        padding:28px;
    }

    .career-card h3{
        font-size:20px;
    }

    .career-card p{

        font-size:18px;

    }

}

@media(max-width:991px){

    .career-grid{

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

    }

}

@media(max-width:767px){

    .career-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .career-card{

        min-height:auto;

        padding:24px;

        border-radius:18px;

    }

    .career-icon{

        width:74px;
        height:74px;

        margin-bottom:20px;

    }

    .career-icon img{

        width:40px;
        height:40px;

    }

    .career-card h3{

        font-size:26px;

    }

    .career-card p{

        font-size:16px;

        line-height:1.7;

    }

}

@media(max-width:480px){

    .career-card{

        padding:20px;

    }

    .career-card h3{

        font-size:22px;

    }

    .job-location{

        font-size:13px;

        padding:7px 14px;

    }

    .career-card p{

        font-size:15px;

    }

}

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

.career-card{

    display:flex;
    flex-direction:column;
    position:relative;

}

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

.career-icon{

    position:relative;
    overflow:hidden;
    transition:all .4s ease;

}

.career-icon::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(13,107,68,.10),
        rgba(247,185,38,.15)
    );

    z-index:0;

}

.career-icon img{

    position:relative;
    z-index:2;

    transition:.4s;

}

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

.career-card h3{

    font-size:20px;
    font-weight:700;
    line-height:1.25;
    color:var(--dark);
    margin:0 0 20px;
    transition:.35s;
}

.job-location{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:max-content;
    padding:10px 18px;
    border-radius:50px;
    background:#fffdf5;
    border:1px solid rgba(247,185,38,.45);
    color:#555;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
}

.job-location i{
    color:var(--secondary);
    font-size:14px;
}

.card-divider{
    width:100%;
    height:1px;
    background:#ececec;
    margin-bottom:12px;
}

.career-card p{
    font-size:18px;
    line-height:1.8;
    color:#666;
    margin:0;
    flex-grow:1;

}

/*=========================================
        BUTTON WRAPPER
=========================================*/

.career-btns{

    display:flex;
    gap:14px;

    margin-top:35px;

}

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

.career-card:hover h3{

    color:var(--primary);

}

.career-card:hover .career-icon{
    background:var(--primary);
    transform:translateY(-5px);
}

.career-card:hover .career-icon img{
    transform:scale(1.08);
}

.career-card:hover .job-location{
    border-color:var(--secondary);
    background:#fff7e4;
}

.career-card:hover .card-divider{
    background:var(--secondary);
}

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

@media(max-width:1200px){

    .career-card h3{

        font-size:28px;

    }

    .career-card p{

        font-size:17px;

    }

}

@media(max-width:991px){

    .career-btns{

        flex-direction:column;

    }

}

@media(max-width:767px){

    .career-card h3{

        font-size:24px;

    }

    .career-card p{

        font-size:16px;

        line-height:1.7;

    }

    .career-btns{

        margin-top:25px;

        gap:12px;

    }

}

@media(max-width:480px){

    .career-card h3{

        font-size:21px;

    }

    .job-location{

        font-size:13px;

        padding:8px 14px;

    }

    .career-card p{
        font-size:15px;
    }
}

.career-btns{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

.career-btns a{
    flex:1;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
    z-index:1;
}

.career-btns a::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-25deg);
    transition:.7s;
    z-index:-1;
}

.career-btns a:hover::before{
    left:130%;

}

/*=========================================
        APPLY BUTTON
=========================================*/

.apply-btn{

    background:var(--primary);

    color:#fff;

    border:2px solid var(--primary);

}

.apply-btn:hover{

    background:#095537;

    border-color:#095537;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(13,107,68,.25);

}

/*=========================================
        VIEW DETAILS BUTTON
=========================================*/

.details-btn{

    background:#fff;

    color:var(--dark);

    border:2px solid var(--border);

}

.details-btn:hover{

    background:var(--secondary);

    color:#fff;

    border-color:var(--secondary);

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(247,185,38,.25);

}

/*=========================================
        ACTIVE CLICK
=========================================*/

.apply-btn:active,
.details-btn:active{

    transform:scale(.96);

}

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

.career-card{

    transition:all .4s ease;

}

.career-card:hover{

    transform:translateY(-12px);

    border-color:rgba(13,107,68,.15);

    box-shadow:
        0 25px 55px rgba(13,107,68,.10),
        0 10px 25px rgba(0,0,0,.06);

}

.career-card:hover .card-accent{

    width:90px;

    transition:.4s;

}

.career-card:hover .career-icon{

    background:var(--primary);

}

.career-card:hover .career-icon img{
    transform:scale(1.08);

}

.career-card:hover h3{

    color:var(--primary);

}

.career-card:hover .card-divider{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}

/*=========================================
        FOCUS ACCESSIBILITY
=========================================*/

.career-btns a:focus{

    outline:none;


}

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

@media(max-width:991px){

    .career-btns{

        flex-direction:column;

        gap:12px;

    }

    .career-btns a{

        width:100%;

    }

}

@media(max-width:767px){

    .career-btns{

        margin-top:25px;

    }

    .career-btns a{

        height:48px;

        font-size:15px;

    }

}

@media(max-width:480px){

    .career-btns a{

        height:45px;

        font-size:14px;

        border-radius:8px;

    }

}

/*=========================================
        LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

    .career-section{
        padding:50px 0;
    }

    .career-filter{
        grid-template-columns:1fr 1fr 260px;
    }

    .career-grid{
        gap:25px;
    }

    .career-card{
        padding:30px;
    }

    .career-card h3{
        font-size:23px;
    }

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

}

/*=========================================
        LAPTOP
=========================================*/

@media (max-width:1199px){

    .career-section{
        padding:90px 0;
    }

    .career-filter{
        grid-template-columns:1fr 1fr 220px;
        gap:18px;
        padding:20px;
    }

    .filter-item select,
    .search-btn{
        height:60px;
    }

    .filter-item select{
        font-size:17px;
    }

    .search-btn{
        font-size:18px;
    }

    .career-grid{
        gap:20px;
    }

    .career-card{
        padding:25px;
    }

    .career-card h3{
        font-size:26px;
    }

    .career-card p{
        font-size:16px;
        line-height:1.7;
    }

}

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

@media (max-width:991px){

    .career-section{
        padding:80px 0;
    }

    .career-section .section-title{
        margin-bottom:40px;
    }

    .career-section .section-title h2{
        font-size:42px;
    }

    .career-filter{
        grid-template-columns:1fr;
        gap:15px;
        border-radius:18px;
    }

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

    .career-card{
        min-height:auto;
        padding:25px;
    }

    .career-icon{
        width:75px;
        height:75px;
    }

    .career-icon img{
        width:38px;
        height:38px;
    }

    .career-card h3{
        font-size:24px;
    }

    .career-btns{
        flex-direction:column;
        gap:12px;
    }

    .career-btns a{
        width:100%;
    }

}

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

@media (max-width:767px){

    .career-section{
        padding:70px 0;
    }

    .career-section .section-title{
        margin-bottom:35px;
    }

    .career-section .section-title h2{
        font-size:34px;
        line-height:1.3;
    }

    .career-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .career-filter{
        padding:18px;
    }

    .filter-item select{
        height:55px;
        font-size:16px;
        padding:0 50px;
    }

    .filter-item i{
        left:18px;
        font-size:18px;
    }

    .filter-item::after{
        right:18px;
    }

    .search-btn{
        height:55px;
        font-size:17px;
    }

    .career-card{
        padding:22px;
        border-radius:18px;
    }

    .career-icon{
        width:68px;
        height:68px;
        margin-bottom:18px;
    }

    .career-icon img{
        width:34px;
        height:34px;
    }

    .career-card h3{
        font-size:22px;
        margin-bottom:15px;
    }

    .job-location{
        font-size:13px;
        padding:8px 15px;
        margin-bottom:20px;
    }

    .career-card p{
        font-size:15px;
        line-height:1.7;
    }

    .career-btns{
        margin-top:22px;
    }

    .career-btns a{
        height:46px;
        font-size:15px;
    }

}

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

@media (max-width:480px){

    .career-section{
        padding:60px 0;
    }

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

    .career-filter{
        padding:15px;
        border-radius:15px;
    }

    .filter-item select{
        height:50px;
        padding:0 45px;
        font-size:15px;
    }

    .filter-item i{
        font-size:16px;
        left:15px;
    }

    .filter-item::after{
        right:15px;
        font-size:14px;
    }

    .search-btn{
        height:50px;
        font-size:15px;
        gap:8px;
    }

    .career-card{
        padding:20px;
        border-radius:15px;
    }

    .career-icon{
        width:60px;
        height:60px;
    }

    .career-icon img{
        width:30px;
        height:30px;
    }

    .career-card h3{
        font-size:20px;
    }

    .job-location{
        font-size:12px;
        padding:7px 13px;
    }

    .career-card p{
        font-size:14px;
    }

    .career-btns a{
        height:44px;
        font-size:14px;
        border-radius:8px;
    }

}

/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:360px){

    .career-section .section-title h2{
        font-size:24px;
    }

    .career-card{
        padding:18px;
    }

    .career-icon{
        width:55px;
        height:55px;
    }

    .career-icon img{
        width:26px;
        height:26px;
    }

    .career-card h3{
        font-size:18px;
    }

    .career-card p{
        font-size:13px;
    }

    .career-btns a{
        height:42px;
        font-size:13px;
    }

}

/*=========================================
        ACCESSIBILITY
=========================================*/

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

    .career-card,
    .career-btns a,
    .career-icon,
    .search-btn{

        transition:none !important;
        animation:none !important;

    }

}



.support-section{
    position:relative;
    padding:50px 0;
    background:var(--white);
    overflow:hidden;
}
.support-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-180px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(13,107,68,.05);
}

.support-section::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-180px;
    top:-180px;
    border-radius:50%;
    background:rgba(247,185,38,.05);
}

.support-section .section-title{
    text-align:center;
    margin-bottom:45px;
}

.support-section .section-title h2{
    font-size:42px;
    font-weight:800;
    color:var(--dark);
    line-height:1.2;
    margin:0;
    letter-spacing:-1px;
}

.support-section .section-title h2 span{
    color:var(--primary);
}

.support-section .title-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:22px;
}

.support-section .title-divider span{
    display:block;

}

/* Left Line */

.support-section .title-divider span:first-child{
    width:64px;
    height:4px;
    background:var(--primary);
    border-radius:30px;
}

/* Yellow Dot */

.support-section .title-divider .active{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--secondary);
}

/* Right Line */

.support-section .title-divider span:last-child{
    width:64px;
    height:4px;
    background:var(--primary);
    border-radius:30px;
}

.support-section .section-title p{
    max-width:700px;
    margin:20px auto 0;
    color:#666;
    font-size:18px;
    line-height:1.8;
}

@media(max-width:1200px){
    .support-section{
        padding:90px 0;
    }

    .support-section .section-title{
        margin-bottom:55px;
    }

    .support-section .section-title h2{
        font-size:48px;
    }

}

@media(max-width:991px){

    .support-section{
        padding:80px 0;
    }

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

    .support-section .title-divider{
        gap:15px;
    }

    .support-section .title-divider span:first-child,
    .support-section .title-divider span:last-child{
        width:55px;
    }

}

@media(max-width:767px){

    .support-section{
        padding:70px 0;
    }

    .support-section .section-title{
        margin-bottom:40px;
    }

    .support-section .section-title h2{
        font-size:32px;
        line-height:1.3;
    }

    .support-section .title-divider{
        margin-top:18px;
        gap:12px;
    }

    .support-section .title-divider span:first-child,
    .support-section .title-divider span:last-child{
        width:45px;
        height:3px;
    }

    .support-section .title-divider .active{
        width:8px;
        height:8px;
    }
}

@media(max-width:480px){

    .support-section{
        padding:60px 0;
    }

    .support-section .section-title h2{
        font-size:26px;
    }

    .support-section .title-divider span:first-child,
    .support-section .title-divider span:last-child{
        width:35px;
    }
}

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

.support-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    align-items:stretch;
}

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

.support-card{
    position:relative;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:20px;
    padding:35px 13px 30px;
    text-align:center;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow:0 8px 28px rgba(0,0,0,.05);
    display:flex;
    flex-direction:column;
    height:100%;
}

/* Equal card height */

.support-card h3{
    min-height:30px;
}

.support-contact{
    margin-top:auto;
}

/*=========================================
    DIVIDER
=========================================*/

.card-line{
    width:100%;
    height:1px;
    background:#d7e7de;
    margin:10px 0 18px;
}

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

.support-card .designation{
    margin-top:10px;
    margin-bottom:18px;
}

.support-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

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

.support-card,
.support-card *{
    transition:all .35s ease;
}

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

.support-image{
    position:relative;
    width:195px;
    height:195px;
    margin:0 auto 0px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(13,107,68,.15);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.support-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    transition:.45s;
    display:block;
}

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

.flag{
    position:absolute;
    top:18px;
    right:18px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    z-index:5;
}

.flag img{
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

/*=========================================
    IMAGE BORDER EFFECT
=========================================*/

.support-image::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(13,107,68,.10);
    border-radius:50%;
    pointer-events:none;
}

.support-image::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow:inset 0 0 0 10px rgba(255,255,255,.18);
    pointer-events:none;
}

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

.support-card:hover .support-image img{
    transform:scale(1.08);
}

.support-card:hover .support-image{
    border-color:var(--primary);
    box-shadow:0 15px 35px rgba(13,107,68,.15);
}

.support-card:hover .flag{
    transform:rotate(8deg) scale(1.05);
}

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

@media (max-width:1200px){

    .support-image{
        width:175px;
        height:175px;
    }

    .flag{
        width:44px;
        height:44px;
    }

    .flag img{
        width:38px;
        height:38px;
    }

}

@media (max-width:991px){

    .support-image{
        width:165px;
        height:165px;
    }

}

@media (max-width:767px){

    .support-image{
        width:155px;
        height:155px;
        margin-bottom:24px;
    }

    .flag{
        top:16px;
        right:16px;
        width:42px;
        height:42px;
    }

    .flag img{
        width:36px;
        height:36px;
    }

}

@media (max-width:480px){

    .support-image{
        width:145px;
        height:145px;
    }

    .flag{
        width:40px;
        height:40px;
    }

    .flag img{
        width:34px;
        height:34px;
    }

}

/*=========================================
        NAME
=========================================*/

.support-card h3{

    font-size:28px;
    font-weight:700;
    line-height:1.3;

    color:var(--primary);

    transition:.35s;

}

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

.designation{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    padding:10px 12px;
    min-height:48px;
    background:#fff8e8;
    border:1px solid rgba(247,185,38,.35);
    border-radius:40px;
    color:#7d5a00;
    font-size:13px;
    font-weight:600;
    line-height:1.5;
    text-align:center;
    transition:.35s;
}

/*=========================================
        DIVIDER
=========================================*/

.card-line{

    width:100%;
    height:2px;

    margin:10px 0 20px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--primary),
        transparent
    );

    border-radius:30px;

}

/*=========================================
        CONTENT SPACING
=========================================*/

.support-card{

    display:flex;
    flex-direction:column;

}

.support-card .support-contact{

    margin-top:auto;

}

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

.support-card:hover h3{

    color:#084f33;

}

.support-card:hover .designation{

    background:var(--secondary);

    border-color:var(--secondary);

    color:var(--white);

    transform:translateY(-2px);

}

.support-card:hover .card-line{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--primary)
    );

}

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

@media (max-width:1200px){

    .support-card h3{

        font-size:24px;

    }

    .designation{

        font-size:14px;

        padding:9px 18px;

    }

}

@media (max-width:991px){

    .support-card h3{

        font-size:22px;

    }

}

@media (max-width:767px){

    .support-card h3{

        font-size:20px;

        margin-bottom:15px;

    }

    .designation{

        font-size:13px;

        padding:8px 16px;

        min-height:42px;

    }

    .card-line{

        margin:20px 0;

    }

}

@media (max-width:480px){

    .support-card h3{

        font-size:18px;

    }

    .designation{

        font-size:12px;

        padding:7px 14px;

        border-radius:30px;

    }

}

/*=========================================
        CONTACT LIST
=========================================*/

.support-contact{
    list-style:none;
    margin:0;
    padding:0;

    display:flex;
    flex-direction:column;
    gap:5px;
}

/*=========================================
        CONTACT ITEM
=========================================*/

.support-contact li{

    display:flex;
    align-items:flex-start;

    gap:14px;

    color:#555;

    font-size:15px;
    line-height:1.7;

    transition:.35s;

}

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

.support-contact li i{

    width:32px;
    height:32px;

    min-width:32px;

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

    border-radius:50%;

    background:#f4faf6;

    color:var(--primary);

    font-size:17px;

    transition:.35s;

}

/*=========================================
        LINK
=========================================*/

.support-contact li a{

    color:#555;

    text-decoration:none;

    word-break:break-word;

    transition:.35s;

}

/*=========================================
        PHONE
=========================================*/

.support-contact li:nth-child(1):hover i{

    background:var(--primary);

    color:#fff;

}

.support-contact li:nth-child(1):hover a{

    color:var(--primary);

}

/*=========================================
        EMAIL
=========================================*/

.support-contact li:nth-child(2):hover i{

    background:#0d6b44;

    color:#fff;

}

.support-contact li:nth-child(2):hover a{

    color:#0d6b44;

}

/*=========================================
        WHATSAPP
=========================================*/

.support-contact li:nth-child(3) i{

    color:#25D366;

    background:#ecfff3;

}

.support-contact li:nth-child(3):hover i{

    background:#25D366;

    color:#fff;

}

.support-contact li:nth-child(3):hover a{

    color:#25D366;

}

/*=========================================
        HOVER EFFECT
=========================================*/

.support-contact li:hover{

    transform:translateX(6px);

}

/*=========================================
        LONG EMAIL SUPPORT
=========================================*/

.support-contact li a{

    flex:1;

}

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

@media(max-width:1200px){

    .support-contact li{

        font-size:14px;

    }

    .support-contact li i{

        width:40px;
        height:40px;
        min-width:40px;

        font-size:16px;

    }

}

@media(max-width:991px){

    .support-contact{

        gap:14px;

    }

}

@media(max-width:767px){

    .support-contact li{

        font-size:14px;

        gap:12px;

    }

    .support-contact li i{

        width:36px;
        height:36px;
        min-width:36px;

        font-size:15px;

    }

}

@media(max-width:480px){

    .support-contact li{

        font-size:13px;

        gap:10px;

    }

    .support-contact li i{

        width:34px;
        height:34px;
        min-width:34px;

        font-size:14px;

    }

}

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

.support-card{

    transition:all .4s ease;

}

.support-card:hover{

    transform:translateY(-12px);

    border-color:rgba(13,107,68,.15);

    box-shadow:
        0 30px 60px rgba(13,107,68,.10),
        0 12px 30px rgba(0,0,0,.06);

}


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

.support-image{

    transition:all .4s ease;

}

.support-card:hover .support-image{

    border-color:var(--primary);

    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(13,107,68,.15);

}

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

    transform:scale(1.08);

}

/*=========================================
        COUNTRY FLAG
=========================================*/

.flag{

    transition:all .35s ease;

}

.support-card:hover .flag{

    transform:rotate(10deg) scale(1.08);

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

}

/*=========================================
        NAME
=========================================*/

.support-card h3{

    transition:.35s;

}

.support-card:hover h3{

    color:#084f33;

}

/*=========================================
        DESIGNATION
=========================================*/

.designation{

    transition:.35s;

}

.support-card:hover .designation{

    background:var(--secondary);

    color:var(--white);

    border-color:var(--secondary);

    transform:translateY(-2px);

}

/*=========================================
        DIVIDER
=========================================*/

.card-line{

    transition:.35s;

}

.support-card:hover .card-line{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--primary)
    );

}

/*=========================================
        CONTACT ITEMS
=========================================*/

.support-contact li{

    transition:.35s;

}

.support-card:hover .support-contact li{

    transform:translateX(5px);

}

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

.support-contact li i{

    transition:.35s;

}

.support-card:hover .support-contact li i{

    background:var(--primary);

    color:#fff;

}

/* Keep WhatsApp Green */

.support-card:hover .support-contact li:last-child i{

    background:#25D366;

    color:#fff;

}

/*=========================================
        LINKS
=========================================*/

.support-contact a{

    transition:.35s;

}

.support-card:hover .support-contact a{

    color:#444;

}

.support-contact a:hover{

    color:var(--primary);

}

/*=========================================
        SHINE EFFECT
=========================================*/

.support-card::after{

    content:"";

    position:absolute;

    top:0;
    left:-140%;

    width:70%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;

    pointer-events:none;

}

.support-card:hover::after{

    left:150%;

}

/*=========================================
        ACCESSIBILITY
=========================================*/

.support-card:focus-within{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(13,107,68,.12);

}

.support-card:focus-within .designation{

    background:var(--secondary);

    color:#fff;

}

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

@media(max-width:991px){

    .support-card:hover{

        transform:translateY(-8px);

    }

}

@media(max-width:767px){

    .support-card:hover{

        transform:translateY(-5px);

    }

    .support-card:hover .support-contact li{

        transform:none;

    }

}

@media(max-width:480px){

    .support-card::after{

        display:none;

    }

}

/*=========================================
        LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

    .support-section{
        padding:50px 0;
    }

    .support-grid{
        gap:24px;
    }

    .support-card{
        padding:35px 13px 30px;
    }

    .support-image{
        width:180px;
        height:180px;
    }

    .support-card h3{
        font-size:20px;
    }

}

/*=========================================
        LAPTOP
=========================================*/

@media (max-width:1200px){

    .support-section{
        padding:90px 0;
    }

    .support-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

    .support-card{
        padding:30px 22px;
    }

    .support-image{
        width:165px;
        height:165px;
        margin-bottom:22px;
    }

    .flag{
        width:44px;
        height:44px;
    }

    .flag img{
        width:36px;
        height:36px;
    }

    .support-card h3{
        font-size:24px;
    }

    .designation{
        font-size:14px;
        padding:9px 18px;
    }

}

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

@media (max-width:991px){

    .support-section{
        padding:80px 0;
    }

    .support-section .section-title{
        margin-bottom:45px;
    }

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

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

    .support-card{
        padding:28px 20px;
        border-radius:18px;
    }

    .support-image{
        width:155px;
        height:155px;
    }

    .support-card h3{
        font-size:22px;
    }

    .designation{
        min-height:44px;
    }

    .support-contact li{
        font-size:14px;
    }

    .support-contact li i{
        width:38px;
        height:38px;
        min-width:38px;
    }

}

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

@media (max-width:767px){

    .support-section{
        padding:70px 0;
    }

    .support-section .section-title{
        margin-bottom:35px;
    }

    .support-section .section-title h2{
        font-size:32px;
        line-height:1.3;
    }

    .support-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .support-card{
        padding:25px 18px;
        border-radius:16px;
    }

    .support-image{
        width:145px;
        height:145px;
        margin-bottom:20px;
    }

    .flag{
        width:42px;
        height:42px;
        top:15px;
        right:15px;
    }

    .flag img{
        width:34px;
        height:34px;
    }

    .support-card h3{
        font-size:20px;
    }

    .designation{
        font-size:13px;
        padding:8px 15px;
        border-radius:30px;
    }

    .card-line{
        margin:18px 0;
    }

    .support-contact{
        gap:14px;
    }

    .support-contact li{
        font-size:14px;
        gap:12px;
    }

    .support-contact li i{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:15px;
    }

}

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

@media (max-width:480px){

    .support-section{
        padding:60px 0;
    }

    .support-section .section-title h2{
        font-size:26px;
    }

    .support-grid{
        gap:18px;
    }

    .support-card{
        padding:22px 16px;
    }

    .support-image{
        width:130px;
        height:130px;
    }

    .flag{
        width:38px;
        height:38px;
    }

    .flag img{
        width:30px;
        height:30px;
    }

    .support-card h3{
        font-size:18px;
    }

    .designation{
        font-size:12px;
        padding:7px 12px;
    }

    .support-contact li{
        font-size:13px;
    }

    .support-contact li i{
        width:34px;
        height:34px;
        min-width:34px;
        font-size:14px;
    }

}

/*=========================================
        EXTRA SMALL DEVICES
=========================================*/

@media (max-width:360px){

    .support-section .section-title h2{
        font-size:22px;
    }

    .support-card{
        padding:20px 15px;
    }

    .support-image{
        width:115px;
        height:115px;
    }

    .support-card h3{
        font-size:17px;
    }

    .designation{
        font-size:11px;
        line-height:1.5;
    }

    .support-contact li{
        font-size:12px;
    }

    .support-contact li i{
        width:30px;
        height:30px;
        min-width:30px;
        font-size:13px;
    }

}

/*=========================================
        ACCESSIBILITY
=========================================*/

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

    .support-card,
    .support-card *,
    .support-image,
    .flag{

        transition:none !important;
        animation:none !important;

    }

}

.main-menu li { position: relative; }

/* Level 2 dropdown (Study Abroad -> USA, Canada, UK...) */
.main-menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: #fff;
    min-width: 250px;
    z-index: 10;
}

/* Level 3 dropdown (USA -> universities) - flyout to the RIGHT of "USA" */
.main-menu .dropdown .dropdown {
    top:-10px;
    left: 100%;
    width: 400px;           /* fixed width instead of max-content */
    max-width: 400px;
    display: none;
    flex-direction: column; /* stack universities vertically inside the 400px box */
    padding: 4px 0px;
    border-bottom: 1px solid #f1f1f1;
    gap: 2px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.main-menu li:hover > .dropdown {
    display: flex;
}

/* Each university row: logo + name, side by side, name wraps within the 400px */
.main-menu .dropdown .dropdown li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    white-space: normal;   /* allow text to wrap instead of running off-screen */
    width: 100%;
}

.main-menu .dropdown .dropdown li a {
    display: flex;
    gap: 10px;
    width: 100%;
}

.menu-item-logo {
    width: 35px;
    height: 35px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius:50%;
    margin-right:10px;
}

.menu-item-text {
    line-height: 1.4;
    white-space: normal;    /* critical: lets long titles wrap onto multiple lines */
    word-wrap: break-word;
    flex: 1;                /* takes remaining space next to the logo */
}

/* divider between universities since they're now stacked, not side-by-side */
.main-menu .dropdown .dropdown li:not(:last-child) {
    border-bottom: 1px solid #eee;
}


/*======================================
    FAST FACTS SECTION
======================================*/

.fast-facts-section{
    position:relative;
    padding:50px 0;
    background:#f8f8f6;
    overflow:hidden;
}
.facts-dots{
    position:absolute;
    width:180px;
    height:180px;
    opacity:.12;
    background-image:radial-gradient(#0d6b44 1.8px,transparent 1.8px);
    background-size:14px 14px;
    z-index:1;
}

.fast-facts-section .dots-left{
    left:20px;
    top:130px;
}

.fast-facts-section .dots-right{
    right:20px;
    top:60px;
}


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

.fast-facts-section .section-heading{
    position:relative;
    text-align:center;
    margin-bottom:50px;
    z-index:2;
}


/*======================================
    TOP DECORATION
======================================*/

.fast-facts-section .heading-decoration{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:18px;
}

.fast-facts-section .heading-decoration .line{
    width:140px;
    height:3px;
    background:#d7a21e;
    border-radius:50px;
    position:relative;
}

.fast-facts-section .heading-decoration .line::before,
.fast-facts-section .heading-decoration .line::after{
    content:"";
    position:absolute;
    top:50%;
    width:6px;
    height:6px;
    background:#d7a21e;
    border-radius:50%;
    transform:translateY(-50%);
}

.fast-facts-section .heading-decoration .line::before{
    left:-3px;
}

.fast-facts-section .heading-decoration .line::after{
    right:-3px;
}


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

.fast-facts-section .heading-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0d6b44;
    font-size:32px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}


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

.fast-facts-section .section-heading h2{
    margin:0;
    font-size:42px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
}

.fast-facts-section .section-heading h2 span{
    color:#0d6b44;
}

.fast-facts-section .section-heading h2{
    color:#101828;
}

.fast-facts-section .section-heading p{
    margin-top:15px;
    color:#555;
    font-size:22px;
    font-weight:400;
}

.facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    position:relative;
    z-index:2;
}


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

@media(max-width:1199px){

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

}


@media(max-width:991px){

    .fast-facts-section .section-heading h2{
        font-size:42px;
    }

    .fast-facts-section .section-heading p{
        font-size:18px;
    }

    .fast-facts-section .heading-decoration .line{
        width:90px;
    }

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

}


@media(max-width:767px){

    .fast-facts-section{
        padding:70px 0;
    }

    .fast-facts-section .section-heading{
        margin-bottom:45px;
    }

    .fast-facts-section .section-heading h2{
        font-size:36px;
    }

    .fast-facts-section .section-heading p{
        font-size:16px;
    }

    .fast-facts-section .heading-decoration{
        gap:12px;
    }

    .fast-facts-section .heading-decoration .line{
        width:55px;
    }

    .fast-facts-section .heading-icon{
        width:50px;
        height:50px;
        font-size:24px;
    }

    .facts-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .facts-dots{
        display:none;
    }

}


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

.fact-card{
    position:relative;
    background:#fff;
    border-radius:20px;
    padding:40px 15px 30px;
    text-align:center;
    overflow:hidden;
    border:1px solid #ededed;
    border-bottom:5px solid #0d6b44;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.fact-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}


/*=========================================
    CARD TOP SHINE
=========================================*/

.fact-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,#0d6b44,#d7a21e,#0d6b44);
    transform:scaleX(0);
    transition:.4s;
}

.fact-card:hover::before{
    transform:scaleX(1);
}


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

.fact-icon{
    width:76px;
    height:76px;

    margin:0 auto 22px;

    border-radius:50%;

    background:linear-gradient(180deg,#0f7a4b,#0b5a39);

    color:#fff;

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

    font-size:34px;

    box-shadow:0 12px 25px rgba(13,107,68,.25);

    transition:.35s;
}

.fact-card:hover .fact-icon{
    transform:rotateY(180deg);
}


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

.fact-card h3{
    margin:0;
    color:#0d6b44;
    font-size:22px;
    font-weight:700;
    font-family:Georgia,serif;
    line-height:1.25;
}


/*=========================================
    GOLD LINE
=========================================*/

.fast-facts-section .title-line{
    display:block;
    width:42px;
    height:3px;

    background:#f2b400;

    margin:16px auto 22px;

    border-radius:50px;
}


/*=========================================
    DESCRIPTION
=========================================*/

.fact-card p{
    margin:0;
    color:#444;
    font-size:16px;
    line-height:1.85;
}


/*=========================================
    LINK
=========================================*/

.fact-link{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:22px;

    color:#111;
    text-decoration:none;

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

    transition:.3s;
}

.fact-link i{
    color:#f2b400;
}

.fact-link:hover{
    color:#0d6b44;
}


/*=========================================
    ADDRESS
=========================================*/

.fact-card h5{
    margin:18px 0 10px;
    color:#0d6b44;
    font-size:20px;
    font-weight:700;
}

.address{
    color:#555;
    line-height:1.8;
}


/*=========================================
    WEATHER
=========================================*/

.weather-list{
    margin-top:18px;
    text-align:left;
}

.weather-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    font-size:16px;
}

.weather-item i{
    width:22px;
    text-align:center;
}

.weather-item .fa-sun{
    color:#f6b400;
}

.weather-item .fa-snowflake{
    color:#28a8ff;
}

.weather-item span{
    min-width:80px;
    font-weight:600;
    color:#0d6b44;
}

.weather-item strong{
    font-weight:500;
    color:#444;
}


/*=========================================
    CARD BACKGROUND EFFECT
=========================================*/

.fact-card::after{
    content:"";
    position:absolute;
    right:-45px;
    top:-45px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(13,107,68,.04);

    transition:.35s;
}

.fact-card:hover::after{
    transform:scale(1.3);
}


/*=========================================
    EVEN CARD BORDER
=========================================*/

.fact-card:nth-child(even){
    border-bottom-color:#d7a21e;
}


/*=========================================
    SMALL LAPTOP
=========================================*/

@media(max-width:1200px){

    .fact-card{
        padding:40px 24px 26px;
    }

    .fact-card h3{
        font-size:22px;
    }

    .fact-card p{
        font-size:16px;
    }

}


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

@media(max-width:991px){

    .fact-icon{
        width:68px;
        height:68px;
        font-size:30px;
    }

    .fact-card h3{
        font-size:22px;
    }

    .fact-card p{
        font-size:15px;
    }

}


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

@media(max-width:767px){

    .fact-card{
        padding:50px 22px 25px;
    }

    .fact-icon{
        width:64px;
        height:64px;
        font-size:28px;
    }

    .fact-card h3{
        font-size:22px;
    }

    .fact-card p{
        font-size:15px;
        line-height:1.75;
    }

    .weather-item{
        font-size:15px;
    }

    .fact-link{
        font-size:16px;
    }

}

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

.fact-icon{
    position:relative;
    overflow:hidden;
}

.fact-icon::before{
    content:"";
    position:absolute;
    top:-100%;
    left:-100%;
    width:200%;
    height:200%;
    background:linear-gradient(
        135deg,
        transparent 30%,
        rgba(255,255,255,.35) 50%,
        transparent 70%
    );
    transform:rotate(25deg);
    transition:.6s;
}

.fact-card:hover .fact-icon::before{
    top:100%;
    left:100%;
}

.fact-card:hover .fact-icon{
    background:linear-gradient(180deg,#0d8a55,#0b5c3a);
}


/*=========================================
    WEATHER
=========================================*/

.weather-list{
    margin-top:20px;
    border-top:1px solid #ececec;
    padding-top:18px;
}

.weather-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    font-size:15px;
    color:#444;
}

.weather-item:last-child{
    margin-bottom:0;
}

.weather-item i{
    width:20px;
    text-align:center;
}

.weather-item .fa-sun{
    color:#FDB813;
}

.weather-item .fa-snowflake{
    color:#42A5F5;
}

.weather-item span{
    min-width:75px;
    color:#0d6b44;
    font-weight:700;
}

.weather-item strong{
    font-weight:500;
    color:#444;
}


/*=========================================
    ADDRESS
=========================================*/

.fact-card h5{
    margin:18px 0 8px;
    font-size:18px;
    color:#0d6b44;
    font-weight:700;
}

.address{
    margin-top:0;
    font-size:15px;
    line-height:1.8;
}


/*=========================================
    HOVER EFFECT
=========================================*/

.fact-card:hover h3{
    color:#0b5a39;
}

.fact-card:hover .title-line{
    width:70px;
}


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

.fact-card,
.fact-icon,
.title-line,
.fact-card h3{
    transition:all .35s ease;
}


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

@media (max-width:991px){

    .fact-card{
        padding:55px 22px 28px;
    }

    .fact-icon{
        width:68px;
        height:68px;
        font-size:30px;
        margin-bottom:18px;
    }

    .fact-card h3{
        font-size:24px;
    }

    .fact-card p{
        font-size:15px;
        line-height:1.75;
    }

    .weather-item{
        font-size:14px;
    }

}


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

@media (max-width:767px){

    .fact-card{
        padding:50px 20px 25px;
        border-radius:18px;
    }

    .fact-icon{
        width:62px;
        height:62px;
        font-size:26px;
    }

    .fact-card h3{
        font-size:22px;
    }

    .fast-facts-section .title-line{
        margin:14px auto 18px;
    }

    .fact-card p{
        font-size:14px;
        line-height:1.7;
    }

    .weather-list{
        text-align:left;
    }

    .weather-item{
        gap:10px;
        font-size:13px;
    }

    .weather-item span{
        min-width:68px;
    }

    .fact-link{
        font-size:15px;
    }

}


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

@media (max-width:480px){

    .fact-card{
        padding:45px 18px 22px;
    }

    .fact-icon{
        width:58px;
        height:58px;
        font-size:24px;
    }

    .fact-card h3{
        font-size:20px;
    }

    .fact-card p{
        font-size:13px;
    }

    .weather-item{
        flex-wrap:wrap;
        gap:6px;
    }

    .weather-item span{
        min-width:auto;
    }

}

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

.overview-section{
    position:relative;
    padding:60px 0;
    background:#f8f8f5;
    overflow:hidden;
}

/*=========================================
    DECORATIVE DOTS
=========================================*/

.overview-dots{
    position:absolute;
    width:170px;
    height:170px;
    opacity:.12;
    background-image:radial-gradient(#0d6b44 1.8px, transparent 1.8px);
    background-size:14px 14px;
    pointer-events:none;
}

.overview-section .dots-left{
    top:35px;
    left:25px;
}

.overview-section .dots-right{
    top:40px;
    right:25px;
}

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

.overview-card{
    position:relative;
    background:#fff;
    border-radius:32px;
    padding:45px;
    overflow:hidden;
    box-shadow:
        0 12px 35px rgba(0,0,0,.06),
        0 25px 60px rgba(0,0,0,.08);
}

/*=========================================
    SOFT BACKGROUND GLOW
=========================================*/

.overview-card::before{
    content:"";
    position:absolute;
    left:-180px;
    bottom:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(13,107,68,.10) 0%,
        rgba(13,107,68,.05) 35%,
        transparent 72%);
    pointer-events:none;
    z-index:0;
}

.overview-card::after{
    content:"";
    position:absolute;
    top:-170px;
    right:-170px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,193,7,.08) 0%,
        rgba(255,193,7,.04) 35%,
        transparent 72%);
    pointer-events:none;
    z-index:0;
}

/*=========================================
    TAB AREA
=========================================*/

.overview-tabs{
    position:relative;
    z-index:5;

    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:45px;
}

/*=========================================
    TAB BUTTON
=========================================*/

.overview-tabs .tab-btn{

    position:relative;

    border:none;
    outline:none;
    cursor:pointer;

    padding:12px 34px;

    border-radius:50px;

    background:#fff;
    color:#222;

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

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

    transition:.35s ease;
}

.overview-tabs .tab-btn:hover{
    transform:translateY(-3px);
}

/*=========================================
    ACTIVE TAB
=========================================*/

.overview-tabs .tab-btn.active{

    color:#fff;

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

.overview-tabs .tab-btn.active::after{

    content:"";

    position:absolute;

    left:50%;
    transform:translateX(-50%);

    bottom:-7px;

    width:60px;
    height:4px;

    border-radius:50px;

    background:#ffc107;
}

/*=========================================
    HOVER EFFECT
=========================================*/

.overview-tabs .tab-btn:not(.active):hover{

    background:#0d6b44;
    color:#fff;
}

/*=========================================
    TAB CONTENT
=========================================*/

.overview-card .tab-content{
    display:none;
}

.overview-card .tab-content.active{
    display:block;
    animation:fadeIn .45s ease;
}

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

@keyframes fadeIn{

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

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

}

/*=========================================
    CONTENT WRAPPER
=========================================*/

.overview-wrapper{
    display:block;
}

.overview-content{
    flex:1;
    min-width:0;
}

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

.overview-heading{
    display:flex;
    align-items:center;
    gap:24px;
    margin-bottom:35px;
}

.overview-heading .heading-icon{
    width:90px;
    height:90px;
    min-width:90px;

    border-radius:50%;
    background:#fff;

    border:4px solid #f2f2f2;

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

    position:relative;

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

.overview-heading .heading-icon::before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;

    background:linear-gradient(
        180deg,
        #0d8750,
        #085234
    );
}

.overview-heading .heading-icon i{
    position:relative;
    z-index:2;
    font-size:34px;
    color:#fff;
}

.overview-heading .heading-text h2{
    margin:0;
    color:#0d6b44;
    font-size:42px;
    font-weight:700;

    font-family: var(--bodyFont);
}

.overview-heading .title-line{
    display:block;
    width:110px;
    height:4px;
    margin-top:14px;
    border-radius:50px;
    background:#ffc107;
}

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

.overview-image-area{
    float:right;
    width:340px;
    margin:0 0 25px 35px;
}

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

.overview-list{
    list-style:none;
    margin:0;
    padding:0;
}

.overview-list li{
    position:relative;
    margin-bottom:28px;
    padding-left:48px;
}

.overview-list li:last-child{
    margin-bottom:0;
}

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

.overview-list .list-icon{
    position:absolute;
    left:0;
    top:6px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:linear-gradient(
        180deg,
        #62d88b,
        #0d6b44
    );

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

    color:#fff;

    font-size:12px;

    box-shadow:0 5px 12px rgba(13,107,68,.25);

}

.overview-list p{

    margin:0;

    color:#444;

    font-size:17px;

    line-height:1.95;

    text-align:justify;

}

/*=========================================
    CLEAR FLOAT
=========================================*/

.overview-wrapper::after{
    content:"";
    display:block;
    clear:both;
}

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

.heading-text h2{
    transition:.35s;
}

.overview-card:hover .heading-text h2{
    color:#084b31;
}

.title-line{
    transition:.35s;
}

.overview-card:hover .title-line{
    width:145px;
}

/*=========================================
    LIST EFFECT
=========================================*/

.overview-list li{
    transition:.35s;
}

.overview-list li:hover{
    transform:translateX(8px);
}

.overview-list .list-icon{
    transition:.35s;
}

.overview-list li:hover .list-icon{
    transform:scale(1.15) rotate(12deg);
}

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

@media (max-width:991px){

    .overview-heading{
        gap:18px;
        margin-bottom:30px;
    }

    .overview-heading .heading-icon{
        width:75px;
        height:75px;
        min-width:75px;
    }

    .overview-heading .heading-icon i{
        font-size:28px;
    }

    .heading-text h2{
        font-size:38px;
    }

    .overview-image-area{

        float:none;

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

        margin:0 auto 35px;

    }

    .overview-list li{
        padding-left:42px;
    }

    .overview-list p{
        font-size:16px;
    }

}

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

@media (max-width:767px){

    .overview-heading{
        flex-direction:column;
        text-align:center;
    }

    .title-line{
        margin:12px auto 0;
    }

    .heading-text h2{
        font-size:32px;
    }

    .overview-image-area{

        width:100%;
        margin:0 auto 30px;

    }

    .overview-list li{

        padding-left:38px;

        margin-bottom:20px;

    }

    .overview-list p{

        font-size:15px;

        line-height:1.8;

    }

}

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

.overview-image-area{
    position:relative;
    float:right;
    width:420px;
    margin:0 0 30px 45px;
    z-index:5;
}

/*====================================================
    GREEN BACK SHAPE
====================================================*/

.overview-image-area .image-shape{
    position:absolute;
    right:-28px;
    bottom:-22px;
    width:110px;
    height:420px;
    background:linear-gradient(
        180deg,
        #18a75f,
        #0d6b44
    );

    border-radius:0 0 35px 35px;

    z-index:1;

}

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

.image-frame{

    position:relative;

    z-index:3;

    overflow:hidden;

    padding:14px;

    background:#fff;

    border:2px solid #1db56b;

    border-radius:35px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08),
        0 35px 70px rgba(0,0,0,.08);

    transition:.45s ease;

}

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

.image-frame::before{

    content:"";

    position:absolute;

    left:12px;
    right:12px;
    top:12px;
    bottom:12px;

    border:1px solid rgba(13,107,68,.15);

    border-radius:28px;

    pointer-events:none;

}

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

.image-frame img{
    width:100%;
    display:block;
}

/*====================================================
    DECORATIVE CORNER
====================================================*/

.image-frame::after{

    content:"";

    position:absolute;

    left:-12px;
    bottom:-14px;

    width:42px;
    height:42px;

    border-left:3px solid #0d6b44;
    border-bottom:3px solid #0d6b44;

    border-radius:0 0 0 18px;

}

/*====================================================
    YELLOW ACCENT
====================================================*/

.yellow-box{

    position:absolute;

    width:28px;
    height:28px;

    background:#ffc107;

    right:25px;
    bottom:18px;

    border-radius:6px;

    z-index:6;

    transition:.35s;

}

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

.overview-card:hover .image-frame{

    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.12),
        0 45px 80px rgba(0,0,0,.12);

}

.overview-card:hover .image-frame img{

    transform:scale(1.06);

}

.overview-card:hover .yellow-box{

    transform:rotate(45deg);

}

.overview-card:hover .image-shape{

    transform:translateY(-12px);

}

/*====================================================
    TRANSITIONS
====================================================*/

.image-frame,
.image-frame img,
.image-shape,
.yellow-box{

    transition:all .4s ease;

}

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

@media (max-width:991px){

    .overview-image-area{

        float:none;

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

        margin:0 auto 35px;

    }

    .image-frame{

        border-radius:30px;

    }

    .image-frame img{

        border-radius:20px;

    }

    .overview-image-area .image-shape{

        height:400px;
        right:-18px;
        width:90px;

    }

}

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

@media (max-width:767px){

    .overview-image-area{

        width:100%;
        max-width:100%;

        margin:0 auto 25px;

    }

    .image-frame{

        padding:10px;

        border-radius:22px;

    }

    .image-frame img{

        border-radius:16px;

    }

    .overview-image-area .image-shape{

        width:70px;
        height:280px;

        right:-10px;
        bottom:-15px;

    }

    .yellow-box{

        width:20px;
        height:20px;

        right:16px;
        bottom:14px;

    }

}

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

@media (max-width:480px){

    .overview-image-area .image-shape{
        display:none;
    }

    .yellow-box{
        width:16px;
        height:16px;
        right:12px;
        bottom:12px;
    }
}


/* ==========================================
   ADMISSION SECTION
========================================== */

.admission-section {
    position: relative;
    width: 100%;
    min-height: 690px;
    padding: 28px 20px 50px;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(245, 249, 247, 0.8) 0%,
            rgba(255, 255, 255, 1) 55%
        );
}

.admission-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.95) 0%,
            rgba(255,255,255,0.90) 65%,
            rgba(231,243,238,0.65) 100%
        );

    pointer-events: none;
}


.admission-bg {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
}


/* Left decorative China building */
.admission-bg-left {
    left: -15px;
    bottom: -15px;
    width: 410px;
    height: 330px;
    background:
        linear-gradient(
            to top,
            rgba(0,103,71,.55),
            rgba(0,103,71,.05)
        );

    clip-path: polygon(
        0 100%,
        0 58%,
        7% 55%,
        11% 43%,
        20% 48%,
        25% 31%,
        36% 37%,
        44% 24%,
        54% 32%,
        63% 20%,
        73% 34%,
        84% 28%,
        100% 43%,
        100% 100%
    );
}


/* Right decorative arch */
.admission-bg-right {
    right: -20px;
    bottom: -25px;
    width: 400px;
    height: 300px;
    border: 35px solid rgba(0,103,71,.16);
    border-bottom: 0;
    border-radius: 230px 230px 0 0;
}


/* ==========================================
   CONTAINER
========================================== */

.admission-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}


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

.admission-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    margin-bottom: 30px;
}


.admission-heading .heading-title {
    position: relative;
    min-width: 330px;
    text-align: center;
}


.admission-heading .heading-title h2 {
    margin: 0;
    color: var(--primary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -1px;
}


/* Graduation cap */

.admission-heading .cap-icon {
    width: 58px;
    height: 43px;
    margin: 0 auto -4px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.admission-heading .cap-icon svg {
    width: 52px;
    height: 52px;
}


/* Yellow line underneath */

.heading-bottom-line {
    width: 90px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 10px;
    background: var(--secondary);
}


/* Heading side decoration */

.admission-heading .heading-decoration {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 130px;
}


.left-decoration {
    justify-content: flex-end;
}


.right-decoration {
    justify-content: flex-start;
}


.yellow-line {
    display: block;
    width: 82px;
    height: 3px;
    border-radius: 10px;
    background: var(--secondary);
}


/* Small dots */

.admission-section .dots {
    display: block;
    width: 30px;
    height: 14px;
    background-image: radial-gradient(
        circle,
        #b7bdbb 2px,
        transparent 2.5px
    );
    background-size: 10px 7px;
}

.admission-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
    width: 100%;
}


.admission-card {
    position: relative;
    min-height: 380px;
    padding: 25px 15px 27px;
    overflow: hidden;
    text-align: center;
    background: rgba(255,255,255,.96);
    border-radius: 17px;
    border: 1px solid #e9eeee;
    border-bottom: 5px solid var(--primary);
    box-shadow:
        0 8px 20px rgba(0, 60, 40, 0.09);
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.admission-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 16px 30px rgba(0, 60, 40, .15);
}


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

.card-corner {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 64px;
    height: 32px;
    background: var(--primary);
    border-radius:
        0
        0
        0
        42px;
}


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

.admission-icon {
    position: relative;

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

    width: 88px;
    height: 88px;

    margin: 0 auto 17px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #007451,
            #004f3a
        );

    border: 5px solid #dce9e4;

    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.4),
        0 0 0 2px #c5dbd3;
}


.admission-icon::after {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

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


.admission-icon svg {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;
}


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

.admission-card h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--primary);

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

    line-height: 1.35;
}


/* ==========================================
   CARD YELLOW LINE
========================================== */

.card-line {
    width: 54px;
    height: 3px;

    margin: 14px auto 17px;

    background: var(--secondary);

    border-radius: 5px;
}


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

.admission-card p {
    margin: 0;

    color: #242424;

    font-size: 15.5px;
    font-weight: 400;

    line-height: 1.85;
}


.admission-card p strong {
    color: var(--primary);

    font-weight: 700;
}


/* ==========================================
   APPLY BUTTON
========================================== */

.admission-button-wrap {
    display: flex;

    justify-content: center;

    margin-top: 33px;
}


.admission-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    min-width: 223px;
    height: 56px;

    padding: 0 12px 0 28px;

    color: #111;
    text-decoration: none;

    font-size: 19px;
    font-weight: 500;

    background: var(--secondary);

    border-radius: 9px;

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

    transition: all .3s ease;
}


.admission-button:hover {
    color: #111;

    background: #ffca28;

    transform: translateY(-3px);

    box-shadow:
        0 9px 20px rgba(255,185,0,.30);
}


.button-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: var(--primary);
}


.button-arrow svg {
    width: 19px;
    height: 19px;
}

@media (min-width: 1400px) {
    .admission-container {
        max-width: 1300px;
    }
    .admission-card {
        min-height: 380px;
    }
}

@media (max-width: 1200px) {
    .admission-section {
        padding-left: 25px;
        padding-right: 25px;
    }

    .admission-cards {
        gap: 14px;
    }

    .admission-card {
        padding: 23px 18px 25px;
    }

    .admission-card h3 {
        font-size: 18px;
    }

    .admission-card p {
        font-size: 14px;
        line-height: 1.75;
    }

    .admission-icon {
        width: 80px;
        height: 80px;
    }

    .heading-title h2 {
        font-size: 44px;
    }
}

@media (max-width: 991px) {

    .admission-section {
        min-height: auto;

        padding-top: 35px;
        padding-bottom: 80px;
    }

    .admission-heading {
        margin-bottom: 35px;
    }

    .admission-cards {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .admission-card {
        min-height: 360px;

        padding: 25px;
    }

    .admission-card h3 {
        font-size: 20px;
    }

    .admission-card p {
        font-size: 15px;
    }

    .admission-heading .heading-decoration {
        width: 100px;
    }

    .yellow-line {
        width: 55px;
    }
}

@media (max-width: 767px) {

    .admission-section {
        padding:
            30px
            15px
            65px;
    }


    /* Heading */

    .admission-heading {
        display: block;

        margin-bottom: 30px;
    }


    .admission-heading .heading-decoration {
        display: none;
    }


    .admission-heading .heading-title {
        min-width: auto;
    }


    .admission-heading .heading-title h2 {
        font-size: 36px;
    }


    .admission-heading .cap-icon {
        width: 50px;
        height: 40px;
    }


    .admission-heading .cap-icon svg {
        width: 45px;
        height: 45px;
    }


    .heading-bottom-line {
        width: 70px;

        margin-top: 13px;
    }


    /* Cards */

    .admission-cards {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .admission-card {
        min-height: auto;

        padding:
            28px
            22px
            30px;
    }


    .admission-icon {
        width: 82px;
        height: 82px;

        margin-bottom: 15px;
    }


    .admission-card h3 {
        font-size: 20px;
    }


    .admission-card p {
        font-size: 15px;

        line-height: 1.75;
    }


    /* Button */

    .admission-button-wrap {
        margin-top: 25px;
    }

    .admission-button {
        min-width: 205px;
        height: 54px;
        font-size: 17px;
    }


    /* Background */

    .admission-bg-left {
        width: 250px;
        height: 200px;
    }


    .admission-bg-right {
        width: 250px;
        height: 190px;
        border-width: 25px;
    }
}


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

@media (max-width: 480px) {

    .admission-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .heading-title h2 {
        font-size: 32px;
    }

    .admission-card {
        border-radius: 14px;
        padding:
            25px
            18px
            28px;
    }

    .admission-card p {
        font-size: 14px;
    }

    .card-corner {
        width: 55px;
        height: 28px;
    }
}

.fees-section {
    position: relative;
    width: 100%;
    min-height: 373px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(15, 110, 91, .65) 0%,
            rgba(0, 77, 57, .30) 30%,
            transparent 60%
        ),
        linear-gradient(
            105deg,
            #004b35 0%,
            #005b42 45%,
            #004c3b 100%
        );
}

.fees-section::before {
    content: "";
    position: absolute;
    top: -160px;
    right: 180px;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.03) 35%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.fees-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1320px;
    min-height: 373px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 53% 47%;
    align-items: center;
}


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

.fees-content {
    position: relative;
    text-align: center;
    padding-top: 4px;
}


.fees-content h2 {
    margin: 0;
    color: #ffffff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1.5px;
}


.fees-content h2 span {
    color: var(--secondary);
}


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

.fees-heading-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 13px;
}


.fees-heading-decoration .yellow-line {
    display: block;
    width: 92px;
    height: 2px;
    background: var(--secondary);
}


.fees-heading-decoration .small-dots {
    width: 27px;
    height: 10px;
    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.55) 1.5px,
            transparent 2px
        );
    background-size: 8px 6px;
}


.fees-heading-decoration .wave-small {
    display: flex;

    width: 40px;
    height: 25px;

    align-items: center;
}


.fees-heading-decoration .wave-small svg {
    width: 100%;
    height: 100%;
}


/* =========================================
   DESCRIPTION
========================================= */

.fees-description {
    margin: 22px 0 30px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 400;

    line-height: 1.95;
}


/* =========================================
   DOWNLOAD BUTTON
========================================= */

.fees-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 301px;
    height: 51px;
    padding: 0 23px;
    color: #111111;
    background: var(--secondary);
    border-radius: 8px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    box-shadow:
        0 5px 12px rgba(0,0,0,.14);
    transition:
        .3s ease;
}


.fees-download-btn:hover {
    color: #111;
    background: #ffc82d;
    transform: translateY(-2px);
    box-shadow:
        0 8px 18px rgba(0,0,0,.2);
}


.download-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
}


.download-icon svg {
    width: 22px;
    height: 22px;
}


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

.fees-visual {
    position: relative;
    width: 100%;
    height: 373px;
    overflow: visible;
}


/* =========================================
   MEDICAL PLUS SYMBOLS
========================================= */

.medical-plus-bg {
    position: absolute;
    right: 5px;
    top: 10px;
    width: 600px;
    height: 355px;
    pointer-events: none;
}


.medical-plus-bg span {
    position: absolute;

    color: rgba(196, 221, 216, .18);

    font-family: var(--bodyFont);

    font-weight: 300;

    line-height: 1;
}


.medical-plus-bg span:nth-child(1) {
    top: 15px;
    right: 150px;
    font-size: 76px;
}

.medical-plus-bg span:nth-child(2) {
    top: 40px;
    right: 40px;
    font-size: 54px;
}

.medical-plus-bg span:nth-child(3) {
    top: 80px;
    right: 250px;
    font-size: 85px;
}

.medical-plus-bg span:nth-child(4) {
    top: 110px;
    right: 100px;
    font-size: 55px;
}

.medical-plus-bg span:nth-child(5) {
    top: 140px;
    right: 310px;
    font-size: 48px;
}

.medical-plus-bg span:nth-child(6) {
    top: 160px;
    right: 20px;
    font-size: 90px;
}

.medical-plus-bg span:nth-child(7) {
    top: 190px;
    right: 180px;
    font-size: 70px;
}

.medical-plus-bg span:nth-child(8) {
    top: 230px;
    right: 380px;
    font-size: 55px;
}

.medical-plus-bg span:nth-child(9) {
    top: 255px;
    right: 110px;
    font-size: 62px;
}

.medical-plus-bg span:nth-child(10) {
    top: 285px;
    right: 260px;
    font-size: 48px;
}

.medical-plus-bg span:nth-child(11) {
    top: 35px;
    right: 370px;
    font-size: 43px;
}

.medical-plus-bg span:nth-child(12) {
    top: 115px;
    right: 450px;
    font-size: 60px;
}

.medical-plus-bg span:nth-child(13) {
    top: 200px;
    right: 450px;
    font-size: 42px;
}

.medical-plus-bg span:nth-child(14) {
    top: 270px;
    right: 430px;
    font-size: 65px;
}


/* =========================================
   ECG LINE
========================================= */

.ecg-line {
    position: absolute;

    left: -60px;
    top: 157px;

    width: 760px;
    height: 115px;

    z-index: 3;

    opacity: .92;
}


.ecg-line svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================
   STETHOSCOPE
========================================= */

.stethoscope {
    position: absolute;

    z-index: 6;

    top: 28px;
    left: 215px;

    width: 250px;
    height: 310px;
}


/* Ear pieces */

.stetho-earpiece {
    position: absolute;

    top: 0;
    left: 60px;

    width: 110px;
    height: 60px;
}


.ear-left,
.ear-right {
    position: absolute;

    width: 12px;
    height: 28px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #aaa,
            #f4f4f4,
            #777
        );

    box-shadow:
        1px 2px 3px rgba(0,0,0,.3);

    transform: rotate(-25deg);
}


.ear-left {
    left: 5px;
    top: 0;
}


.ear-right {
    right: 7px;
    top: 4px;

    transform: rotate(25deg);
}


/* =========================================
   STETHOSCOPE TUBES
========================================= */

.stetho-tube {
    position: absolute;

    border: 5px solid #54c6bb;

    border-top: 0;

    box-shadow:
        inset 1px 0 2px rgba(255,255,255,.7),
        1px 2px 3px rgba(0,0,0,.25);

    border-radius:
        0 0 90px 90px;
}


.tube-one {
    top: 28px;
    left: 68px;

    width: 110px;
    height: 130px;

    transform: rotate(7deg);

    border-left-color: #68d5ca;
}


.tube-two {
    top: 42px;
    left: 110px;

    width: 100px;
    height: 135px;

    transform: rotate(-12deg);

    border-right-color: #44b7ad;
}


.tube-three {
    top: 118px;
    left: 92px;

    width: 130px;
    height: 85px;

    transform:
        rotate(20deg);

    border-color: #39afa5;
    border-top: 5px solid #39afa5;
    border-bottom: 0;

    border-radius: 50%;
}


/* =========================================
   STETHOSCOPE CHEST PIECE
========================================= */

.stetho-chest {
    position: absolute;

    top: 200px;
    left: 118px;

    width: 91px;
    height: 91px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #e5e5e5 35%,
            #969696 70%,
            #555 100%
        );

    border: 4px solid #777;

    box-shadow:
        4px 6px 8px rgba(0,0,0,.35);
}


.stetho-chest::before {
    content: "";

    position: absolute;

    top: -12px;
    left: 25px;

    width: 34px;
    height: 17px;

    border-radius: 50%;

    background: #555;

    border: 3px solid #ddd;
}


.chest-inner {
    position: absolute;

    top: 19px;
    left: 19px;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    border: 2px solid #777;

    background:
        radial-gradient(
            circle,
            #eeeeee 0%,
            #cccccc 55%,
            #999 100%
        );
}


/* =========================================
   DECORATIVE CIRCLES
========================================= */

.fees-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.fees-circle-1 {
    width: 120px;
    height: 120px;

    top: -70px;
    left: 185px;

    background: rgba(0,0,0,.08);
}


.fees-circle-2 {
    width: 210px;
    height: 210px;

    left: -110px;
    bottom: -115px;

    border: 16px solid rgba(255,255,255,.035);
}


.fees-circle-3 {
    width: 150px;
    height: 150px;

    left: -55px;
    bottom: -75px;

    border: 10px solid rgba(255,255,255,.035);
}


/* =========================================
   LEFT DOT PATTERN
========================================= */

.fees-dots-left {
    position: absolute;
    z-index: 2;
    top: 68px;
    left: 49px;
    display: grid;
    grid-template-columns:
        repeat(5, 5px);
    gap: 8px;
    width: 55px;
}


.fees-dots-left span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
}

@media (min-width: 1400px) {

    .fees-container {
        max-width: 1200px;
    }

    .fees-content h2 {
        font-size: 50px;
    }

    .fees-description {
        font-size: 18px;
    }

    .stethoscope {
        left: 235px;
    }

    .ecg-line {
        left: -45px;
        width: 800px;
    }
}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1200px) {

    .fees-container {
        max-width: 1000px;
    }

    .fees-content h2 {
        font-size: 43px;
    }

    .fees-description {
        font-size: 15px;
    }

    .fees-download-btn {
        min-width: 285px;
    }

    .stethoscope {
        left: 160px;

        transform: scale(.9);
        transform-origin: top left;
    }

    .ecg-line {
        left: -100px;

        width: 690px;
    }

    .medical-plus-bg {
        right: -80px;
    }
}


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

@media (max-width: 991px) {

    .fees-section {
        min-height: 600px;
    }

    .fees-container {
        grid-template-columns: 1fr;

        min-height: 600px;

        padding: 45px 30px;
    }

    .fees-content {
        z-index: 10;
    }

    .fees-content h2 {
        font-size: 42px;
    }

    .fees-description {
        margin-top: 20px;
    }

    .fees-visual {
        position: absolute;

        right: 0;
        bottom: 0;

        width: 100%;
        height: 270px;

        opacity: .35;
    }

    .stethoscope {
        left: 50%;

        transform:
            translateX(-10%)
            scale(.72);
    }

    .ecg-line {
        left: 15%;

        width: 70%;
    }

    .medical-plus-bg {
        right: 0;

        opacity: .5;
    }
}


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

@media (max-width: 767px) {

    .fees-section {
        min-height: 620px;
    }

    .fees-container {
        min-height: 620px;

        padding:
            45px
            18px
            35px;
    }

    .fees-content h2 {
        font-size: 36px;

        letter-spacing: -.8px;
    }

    .fees-heading-decoration {
        margin-top: 10px;
    }

    .yellow-line {
        width: 65px;
    }

    .fees-description {
        margin-top: 20px;
        margin-bottom: 25px;

        font-size: 14px;

        line-height: 1.8;
    }

    .fees-description br {
        display: none;
    }

    .fees-download-btn {
        min-width: 270px;

        height: 50px;

        font-size: 16px;
    }

    .fees-visual {
        height: 230px;

        opacity: .25;
    }

    .stethoscope {
        left: 52%;

        transform:
            translateX(-10%)
            scale(.58);
    }

    .ecg-line {
        top: 100px;

        left: 0;

        width: 100%;
    }

    .fees-dots-left {
        left: 20px;
        top: 35px;
    }

    .medical-plus-bg {
        transform: scale(.75);
        transform-origin: right top;
    }
}


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

@media (max-width: 480px) {

    .fees-section {
        min-height: 590px;
    }

    .fees-container {
        min-height: 590px;

        padding:
            40px
            14px
            30px;
    }

    .fees-content h2 {
        font-size: 32px;
    }

    .fees-heading-decoration {
        gap: 5px;
    }

    .small-dots {
        width: 20px;
    }

    .yellow-line {
        width: 52px;
    }

    .wave-small {
        width: 32px;
    }

    .fees-description {
        font-size: 13.5px;
    }

    .fees-download-btn {
        min-width: 250px;

        padding: 0 15px;

        font-size: 15px;
    }

    .stethoscope {
        left: 48%;

        transform:
            translateX(-10%)
            scale(.5);
    }
}

.gallery-section{
    position:relative;
    padding:70px 20px 90px;
    overflow:hidden;
    background:#f3f4f2;
  }
  /* ---------- Heading ---------- */
  .gallery-heading{
    text-align:center;
    margin-bottom:45px;
  }

  .gallery-heading h2{
    font-size:44px;
    font-weight:800;
    color:var(--primary);
    margin:0 0 14px;
  }

  .gallery-heading .heading-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-bottom:14px;
  }

  .gallery-heading .heading-divider .line{
    height:2px;
    width:120px;
    background:var(--primary);
  }

  .gallery-heading .heading-divider .icon-circle{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
  }

  .gallery-heading p{
    color: #222;
    font-size:16px;
    margin:0;
  }

  /* ---------- Grid ---------- */
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }

  .gallery-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }

  .gallery-card .img-wrap{
    width:100%;
    aspect-ratio:16/9.3;
    overflow:hidden;
  }

  .gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .gallery-card-label{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
  }

  .gallery-card-label .icon-box{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:6px;
    background:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
  }

  .gallery-card-label span{
    font-size:16px;
    font-weight:600;
    color:#1c1c1c;
  }

  /* ---------- Button ---------- */
  .gallery-btn-wrap{
    text-align:center;
    margin-top:45px;
  }

  .gallery-section .view-more-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:600;
    padding:14px 26px;
    border-radius:6px;
    text-decoration:none;
    border:none;
    cursor:pointer;
  }

  .gallery-section .view-more-btn .arrow-circle{
    width:26px;
    height:26px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
  }

  .gallery-section .view-more-btn:hover{
    background:var(--primary);
  }

  /* ---------- Background dots (decorative) ---------- */
  .gallery-section .bg-dots{
    position:absolute;
    width:140px;
    height:140px;
    background-image:radial-gradient(#c9c9c9 1.5px, transparent 1.5px);
    background-size:14px 14px;
    opacity:0.5;
    z-index:1;
  }
  .gallery-section .bg-dots.top-left{ top:20px; left:20px; }
  .gallery-section .bg-dots.bottom-right{ bottom:20px; right:20px; }

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:600px){
    .gallery-grid{ grid-template-columns:1fr; }
    .gallery-heading h2{ font-size:32px; }
    .gallery-heading .heading-divider .line{ width:60px; }
  }
  
  


/* ================================
   UNIVERSITY PAGE POPUP
================================ */

.university-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.university-popup.show {
    display: flex !important;
}

.university-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.university-popup-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
    animation: universityPopupAnimation .5s ease;
}

/* Close Button */

.university-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #222;

    font-size: 20px;

    cursor: pointer;

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

    transition: all .3s ease;
}

.university-popup-close:hover {
    background: #e63946;
    color: #fff;
}

.university-popup-content .study-form {
    width: 100%;
    margin: 0;
}

/* Animation */

@keyframes universityPopupAnimation {

    from {
        opacity: 0;
        transform: translateY(50px) scale(.95);
    }

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

}

/* Disable background scroll */

body.university-popup-open {
    overflow: hidden;
}


/* Mobile */

@media(max-width:767px) {

    .university-popup {
        padding: 12px;
    }

    .university-popup-content {
        max-width: 100%;
        max-height: 94vh;
    }

    .university-popup-close {
        width: 34px;
        height: 34px;
        font-size: 17px;
        top: 8px;
        right: 8px;
    }

}


/* =========================================================
   EVENTS PAGE
========================================================= */

.events-page {
    width: 100%;
    padding: 120px 0;
    background: #f8faf9;
    overflow: hidden;
}


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

.events-heading {
    text-align: center;
    margin-bottom: 50px;
}

.events-heading h1 {
    margin: 0 0 12px;
    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary, #0d6b44);
}

.events-heading p {
    margin: 0;
    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #777;
}


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

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
    align-items: stretch;
}


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

.event-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.07);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}


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

.event-image {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: #eeeeee;
}

.event-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.event-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.event-card:hover .event-image img {
    transform: scale(1.05);
}


/* =========================================================
   EVENT CONTENT
========================================================= */

.event-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}


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

.event-content h3 {
    margin: 0 0 12px;
    padding: 0;
    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.4;
}

.event-content h3 a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s ease;
}

.event-content h3 a:hover {
    color: var(--primary, #0d6b44);
}


/* =========================================================
   EVENT EXCERPT
========================================================= */

.event-excerpt {
    margin: 0 0 22px;
    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    color: #666;
}

.event-excerpt p {
    margin: 0;
}


/* =========================================================
   VIEW EVENT BUTTON
========================================================= */

.event-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;

    margin-top: auto;
    padding: 11px 22px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    color: #ffffff !important;
    background: var(--primary, #0d6b44);

    border-radius: 6px;
    text-decoration: none !important;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.event-btn:hover {
    color: #ffffff !important;
    background: var(--secondary, #f7b926);
    transform: translateY(-2px);
}


/* =========================================================
   NO EVENTS
========================================================= */

.no-events {
    grid-column: 1 / -1;
    width: 100%;
    padding: 60px 25px;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
}

.no-events p {
    margin: 0;
    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 16px;
    color: #777;
}


/* =========================================================
   LARGE TABLET
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .events-page {
        padding: 70px 0;
    }

    .events-page .container {
        max-width: 100%;
        padding: 0 30px;
    }

    .events-grid {
        gap: 25px;
    }

    .event-image {
        height: 220px;
    }

    .event-content {
        padding: 22px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
========================================================= */

@media (max-width: 991px) {

    .events-page {
        padding: 65px 0;
    }

    .events-page .container {
        padding: 0 25px;
    }

    .events-heading {
        margin-bottom: 40px;
    }

    .events-heading h1 {
        font-size: 38px;
    }

    .events-heading p {
        font-size: 15px;
    }

    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

    .event-image {
        height: 220px;
    }

    .event-content {
        padding: 22px;
    }

    .event-content h3 {
        font-size: 20px;
    }

}


/* =========================================================
   SMALL TABLET / LARGE MOBILE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

    .events-page {
        padding: 55px 0;
    }

    .events-page .container {
        padding: 0 20px;
    }

    .events-heading {
        margin-bottom: 35px;
    }

    .events-heading h1 {
        font-size: 34px;
    }

    .events-heading p {
        max-width: 600px;
        margin: 0 auto;
        font-size: 15px;
    }

    .events-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .event-card {
        max-width: 600px;
        margin: 0 auto;
    }

    .event-image {
        height: 260px;
    }

    .event-content {
        padding: 24px;
    }

    .event-content h3 {
        font-size: 21px;
    }

    .event-excerpt {
        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
   480px - 575px
========================================================= */

@media (max-width: 575px) {

    .events-page {
        padding: 65px 0;
    }

    .events-page .container {
        padding: 0 16px;
    }

    .events-heading {
        margin-bottom: 30px;
    }

    .events-heading h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .events-heading p {
        font-size: 14px;
        line-height: 1.6;
    }

    .events-grid {
        gap: 20px;
    }

    .event-card {
        border-radius: 11px;
    }

    .event-image {
        height: 220px;
    }

    .event-content {
        padding: 20px;
    }

    .event-content h3 {
        margin-bottom: 10px;
        font-size: 19px;
        line-height: 1.4;
    }

    .event-excerpt {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.65;
    }

    .event-btn {
        width: auto;
        padding: 10px 19px;
        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   Up to 375px
========================================================= */

@media (max-width: 375px) {

    .events-page {
        padding: 40px 0;
    }

    .events-page .container {
        padding: 0 14px;
    }

    .events-heading h1 {
        font-size: 27px;
    }

    .events-heading p {
        font-size: 13px;
    }

    .event-image {
        height: 200px;
    }

    .event-content {
        padding: 18px;
    }

    .event-content h3 {
        font-size: 18px;
    }

    .event-excerpt {
        font-size: 13px;
    }

    .event-btn {
        padding: 9px 17px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.event-btn:focus,
.event-content h3 a:focus,
.event-image a:focus {
    outline: 2px solid var(--secondary, #f7b926);
    outline-offset: 3px;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .event-card,
    .event-image img,
    .event-btn,
    .event-content h3 a {
        transition: none;
    }

    .event-card:hover {
        transform: none;
    }

    .event-card:hover .event-image img {
        transform: none;
    }

}



/* =========================================
   SINGLE EVENT PAGE
========================================= */

/* =========================================
   SINGLE EVENT PAGE
========================================= */

.single-event-page {
    width: 100%;
    max-width: 100%;
    padding: 70px 0;
    background: #fff;
}

.single-event-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: hidden;
}


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

.single-event-header {
    width: 100%;
    text-align: center;
    margin-bottom: 45px;
}

.single-event-header h1 {
    margin: 0;
    color: #17325c;
    font-size: 42px;
    line-height: 1.3;
    font-weight: 600;
    font-family: var(--bodyFont);
}


/* =========================================
   IMAGE + CONTENT
========================================= */

.single-event-main {
    width: 100%;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    gap: 50px;
}


/* =========================================
   LEFT FEATURED IMAGE
========================================= */

.single-event-featured {
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

.single-event-featured img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 15px;
}


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

.single-event-content {
    width: 100%;
    max-width: 100%;
    font-size: 17px;
    line-height: 1.8;
    color: #555;
}

.single-event-content p {
    margin: 0 0 20px;
    font-family: var(--bodyFont);
}

.single-event-content h2 {
    color: #17325c;
    margin: 0 0 15px;
}

.single-event-content h3 {
    color: #17325c;
}

.single-event-content ul,
.single-event-content ol {
    margin-bottom: 20px;
}

.single-event-content img {
    max-width: 100%;
    height: auto;
}


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

.event-gallery-section {
    width: 100%;
    margin-top: 80px;
}

.event-gallery-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 35px;
}

.event-gallery-heading h2 {
    margin: 0 0 8px;
    color: #17325c;
    font-size: 34px;
    line-height: 1.3;
}

.event-gallery-heading p {
    margin: 0;
    color: #777;
    font-size: 16px;
}


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

.event-gallery-grid {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 20px !important;
}


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

.event-gallery-item {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
}

.event-gallery-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.event-gallery-item img {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    transition: transform 0.4s ease;
}


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

.event-gallery-item:hover img {
    transform: scale(1.08);
}


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

.gallery-overlay {
    position: absolute;
    inset: 0;

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

    background: rgba(23, 50, 92, 0.55);

    opacity: 0;

    transition: all 0.3s ease;
}

.gallery-overlay i {
    color: #fff;
    font-size: 28px;
}

.event-gallery-item:hover .gallery-overlay {
    opacity: 1;
}


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

@media (max-width: 991px) {

    .single-event-page {
        padding: 60px 0;
    }

    .single-event-main {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .single-event-header h1 {
        font-size: 36px;
    }

    .event-gallery-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}


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

@media (max-width: 767px) {

    .single-event-page {
        padding: 100px 0;
    }

    .single-event-inner {
        padding: 0 15px;
    }

    .single-event-header {
        margin-bottom: 30px;
    }

    .single-event-header h1 {
        font-size: 30px;
    }


    /* IMAGE ABOVE CONTENT */

    .single-event-main {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .single-event-featured {
        width: 100%;
    }

    .single-event-content {
        font-size: 16px;
        line-height: 1.7;
    }


    /* GALLERY */

    .event-gallery-section {
        margin-top: 55px;
    }

    .event-gallery-heading {
        margin-bottom: 25px;
    }

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

    .event-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

}


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

@media (max-width: 480px) {

    .single-event-header h1 {
        font-size: 27px;
    }

    .event-gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================
   LAST / NESTED DROPDOWN SCROLL
   ========================================= */

.main-menu .dropdown {
    
    max-height: calc(110vh - 160px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Scrollbar */
.main-menu .dropdown::-webkit-scrollbar {
    width: 6px;
}

.main-menu .dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.main-menu .dropdown::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

.main-menu .dropdown::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Firefox */
.main-menu .dropdown {
    scrollbar-width: thin;
    scrollbar-color: #999 #f1f1f1;
}





.leadership-section {
    position: relative;
    width: 100%;
    padding: 28px 0 55px;
    background: #f8fcfa;
    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.leadership-container {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 25px;
}


/* =========================================
   BACKGROUND CIRCLES
========================================= */

.leadership-bg-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 107, 71, 0.035);
    pointer-events: none;
}

.circle-left {
    width: 270px;
    height: 270px;
    top: -150px;
    left: -90px;
}

.circle-right {
    width: 300px;
    height: 300px;
    top: -160px;
    right: -100px;
}


/* =========================================
   DOT PATTERN
========================================= */

.leadership-dots {
    position: absolute;
    width: 100px;
    height: 120px;
    opacity: .35;
    background-image: radial-gradient(
        var(--primary) 1.8px,
        transparent 1.8px
    );
    background-size: 15px 15px;
    pointer-events: none;
}

.dots-left {
    top: 130px;
    left: 30px;
}

.dots-right {
    top: 275px;
    right: 25px;
}


/* =========================================
   TOP LEADER AREA
========================================= */

.leadership-top {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 5;
}

.leader-top-card {
    position: relative;
    width: 465px;
    min-height: 165px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: #fff;
    border: 2px solid var(--primary);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .07);
}


/* =========================================
   SECOND LEADER
========================================= */

.leadership-second {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    z-index: 5;
}

.leader-second-card {
    position: relative;
    width: 430px;
    min-height: 165px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    background: #eaf3ed;
    border: 2px solid #d2e5dc;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}


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

.leader-photo-wrap {
    position: relative;
    flex: 0 0 140px;
}

.leader-photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .15);
}


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

.linkedin-badge {
    position: absolute;
    right: -2px;
    bottom: 1px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border: 3px solid #fff;
    text-decoration: none;
    font-size: 20px;
    z-index: 3;
}


/* =========================================
   TOP LEADER CONTENT
========================================= */

.leader-top-info {
    min-width: 0;
    flex: 1;
}

.leader-top-info h2 {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
}

.leader-second-card .leader-top-info h2 {
    margin: 0 0 8px;
    color: var(--secondary);
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
}



.leader-designation {
    display: block;
    color: #000;
    font-size: 16px;
    line-height: 1.4;
}

.leader-line {
    display: block;
    width: 38px;
    height: 2px;
    margin: 13px 0;
    background: var(--secondary);
}

.leader-company {
    color: var(--primary);
    font-size: 16px;
    line-height: 1.4;
}


/* =========================================
   ORGANIZATION TREE
========================================= */

.organization-tree {
    position: relative;
    height: 88px;
    width: 100%;
    z-index: 3;
}


/* Vertical line from second leader */

.tree-vertical-top {
    position: absolute;
    width: 2px;
    height: 42px;
    background: var(--primary);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}


/* Horizontal line */

.tree-horizontal {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 42px;
    height: 2px;
    background: var(--primary);
}


/* =========================================
   BRANCH LINES
========================================= */

.tree-line {
    position: absolute;
    top: 42px;
    width: 2px;
    height: 45px;
    background: var(--primary);
}

.line-1 {
    left: 7%;
}

.line-2 {
    left: 25.25%;
}

.line-3 {
    left: 50%;
}

.line-4 {
    left: 74.75%;
}

.line-5 {
    right: 7%;
}


/* =========================================
   TREE NODES
========================================= */

.tree-node {
    position: absolute;
    top: 36px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    transform: translateX(-50%);
    z-index: 5;
}

.node-1 {
    left: 7%;
}

.node-2 {
    left: 25.25%;
}

.node-3 {
    left: 50%;
}

.node-4 {
    left: 74.75%;
}

.node-5 {
    left: 93%;
}


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

.management-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    z-index: 4;
}


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

.management-card {
    position: relative;
    min-width: 0;
    padding: 20px 14px 18px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: all .3s ease;
}

.management-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
}


/* =========================================
   MANAGEMENT PROFILE
========================================= */

.management-profile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 150px;
}

.management-photo-wrap {
    position: relative;
    flex: 0 0 102px;
}

.management-photo {
    width: 102px;
    height: 102px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}


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

.management-linkedin {
    position: absolute;
    bottom: 0;
    right: -1px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border: 2px solid #fff;
    text-decoration: none;
    font-size: 16px;
}


/* =========================================
   MANAGEMENT INFO
========================================= */

.management-info {
    flex: 1;
    min-width: 0;
}

.management-info h3 {
    margin: 6px 0 8px;
    color: var(--primary);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}

.management-designation {
    margin: 0;
    color: #000;
    font-size: 13px;
    line-height: 1.55;
}

.management-line {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--secondary);
    margin: 10px 0;
}

.management-company {
    margin: 0;
    color: var(--primary);
    font-size: 13px;
    line-height: 1.4;
}

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


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

@media (max-width: 1400px) {

    .leadership-container {
        max-width: 1300px;
    }

    .management-grid {
        gap: 16px;
    }

    .management-card {
        padding: 18px 12px;
    }

    .management-profile {
        gap: 9px;
    }

    .management-photo-wrap {
        flex-basis: 90px;
    }

    .management-photo {
        width: 90px;
        height: 90px;
    }

    .management-info h3 {
        font-size: 17px;
    }

    .management-designation,
    .management-company {
        font-size: 12px;
    }

}


/* =========================================
   LAPTOP
========================================= */

@media (max-width: 1199px) {

    .leadership-section {
        padding-top: 30px;
    }

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

    .organization-tree {
        height: 70px;
    }

    .tree-horizontal,
    .tree-line,
    .tree-node {
        display: none;
    }

    .tree-vertical-top {
        height: 70px;
    }

    .leadership-second {
        margin-bottom: 0;
    }

    .management-card {
        padding: 20px 15px;
    }

    .management-photo-wrap {
        flex-basis: 105px;
    }

    .management-photo {
        width: 105px;
        height: 105px;
    }

    .management-info h3 {
        font-size: 19px;
    }

    .management-designation,
    .management-company {
        font-size: 13px;
    }

}


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

@media (max-width: 991px) {

    .leadership-section {
        padding: 30px 0 50px;
    }

    .leadership-container {
        padding: 0 20px;
    }

    .leader-top-card {
        width: 440px;
    }

    .leader-second-card {
        width: 410px;
    }

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

    .management-profile {
        min-height: 145px;
    }

    .management-photo-wrap {
        flex-basis: 105px;
    }

    .management-photo {
        width: 105px;
        height: 105px;
    }

    .management-info h3 {
        font-size: 19px;
    }

    .dots-left,
    .dots-right {
        opacity: .2;
    }

}


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

@media (max-width: 767px) {

    .leadership-section {
        padding: 25px 0 45px;
    }

    .leadership-container {
        padding: 0 15px;
    }

    .circle-left,
    .circle-right,
    .leadership-dots {
        display: none;
    }


    /* Top Cards */

    .leader-top-card,
    .leader-second-card {
        width: 100%;
        max-width: 450px;
        min-height: 145px;
        padding: 12px 15px;
        gap: 15px;
        border-radius: 17px;
    }

    .leader-photo-wrap {
        flex-basis: 110px;
    }

    .leader-photo {
        width: 110px;
        height: 110px;
    }

    .leader-top-info h2 {
        font-size: 20px;
    }

    .leader-designation {
        font-size: 14px;
    }

    .leader-company {
        font-size: 14px;
    }


    /* Second Leader */

    .leadership-second {
        margin-top: 35px;
    }


    /* Connector */

    .organization-tree {
        height: 50px;
    }

    .tree-vertical-top {
        height: 50px;
    }


    /* Cards */

    .management-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
        margin: 0 auto;
    }

    .management-card {
        padding: 20px;
    }

    .management-profile {
        min-height: 0;
    }

    .management-photo-wrap {
        flex-basis: 105px;
    }

    .management-photo {
        width: 105px;
        height: 105px;
    }

    .management-info h3 {
        font-size: 20px;
    }

    .management-designation,
    .management-company {
        font-size: 14px;
    }

}


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

@media (max-width: 575px) {

    .leader-top-card,
    .leader-second-card {
        max-width: 100%;
        padding: 12px;
        gap: 12px;
    }

    .leader-photo-wrap {
        flex-basis: 90px;
    }

    .leader-photo {
        width: 90px;
        height: 90px;
        border-width: 4px;
    }

    .linkedin-badge {
        width: 34px;
        height: 34px;
        font-size: 17px;
    }

    .leader-top-info h2 {
        font-size: 18px;
    }

    .leader-designation,
    .leader-company {
        font-size: 13px;
    }

    .leader-line {
        margin: 9px 0;
    }


    .management-card {
        padding: 16px;
        border-radius: 16px;
    }

    .management-profile {
        gap: 14px;
    }

    .management-photo-wrap {
        flex-basis: 90px;
    }

    .management-photo {
        width: 90px;
        height: 90px;
    }

    .management-linkedin {
        width: 29px;
        height: 29px;
        font-size: 14px;
    }

    .management-info h3 {
        margin-top: 2px;
        font-size: 18px;
    }

    .management-designation,
    .management-company {
        font-size: 12px;
    }

}


/* =========================================
   EXTRA SMALL
========================================= */

@media (max-width: 380px) {

    .leader-top-card,
    .leader-second-card {
        min-height: 125px;
        padding: 10px;
    }

    .leader-photo-wrap {
        flex-basis: 75px;
    }

    .leader-photo {
        width: 75px;
        height: 75px;
    }

    .linkedin-badge {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .leader-top-info h2 {
        font-size: 16px;
    }

    .leader-designation,
    .leader-company {
        font-size: 12px;
    }

    .management-profile {
        gap: 10px;
    }

    .management-photo-wrap {
        flex-basis: 75px;
    }

    .management-photo {
        width: 75px;
        height: 75px;
    }

    .management-info h3 {
        font-size: 16px;
    }

    .management-designation,
    .management-company {
        font-size: 11px;
    }

}

.leadership-section .section-title {
    text-align: center;
    margin-bottom: 50px;
}

.leadership-section .section-title h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -1px;
}

.leadership-section .title-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}
.leadership-section .title-divider span {
    width: 95px;
    height: 5px;
    background: var(--primary);
    border-radius: 30px;
}
.leadership-section .title-divider .active {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary);
}

.leadership-section .section-title {
    text-align: center;
    margin-bottom: 50px;
} 
.leadership-section .section-title h2 span {
    color: var(--primary);
}

/* =========================================
   LEADERSHIP TOP AREA
========================================= */

.leadership-top,
.leadership-second {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}


/* =========================================
   TOP LEADER CARD
========================================= */

.leader-top-card {
    position: relative;
    width: 460px;
    min-height: 165px;

    display: flex;
    align-items: center;

    padding: 14px 22px 14px 18px;

    background: #ffffff;
    border: 2px solid #006b48;
    border-radius: 20px;

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

    z-index: 5;
}


/* =========================================
   CONNECTOR
   TOP CARD → SECOND CARD
========================================= */

.leader-top-card::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -42px;

    width: 2px;
    height: 42px;

    background: #006b48;

    transform: translateX(-50%);

    z-index: 1;
}


/* Green dot at connector bottom */

.leader-top-card::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -50px;

    width: 16px;
    height: 16px;

    background: #006b48;

    border-radius: 50%;

    transform: translateX(-50%);

    z-index: 3;
}


/* =========================================
   SECOND LEADER POSITION
========================================= */

.leadership-second {
    margin-top: 42px;
}


/* =========================================
   SECOND LEADER CARD
========================================= */

.leader-second-card {
    position: relative;

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

    display: flex;
    align-items: center;

    padding: 14px 22px 14px 18px;

    background: #eef7f2;

    border: 2px solid #d4e9df;
    border-radius: 20px;

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

    z-index: 5;
}


/* =========================================
   CONNECTOR ENTERING SECOND CARD
========================================= */

.leader-second-card::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -42px;

    width: 2px;
    height: 42px;

    background: #006b48;

    transform: translateX(-50%);

    z-index: 2;
}


/* =========================================
   PHOTO
========================================= */

.leader-photo-wrap {
    position: relative;

    flex: 0 0 135px;

    width: 135px;
    height: 135px;

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


.leader-photo {
    width: 125px;
    height: 125px;

    object-fit: cover;

    border-radius: 50%;

    border: 4px solid #ffffff;

    box-shadow:
        0 0 0 2px #d8ebe2,
        0 5px 12px rgba(0, 0, 0, 0.12);
}


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

.linkedin-badge {
    position: absolute;

    right: 0;
    bottom: 5px;

    width: 36px;
    height: 36px;

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

    background: #007a52;
    color: #ffffff;

    border: 3px solid #ffffff;

    border-radius: 50%;

    text-decoration: none;

    font-size: 18px;

    z-index: 5;

    transition: all 0.3s ease;
}


.linkedin-badge:hover {
    background: #005f40;
    color: var(--secondary);

    transform: scale(1.08);
}


/* =========================================
   TOP LEADER INFORMATION
========================================= */

.leader-top-info {
    flex: 1;

    padding-left: 15px;
}


.leader-top-info h2 {
    margin: 0 0 7px;

    color: #005f40;

    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
}


.leader-designation {
    display: block;

    color: #1d2630;

    font-size: 16px;

    margin-bottom: 10px;
}


.leader-line {
    display: block;

    width: 42px;
    height: 2px;

    background: #f9b900;

    margin: 8px 0 12px;
}


.leader-company {
    color: #006b48;

    font-size: 16px;
    font-weight: 500;
}


/* =========================================
   OPTIONAL: LINE SHOULD BE CONTINUOUS
========================================= */

.leadership-top {
    z-index: 5;
}

.leadership-second {
    z-index: 4;
}


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

@media (max-width: 767px) {

    .leader-top-card,
    .leader-second-card {
        width: calc(100% - 30px);
        max-width: 460px;

        min-height: auto;

        padding: 15px;
    }

    .leader-photo-wrap {
        flex: 0 0 105px;

        width: 105px;
        height: 105px;
    }

    .leader-photo {
        width: 95px;
        height: 95px;
    }

    .leader-top-info {
        padding-left: 10px;
    }

    .leader-top-info h2 {
        font-size: 19px;
    }

    .leader-designation {
        font-size: 14px;
    }

    .leader-company {
        font-size: 14px;
    }

    .linkedin-badge {
        width: 32px;
        height: 32px;

        font-size: 15px;

        right: -2px;
        bottom: 2px;
    }

    .leadership-second {
        margin-top: 42px;
    }
}


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

@media (max-width: 480px) {

    .leader-top-card,
    .leader-second-card {
        width: calc(100% - 20px);

        border-radius: 16px;

        padding: 12px;
    }

    .leader-photo-wrap {
        flex: 0 0 85px;

        width: 85px;
        height: 85px;
    }

    .leader-photo {
        width: 78px;
        height: 78px;

        border-width: 3px;
    }

    .leader-top-info {
        padding-left: 8px;
    }

    .leader-top-info h2 {
        font-size: 17px;
    }

    .leader-designation {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .leader-line {
        width: 35px;
        margin: 6px 0 8px;
    }

    .leader-company {
        font-size: 12px;
    }

    .linkedin-badge {
        width: 29px;
        height: 29px;

        font-size: 13px;
    }
}


/* ==========================
   VIDEO POPUP
========================== */

.event-video-popup {
    display: none;
    width: 90vw;
    max-width: 1100px;
    background: #000;
    padding: 0;
}

.event-video-popup video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    background: #000;
}


/* ==========================
   VIDEO THUMBNAIL
========================== */

.event-gallery-item {
    position: relative;
    overflow: hidden;
}

.event-gallery-item > a {
    display: block;
    position: relative;
}

.event-gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: all 0.3s ease;
}

.event-gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay i {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fff;
    color: #0d6b44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.fancybox__content{
    padding: 0rem !important;
}


/* ==============================
   BEAUTIFUL OFFICE BULLET LIST
============================== */

.contact-ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
}

.contact-ul li {
    position: relative;
    margin-bottom: 12px;
    line-height: 1.6;
    color: #333;
    font-size: 16px;
}

/* Custom bullet */
.contact-ul li i {
    font-weight: 900;
    color: var(--primary);
    font-size: 18px;
}

/* Links */
.contact-ul li a {
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s ease;
}



.blog-section {
    padding: 90px 0;
    background: #fff;
}

/* Heading */

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

.blog-subtitle {
    display: inline-block;
    color: #0d6b44;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.blog-heading h1 {
    margin: 0 0 15px;
    font-size: 44px;
    line-height: 1.2;
    color: #1c1c1c;
}

.blog-heading h1 span {
    color: #0d6b44;
}

.blog-heading p {
    color: #666;
    font-size: 17px;
    line-height: 1.7;
}


/* Blog Grid */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


/* Card */

.blog-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .35s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,.10);
}


/* Image */

.blog-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.blog-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.06);
}


/* Content */

.blog-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}


/* Meta */

.blog-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.blog-category {
    background: #eaf7f0;
    color: #0d6b44;
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
}

.blog-date {
    font-size: 13px;
    color: #888;
}


/* Title */

.blog-title {
    margin: 0 0 13px;
    font-size: 22px;
    line-height: 1.35;
}

.blog-title a {
    color: #1c1c1c;
    text-decoration: none;
    transition: .3s;
}

.blog-title a:hover {
    color: #0d6b44;
}


/* Excerpt */

.blog-excerpt {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}


/* Read More */

.blog-read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: #0d6b44;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.blog-read-more span {
    font-size: 20px;
    transition: .3s;
}

.blog-read-more:hover {
    color: #f7b926;
}

.blog-read-more:hover span {
    transform: translateX(5px);
}


/* No Posts */

.no-blog-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
}


/* Tablet */

@media (max-width: 991px) {

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

    .blog-heading h1 {
        font-size: 38px;
    }
}


/* Mobile */

@media (max-width: 767px) {

    .blog-section {
        padding: 60px 0;
    }

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

    .blog-heading h1 {
        font-size: 32px;
    }

    .blog-heading p {
        font-size: 15px;
    }

    .blog-image {
        height: 220px;
    }

}


.single-blog-section {
    width: 100%;
    padding: 80px 0;
    background: #ffffff;
    overflow: hidden;
}

.single-blog-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================================
   BLOG LAYOUT
========================================================= */

.single-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 55px;
    align-items: start;
}

.single-blog-main {
    width: 100%;
    min-width: 0;
}


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

.single-blog-category {
    margin-bottom: 15px;
}

.single-blog-category a {
    display: inline-flex;
    align-items: center;

    padding: 7px 16px;

    background: #eaf7f0;
    color: #0d6b44;

    border-radius: 30px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;

    text-decoration: none;

    transition: all 0.3s ease;
}

.single-blog-category a:hover {
    background: #0d6b44;
    color: #ffffff;
}


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

.single-blog-title {
    width: 100%;
    margin: 0 0 22px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.18;

    color: #1c1c1c;

    word-break: normal;
    overflow-wrap: anywhere;
}


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

.single-blog-featured-image {
    position: relative;

    width: 100%;
    height: 500px;

    margin: 0 0 22px;

    overflow: hidden;

    background: #f1f1f1;

    border-radius: 18px;
}

.single-blog-featured-image img {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;

    object-fit: cover;
    object-position: center;

    border: 0;

    transition: transform 0.5s ease;
}

.single-blog-featured-image:hover img {
    transform: scale(1.02);
}


/* =========================================================
   BLOG META
========================================================= */

.single-blog-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 30px;

    color: #777;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 14px;
    line-height: 1.5;
}

.single-blog-meta span {
    display: inline-flex;
    align-items: center;
}

.single-blog-meta i {
    margin-right: 6px;

    color: #0d6b44;
}

.single-blog-meta span:nth-child(2) {
    color: #f7b926;
    font-weight: 700;
}


/* =========================================================
   BLOG CONTENT
========================================================= */

.single-blog-content {
    width: 100%;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;

    color: #444;

    overflow-wrap: break-word;
}

.single-blog-content p {
    margin: 0 0 22px;
}

.single-blog-content > *:first-child {
    margin-top: 0;
}

.single-blog-content > *:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CONTENT HEADINGS
========================================================= */

.single-blog-content h2 {
    margin: 40px 0 18px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;

    color: #1c1c1c;
}

.single-blog-content h3 {
    margin: 32px 0 15px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;

    color: #1c1c1c;
}

.single-blog-content h4 {
    margin: 25px 0 12px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;

    color: #1c1c1c;
}

.single-blog-content h5 {
    font-size: 18px;
    line-height: 1.4;
    color: #1c1c1c;
}

.single-blog-content h6 {
    font-size: 16px;
    line-height: 1.4;
    color: #1c1c1c;
}


/* =========================================================
   CONTENT LINKS
========================================================= */

.single-blog-content a {
    color: #0d6b44;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color 0.3s ease;
}

.single-blog-content a:hover {
    color: #f7b926;
}


/* =========================================================
   LISTS
========================================================= */

.single-blog-content ul,
.single-blog-content ol {
    margin: 20px 0 25px;
    padding-left: 28px;
}

.single-blog-content ul {
    list-style: disc;
}

.single-blog-content ol {
    list-style: decimal;
}

.single-blog-content li {
    margin-bottom: 10px;
    padding-left: 4px;
}


/* =========================================================
   IMAGES INSIDE CONTENT
========================================================= */

.single-blog-content img {
    display: block;

    max-width: 100%;
    width: auto;
    height: auto;

    margin: 25px 0;

    border-radius: 10px;
}

.single-blog-content figure {
    max-width: 100%;
    margin: 30px 0;
}

.single-blog-content figure img {
    margin: 0;
}

.single-blog-content figcaption {
    margin-top: 8px;

    font-size: 13px;
    line-height: 1.5;
    text-align: center;

    color: #888;
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.single-blog-content blockquote {
    margin: 30px 0;
    padding: 22px 25px;

    background: #f8faf9;

    border-left: 4px solid #f7b926;
    border-radius: 0 10px 10px 0;

    font-size: 18px;
    font-style: italic;
    line-height: 1.7;

    color: #555;
}

.single-blog-content blockquote p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLES
========================================================= */

.single-blog-content table {
    width: 100%;
    max-width: 100%;

    margin: 30px 0;

    border-collapse: collapse;

    font-size: 15px;
}

.single-blog-content th,
.single-blog-content td {
    padding: 12px 14px;

    border: 1px solid #ddd;

    text-align: left;
}

.single-blog-content th {
    background: #f8faf9;
    font-weight: 700;
    color: #222;
}


/* =========================================================
   SIDEBAR
========================================================= */

.single-blog-sidebar {
    width: 100%;

    position: sticky;
    top: 30px;
}

.blog-sidebar-box {
    width: 100%;

    margin-bottom: 25px;
    padding: 25px;

    background: #f8faf9;

    border: 1px solid #e4eee8;
    border-radius: 16px;
}

.blog-sidebar-box:last-child {
    margin-bottom: 0;
}


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

.blog-sidebar-box h3 {
    position: relative;

    margin: 0 0 22px;
    padding-bottom: 12px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;

    color: #1c1c1c;
}

.blog-sidebar-box h3::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 45px;
    height: 3px;

    background: #f7b926;

    border-radius: 10px;
}


/* =========================================================
   RECENT BLOG POSTS
========================================================= */

.recent-blog-posts {
    width: 100%;
}

.recent-blog-item {
    display: flex;
    align-items: flex-start;

    width: 100%;

    gap: 13px;

    padding-bottom: 16px;
    margin-bottom: 16px;

    border-bottom: 1px solid #e1e8e4;
}

.recent-blog-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: none;
}


/* Recent image */

.recent-blog-image {
    flex: 0 0 80px;

    width: 80px;
    height: 65px;

    display: block;

    overflow: hidden;

    background: #eeeeee;

    border-radius: 9px;
}

.recent-blog-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;
}

.recent-blog-image:hover img {
    transform: scale(1.08);
}


/* Recent content */

.recent-blog-content {
    flex: 1;
    min-width: 0;
}

.recent-blog-content h4 {
    margin: 0 0 6px;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.recent-blog-content h4 a {
    color: #222;
    text-decoration: none;

    transition: color 0.3s ease;
}

.recent-blog-content h4 a:hover {
    color: #0d6b44;
}

.recent-blog-content span {
    display: block;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 11px;
    line-height: 1.4;

    color: #888;
}


/* =========================================================
   CATEGORY LIST
========================================================= */

.blog-category-list {
    list-style: none !important;

    width: 100%;

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

.blog-category-list li {
    margin: 0 !important;
    padding: 0 !important;

    border-bottom: 1px solid #e1e8e4;
}

.blog-category-list li:last-child {
    border-bottom: none;
}

.blog-category-list li a {
    display: flex;

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

    gap: 10px;

    width: 100%;

    padding: 12px 3px;

    color: #333;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 15px;
    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.3s ease,
        padding 0.3s ease;
}

.blog-category-list li a:hover {
    padding-left: 8px;
    color: #0d6b44;
}


/* Category name */

.category-name {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;
}

.category-name::before {
    content: "›";

    flex-shrink: 0;

    color: #0d6b44;

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


/* Category count */

.category-count {
    flex: 0 0 auto;

    min-width: 25px;
    height: 25px;

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

    padding: 0 6px;

    background: #0d6b44;
    color: #ffffff;

    border-radius: 50%;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   PREVIOUS / NEXT NAVIGATION
========================================================= */

.single-blog-navigation {
    display: flex;

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

    gap: 20px;

    margin-top: 60px;
    padding-top: 25px;

    border-top: 1px solid #eeeeee;
}

.previous-post,
.next-post {
    max-width: 48%;
}

.single-blog-navigation a {
    display: inline-block;

    color: #0d6b44;

    font-family: var(--bodyFont, "Roboto", sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;

    text-decoration: none;

    transition: color 0.3s ease;
}

.single-blog-navigation a:hover {
    color: #f7b926;
}


/* =========================================================
   WORDPRESS PAGE LINKS
========================================================= */

.single-blog-content .page-links {
    margin: 30px 0;

    font-weight: 700;
}

.single-blog-content .page-links a,
.single-blog-content .page-links > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 35px;
    min-height: 35px;

    margin-right: 5px;
    padding: 5px 10px;

    border-radius: 5px;
}

.single-blog-content .page-links > span {
    background: #0d6b44;
    color: #ffffff;
}


/* =========================================================
   WORDPRESS EMBEDS / VIDEOS
========================================================= */

.single-blog-content iframe,
.single-blog-content video,
.single-blog-content embed {
    max-width: 100%;
}

.single-blog-content iframe {
    width: 100%;
}


/* =========================================================
   TABLET - 992px TO 1199px
========================================================= */

@media (max-width: 1199px) {

    .single-blog-section {
        padding: 70px 0;
    }

    .single-blog-container {
        max-width: 1100px;
        padding: 0 25px;
    }

    .single-blog-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 40px;
    }

    .single-blog-title {
        font-size: 42px;
    }

    .single-blog-featured-image {
        height: 440px;
    }

}


/* =========================================================
   TABLET - UP TO 991px
========================================================= */

@media (max-width: 991px) {

    .single-blog-section {
        padding: 60px 0;
    }

    .single-blog-container {
        padding: 0 25px;
    }

    /*
       Main content becomes full width
       Sidebar moves underneath
    */

    .single-blog-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .single-blog-title {
        font-size: 38px;
    }

    .single-blog-featured-image {
        height: 400px;
    }

    .single-blog-sidebar {
        position: static;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;

        align-items: start;
    }

    .blog-sidebar-box {
        margin-bottom: 0;
    }

}


/* =========================================================
   SMALL TABLET - UP TO 767px
========================================================= */

@media (max-width: 767px) {

    .single-blog-section {
        padding: 50px 0;
    }

    .single-blog-container {
        width: 100%;
        padding: 0 20px;
    }

    .single-blog-layout {
        gap: 40px;
    }

    .single-blog-title {
        margin-bottom: 18px;

        font-size: 32px;
        line-height: 1.25;
    }

    .single-blog-featured-image {
        height: 320px;
        margin-bottom: 20px;

        border-radius: 14px;
    }

    .single-blog-meta {
        margin-bottom: 25px;
        gap: 8px;

        font-size: 13px;
    }

    .single-blog-content {
        font-size: 16px;
        line-height: 1.8;
    }

    .single-blog-content h2 {
        margin-top: 35px;
        font-size: 27px;
    }

    .single-blog-content h3 {
        margin-top: 28px;
        font-size: 22px;
    }

    .single-blog-content h4 {
        font-size: 19px;
    }

    .single-blog-content blockquote {
        padding: 18px 20px;
        font-size: 17px;
    }

    .single-blog-sidebar {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-sidebar-box {
        padding: 22px;
    }

    .single-blog-navigation {
        margin-top: 45px;
    }

}


/* =========================================================
   MOBILE - UP TO 575px
========================================================= */

@media (max-width: 575px) {

    .single-blog-section {
        padding: 40px 0;
    }

    .single-blog-container {
        padding: 0 16px;
    }

    .single-blog-layout {
        gap: 35px;
    }

    /* Category */

    .single-blog-category {
        margin-bottom: 12px;
    }

    .single-blog-category a {
        padding: 6px 13px;

        font-size: 12px;
    }

    /* Title */

    .single-blog-title {
        margin-bottom: 18px;

        font-size: 28px;
        line-height: 1.25;
    }

    /* Featured image */

    .single-blog-featured-image {
        height: 230px;
        margin-bottom: 18px;

        border-radius: 11px;
    }

    /* Meta */

    .single-blog-meta {
        gap: 7px;

        font-size: 12px;
    }

    .single-blog-meta i {
        margin-right: 4px;
    }

    /* Content */

    .single-blog-content {
        font-size: 15px;
        line-height: 1.75;
    }

    .single-blog-content p {
        margin-bottom: 18px;
    }

    .single-blog-content h2 {
        margin: 30px 0 14px;

        font-size: 24px;
    }

    .single-blog-content h3 {
        margin: 25px 0 12px;

        font-size: 20px;
    }

    .single-blog-content h4 {
        font-size: 18px;
    }

    .single-blog-content ul,
    .single-blog-content ol {
        padding-left: 22px;
    }

    .single-blog-content blockquote {
        margin: 25px 0;
        padding: 16px 18px;

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

    /* Sidebar */

    .blog-sidebar-box {
        padding: 20px;

        border-radius: 12px;
    }

    .blog-sidebar-box h3 {
        margin-bottom: 18px;
        font-size: 19px;
    }

    /* Recent blogs */

    .recent-blog-item {
        gap: 11px;
    }

    .recent-blog-image {
        flex-basis: 75px;

        width: 75px;
        height: 60px;
    }

    .recent-blog-content h4 {
        font-size: 13px;
    }

    .recent-blog-content span {
        font-size: 10px;
    }

    /* Category */

    .blog-category-list li a {
        padding: 11px 2px;

        font-size: 14px;
    }

    /* Previous / next */

    .single-blog-navigation {
        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        margin-top: 40px;
    }

    .previous-post,
    .next-post {
        width: 100%;
        max-width: 100%;
    }

    .next-post {
        text-align: left;
    }

    .single-blog-navigation a {
        font-size: 14px;
    }

}


/* =========================================================
   VERY SMALL MOBILE - UP TO 375px
========================================================= */

@media (max-width: 375px) {

    .single-blog-section {
        padding: 35px 0;
    }

    .single-blog-container {
        padding: 0 14px;
    }

    .single-blog-title {
        font-size: 25px;
    }

    .single-blog-featured-image {
        height: 200px;
    }

    .single-blog-meta {
        font-size: 11px;
    }

    .single-blog-content {
        font-size: 14px;
    }

    .single-blog-content h2 {
        font-size: 22px;
    }

    .single-blog-content h3 {
        font-size: 19px;
    }

    .blog-sidebar-box {
        padding: 17px;
    }

    .recent-blog-image {
        flex-basis: 70px;

        width: 70px;
        height: 55px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.single-blog-category a:focus,
.single-blog-content a:focus,
.single-blog-navigation a:focus,
.recent-blog-image:focus {
    outline: 2px solid #f7b926;
    outline-offset: 3px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .single-blog-featured-image img,
    .single-blog-category a,
    .single-blog-content a,
    .recent-blog-image img,
    .recent-blog-content h4 a,
    .blog-category-list li a,
    .single-blog-navigation a {
        transition: none;
    }

    .single-blog-featured-image:hover img {
        transform: none;
    }

    .recent-blog-image:hover img {
        transform: none;
    }

}


/* =========================================================
   STUDY IN AUSTRALIA SECTION
========================================================= */

.study-australia {
    --aus-green: #005b35;
    --aus-green-dark: #004a2b;
    --aus-yellow: #f6b814;
    --aus-yellow-light: #fff7df;
    --aus-green-light: #edf7f1;

    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #f8f8f6;

}


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

.study-australia::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 25px;
    width: 100px;
    height: 100px;

    background-image:
        radial-gradient(#dddddd 2px, transparent 2px);

    background-size: 18px 18px;
    opacity: .75;

    pointer-events: none;
    z-index: -1;
}


.study-australia::after {
    content: "";
    position: absolute;

    width: 500px;
    height: 500px;

    left: -220px;
    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(246, 184, 20, .12),
            transparent 70%
        );

    pointer-events: none;
    z-index: -1;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.study-australia .study-container {
    width: 100%;
    max-width: 1320px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px;
    padding-right: 20px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
    gap: 50px;
    align-items: start;
    box-sizing: border-box;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox]{
    position: relative !important;
}

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

.study-australia .study-left {
    width: 100%;
    min-width: 0;
}

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

.study-australia .heading {
    margin-bottom: 42px;
}


.study-australia .script-text {
    display: block;

    font-family: var(--bodyFont);
    font-size: 48px;
    line-height: 1;

    color: var(--primary, #006b3f);
    font-weight: 600;

    margin-bottom: 2px;
}


.study-australia .heading h2 {
    margin: 0 !important;

    font-family: var(--bodyFont);

    font-size: 52px;
    line-height: 1.12;

    font-weight: 800;
    color: #181818;

    letter-spacing: -1px;
}


.study-australia .heading h2 span {
    color: var(--primary, #006b3f);
    display: inline-block;
}


.study-australia .title-line {
    width: 145px;
    height: 4px;

    margin-top: 18px;

    background:
        linear-gradient(
            90deg,
            var(--primary, #006b3f) 0 70%,
            var(--secondary, #f7b926) 70% 100%
        );

    border-radius: 50px;
}


/* =========================================================
   STUDY CARDS
========================================================= */

.study-australia .study-card {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 20px;

    background: #ffffff;

    border: 1px solid #e9e9e9;
    border-radius: 18px;

    padding: 20px 24px 20px 65px;

    margin-bottom: 22px;

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

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

    box-sizing: border-box;
}


.study-australia .study-card:last-child {
    margin-bottom: 0;
}


.study-australia .study-card:hover {
    transform: translateY(-5px);

    border-color: rgba(0, 107, 63, .15);

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


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

.study-australia .card-number {
    position: absolute;

    left: -17px;
    top: 25px;

    width: 48px;
    height: 48px;

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

    background: var(--primary, #006b3f);
    color: #ffffff;

    border-radius: 9px;

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

    box-shadow:
        0 8px 18px rgba(0, 92, 55, .25);

    z-index: 2;

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


.study-australia .card-number::after {
    content: "";

    position: absolute;

    right: -8px;
    top: 0;

    width: 8px;
    height: 100%;

    background: var(--aus-green-dark);

    border-radius: 0 8px 8px 0;

    transition: background .3s ease;
}


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

.study-australia .card-icon {
    width: 64px;
    height: 64px;

    min-width: 64px;

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

    border-radius: 50%;

    background: var(--aus-green-light);

    transition:
        transform .35s ease,
        background .35s ease;
}


.study-australia .card-icon.yellow {
    background: var(--aus-yellow-light);
}


.study-australia .card-icon i {
    font-size: 27px;

    color: var(--primary, #006b3f);

    transition: transform .35s ease;
}


.study-australia .card-icon.yellow i {
    color: #d39b00;
}


/* =========================================================
   VERTICAL DIVIDER
========================================================= */

.study-australia .divider {
    width: 3px;
    min-width: 3px;

    align-self: stretch;

    border-radius: 50px;

    margin: 5px 0;

    transition:
        width .3s ease,
        background .3s ease;
}


.study-australia .divider.green {
    background: var(--primary, #006b3f);
}


.study-australia .divider.yellow {
    background: var(--secondary, #f7b926);
}


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

.study-australia .card-content {
    flex: 1;
    min-width: 0;

    text-align: left;
}


.study-australia .card-content h3 {
    margin: 0 0 8px !important;

    font-family: var(--bodyFont);

    font-size: 19px;
    line-height: 1.35;

    font-weight: 700;

    color: #181818;

    transition: color .3s ease;
}


.study-australia .card-content p {
    margin: 0 !important;

    font-family: var(--bodyFont);

    font-size: 14px;
    line-height: 1.7;

    color: #444;
}


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

.study-australia .study-card:hover .card-icon {
    transform: rotate(8deg) scale(1.06);
}


.study-australia .study-card:hover .card-icon i {
    transform: scale(1.05);
}


.study-australia .study-card:hover .divider {
    width: 5px;
    min-width: 5px;
}


.study-australia .study-card:hover .card-number {
    background: var(--secondary, #f7b926);
    color: #111111;
}


.study-australia .study-card:hover .card-number::after {
    background: #d49c05;
}


.study-australia .study-card:hover .card-content h3 {
    color: var(--primary, #006b3f);
}


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

.study-australia .study-form {
    position: relative;

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #005b35 0%,
            #00683d 100%
        );

    border-radius: 28px;

    padding: 38px;

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

    overflow: hidden;

    box-sizing: border-box;

    isolation: isolate;
}


/* =========================================================
   FORM DECORATION
========================================================= */

.study-australia .study-form::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.09),
            transparent 70%
        );

    pointer-events: none;
}


.study-australia .study-form::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -55px;
    bottom: -55px;

    border-radius: 50%;

    border: 1px dashed rgba(255,255,255,.10);

    pointer-events: none;
}


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

.study-australia .form-title {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 30px;
}


.study-australia .title-icon {
    width: 68px;
    height: 68px;

    min-width: 68px;

    border-radius: 50%;

    background: var(--secondary, #f7b926);

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

    box-shadow:
        0 10px 20px rgba(246,184,20,.35);
}


.study-australia .title-icon i {
    font-size: 27px;
    color: #111111;
}


.study-australia .form-title h3 {
    margin: 5px 0 0 !important;

    color: #ffffff;

    font-family: var(--bodyFont);

    font-size: 22px;
    line-height: 1.4;

    font-weight: 700;
}


.study-australia .form-title h3 span {
    display: inline;

    color: var(--secondary, #f7b926);

    font-size: inherit;

    margin-top: 0;
}


/* =========================================================
   FORM
========================================================= */

.study-australia .study-form form {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* =========================================================
   INPUT BOX
========================================================= */

.study-australia .input-box {
    position: relative;

    width: 100%;

    margin-bottom: 16px;
}


.study-australia .input-box > i {
    position: absolute;

    left: 20px;
    top: 50%;

    transform: translateY(-50%);

    color: #777777;

    font-size: 17px;

    z-index: 2;

    pointer-events: none;
}


.study-australia .input-box input,
.study-australia .input-box select {
    width: 100%;
    height: 60px;

    border: 1px solid transparent;
    outline: none;

    border-radius: 13px;

    background: #ffffff;

    padding: 0 52px;

    font-family: var(--bodyFont);

    font-size: 15px;

    color: #222222;

    box-sizing: border-box;

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


.study-australia .input-box input::placeholder {
    color: #888888;
}


.study-australia .input-box input:focus,
.study-australia .input-box select:focus {
    border-color: var(--secondary, #f7b926);

    box-shadow:
        0 0 0 4px rgba(246,184,20,.20);
}


/* =========================================================
   SELECT
========================================================= */

.study-australia .input-box.select {
    position: relative;
}


.study-australia .input-box.select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    padding-right: 55px;
}


.study-australia .input-box.select .arrow {
    position: absolute;

    right: 20px;
    top: 50%;

    transform: translateY(-50%);

    color: #666666;

    pointer-events: none;

    z-index: 2;
}


.study-australia .input-box.select .arrow i {
    position: static;

    transform: none;

    font-size: 13px;
}


/* =========================================================
   CHECKBOX
========================================================= */

.study-australia .checkbox {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin: 18px 0 25px;

    color: #ffffff;

    font-family: var(--bodyFont);

    font-size: 13px;
    line-height: 1.65;

    cursor: pointer;
}


.study-australia .checkbox input {
    width: 18px;
    height: 18px;

    min-width: 18px;

    margin: 3px 0 0;

    accent-color: var(--secondary, #f7b926);

    cursor: pointer;
}


.study-australia .checkbox span {
    opacity: .95;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.study-australia .submit-btn {
    position: relative;
    z-index: 2;

    width: 220px;
    height: 60px;

    border: none;
    outline: none;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #ffc92b,
            #f6b814
        );

    color: #111111;

    font-family: var(--bodyFont);

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

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

    gap: 17px;

    cursor: pointer;

    box-shadow:
        0 15px 30px rgba(246,184,20,.30);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.study-australia .submit-btn i {
    transition: transform .35s ease;
}


.study-australia .submit-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(246,184,20,.42);
}


.study-australia .submit-btn:hover i {
    transform: translateX(7px);
}


/* =========================================================
   LARGE DESKTOP
   1201px - 1399px
========================================================= */

@media (max-width: 1399px) {

    .study-australia {
        padding: 70px 0;
    }

    .study-australia .study-container {
        max-width: 1320px;
        grid-template-columns: minmax(0, 1.3fr) minmax(350px, .7fr);
        gap: 40px;
    }

    .study-australia .heading h2 {
        font-size: 46px;
    }

    .study-australia .script-text {
        font-size: 43px;
    }

    .study-australia .study-card {
        padding-left: 60px;
        gap: 16px;
    }

    .study-australia .card-content h3 {
        font-size: 18px;
    }

    .study-australia .card-content p {
        font-size: 13px;
        line-height: 1.65;
    }

    .study-australia .study-form {
        padding: 32px;
    }

    .study-australia .form-title h3 {
        font-size: 20px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   993px - 1200px
========================================================= */

@media (max-width: 1200px) {

    .study-australia .study-container {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr);
        gap: 32px;
    }

    .study-australia .heading {
        margin-bottom: 35px;
    }

    .study-australia .heading h2 {
        font-size: 40px;
    }

    .study-australia .script-text {
        font-size: 39px;
    }

    .study-australia .study-card {
        padding: 18px 18px 18px 58px;
        gap: 14px;
        margin-bottom: 18px;
    }

    .study-australia .card-number {
        width: 44px;
        height: 44px;

        left: -14px;
        top: 22px;

        font-size: 15px;
    }

    .study-australia .card-icon {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

    .study-australia .card-icon i {
        font-size: 23px;
    }

    .study-australia .card-content h3 {
        font-size: 17px;
    }

    .study-australia .card-content p {
        font-size: 13px;
        line-height: 1.6;
    }

    .study-australia .study-form {
        padding: 28px;
        border-radius: 24px;
    }

    .study-australia .title-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .study-australia .form-title {
        gap: 14px;
        margin-bottom: 25px;
    }

    .study-australia .form-title h3 {
        font-size: 18px;
        margin-top: 3px !important;
    }

    .study-australia .input-box input,
    .study-australia .input-box select {
        height: 56px;
        font-size: 14px;
    }

}


/* =========================================================
   TABLET
   769px - 992px
========================================================= */

@media (max-width: 992px) {

    .study-australia {
        padding: 65px 0;
    }

    .study-australia .study-container {
        grid-template-columns: 1fr;
        gap: 45px;

        max-width: 760px;
    }

    .study-australia .heading {
        text-align: center;
    }

    .study-australia .title-line {
        margin: 18px auto 0;
    }

    .study-australia .heading h2 {
        font-size: 46px;
    }

    .study-australia .script-text {
        font-size: 42px;
    }

    .study-australia .study-card {
        padding: 22px 22px 22px 62px;
        gap: 18px;
    }

    .study-australia .card-icon {
        width: 68px;
        height: 68px;
        min-width: 68px;
    }

    .study-australia .card-icon i {
        font-size: 26px;
    }

    .study-australia .card-content h3 {
        font-size: 20px;
    }

    .study-australia .card-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .study-australia .study-form {
        width: 100%;
        max-width: 650px;

        margin: 0 auto;

        padding: 32px;
    }

    .study-australia .form-title h3 {
        font-size: 23px;
    }

    .study-australia .form-title h3 span {
        display: inline;
        font-size: inherit;
    }

}


/* =========================================================
   MOBILE
   481px - 768px
========================================================= */

@media (max-width: 768px) {

    .study-australia {
        padding: 55px 0;
    }

    .study-australia::before {
        width: 75px;
        height: 75px;
        background-size: 14px 14px;
    }

    .study-australia .study-container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        gap: 38px;
    }

    .study-australia .heading {
        margin-bottom: 32px;
    }

    .study-australia .script-text {
        font-size: 42px;
    }

    .study-australia .heading h2 {
        font-size: 36px;
        line-height: 1.2;

        letter-spacing: -.5px;
    }

    .study-australia .title-line {
        width: 125px;
        height: 3px;
    }


    /* CARD */

    .study-australia .study-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        padding: 20px;

        gap: 14px;

        border-radius: 16px;

        margin-bottom: 18px;
    }

    .study-australia .card-number {
        position: relative;

        left: auto;
        top: auto;

        width: 52px;
        height: 36px;

        border-radius: 7px;

        font-size: 14px;

        margin-bottom: 2px;
    }

    .study-australia .card-number::after {
        display: none;
    }

    .study-australia .card-icon {
        width: 66px;
        height: 66px;
        min-width: 66px;
    }

    .study-australia .card-icon i {
        font-size: 25px;
    }


    /* HORIZONTAL DIVIDER */

    .study-australia .divider {
        width: 100%;
        min-width: 0;

        height: 4px;

        min-height: 4px;

        align-self: stretch;

        margin: 2px 0 3px;
    }

    .study-australia .study-card:hover .divider {
        width: 100%;
        min-width: 0;
    }


    .study-australia .card-content {
        width: 100%;
        text-align: left;
    }

    .study-australia .card-content h3 {
        font-size: 20px;
        line-height: 1.35;

        margin-bottom: 8px !important;
    }

    .study-australia .card-content p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* FORM */

    .study-australia .study-form {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .study-australia .form-title {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 25px;
    }

    .study-australia .title-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .study-australia .title-icon i {
        font-size: 25px;
    }

    .study-australia .form-title h3 {
        font-size: 22px;
        line-height: 1.4;

        margin: 0 !important;
    }

    .study-australia .form-title h3 span {
        font-size: inherit;
    }

    .study-australia .input-box {
        margin-bottom: 14px;
    }

    .study-australia .input-box input,
    .study-australia .input-box select {
        height: 56px;

        border-radius: 12px;

        padding-left: 48px;
        padding-right: 48px;

        font-size: 14px;
    }

    .study-australia .input-box > i {
        left: 18px;
        font-size: 16px;
    }

    .study-australia .input-box.select .arrow {
        right: 18px;
    }

    .study-australia .checkbox {
        font-size: 12.5px;

        margin: 17px 0 23px;
    }

    .study-australia .submit-btn {
        width: 100%;
        height: 57px;

        font-size: 17px;
    }

}


/* =========================================================
   SMALL MOBILE
   376px - 480px
========================================================= */

@media (max-width: 480px) {

    .study-australia {
        padding: 48px 0;
    }

    .study-australia .study-container {
        padding-left: 15px;
        padding-right: 15px;

        gap: 32px;
    }

    .study-australia .script-text {
        font-size: 37px;
    }

    .study-australia .heading h2 {
        font-size: 30px;
    }

    .study-australia .title-line {
        width: 110px;
        margin-top: 15px;
    }


    /* CARDS */

    .study-australia .study-card {
        padding: 18px;
        border-radius: 15px;

        gap: 12px;
    }

    .study-australia .card-number {
        width: 48px;
        height: 34px;

        font-size: 13px;
    }

    .study-australia .card-icon {
        width: 62px;
        height: 62px;
        min-width: 62px;
    }

    .study-australia .card-icon i {
        font-size: 22px;
    }

    .study-australia .card-content h3 {
        font-size: 18px;
        line-height: 1.35;
    }

    .study-australia .card-content p {
        font-size: 13px;
        line-height: 1.65;
    }


    /* FORM */

    .study-australia .study-form {
        padding: 22px 17px;

        border-radius: 19px;
    }

    .study-australia .title-icon {
        width: 56px;
        height: 56px !important;
        min-width: 56px !important;
        margin-top: 27px !important;
    }

    .study-australia .title-icon i {
        font-size: 22px;
    }

    .study-australia .form-title {
        gap: 12px;
    }

    .study-australia .form-title h3 {
        font-size: 19px;
    }

    .study-australia .input-box input,
    .study-australia .input-box select {
        height: 52px;

        font-size: 13px;

        padding-left: 45px;
        padding-right: 45px;
    }

    .study-australia .input-box > i {
        left: 16px;
        font-size: 15px;
    }

    .study-australia .input-box.select .arrow {
        right: 16px;
    }

    .study-australia .checkbox {
        font-size: 12px;
        gap: 9px;
    }

    .study-australia .checkbox input {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    .study-australia .submit-btn {
        height: 53px;
        font-size: 16px;
    }

}


/* =========================================================
   EXTRA SMALL MOBILE
   375px AND BELOW
========================================================= */

@media (max-width: 375px) {

    .study-australia {
        padding: 42px 0;
    }

    .study-australia .study-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .study-australia .script-text {
        font-size: 33px;
    }

    .study-australia .heading h2 {
        font-size: 27px;
    }

    .study-australia .study-card {
        padding: 16px;
    }

    .study-australia .card-content h3 {
        font-size: 17px;
    }

    .study-australia .card-content p {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .study-australia .study-form {
        padding: 20px 15px;
    }

    .study-australia .form-title h3 {
        font-size: 18px;
    }

    .study-australia .input-box input,
    .study-australia .input-box select {
        height: 50px;

        font-size: 12.5px;
    }

    .study-australia .checkbox {
        font-size: 11.5px;
    }

    .study-australia .submit-btn {
        height: 51px;
        font-size: 15px;
    }

}


/* =========================================================
   FOUNDER & CHIEF MENTOR SECTION
========================================================= */

.founder-section {
    position: relative;
    padding: 90px 0;
    background:
        radial-gradient(
            circle at 0% 20%,
            rgba(13, 107, 68, 0.07),
            transparent 35%
        ),
        radial-gradient(
            circle at 100% 80%,
            rgba(247, 185, 38, 0.09),
            transparent 32%
        ),
        #f8faf9;
    overflow: hidden;
}


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

.founder-section .section-title {
    position: relative;
    margin-bottom: 55px;
    text-align: center;
}

.founder-section .section-title h2 {
    margin: 0;
    color: #222;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
}

.founder-section .section-title h2 span {
    color: var(--primary, #0d6b44);
}

.founder-section .title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}

.founder-section .title-divider span {
    width: 38px;
    height: 4px;
    display: block;
    border-radius: 20px;
    background: var(--primary, #0d6b44);
}

.founder-section .title-divider span.active {
    width: 65px;
    background: var(--secondary, #f7b926);
}




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

.founder-section .founder-wrapper > .col-md-5:first-child {
    position: relative;
    text-align: center !important;
    z-index: 2;
}


/* Decorative yellow circle */
.founder-section .founder-wrapper > .col-md-7:first-child::before {
    content: "";
    position: absolute;

    width: 310px;
    height: 310px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    border: 2px dashed
        rgba(247, 185, 38, 0.55);

    z-index: -1;

    animation: founderRotate 18s linear infinite;
}


/* Decorative green circle */
.founder-section .founder-wrapper > .col-md-5:first-child::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background: rgba(13, 107, 68, 0.07);

    z-index: -2;
}


/* Founder image */
.founder-section .founder-wrapper > .col-md-5:first-child img {
    position: relative;
    display: inline-block;
    width: 100% !important;
    height: auto;
    border-radius: 24px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(13, 107, 68, 0.12);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.13),
        0 0 0 8px rgba(247, 185, 38, 0.10);
    object-fit: cover;
    transition: all 0.4s ease;
}


/* Image hover */
.founder-section .founder-wrapper > .col-md-5:first-child img:hover {
    transform: translateY(-7px);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.17),
        0 0 0 10px rgba(247, 185, 38, 0.14);
}


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

.founder-section .founder-wrapper > .col-md-7:last-child {
    position: relative;

    padding: 42px 34px 10px;

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid
        rgba(13, 107, 68, 0.10);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.08);

    overflow: hidden;
}


/* Green top accent */
.founder-section .founder-wrapper > .col-md-7:last-child::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        var(--primary, #0d6b44),
        var(--secondary, #f7b926)
    );
}


/* Decorative quote */
.founder-section .founder-wrapper > .col-md-7:last-child::after {
    content: "“";

    position: absolute;

    right: 20px;
    top: 5px;

    font-family: var(--bodyFont);

    font-size: 120px;
    line-height: 1;
    color: rgba(13, 107, 68, 0.06);
    pointer-events: none;
}


/* =========================================================
   PARAGRAPHS
========================================================= */

.founder-section .founder-wrapper > .col-md-7:last-child p {
    position: relative;
    margin: 0 0 10px;
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.85;
    font-weight: 400;
    z-index: 1;
}


/* First greeting */
.founder-section .founder-wrapper > .col-md-7:last-child p:first-child {
    color: var(--text);

    font-size: 16px;

    line-height: 1.8;

    padding-left: 18px;

    border-left: 4px solid
        var(--secondary, #f7b926);
}


/* Dear Students */
.founder-section
.founder-wrapper
> .col-md-6:last-child
p:first-child span {
    color: var(--primary, #0d6b44);

    font-size: 18px;
}


/* Strong text */
.founder-section .founder-wrapper > .col-md-6:last-child strong {
    font-weight: 700;
}


/* =========================================================
   SIGNATURE AREA
========================================================= */

.founder-section
.founder-wrapper
> .col-md-6:last-child
p[style*="var(--primary)"] {
    margin-top: 28px;

    margin-bottom: 3px;

    padding-left: 18px;

    border-left: 4px solid
        var(--primary, #0d6b44);

    font-size: 19px !important;

    line-height: 1.4;

    color: var(--primary, #0d6b44) !important;
}


.founder-section
.founder-wrapper
> .col-md-6:last-child
p[style*="var(--primary)"] + p {
    margin-left: 22px;

    margin-bottom: 0;

    color: var(--primary, #0d6b44) !important;

    font-size: 14px;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}


/* =========================================================
   REMOVE BR SPACING
========================================================= */

.founder-section .founder-wrapper > .col-md-6:last-child br {
    line-height: 0;
}


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

@keyframes founderRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


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

@media (max-width: 1199px) {

    .founder-section {
        padding: 80px 0;
    }

    .founder-section .founder-wrapper {
        grid-template-columns:
            minmax(300px, 0.85fr)
            minmax(0, 1.2fr);

        gap: 45px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:last-child {
        padding: 35px 35px;
    }

    .founder-section .section-title h2 {
        font-size: 38px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::before {
        width: 280px;
        height: 280px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::after {
        width: 215px;
        height: 215px;
    }
}


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

@media (max-width: 991px) {

    .founder-section {
        padding: 70px 0;
    }

    .founder-section .container {
        padding: 0 20px;
    }

    .founder-section .section-title {
        margin-bottom: 40px;
    }

    .founder-section .section-title h2 {
        font-size: 34px;
    }

    .founder-section .founder-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;

        max-width: 750px;
        margin: 0 auto;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child {
        order: 1;
    }

    .founder-section .founder-wrapper
    > .col-md-6:last-child {
        order: 2;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child img {
        width: 65% !important;
        max-width: 420px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::before {
        width: 300px;
        height: 300px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::after {
        width: 230px;
        height: 230px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:last-child {
        padding: 35px 32px;
    }
}


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

@media (max-width: 767px) {

    .founder-section {
        padding: 55px 0;
    }

    .founder-section .container {
        padding: 0 15px;
    }

    .founder-section .section-title {
        margin-bottom: 35px;
    }

    .founder-section .section-title h2 {
        font-size: 29px;
        line-height: 1.3;
    }

    .founder-section .title-divider {
        margin-top: 11px;
    }

    .founder-section .title-divider span {
        width: 28px;
        height: 3px;
    }

    .founder-section .title-divider span.active {
        width: 48px;
    }

    .founder-section .founder-wrapper {
        gap: 35px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child img {
        width: 78% !important;
        max-width: 350px;

        border-radius: 18px;

        padding: 6px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::before {
        width: 240px;
        height: 240px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::after {
        width: 190px;
        height: 190px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:last-child {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p {
        font-size: 14px;
        line-height: 1.75;
        margin-bottom: 16px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p:first-child {
        font-size: 14.5px;
        padding-left: 14px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p:first-child span {
        font-size: 17px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p[style*="var(--primary)"] {
        font-size: 17px !important;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p[style*="var(--primary)"] + p {
        font-size: 12px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child::after {
        font-size: 90px;
        right: 10px;
    }
}


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

@media (max-width: 480px) {

    .founder-section {
        padding: 45px 0;
    }

    .founder-section .section-title h2 {
        font-size: 25px;
    }

    .founder-section .founder-wrapper {
        gap: 28px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child img {
        width: 88% !important;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::before {
        width: 220px;
        height: 220px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:first-child::after {
        width: 170px;
        height: 170px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:last-child {
        padding: 25px 18px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p:first-child {
        padding-left: 12px;
    }
}


/* =========================================================
   EXTRA SMALL DEVICES
========================================================= */

@media (max-width: 360px) {

    .founder-section .section-title h2 {
        font-size: 23px;
    }

    .founder-section .founder-wrapper
    > .col-md-6:last-child {
        padding: 22px 15px;
    }

    .founder-section
    .founder-wrapper
    > .col-md-6:last-child
    p {
        font-size: 13px;
    }
}



/* =========================================
   VIDEOS PAGE
========================================= */

.videos-page {
    padding: 100px 0;
    background: #f8faf9;
}

.videos-heading {
    text-align: center;
    margin-bottom: 50px;
}

.videos-heading h1 {
    margin: 0 0 10px;
    font-size: 42px;
    font-weight: 700;
    color: #055f30;
}

.videos-heading p {
    margin: 0;
    color: #666;
    font-size: 16px;
}


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

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


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

.video-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.video-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* =========================================
   THUMBNAIL
========================================= */

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eee;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.05);
}


/* =========================================
   OVERLAY
========================================= */

.video-overlay {
    position: absolute;
    inset: 0;

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

    background: rgba(0, 0, 0, 0.18);

    transition: all 0.3s ease;
}

.video-card:hover .video-overlay {
    background: rgba(0, 0, 0, 0.30);
}


/* =========================================
   PLAY BUTTON
========================================= */

.play-button {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    background: #f7b926;

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

    color: #055f30;

    font-size: 34px;

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

    transition: all 0.3s ease;
}

.video-card:hover .play-button {
    transform: scale(1.1);
}


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

.video-content {
    padding: 20px;
}

.video-content h3 {
    margin: 0;

    font-size: 20px;
    line-height: 1.4;

    color: #222;
    font-weight: 600;
}

.video-content p {
    margin: 10px 0 0;

    font-size: 14px;
    line-height: 1.6;

    color: #777;
}


/* =========================================
   NO VIDEOS
========================================= */

.no-videos {
    text-align: center;
    padding: 60px 20px;
}

.no-videos p {
    margin: 0;
    color: #777;
}


/* =========================================
   FANCYBOX VIDEO
========================================= */

.video-fancybox .fancybox__content {
    padding: 0;
    background: #000;
}


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

@media (max-width: 991px) {

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

    .videos-heading h1 {
        font-size: 36px;
    }

}


@media (max-width: 767px) {

    .videos-page {
        padding: 60px 0;
    }

    .videos-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .videos-heading {
        margin-bottom: 35px;
    }

    .videos-heading h1 {
        font-size: 30px;
    }

    .play-button {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }

}

.fancybox__container{
    z-index: 99999 !important;
}