/*==================================================
    ENSKOOL WEBSITE
    STYLE.CSS
==================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


@font-face {
    font-family: "Birthlong";
    src: url("../Fonts/Birthlong.otf") format("opentype");
    font-weight: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../Fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "Poppins-Medium";
    src: url("../Fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Poppins-Bold";
    src: url("../Fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: bold;
}

@font-face {
    font-family: "Delight";
    src: url("../Fonts/delight-regular.otf") format("opentype");
    font-weight: normal;
}

@font-face {
    font-family: "Delight_Medium";
    src: url("../Fonts/delight-medium.otf") format("opentype");
    font-weight: 500;
}

@font-face {
    font-family: "Delight_Bold";
    src: url("../Fonts/delight-bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "Satoshi-Bold";
    src: url("../Fonts/Satoshi-Bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "Satoshi-Medium";
    src: url("../Fonts/Satoshi-Medium.otf") format("opentype");
    font-weight: 500;
}

/*=========================
RESET
=========================*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans);
    /* background: #f7f6fd; */
    color: #1b1b1b;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    font-family: var(--sans);
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    border: none;
    cursor: pointer;
    font-family: inherit;
}

p {
    font-family: var(--sans);
}

/*=========================
ROOT COLORS
=========================*/

:root {

    --primary: #6C3BFF;
    --secondary: #8457ff;
    --light: #f5f4ff;
    --dark: #181818;
    --text: #555;
    --white: #ffffff;
    --sans: 'Work Sans', sans-serif;

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

    --radius: 18px;

}

/*=========================
CONTAINER
=========================*/

.container {
    margin: auto;

}

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

.container{
    width:1200px;
    max-width:92%;
    margin:auto;
}

.navbar{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

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







.hero {

    position: relative;
    overflow: hidden;
    background: url('../Images/Backgrounds/Law Entrance.png') no-repeat center/cover;


}

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

.hero-content {

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    font-family: "Delight";

}

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

.mini-title {
    /* display: inline-block; */
    letter-spacing: 4px;
    color: #ffffff87;
    font-family: "Delight";
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 10px;
    margin-bottom: 25px;
}

.left-content h1 {
    line-height: 1.1;
    font-family: Delight;
    font-weight: 500;
    font-style: Medium;
    font-size: 64px;
    color: #fff;





}

.script-font {

    color: var(--white);

    font-family: "Birthlong";

}

.left-content p {

    margin-top: 25px;

    font-size: 18px;

    line-height: 1.8;

    color: #c0c0c0;

    max-width: 520px;

}

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

/* div.hero-buttons {
    display: flex;
    gap: 10px;
} */

.explore {
    background: linear-gradient(90deg, #642E86, #000000);
    color: white;
    padding: 21px 21px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.explore img {
    background-color: var(--white);
    border-radius: 50%;
    padding: 5px;
}

.download {
    background: none;
    color: white;
    padding: 18px 36px;
    border: 2px solid #fff;
    border-radius: 32px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-buttons {

    display: flex;

    gap: 18px;

    margin-top: 40px;

}

.primary-btn {

    display: flex;

    align-items: center;

    gap: 14px;

    background: linear-gradient(90deg, #642E86, #000000);

    color: #fff;

    padding: 18px 30px;

    border-radius: 60px;


    transition: .35s;

}

.primary-btn span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

}



.secondary-btn {

    display: flex;

    align-items: center;

    gap: 12px;

    border: 2px solid #ddd;

    color: #ffffff;

    padding: 18px 28px;

    border-radius: 60px;


    transition: .35s;

}



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

.right-content {

    position: relative;

    display: flex;

    justify-content: center;

}

.right-content img {

    width: 95%;

    max-width: 650px;

}

/* Floating Background */

.hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;


    border-radius: 50%;

    right: -180px;

    top: -150px;

    filter: blur(20px);

    z-index: 0;

}

.hero::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    left: -180px;

    bottom: -180px;

    filter: blur(20px);

}

/*==================================================
FEATURE STRIP
==================================================*/

.feature-strip {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(1180px, 92%);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 7px;
    z-index: 20;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px 20px;
    transition: .35s;
    border-right: 1px solid #eee;
}

.feature-item:last-child {
    border-right: none;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.feature-item span {
    font-size: 17px;
    color: #222;
    line-height: 1.4;
}

/*==================================================
UTILITY
==================================================*/

.text-center {
    text-align: center;
}

.mt-50 {
    margin-top: 50px;
}

.mt-80 {
    margin-top: 80px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-80 {
    margin-bottom: 80px;
}

/*==================================================
SCROLLBAR
==================================================*/

/* ::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f3f3f3;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
} */

/*==================================================
SELECTION
==================================================*/


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

button:focus,
input:focus,
textarea:focus {
    outline: none;
}

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

@keyframes fadeUp {

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

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

}

@keyframes zoomIn {

    from {
        opacity: 0;
        transform: scale(.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes float {

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

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

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

}

.left-content {
    /* margin-top: 44px; */
    animation: fadeUp .9s ease;
}

/* .right-content {
    animation: zoomIn 1s ease;
}

.right-content img {
    animation: float 4s ease-in-out infinite;
} */

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

.nav-links a,
.primary-btn,
.secondary-btn,
.login-btn,
.start-btn,
.feature-item
 {
    transition: all .35s ease;
}

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

img {
    user-select: none;
    -webkit-user-drag: none;
}

/*==================================================
END STYLE.CSS
==================================================*/





/*=========================================
LARGE DESKTOP
1600px
=========================================*/
@media (max-width:1600px) {

    .hero {
        padding-top: 130px;
    }

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

    .right-content img {
        max-width: 600px;
    }

}


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

@media (max-width:1400px) {

    .container {
        width: 92%;
    }

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

    .hero-content {
        gap: 30px;
    }

    .feature-strip {
        width: 95%;
    }

    .program-overlay {
        position: absolute;
        bottom: 79px;
        /* left: 70px; */
        /* right: 138px; */
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #fff;
        padding: 16px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        margin-right: 5px 30px;
        /* width: 300px; */
    }

}


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

@media (max-width:1200px) {

    /* .nav-links{
    gap:22px;
}

.nav-buttons{
    gap:10px;
}

.login-btn,
.start-btn{
    padding:12px 22px;
} */

    .left-content h1 {
        font-size: 52px;
    }

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

    .feature-item {
        padding: 15px;
    }

    .feature-item span {
        font-size: 15px;
    }



}


/*=========================================
SMALL LAPTOP
1024px
=========================================*/

@media (max-width:1024px) {

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .left-content p {
        margin: auto;
        margin-top: 25px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .right-content {
        margin-top: 50px;
    }

    .feature-strip {
        /* position: relative; */
        bottom: 19px;
        left: auto;
        transform: none;
        /* margin-top: 60px; */
        margin: 0 31px;
    }

    .program-overlay {
        position: absolute;
        bottom: 79px;
        /* left: 70px; */
        /* right: 138px; */
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #fff;
        padding: 16px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        margin-right: 5px 30px;
        /* width: 300px; */
    }




    .tag-left img {
        width: 138px;
        height: 2px;
        margin: 5px 84px;
        display: none;
    }

}


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

@media (max-width:992px) {

    /* .nav-links{
    display:none;
}

.nav-buttons{
    display:none;
}

.menu-btn{
    display:block;
} */

    .hero {
        padding-top: 120px;
    }

    .left-content h1 {
        font-size: 46px;
    }

    .feature-strip {
        position: absolute;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        width: min(1180px, 94%);
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
        display: grid;
        grid-template-columns: repeat(4, 2fr);
        padding: 3px;
        /* z-index: 24; */
        /* height: 20%; */
        margin: 12px;
    }

    .feature-item {
        border-right: none;
    }

}


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

@media (max-width:768px) {

    .tag-left img {
        width: 138px;
        height: 2px;
        margin: 5px 84px;
        display: none;
    }

    .hero {
        padding-bottom: 80px;
        height: 100vh;
        background-position: 75% 50%;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 22px;
    }

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

    .left-content p {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons {
        display: flex;
        gap: 7px;
        margin-top: 7px;
    }

    .primary-btn,
    .secondary-btn {
        width: 260px;
        justify-content: center;
    }


    .feature-strip {
        position: absolute;
        left: 50%;
        bottom: 16px;
        transform: translateX(-50%);
        width: min(1180px, 94%);
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
        display: grid;
        grid-template-columns: repeat(4, 2fr);
        padding: 3px;
        /* z-index: 24; */
        /* height: 20%; */
        margin: 12px;
    }

    .feature-item img {
        width: 24px;
        height: 24px;
    }

    .feature-item span {
        font-size: 10px;
    }


    .feature-item {
        justify-content: flex-start;
        border-bottom: 1px solid #eee;
    }

    .feature-item:last-child {
        border-bottom: none;
    }



}


/*=========================================
LARGE MOBILE
576px
=========================================*/

@media (max-width:576px) {

    /* .logo img{
    height:40px;
} */

    .hero {
        padding-top: 100px;
        height: 100vh;
        background-position: 75% 50%;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 22px;
    }

    .left-content h1 {
        font-size: 34px;
    }

    .mini-title {
        font-size: 11px;
        padding: 8px 15px;
    }

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

    .right-content img {
        width: 100%;
    }

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

    .hero-buttons {
        display: flex;
        gap: 18px;
        margin-top: 18px;
    }

    /* .mobile-menu{
    width:100%;
} */


    .feature-strip {
        position: absolute;
        left: 50%;
        bottom: 4px;
        transform: translateX(-50%);
        width: min(1180px, 94%);
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        padding: 0px;
        /* z-index: 24; */
        /* height: 20%; */
        margin: 0 10px;
    }

    .feature-item img {
        width: 24px;
        height: 24px;
    }

    .tag-left img {
        width: 138px;
        height: 2px;
        margin: 5px 84px;
        display: none;
    }

    .feature-item span {
        font-size: 10px;
    }


}


/*=========================================
MOBILE
480px
=========================================*/

@media (max-width:480px) {

    .container {
        width: 94%;
    }

    .hero {
        padding-top: 90px;
        height: 100vh;
        background-position: 75% 50%;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 22px;
        /* background-size: 300px auto; */
    }


    .left-content h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .left-content p {
        line-height: 1.7;
    }

    .tag-left img {
        width: 138px;
        height: 2px;
        margin: 5px 84px;
        display: none;
    }

    .hero-buttons {
        gap: 15px;
    }

    .primary-btn,
    .secondary-btn {
        font-size: 15px;
        padding: 15px 20px;
    }

    .feature-item {
        padding: 12px;
    }

    .feature-item span {
        font-size: 14px;
    }

    .feature-strip {
        position: absolute;
        left: 50%;
        bottom: 3px;
        transform: translateX(-50%);
        width: min(1180px, 94%);
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        padding: 3px;
        /* z-index: 24; */
        /* height: 20%; */

    }

    .feature-item img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .feature-item span {
        font-size: 10px;
    }

}


/*=========================================
SMALL MOBILE
360px
=========================================*/

@media (max-width:360px) {


    .hero {
        padding-top: 90px;
        height: 100vh;
        background-position: 75% 50%;
        border-bottom-right-radius: 22px;
        border-bottom-left-radius: 22px;
        /* background-size: 300px auto; */
    }

    .mini-title {
        display: inline-block;
        color: #ffffff87;
        font-family: "Delight";
        padding: 10px 18px;
        border-radius: 50px;
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 0px;
    }

    .hero-buttons {
        display: flex;
        gap: 1px;
        margin-top: 10px;
    }

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

    .tag-left img {
        width: 138px;
        height: 2px;
        margin: 5px 84px;
        display: none;
    }

    .left-content p {
        font-size: 12px;
        margin-top: 3px;
    }

    .primary-btn,
    .secondary-btn {
        font-size: 14px;
    }

    .feature-strip {
        position: absolute;
        left: 50%;
        bottom: 5px;
        transform: translateX(-50%);
        width: min(1180px, 94%);
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        padding: 3px;
        /* z-index: 24; */
        height: 20%;
        margin: 0;
    }

    .feature-item img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .feature-item span {
        font-size: 10px;
    }


    /* .mobile-menu{
    padding:25px;
} */


}




/* ========================= */
/*  About Us      */

/* CONTAINER */
.container-about {
    max-width: 1200px;
    margin: 0 167px;
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
    padding-top: 70px;

}

/* LEFT */
.left-about {
    flex: 1;
}

.tag-left {
    color: #5446B6;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 20px;

}

.tag-left img {
    width: 206px;
    height: 2px;
    margin: 5px 0px;
}

.left-about h1 {
    font-size: 60px;
    font-weight: 600;
    line-height: 1.2;
    font-family: "Delight";
}

.left-about h1 span {
    background: linear-gradient(135deg, #271B77, #140b2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.left-about .desc-about {
    margin: 20px 0;
    color: #666;
    max-width: 420px;
    line-height: 1.6;
}

/* BUTTON */
.btn-about {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 14px 22px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    background: linear-gradient(90deg, #5446B6, #000000);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.btn-about span {
    background: #fff;
    color: #4f46e5;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* RIGHT */
.right-about {
    flex: 1;
    display: flex;
    gap: 20px;
}

/* CARD */
.card-about {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 420px;
    cursor: pointer;
    transition: 0.4s;
}

.card-about img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY */
.overlay-about {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
}

/* CONTENT */
.content-about {
    position: absolute;
    bottom: 0;
    padding: 20px;
    color: #fff;
}

.small-about {
    font-size: 14px;
    opacity: 0.8;
}

.content-about h3 {
    font-size: 20px;
    margin: 5px 0;
}

.text-about {
    font-size: 9px;
    opacity: 0.85;
    margin-bottom: 10px;
}

/* LINK */
.link-about {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.link span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* HOVER EFFECT */
.card-about:hover {
    transform: translateY(-10px);
}


/* TOP LEFT ICON */
.vision-icon,
.story-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 3;
    backdrop-filter: blur(6px);
}

.vision-icon img,
.story-icon img {
    width: 35px;
    height: 35px;
}

/* BOTTOM RIGHT ARROW BUTTON */
.about-arrow-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    z-index: 3;
    transition: 0.3s;
}

/* HOVER EFFECT */
.about-arrow-btn:hover {
    background: #4f46e5;
    color: #fff;
    transform: scale(1.1);
}

.about-arrow-btn img {
    width: 30px;
    height: 30px;
}




/* ========================= */
/* Programs Section */
/* ========================= */


/*==========================
ROOT VARIABLES
==========================*/

:root {

    --primary: #392A8E;
    --primary-dark: #24135F;

    --text: #111111;
    --gray: #666666;
    --light: #F7F7FC;

    --white: #ffffff;

    --border: #E6E6EC;

    --blue-card: #EDF5FF;
    --yellow-card: #FFF5D9;
    --green-card: #E8F8F0;

    --radius-xs: 12px;
    --radius-sm: 18px;
    --radius-md: 24px;
    --radius-lg: 34px;

    --shadow:

        0 10px 40px rgba(0, 0, 0, .06);

}


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

.program-section {

    width: 100%;
    padding: 52px 0;
    overflow: hidden;
    background: #f7f6fd
}


/*==========================
CONTAINER
==========================*/

.program-container {

    max-width: 1320px;
    margin: auto;

    padding-inline: 24px;

    display: grid;

    grid-template-columns:
        1.65fr 0.95fr;

    gap: 34px;

    align-items: start;

}


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

.program-left-area {

    display: flex;

    flex-direction: column;

    gap: 26px;
}


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

.program-right-area {

    position: relative;

    display: flex;

    justify-content: flex-end;
}


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

.program-hero-heading {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.program-hero-heading h1 {

    font-family: 'Delight';
    font-size: 64px;
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: 1px;
    max-width: 620px;
    color: #101010;
}


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

.program-cap-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    margin-inline: 8px;

    background: linear-gradient(180deg, #5542D8, #201552);

    border-radius: 50%;

    vertical-align: middle;
}

.program-cap-icon img {

    width: 28px;
    height: 28px;
}


/*==========================
TAG AREA
==========================*/

.program-tag-wrapper {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 4px;
}


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

.program-tag {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:

        12px 22px;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 999px;

    font-size: 15px;

    font-weight: 500;

    transition: .3s;
}


/* purple dot */

.program-tag::before {

    content: "";

    width: 6px;

    height: 6px;

    background: var(--primary);

    border-radius: 50%;
}


/* hover */

.program-tag:hover {

    background: var(--primary);

    color: #fff;

    border-color: var(--primary);

    transform: translateY(-2px);
}

.program-tag:hover::before {

    background: #fff;
}


/*==========================
INFO BAR
==========================*/

.program-info-bar {

    width: 100%;

    background: #fff;

    border: 1px solid var(--border);

    border-radius: 22px;

    padding:

        14px 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

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


/* left side */

.program-info-left {

    display: flex;

    align-items: center;

    gap: 18px;

    flex: 1;
}

.program-info-left p {
    font-size: 18px;
    color: #555;
    font-weight: 400;
}

.program-info-left strong {

    color: #111;

    font-weight: 700;
}


/* right side */

.program-info-right {

    display: flex;

    align-items: center;

    gap: 16px;
}

.program-info-right span {

    color: var(--primary);

    font-size: 15px;

    font-weight: 600;
}


/*==========================
CIRCLE BUTTON
==========================*/

.program-circle-btn {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    background: linear-gradient(180deg, #5A48DA, #23155B);

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

    transition: .35s;
}

.program-circle-btn img {

    width: 18px;
    height: 18px;
}

.program-circle-btn.dark {

    background: linear-gradient(180deg, #4E3DD0, #120B36);
}

.program-circle-btn:hover {

    transform: rotate(-45deg);
}

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

.program-grid {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;

    overflow-x: hidden;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.program-grid::-webkit-scrollbar {
    display: none;
}


.program-grid .program-card {

    flex: 0 0 calc(33.333% - 16px);

    width: calc(33.333% - 16px);

    box-sizing: border-box;

}


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

.program-card {

    position: relative;

    background: #fff;

    border-radius: 28px;

    padding: 32px 26px;

    min-height: 340px;

    display: flex;

    flex-direction: column;

    transition: .35s ease;

    overflow: hidden;

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

}

.program-card:hover {

    transform: translateY(-10px);

}


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

.program-card.blue {

    background: #EAF3FF;

}
.program-card.orange {

    background: #fff;

}

.program-card.yellow {

    background: #F1ECFF;

}

.program-card.green {

    background: #EAF8F0;

}
.program-card.red {

    background: #FFF8DD;

}
.program-card.black {

    background: #FFF0F3;

}
.program-card.white {

    background: #E8F8F8;

}



/* =========================================
   CAREER APTITUDE & COUNSELLING CARD
========================================= */

.program-card.career {
    background: linear-gradient(145deg, #E8F8F0, #D9F1E7);
    color: #111;
    position: relative;
    overflow: hidden;
}

.program-card.career .program-icon-box {
    background: #ffffff;
}

.program-card.career h3 {
    color: #111;
}

.program-card.career p {
    color: #555;
}



.program-card.career:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 45px rgba(57, 42, 142, 0.12);
}




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

.program-icon-box {

    width: 72px;

    height: 72px;

    border-radius: 22px;

    background: #ffffff;

    display: none;

    align-items: center;

    justify-content: center;

    margin-bottom: 28px;

}

.program-icon-box img {

    width: 42px;

    height: 42px;

    object-fit: contain;

}


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

.program-card h3 {

    font-family: 'Delight';
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    margin-bottom: 18px;

}


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

.program-logo-title img {

    width: 170px;

}


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

.program-card p {

    font-size: 16px;
    color: #5E5E66;
    line-height: 22px;
    margin-bottom: auto;

}


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

.program-card a {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    color: #2D2D2D;

    font-size: 16px;

    font-weight: 600;

}

.program-card a img {

    width: 18px;

    transition: .3s;

}

.program-card:hover a img {

    transform: translateX(6px);

}


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

.program-image-wrapper {

    position: relative;

    width: 100%;

    border-radius: 34px;

    overflow: hidden;

    min-height: 760px;

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

}

.program-image-wrapper>img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


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

.program-floating-card {

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 28px;

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

    backdrop-filter: blur(18px);

    border-radius: 26px;

    padding: 24px;

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

}


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

.program-card-top {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 22px;

}

.program-card-top h4 {
    font-family: 'Delight';
    font-size: 24px;
    line-height: 27px;
    letter-spacing: 1px;
    color: #111;

}

.program-card-top button {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: #3B2A93;

    display: flex;

    justify-content: center;

    align-items: center;

}

.program-card-top button img {

    width: 22px;

}


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

.program-card-features {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 26px;

}

.program-card-features span {

    padding: 11px 18px;

    border-radius: 999px;

    background: #F5F5FA;

    font-size: 14px;

    color: #555;

}


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

.program-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

}

.program-card-bottom>a {

    color: #392A8E;

    font-weight: 700;

    font-size: 16px;

}


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

.program-learn-btn {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #392A8E;

    color: #fff;

    padding: 14px 24px;

    border-radius: 999px;

    font-size: 15px;

    font-weight: 600;

    transition: .3s;

}

.program-learn-btn img {

    width: 16px;

}

.program-learn-btn:hover {

    background: #24135F;

}


/*==================================================
    SLIDER NAV
==================================================*/

.program-slider-nav {

    display: flex;

    gap: 16px;

    margin-top: 8px;

}

.program-slider-btn {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

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

    transition: .3s;

}

.program-slider-btn img {

    width: 20px;

}

.program-slider-btn:hover {

    background: #392A8E;

    transform: translateY(-3px);

}

.program-slider-btn:hover img {

    filter: brightness(0) invert(1);

}


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

.program-card,
.program-learn-btn,
.program-slider-btn,
.program-tag,
.program-circle-btn {

    transition: all .35s ease;

}


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

.program-image-wrapper img {

    transition: transform .6s ease;

}

.program-image-wrapper:hover img {

    transform: scale(1.05);

}


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

.program-floating-card {

    animation: floatCard 5s ease-in-out infinite;

}

@keyframes floatCard {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0px);

    }

}


/* Why  SECTION */
.why {
    text-align: center;
    background: #fff;
}

/* TOP */
.why-top {
    text-align: center;
}

.why-badge {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid rgba(57, 42, 142, 0.25);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--primary);
    margin-bottom: 18px;
}

.why-top h2 {
    font-family: 'Delight';
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    color: #111;
}

.why-top h2 span {
    color: var(--primary);
}

.why-top p {
    color: var(--gray);
    font-size: 17px;
    line-height: 1.6;
    max-width: 846px;
    margin: 0 auto;
}

/* CONTENT */
.why-content {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
}

/* CARD */
.why-card {
    width: 300px;
    padding: 32px 28px;
    border-radius: 24px;
    background: #fff;
    text-align: left;
    min-height: 500px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
}

/* ICON */
.why-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--blue-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.why-icon-box img {
    width: 50%;
}

/* TEXT */
.why-card h3 {
 font-family: 'Delight';
    margin-bottom: 12px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #111;
    letter-spacing: 1px;
}

.why-card p {
    font-size: 14.5px;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* LIST */
.why-card ul {
    list-style: none;
    font-size: 14.5px;
    color: #333;
}

.why-card ul li {
    font-family: 'Work Sans';
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.why-icon {
    background: var(--blue-card);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.why-icons {
    background: var(--blue-card);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* STATS */
.why-stats li {
    margin-bottom: 16px;
}

.why-stats li strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #000;
}

.program-bottom {
    margin-top: auto;
}

.btn-program {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 8px 14px 24px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    color: #fff;
    position: relative;
    overflow: hidden;
}

.btn-icon {
    background: #fff;
    color: var(--primary);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

/* BUTTON */
.gradient-btn {
    margin-top: 15px;
    padding: 12px 18px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    background: linear-gradient(135deg, #271B77, #140b2f);
    color: #fff;
}

/* IMAGE */
.center-image {
    align-self: stretch;
    display: flex;
}

.center-image img {
    width: 380px;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 30px;
}


/* features SECTION */
.features-enskool {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0px 120px;
}

/* FEATURE CARD */
.features-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 25px 30px;
    border-radius: 25px;
    gap: 25px;
    width: 1176px;
    height: 263px;
}


/* REVERSE */
.features-item.reverse {
    flex-direction: row-reverse;
}

/* CONTENT */
.features-item-content {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
}

/* TEXT */
.features-item-content h3 {
    font-size: 33px;
    margin-bottom: 8px;
    font-family: "Delight";
    letter-spacing: 1px;
}

.features-item-content p {
    font-size: 17px;
    color: #666;
    /* max-width: 420px; */
    width: 464px;
}

/* ICON */
.features-item-icon {
    min-width: 88px;
    height: 88px;
    border-radius: 15px;
    background: linear-gradient(135deg, #271B77, #140b2f);
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-item-icon img {
    width: 58px;
}

/* IMAGE */
.features-image {
    flex: 1;
}

.features-image img {
    width: 484px;
    height: 202px;
    object-fit: cover;
    border-radius: 20px;
}




/* SECTION */
.initiatives {
    padding: 60px 40px;
    background: linear-gradient(180deg, #5b2a86, #0b0615);
    color: #fff;
    text-align: center;
}

/* HEADER */
.initiatives-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
    background: #ffffff;
    font-size: 12px;
    margin-bottom: 15px;
    color: #642E86;
}

.initiatives-top h2 {
    font-size: 42px;
    margin-bottom: 10px;
}

.initiatives-top p {
    color: #ccc;
    max-width: 600px;
    margin: auto;
}

/* GRID */
.initiatives-grid {
    margin-top: 42px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin: 48px 121px;
}

/* CARD */
.initiatives-card {
    background: #fff;
    color: #000;
    border-radius: 31px;
    padding: 13px 10px;
    text-align: center;
    width: 267px;
    height: 345px;
}

/* IMAGE */
.initiatives-img-box {
    position: relative;
}

.initiatives-img-box img {
    /* width: 100%; */
    border-radius: 22px;
    width: 248px;
    height: 147px;
}

/* ICON FLOAT */
.initiatives-icon {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e9e4f3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.initiatives-icon img {
    width: 22px;
}

/* TEXT */
.initiatives-card h3 {
    margin-top: 30px;
    font-size: 33px;
}

.initiatives-card p {
    font-size: 17px;
    color: #666;
    margin-top: 20px;
}

/* DOTS */
.dots {
    display: none;
    margin-top: 30px;
}

.dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    border-radius: 50%;
    background: #aaa;
}

.dots .active {
    background: #fff;
}

/* STUDENTS SECTION */

.students-section {
    padding: 60px 20px;
    text-align: center;
}

/* BADGE */
.students-section-top-badge {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #642E86;
    border-radius: 30px;
    font-size: 14px;
    color: #642E86;
    margin-bottom: 20px;
}

/* TITLE */
.students-section-title {
    font-size: 48px;
    font-weight: 700;
}

.students-section-title span {
    color: #4A3D9F;
}

.students-section-subtitle {
    color: #888;
    margin: 10px 0 30px;
    font-size: 18px;
}

/* TABS */
.students-section-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 46px;
    margin-bottom: 40px;
}

.students-section-tabs .tab {
    padding: 12px 22px;
    border-radius: 12px;
    border: none;
    background: #eee;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.students-section-tabs .tab.active {
    background: linear-gradient(135deg, #6c4cff, #2a0b55);
    color: #fff;
}

/* CARDS GRID */
.students-section-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: auto;
}

/* CARD */
.students-section-card {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: .3s;
}

.students-section-card:hover {
    transform: translateY(-5px);
}

/* IMAGE */
.students-section-card-img {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.students-section-card-img-img {
    display: block;
    width: 267px;
    height: 167px;
}

.students-section-badge {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 60px;
}

/* TEXT */
.students-section-card h3 {
    margin: 15px 0 5px;
    font-size: 18px;
}

.students-section-card-exam {
    color: #6c4cff;
    font-size: 14px;
    margin-bottom: 10px;
}

/* RANK */
.students-section-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
}

.students-section-rank img {
    width: 18px;
}

/* COLORS */
.gold {
    background: #fde7b2;
    color: #b76b00;
}

.silver {
    background: #ddd;
    color: #555;
}

.small {
    font-size: 12px;
}

/* BUTTON */
.students-section-btn-wrap {
    margin-top: 50px;
}

.students-section-explore-btn {
    padding: 15px 30px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, #6c4cff, #000);
    color: #fff;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.students-section-explore-btn span {
    background: #fff;
    color: #000;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}





/* community SECTION */
.community {
    padding: 80px 20px;
}

.community-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 60px;
    align-items: center;
}

/* LEFT */
.community-left {
    flex: 1;
}

.community-decor {
    width: 80px;
    margin-bottom: 20px;
}

.community-tag {
    color: #7a4dff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.community-left h1 {
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.community-left h1 span {
    background: linear-gradient(135deg, #754dee, #ae80ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.community-left-desc {
    color: #fff;
    margin: 20px 0 30px;
    /* color: #666; */
    line-height: 1.6;
    max-width: 400px;

}

/* BUTTON */
.community-btn {
    display: none;
    padding: 14px 30px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #6c4cff, #ff4d4d);
    color: #fff;
    font-size: 16px;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.community-btn span {
    font-size: 20px;
}

/* RIGHT */
.community-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* CARD */
.community-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: .3s;
}

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

/* ACTIVE BORDER */
.community-card.active {
    border-left: 11px solid #6c4cff;
}

/* AVATAR */
.community-avatar {
    width: 120px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* CONTENT */
.community-card-content h3 {
    font-size: 20px;
    margin-bottom: 5px;
}

.community-highlight {
    color: #6c4cff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.community-text {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

/* QUOTE ICON */
.community-quote {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
}


/* -------------- APP SECTION -------------- */




/* RESPONSIVE */

/* Tablet */
@media(max-width:1024px) {
    .container {
        flex-direction: column;
        text-align: center;
    }

    .left h1 {
        font-size: 40px;
    }

    .desc {
        margin: auto;
    }

    .right {
        width: 100%;
    }
}

/* Mobile */
@media(max-width:600px) {

    .left h1 {
        font-size: 32px;
    }

    .card {
        flex-direction: column;
        align-items: flex-start;
    }

    .avatar {
        width: 60px;
        height: 60px;
    }

    .quote {
        top: 10px;
        right: 10px;
    }

}








/* RESPONSIVE */

/* Tablet */
@media(max-width:1024px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media(max-width:600px) {
    .title {
        font-size: 32px;
    }

    .students-section-cards {
        grid-template-columns: 1fr;
    }

    .students-section-tabs {
        gap: 8px;
    }

    .students-section-tabs .tab {
        padding: 10px 15px;
        font-size: 12px;
    }
}


/* RESPONSIVE */
/* ========================= */
/* TABLET */
@media(max-width:1024px) {
    .features-item {
        flex-direction: column;
        text-align: left;
    }

    .features-item.reverse {
        flex-direction: column;
    }

    .features-item-content {
        flex-direction: row;
    }

    .features-image img {
        height: 250px;
    }
}

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

    .features-enskool {
        padding: 30px 20px;
    }

    .features-item-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .features-item-content p {
        max-width: 100%;
    }

    .features-item-icon {
        width: 50px;
        height: 50px;
    }

    .features-item-content h3 {
        font-size: 18px;
    }

    .features-image img {
        height: 200px;
    }
}



/* RESPONSIVE */

/* TABLET */
@media(max-width:1024px) {
    .content {
        flex-direction: column;
    }

    .center-image img {
        width: 100%;
        max-width: 400px;
    }
}

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

    .why {
        padding: 40px 20px;
    }

    .top h2 {
        font-size: 28px;
    }

    .card {
        width: 100%;
    }

    .gradient-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ========================= */
/* 📱 RESPONSIVE DESIGN */
/* ========================= */

/* TABLET */
@media(max-width:1024px) {
    .container-about {
        flex-direction: column;
        text-align: center;
    }

    .right-about {
        width: 100%;
        justify-content: center;
    }

    .desc-about {
        margin: auto;
    }
}

/* MOBILE */
@media(max-width:768px) {
    .left-about h1 {
        font-size: 32px;
    }

    .right-about {
        flex-direction: column;
    }

    .card-about {
        height: 350px;
    }
}

/* SMALL MOBILE */
@media(max-width:480px) {
    .left-about h1 {
        font-size: 26px;
    }

    .btn-about {
        width: 100%;
        justify-content: space-between;
    }
}





/* ========================= */

/* 🔥 RESPONSIVE BREAKPOINTS */
/* ========================= */

/* Tablet */
@media (max-width: 1024px) {
    nav {
        display: none;
    }

}

/* Mobile */
@media (max-width: 768px) {



    .nav-links {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #111;
        flex-direction: column;
        display: none;
        padding: 20px;
    }

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

    .menu-toggle {
        display: block;
        color: white;
        margin-left: 152px;
    }



}

/* Small devices */
@media (max-width: 360px) {}

/* =========================================================
   ================  GLOBAL RESPONSIVE FIX  =================
   =========================================================
   Consolidated, mobile-first-safe overrides for every section.
   Placed last so it wins the cascade over earlier fixed-width
   rules without needing !important everywhere.
   ========================================================= */



/* -------- Large desktop / laptop (<=1440px) -------- */
@media (max-width: 1440px) {
    .initiatives-grid {
        margin: 48px 40px;
    }
}

/* -------- Small laptop / large tablet (<=1200px) -------- */
@media (max-width: 1200px) {
    .container-about {
        margin: 0 40px;
    }

    .programs {
        margin: 0 40px;
    }

    .features-enskool {
        margin: 0 40px;
    }

    .program-left h1 {
        width: 100%;
        height: auto;
    }

    .features-item {
        width: 100%;
        height: auto;
    }

    .features-item-content p {
        width: 100%;
    }

    .initiatives-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .initiatives-card {
        width: 100%;
        height: auto;
        padding-bottom: 24px;
    }

    .students-section-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    .students-section-card-img-img {
        width: 100%;
        height: auto;
        aspect-ratio: 8/5;
        object-fit: cover;
    }
}

/* -------- Tablet (<=1024px) -------- */
@media (max-width: 1024px) {



    /* ABOUT */
    .container-about {
        flex-direction: column;
        text-align: center;
        padding-top: 50px;
    }

    .left-about {
        width: 100%;
    }

    .desc-about {
        margin: 20px auto;
    }

    .right-about {
        width: 100%;
        flex-direction: column;
    }

    .card-about {
        height: 380px;
    }


    /* WHY */
    .why-content {
        flex-direction: column;
    }

    .why-card {
        width: 100%;
        max-width: 420px;
    }

    .center-image img {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    /* FEATURES ENSKOOL */
    .features-item,
    .features-item.reverse {
        flex-direction: column;
        text-align: center;
        height: auto;
        padding: 25px;
    }

    .features-item-content {
        flex-direction: column;
        text-align: center;
    }

    .features-item-content h3,
    .features-item-content p {
        text-align: center !important;
    }

    .features-image img {
        width: 100%;
        height: 240px;
        object-fit: cover;
    }

    /* INITIATIVES */
    .initiatives-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 40px 20px;
    }

    /* STUDENTS */
    .students-section-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* COMMUNITY */
    .community-container {
        flex-direction: column;
        gap: 30px;
    }

    .community-left {
        text-align: center;
    }

    .community-left-desc {
        margin: 20px auto 30px;
    }
}

/* -------- Mobile (<=768px) -------- */
@media (max-width: 768px) {



    /* ABOUT */
    .container-about {
        margin: 0 16px;
    }

    .left-about h1 {
        font-size: 34px;
    }

    .card-about {
        height: 320px;
    }


    /* WHY */
    .why {
        padding: 40px 20px;
    }

    .why-top h2 {
        font-size: 28px;
    }

    .why-card {
        width: 100%;
        max-width: 100%;
    }

    /* INITIATIVES */
    .initiatives {
        padding: 40px 20px;
    }

    .initiatives-top h2 {
        font-size: 30px;
    }

    .initiatives-grid {
        grid-template-columns: 1fr;
        margin: 32px 0;
        gap: 20px;
    }

    .initiatives-card {
        width: 100%;
    }

    /* STUDENTS */
    .students-section {
        padding: 40px 16px;
    }

    .students-section-title {
        font-size: 32px;
    }

    .students-section-cards {
        grid-template-columns: 1fr;
    }

    .students-section-tabs {
        gap: 10px;
    }

    .students-section-tabs .tab {
        padding: 10px 16px;
        font-size: 13px;
    }

    /* COMMUNITY */
    .community {
        padding: 50px 20px;
    }

    .community-left h1 {
        font-size: 34px;
    }

    .community-card {
        flex-direction: column;
        text-align: center;
    }

    .community-avatar {
        width: 90px;
        height: 90px;
    }

    .community-card.active {
        border-left: none;
        border-top: 8px solid #6c4cff;
    }

    .community-quote {
        top: 12px;
        right: 12px;
        width: 28px;
    }

    .menu-toggle {
        margin-left: 0;
    }
}

/* -------- Small mobile (<=480px) -------- */
@media (max-width: 480px) {

    .left-about h1 {
        font-size: 26px;
    }

    .btn-about {
        width: 100%;
        justify-content: space-between;
    }

    .program-left h1 {
        font-size: 24px;
    }

    .why-top h2 {
        font-size: 24px;
    }

    .initiatives-top h2 {
        font-size: 24px;
    }

    .initiatives-card h3 {
        font-size: 24px;
    }

    .students-section-title {
        font-size: 26px;
    }

    .community-left h1 {
        font-size: 26px;
    }

    .community-btn {
        width: 100%;
        justify-content: center;
    }
}

/* -------- Extra small mobile (<=360px) -------- */
@media (max-width: 360px) {

    .students-section-tabs .tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}



/*==========================================
RESPONSIVE.CSS
==========================================*/


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

@media (max-width:1400px) {

    .program-container {

        max-width: 1200px;

        gap: 28px;

    }

    .program-hero-heading h1 {

        font-size: 58px;

    }

    .program-grid {

        gap: 18px;

    }

    .program-card {

        padding: 28px 22px;

    }

    .program-image-wrapper {

        min-height: 700px;

    }

}


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

@media (max-width:1200px) {

    .program-container {

        grid-template-columns: 1.4fr .9fr;

        gap: 24px;

    }

    .program-hero-heading h1 {

        font-size: 52px;

    }

    .program-card {

        min-height: 310px;

    }

    .program-card h3 {

        font-size: 24px;

    }

    .program-card p {

        font-size: 15px;

    }

    .program-image-wrapper {

        min-height: 650px;

    }

    .program-floating-card {

        left: 20px;

        right: 20px;

        bottom: 20px;

    }

    .program-card-top h4 {

        font-size: 22px;

    }

}


/*==========================================
1024px
==========================================*/

@media (max-width:1024px) {

    .program-container {

        grid-template-columns: 1fr;

    }

    .program-right-area {

        order: -1;

    }

    .program-image-wrapper {

        min-height: 620px;

    }

    .program-hero-heading {

        margin-top: 25px;

    }

    .program-hero-heading h1 {

        max-width: 100%;

        font-size: 48px;

    }

    .program-grid {

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

    }

}


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

@media (max-width:992px) {

    .program-grid {

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

    }

    .program-tag-wrapper {

        gap: 10px;

    }

    .program-tag {

        font-size: 14px;

        padding: 10px 18px;

    }

    .program-info-bar {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

    .program-info-right {

        width: 100%;

        justify-content: space-between;

    }

    .program-floating-card {

        position: absolute;

    }

}

/* =========================================================
   ENSKOOL — FINAL CONTENT RESPONSIVE OVERRIDES
   Header + Footer are intentionally NOT modified.
   ========================================================= */

.hero {
    min-height: 760px;
    height: auto;
    padding: 150px 0 125px;
}

/* .hero-content {
    width: min(1200px, calc(100% - 48px));
    margin: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
} */

/* .left-content {
    min-width: 0;
    margin-top: 0;
} */

/* .left-content h1 {
    font-size: clamp(42px, 4.4vw, 64px);
    max-width: 680px;
} */

/* .left-content p {
    max-width: 560px;
} */

/* .right-content {
    min-width: 0;
} */

/* .right-content img {
    width: min(100%, 650px);
    height: auto;
    margin: auto;
} */

.feature-strip {
    width: min(1180px, calc(100% - 48px));
    margin: auto;
}

/* .stats{padding:100px 0 60px;} */
/* .stats .container{width:min(1200px,calc(100% - 48px));} */


.about {
        background: #fff;
}

.container-about {
        padding-bottom: 53px;
    width: min(1331px, calc(100% - 48px));
    max-width: none;
    margin: 0 auto;
    padding-top: 40px;
    gap: clamp(32px, 5vw, 70px);
}

.left-about,
.right-about {
    min-width: 0;
}

.left-about h1 {
    font-size: clamp(42px, 4.5vw, 60px);
}

.left-about .desc-about {
    max-width: 520px;
}

.right-about {
    flex: 1.15;
}

.card-about {
    min-width: 0;
    height: 440px;
}

.text-about {
    font-size: 13px;
    line-height: 1.55;
}

.program-section {
}

.program-container {
    width: min(1320px, calc(100% - 48px));
    max-width: none;
    padding-inline: 0;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr);
    gap: clamp(28px, 4vw, 56px);
}

.program-left-area,
.program-right-area {
    min-width: 0;
}

.program-hero-heading h1 {
    font-size: clamp(42px, 5vw, 64px);
    max-width: 700px;
}

.program-grid {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;

    overflow-x: hidden;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.program-grid::-webkit-scrollbar {
    display: none;
}


.program-grid .program-card {

    flex: 0 0 calc(33.333% - 16px);

    width: calc(33.333% - 16px);

    box-sizing: border-box;

}

.program-card {
    min-width: 0;
    min-height: 330px;
    padding: 28px 38px;
}

.program-card p {
    font-size: 15px;
    line-height: 1.55;
}

.program-image-wrapper {
    min-height: 657px;
}

.program-floating-card {
    left: 22px;
    right: 22px;
}

.why {
    padding: 45px 24px;
}

.why-content {
width: min(1200px, 100%);
  margin-inline: auto;
  gap: 75px;
}

.why-card {
    width: min(320px, 100%);
    min-height: 480px;
}

.center-image {
    min-width: 0;
    flex: 0 1 380px;
}

.center-image img {
    width: 100%;
    height: 520px;
}

.features-enskool {
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0px 0 !important;
    gap: 24px;
    padding-bottom: 8px;
    background: #ffffff;
}

.features-item {
    width: 100%;
    min-height: 250px;
    height: auto;
    padding: 28px;
}

.features-item-content,
.features-image {
    min-width: 0;
}

.features-item-content h3 {
    font-family: "Delight";
    letter-spacing: 1px;
    font-size: clamp(24px, 2.6vw, 33px);
}

.features-item-content p {
    width: 100%;
    max-width: 520px;
    line-height: 1.6;
}

.features-image img {
    width: 100%;
    height: 210px;
}

.initiatives {
    padding: 90px 24px;
}

.initiatives-grid {
    width: min(1200px, 100%);
    margin: 48px auto 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.initiatives-card {
    width: 100%;
    height: auto;
    min-height: 345px;
}

.initiatives-img-box img {
    width: 100%;
    height: 155px;
}

.initiatives-card h3 {
    font-size: clamp(25px, 2.5vw, 33px);
}

.students-section {
    padding: 90px 24px;
}

.students-section-cards {
    width: min(1200px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.students-section-card {
    min-width: 0;
}

.students-section-card-img-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.6/1;
    object-fit: cover;
}

.students-section-tabs {
    max-width: 1000px;
    margin-inline: auto;
    gap: 12px;
}

.community {
    background: linear-gradient(to top, #482464, #000000);
    padding: 90px 24px;
}

.community-container {
    width: min(1200px, 100%);
    gap: clamp(32px, 6vw, 80px);
}

.community-left,
.community-right {
    min-width: 0;
}

.community-left h1 {
    color: #fff;
    font-size: clamp(38px, 4.5vw, 52px);font-size: clamp(38px, 4.5vw, 52px);
}

.community-card {
    min-width: 0;
}

.community-card-content {
    min-width: 0;
}

.community-text {
    max-width: 520px;
}



@media(max-width:1024px) {
    .hero {
        min-height: auto;
        padding: 130px 0 100px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .left-content h1,
    .left-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
        margin-bottom: 40px;
    }

    .right-content {
        margin-top: 10px;
    }

    .feature-strip {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 36px auto -30px;
    }

    .feature-item {
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .feature-item:nth-child(odd) {
        border-right: 1px solid #eee;
    }

    .feature-item:nth-last-child(-n+2) {
        border-bottom: none;
    }


    .container-about {
        flex-direction: column;
        text-align: center;
    }

    .left-about .desc-about {
        margin-inline: auto;
    }

    .right-about {
        width: 100%;
    }

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

    .program-right-area {
        order: -1;
    }

    .program-image-wrapper {
        min-height: 560px;
    }

    .program-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .why-content {
        flex-wrap: wrap;
    }

    .why-card {
        flex: 1 1 300px;
        max-width: 360px;
    }

    .center-image {
        order: -1;
        flex-basis: 100%;
        justify-content: center;
    }

    .center-image img {
        width: min(430px, 100%);
        height: 480px;
    }

    .features-item,
    .features-item.reverse {
        flex-direction: column;
        text-align: center;
    }

    .features-item-content {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .features-item-content h3,
    .features-item-content p {
        text-align: center !important;
    }

    .features-image {
        width: 100%;
    }

    .features-image img {
        height: 230px;
    }

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

    .students-section-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-container {
        flex-direction: column;
    }

    .community-left {
        text-align: center;
    }

    .community-left-desc {
        margin-inline: auto;
    }


}

@media(max-width:768px) {
    .hero {
        padding: 105px 0 35px;
        border-bottom-left-radius: 28px;
        border-bottom-right-radius: 28px;
    }

    .hero-content {
        width: min(calc(100% - 32px), 620px);
    }

    .left-content h1 {
        font-size: clamp(32px, 7vw, 44px);
    }

    .left-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 26px;
        margin-bottom: 0;
    }

    .explore,
    .download {
        width: min(100%, 234px);
        justify-content: end;
    }

    .right-content {
        margin-top: 12px;
    }

    .right-content img {
        width: min(100%, 460px);
    }

    .feature-strip {
        width: min(calc(100% - 32px), 620px);
        margin: 30px auto 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 18px;
        padding: 4px;
    }

    .feature-item {
        padding: 14px 10px;
        gap: 10px;
    }

    .feature-item span {
        font-size: 12px;
    }


    .about {
        padding: 30px 0 60px;
    }

    .container-about {
        width: min(calc(100% - 32px), 620px);
        padding-top: 20px;
        gap: 34px;
    }

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

    .tag-left img {
        width: 120px;
    }

    .left-about h1 {
        font-size: clamp(32px, 8vw, 44px);
    }

    .right-about {
        flex-direction: column;
        gap: 16px;
    }

    .card-about {
        height: 360px;
    }

    .content-about {
        padding: 18px;
    }

    .content-about h3 {
        font-size: 19px;
    }

    .text-about {
        font-size: 12px;
    }

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

    .program-container {
        width: min(calc(100% - 32px), 620px);
    }

    .program-hero-heading h1 {
        font-size: clamp(36px, 8vw, 48px);
    }

    .program-tag-wrapper {
        gap: 8px;
    }

    .program-tag {
        padding: 9px 14px;
        font-size: 13px;
    }

    .program-info-bar {
        padding: 14px;
    }

    .program-info-left p {
        font-size: 15px;
    }

    .program-grid {
        display: flex;
        overflow-x: hidden !important;
        scroll-snap-type: none !important;
        gap: 16px;
        padding: 4px 2px 12px;
    }

    .program-grid::-webkit-scrollbar {
        display: none;
    }

    .program-card {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .program-image-wrapper {
        min-height: 460px;
    }

    .program-floating-card {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 18px;
    }

    .why {
        padding: 65px 16px;
    }

    .why-top h2 {
        font-size: clamp(32px, 7vw, 44px);
    }

    .why-top p {
        font-size: 15px;
    }

    .why-content {
        margin-top: 38px;
        gap: 18px;
    }

    .why-card {
        width: 100%;
        max-width: 620px;
    }

    .center-image img {
        height: 450px;
        /* object-fit: contain; */
        border-radius: 81px;
        object-position: 0 -100px;
    }

    .features-enskool {
        width: min(calc(100% - 32px), 620px);
        padding: 60px 0;
    }

    .features-item {
        padding: 20px;
        border-radius: 20px;
    }

    .features-item-content {
        gap: 18px;
    }

    .features-item-icon {
        min-width: 68px;
        width: 68px;
        height: 68px;
        margin: 0 auto;
    }

    .features-item-icon img {
        width: 44px;
    }

    .features-item-content h3 {
        font-size: 25px;
    }

    .features-item-content p {
        font-size: 14px;
    }

    .features-image img {
        height: 220px;
    }

    .initiatives {
        padding: 65px 16px;
    }

    .initiatives-top h2 {
        font-size: clamp(30px, 7vw, 42px);
    }

    .initiatives-grid {
        width: min(100%, 620px);
        grid-template-columns: -1fr;
        margin-top: 32px;
    }

    .initiatives-card {
        min-height: 0;
        padding: 12px;
    }

    .initiatives-img-box img {
        height: 180px;
    }

    .students-section {
        padding: 65px 16px;
    }

    .students-section-title {
        font-size: clamp(30px, 7vw, 42px);
    }

    .students-section-subtitle {
        font-size: 15px;
    }

    .students-section-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 4px 2px 10px;
        scrollbar-width: none;
    }

    .students-section-tabs::-webkit-scrollbar {
        display: none;
    }

    .students-section-tabs .tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 12px;
    }

    .students-section-cards {
        grid-template-columns: 1fr;
        width: min(100%, 460px);
    }

    .community {
        padding: 65px 16px;
    }

    .community-left h1 {
        font-size: clamp(34px, 8vw, 46px);
    }

    .community-card {
        padding: 22px 18px;
        text-align: center;
    }

    .community-avatar {
        width: 92px;
        height: 92px;
    }

    .community-card-content {
        width: 100%;
    }

    .community-quote {
        top: 12px;
        right: 12px;
        width: 28px;
    }

    #app {
        padding: 65px 0 70px;
    }

    #app .wrapper {
        width: min(calc(100% - 32px), 620px);
        gap: 32px;
    }

    #app .left {
        max-width: none;
        text-align: center;
    }

    #app .left button.app {
        display: inline-block;
        margin: 0 auto 16px;
    }

    #app .left h3 {
        font-size: clamp(30px, 8vw, 38px);
        text-align: center;
    }

    #app .left p.sub {
        font-size: 14px;
        text-align: center;
        margin-inline: auto;
    }

    #app .left a.explore {
        width: max-content;
        margin: 4px auto 22px;
    }

    #app .download-box {
        text-align: center;
    }

    #app .download-box .features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 12px;
    }

    #app .right {
        min-height: 360px;
    }

    #app .right .app-img img {
        width: min(320px, 88%);
    }

    #ctab-banner {
        padding: 0 16px;
    }

    #ctab-banner .ctab {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
        gap: 22px;
        border-radius: 24px;
    }

    #ctab-banner .ctab-text h2 {
        font-size: clamp(28px, 7vw, 36px);
    }

    #ctab-banner .ctab-text p {
        font-size: 13px;
    }
}

@media(max-width:480px) {
    .hero {
               padding-top: 153px;
    }

    .mini-title {
        letter-spacing: 2px;
        font-size: 9px;
        padding: 8px 12px;
    }

    .feature-item {
        padding: 12px 8px;
    }

    .feature-item img {
        width: 20px;
        height: 20px;
    }

    .feature-item span {
        font-size: 10px;
    }



    .initiatives-grid {
        width: min(100%, 620px);
        grid-template-columns: 1fr;
        margin-top: 32px;
        /* height: 100px; */
        padding: 12px;
        width: 80%;
    }


    .program-card {
        flex-basis: 100%;
        min-height: 300px;
    }

    .program-info-left {
        align-items: flex-start;
    }

    .program-info-right {
        justify-content: space-between;
    }

    .program-image-wrapper {
        min-height: 390px;
        border-radius: 24px;
    }

    .program-card-features {
        gap: 7px;
    }

    .program-card-features span {
        padding: 8px 11px;
        font-size: 12px;
    }

    .why-card {
        padding: 24px 20px;
    }

    .center-image img {
        height: 450px;
        border-radius: 22px;
        background-position-x: 83px;
        /* object-fit: 20px; */
        object-position: 0px 0px;
    }

    .features-item-content {
        flex-direction: column;
    }

    .features-image img {
        height: 190px;
    }

    .initiatives-card h3 {
        font-size: 26px;
    }

    .students-section-card {
        padding: 12px;
    }

    #app .download-box {
        padding: 18px 12px;
    }

    #app .download-box div.install-btns {
        flex-direction: column;
        gap: 10px;
    }

    #app .right {
        min-height: 310px;
    }

    #ctab-banner .ctab {
        width: 100%;
        border-radius: 20px;
    }

    #ctab-banner .ctab-text p br {
        display: none;
    }
}

@media(max-width:360px) {

    .hero-content,
    .feature-strip,
    .container-about,
    .program-container,
    .features-enskool,
    #app .wrapper {
        width: calc(100% - 24px);
    }

    .left-content h1 {
        font-size: 29px;
    }

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

    .feature-item span {
        font-size: 9px;
    }

    .initiatives-grid {
        width: min(100%, 620px);
        grid-template-columns: 1fr;
        margin-top: 32px;
        /* height: 100px; */
        padding: 12px;
        width: 97%;
    }

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

    .program-card {
        padding: 25px 40px;
    }

    .community-card {
        padding: 20px 14px;
    }

    #ctab-banner {
        padding-inline: 12px;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    .right-content img,
    .program-floating-card {
        animation: none !important;
    }

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

.fav-icon {
    border-radius: 50px;
}

/* =========================================================
   ABOUT ENSKOOL — TEXT LAYOUT (NO CARDS)
   ========================================================= */

.container-about {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(40px, 5vw, 70px);
}

.left-about {
    flex: 1 1 0;
    min-width: 0;
}

.right-about-text {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
}

.about-text-block {
    width: 100%;
}

.about-text-block span {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #5446B6;
}

.about-text-block h3 {
    margin: 0 0 14px;
    max-width: 480px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    color: #111;
    font-family: "Delight";
}

.about-text-block p {
    margin: 0;
    max-width: 500px;
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}

.about-text-divider {
    width: 100%;
    max-width: 540px;
    height: 1px;
    margin: 40px 0;
    background: #dedede;
}

@media (max-width: 1024px) {
    .container-about {
        flex-direction: column;
        gap: 50px;
    }

    .left-about,
    .right-about-text {
        width: 100%;
    }

    .right-about-text {
        padding-left: 0;
    }

    .about-text-block h3,
    .about-text-block p,
    .about-text-divider {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .container-about {
        width: min(calc(100% - 32px), 620px);
        margin: 0 auto;
        gap: 40px;
    }

    .right-about-text {
        margin-top: 0;
        padding-left: 0;
    }

    .about-text-block h3 {
        font-size: 25px;
    }

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

    .about-text-divider {
        margin: 30px 0;
    }
}

@media (max-width: 480px) {
    .about-text-block h3 {
        font-size: 22px;
    }

    .about-text-block p {
        font-size: 13px;
    }
}
/* ================================
   PROGRAM AUTO SLIDER
================================ */
.program-grid {
    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scroll-snap-type: none !important;

    scroll-behavior: smooth;

    touch-action: pan-y;

    scrollbar-width: none;
}

.program-grid::-webkit-scrollbar {
    display: none;
}


/* DEFAULT LAPTOP / DESKTOP
   Show 3 cards */

.program-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: calc((100% - 40px) / 3);

    box-sizing: border-box;
}


/* LARGE DESKTOP / TV
   Show 4 cards */

@media (min-width: 1600px) {

    .program-card {
        flex: 0 0 calc((100% - 60px) / 4);
        min-width: calc((100% - 60px) / 4);
    }

}


/* TABLET
   Show 2 cards */

@media (max-width: 1000px) {

    .program-grid {
        gap: 18px;
    }

    .program-card {
        flex: 0 0 calc((100% - 18px) / 2);
        min-width: calc((100% - 18px) / 2);
    }

}


/* MOBILE
   Show 1 card */

@media (max-width: 600px) {

    .program-grid {
        gap: 15px;
    }

    .program-card {
        flex: 0 0 100%;
        min-width: 100%;
    }

}


/* HIDE SLIDER BUTTONS */

.program-slider-nav,
.program-slider-btn {
    display: none !important;
}

/* =========================================================
   PREMIUM OUR INITIATIVES — INFOGRAPHIC CARD REDESIGN
   Existing CSS above is intentionally preserved.
========================================================= */

.initiatives {
    position: relative;
    overflow: hidden;
}

.initiatives-grid {
    position: relative;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 28px !important;
    margin: 48px auto !important;
    width: min(1180px, calc(100% - 120px));
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 15px 8px 42px !important;
}

.initiatives-grid::-webkit-scrollbar {
    display: none;
}

.initiatives-card {
    position: relative;
    flex: 0 0 267px !important;
    width: 267px !important;
    height: 365px !important;
    min-height: 365px !important;
    padding: 12px 10px 0 !important;
    background: #fff !important;
    color: #111 !important;
    border-radius: 48px 0 28px 28px !important;
    overflow: visible !important;
    text-align: center;
    scroll-snap-align: start;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    transition: transform .35s ease, box-shadow .35s ease;
}

.initiatives-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 28px 55px rgba(0,0,0,.26);
}

.initiatives-img-box {
    position: relative;
    width: 100%;
    height: 155px;
    overflow: visible;
}

.initiatives-img-box > img {
    display: block;
    width: 100% !important;
    height: 155px !important;
    object-fit: cover;
    border-radius: 36px 0 0 0 !important;
}

.initiatives-icon {
    position: absolute;
    left: 50%;
    bottom: -24px;
    transform: translateX(-50%);
    width: 52px !important;
    height: 52px !important;
    border-radius: 50%;
    background: #fff !important;
    border: 4px solid #f0edf4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    box-shadow: 0 7px 17px rgba(0,0,0,.16);
}

.initiatives-icon img {
    width: 27px !important;
    height: 27px !important;
    object-fit: contain;
}

.initiatives-card h3 {
    position: relative;
    z-index: 6;
    margin: 34px 12px 0 !important;
    font-size: 28px !important;
    line-height: 1.15;
    font-weight: 700;
    color: #111 !important;
}

.initiatives-card p {
    position: relative;
    z-index: 6;
    max-width: 225px;
    margin: 12px auto 0 !important;
    padding: 0 3px 75px;
    font-size: 14px !important;
    line-height: 1.55;
    color: #6b6b6b !important;
}

/* Coloured bottom platform */
.initiatives-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    border-radius: 0 0 28px 28px;
    z-index: 1;
}

/* Curved upper edge of platform */
.initiatives-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 43px;
    height: 40px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 2;
}

/* Number badge */
.initiative-number {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #54277c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #222;
    z-index: 10;
    box-shadow: 0 5px 14px rgba(0,0,0,.14);
}

/* Individual accent colours */
.initiatives-card:nth-child(1)::before,
.initiatives-card:nth-child(1)::after {  }
.initiatives-card:nth-child(1) .initiative-number { }

.initiatives-card:nth-child(2)::before,
.initiatives-card:nth-child(2)::after {  }
.initiatives-card:nth-child(2) .initiative-number { border-color: #41438e; }

.initiatives-card:nth-child(3)::before,
.initiatives-card:nth-child(3)::after {  }
.initiatives-card:nth-child(3) .initiative-number { border-color: #4b216f; }

.initiatives-card:nth-child(4)::before,
.initiatives-card:nth-child(4)::after {  }
.initiatives-card:nth-child(4) .initiative-number { border-color: #642b87; }

.initiatives-card:nth-child(5)::before,
.initiatives-card:nth-child(5)::after { }
.initiatives-card:nth-child(5) .initiative-number { border-color: #742d88; }

/* Slider arrows */
.initiatives-slider-btn {
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    background: rgba(255,255,255,.97);
    color: #54277c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 10px 25px rgba(0,0,0,.24);
    transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.initiatives-slider-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 15px 30px rgba(0,0,0,.3);
}

.initiatives-slider-btn:disabled {
    opacity: .35;
    cursor: default;
}

.initiatives-slider-btn.prev { left: 28px; }
.initiatives-slider-btn.next { right: 28px; }

/* Keep original dots in the DOM, but hide them because arrows control this carousel. */
.initiatives .dots {
    display: none !important;
}

@media (max-width: 1100px) {
    .initiatives-grid {
        width: calc(100% - 120px);
    }

    .initiatives-slider-btn.prev { left: 20px; }
    .initiatives-slider-btn.next { right: 20px; }
}

@media (max-width: 700px) {
    .initiatives-grid {
        width: calc(100% - 70px);
        gap: 20px !important;
        margin: 38px auto !important;
        padding: 12px 3px 35px !important;
    }

    .initiatives-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100%;
        height: 365px !important;
        min-height: 365px !important;
    }

    .initiatives-img-box,
    .initiatives-img-box > img {
        height: 160px !important;
    }

    .initiatives-slider-btn {
        width: 43px;
        height: 43px;
        font-size: 20px;
    }

    .initiatives-slider-btn.prev { left: 8px; }
    .initiatives-slider-btn.next { right: 8px; }
}

@media (max-width: 430px) {
    .initiatives-grid {
        width: calc(100% - 60px);
    }

    .initiatives-card {
        height: 355px !important;
        min-height: 355px !important;
    }

    .initiatives-card h3 {
        font-size: 26px !important;
    }

    .initiatives-card p {
        font-size: 13.5px !important;
        max-width: 250px;
    }

    .initiatives-slider-btn.prev { left: 6px; }
    .initiatives-slider-btn.next { right: 6px; }
}


/* =========================================================
   ENSKOOL INITIATIVES — PREMIUM MODERN V2
   Existing styles are preserved above.
   This block only overrides the Initiatives section.
   ========================================================= */

.initiatives {
    position: relative;
    padding: 92px 24px 105px;
    background:
        radial-gradient(circle at 15% 20%, rgba(151, 86, 205, .24), transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(77, 45, 126, .28), transparent 32%),
        linear-gradient(145deg, #5b2a86 0%, #321654 48%, #160b27 100%);
    overflow: hidden;
}

.initiatives::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    top: -230px;
    right: -150px;
    background: rgba(255,255,255,.055);
    pointer-events: none;
}

.initiatives::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    bottom: -210px;
    left: -130px;
    background: rgba(255,255,255,.035);
    pointer-events: none;
}

.initiatives-top {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}

.initiatives-top h2 {
    letter-spacing: 1px;
    margin: 0 0 13px;
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.05;
    font-weight: 700;
    /* letter-spacing: -1.2px; */
    color: #fff;
    font-family: "Delight";
}

.initiatives-top p {
    margin: 0 auto;
    max-width: 650px;
    color: rgba(255,255,255,.72);
    font-size: 16px;
    line-height: 1.7;
}

/* slider viewport */
.initiatives-carousel {
    position: relative;
    z-index: 2;
    width: min(1160px, 100%);
    margin: 7px !important;
    padding: 12px 4px 30px !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.initiatives-carousel::-webkit-scrollbar {
    display: none;
}

/* card */
.initiatives-carousel .initiatives-card {
    position: relative;
    flex: 0 0 272px !important;
    width: 272px !important;
    height: 330px !important;
    min-height: 350px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 28px !important;
    background: rgba(255,255,255,.97);
    color: #16121d;
    overflow: hidden !important;
    text-align: left;
    scroll-snap-align: start;
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
    isolation: isolate;
    transition: transform .35s ease, box-shadow .35s ease;
}

.initiatives-carousel .initiatives-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 28px 60px rgba(0,0,0,.30);
}

/* top image */
.initiatives-carousel .initiatives-img-box {
    position: relative;
    width: 100%;
    height: 188px;
    padding: 0;
    overflow: visible !important;
}

.initiatives-carousel .initiatives-img-box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 55px;
    background: linear-gradient(to top, #fff, transparent);
    pointer-events: none;
    z-index: 1;
}

.initiatives-carousel .initiatives-img-box > img {
    display: block;
    width: 100% !important;
    height: 188px !important;
    object-fit: cover;
    border-radius: 28px 28px 0 0 !important;
}

/* number */
.initiatives-carousel .initiative-number {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(24,12,40,.72);
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

/* floating initiative logo */
.initiatives-carousel .initiatives-icon {
    position: absolute;
    left: 22px;
    bottom: -26px;
    transform: none;
    z-index: 7;
    width: 58px;
    height: 58px;
    padding: 8px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(100,46,134,.16);
    box-shadow: 0 12px 26px rgba(37,17,61,.20);
}

.initiatives-carousel .initiatives-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* content */
.initiatives-carousel .initiatives-card h3 {
    position: relative;
    z-index: 5;
    margin: 39px 22px 0 !important;
    padding: 0 !important;
    font-size: 27px !important;
    line-height: 1.15;
    font-weight: 700;
    color: #18131e;
    letter-spacing: -.45px;
}

.initiatives-carousel .initiatives-card p {
    position: relative;
    z-index: 5;
    margin: 12px 22px 0 !important;
    padding: 0 0 20px !important;
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #77717d !important;
}

/* small accent line */
.initiatives-carousel .initiatives-card p::before {
    content: "";
    display: block;
    width: 32px;
    height: 3px;
    margin-bottom: 12px;
    border-radius: 20px;
    background: #642e86;
}

.initiatives-carousel .initiatives-card:nth-child(1) p::before { background: #e13a55; }
.initiatives-carousel .initiatives-card:nth-child(2) p::before { background: #4647a2; }
.initiatives-carousel .initiatives-card:nth-child(3) p::before { background: #642e86; }
.initiatives-carousel .initiatives-card:nth-child(4) p::before { background: #7a3aa2; }
.initiatives-carousel .initiatives-card:nth-child(5) p::before { background: #8b4eb1; }

/* arrow buttons */
.initiatives-slider-btn {
    position: absolute !important;
    top: 56% !important;
    transform: translateY(-50%) !important;
    z-index: 10;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #54277c !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: transform .25s ease, opacity .25s ease, background .25s ease;
}

.initiatives-slider-btn.prev { left: max(8px, calc((100% - 1240px) / 2)) !important; }
.initiatives-slider-btn.next { right: max(8px, calc((100% - 1240px) / 2)) !important; }

.initiatives-slider-btn:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08) !important;
    background: #fff !important;
}

.initiatives-slider-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* old dots kept, but styled cleanly */
.initiatives > .dots {
    position: relative;
    z-index: 3;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 8px auto 0 !important;
    display: none !important;
}

.initiatives > .dots span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
}

.initiatives > .dots span.active {
    width: 24px;
    border-radius: 20px;
    background: #fff;
}

/* tablet */
@media (max-width: 1100px) {
    .initiatives-carousel {
        width: min(860px, calc(100% - 70px));
    }

    .initiatives-carousel .initiatives-card {
        flex-basis: 270px !important;
        width: 270px !important;
    }

    .initiatives-slider-btn.prev { left: 12px !important; }
    .initiatives-slider-btn.next { right: 12px !important; }
}

/* mobile */
@media (max-width: 600px) {
    .initiatives {
        padding: 65px 12px 75px;
    }

    .initiatives-top {
        margin-bottom: 32px;
        padding: 0 14px;
    }

    .initiatives-top h2 {
        font-size: 34px;
    }

    .initiatives-top p {
        font-size: 14px;
    }

    .initiatives-carousel {
        width: 100%;
        gap: 16px !important;
        padding: 10px 8px 28px !important;
        scroll-snap-type: x mandatory;
        cursor: grab;
    }

    .initiatives-carousel:active {
        cursor: grabbing;
    }

    .initiatives-carousel .initiatives-card {
        flex: 0 0 calc(100vw - 36px) !important;
        width: calc(100vw - 36px) !important;
        max-width: none !important;
        height: 370px !important;
        min-height: 370px !important;
    }

    .initiatives-carousel .initiatives-img-box,
    .initiatives-carousel .initiatives-img-box > img {
        height: 180px !important;
    }

    .initiatives-carousel .initiatives-card h3 {
        font-size: 26px !important;
    }

    .initiatives-slider-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px;
        top: 54% !important;
    }

    .initiatives-slider-btn.prev { left: 3px !important; }
    .initiatives-slider-btn.next { right: 3px !important; }
}

@media (max-width: 380px) {
    .initiatives-carousel .initiatives-card {
        height: 300px !important;
        min-height: 300px !important;
    }

    .initiatives-carousel .initiatives-img-box,
    .initiatives-carousel .initiatives-img-box > img {
        height: 150px !important;
    }
}

@media (max-width: 428px) {
    .initiatives-carousel .initiatives-card {
        height: 300px !important;
        min-height: 300px !important;
    }

    .initiatives-carousel .initiatives-img-box,
    .initiatives-carousel .initiatives-img-box > img {
        height: 150px !important;
    }
}



/* ===================== HOME NEWS ===================== */
.home-news-section{padding:90px 0;background:#faf9ff}
.home-news-container{width:min(1180px,calc(100% - 40px));margin:auto}
.home-news-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.home-news-kicker{display:block;color:#602c80;font-size:12px;font-weight:700;letter-spacing:1.8px;margin-bottom:10px}
.home-news-head h2{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.05;color:#202236}
.home-news-head h2 span{color:#602c80}
.home-news-head p{max-width:520px;color:#737587;line-height:1.7;margin:12px 0 0}
.home-news-view{color:#602c80;text-decoration:none;font-weight:700;white-space:nowrap}
.home-news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.home-news-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #ece9f5;border-radius:24px;overflow:hidden;box-shadow:0 14px 40px rgba(48,30,70,.07);transition:transform .25s ease,box-shadow .25s ease}
.home-news-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(48,30,70,.12)}
.home-news-image{height:220px;overflow:hidden;background:#eee8ff;position:relative}
.home-news-image img{width:100%;height:100%;object-fit:cover;display:block}
.home-news-badge{position:absolute;left:16px;top:16px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:#602c80;font-size:11px;font-weight:700}
.home-news-content{padding:22px}
.home-news-content h3{font-size:20px;line-height:1.3;margin:0 0 10px;color:#24243a}
.home-news-content p{margin:0;color:#77798a;line-height:1.65;font-size:14px}
.home-news-date{display:block;margin-top:14px;color:#9a9aaa;font-size:12px}
@media(max-width:800px){.home-news-grid{grid-template-columns:1fr 1fr}.home-news-head{align-items:start;flex-direction:column}}
@media(max-width:520px){.home-news-grid{grid-template-columns:1fr}.home-news-section{padding:65px 0}.home-news-container{width:min(100% - 28px,1180px)}}



/* =========================================================
   PROGRAMS AUTO SLIDER — FINAL
========================================================= */

.program-grid {

    display: flex !important;

    flex-wrap: nowrap !important;

    overflow-x: hidden !important;

    overflow-y: hidden !important;

    scroll-behavior: auto !important;

    scroll-snap-type: none !important;

    touch-action: pan-y !important;

    scrollbar-width: none !important;

    -ms-overflow-style: none !important;

}


/* Hide scrollbar */

.program-grid::-webkit-scrollbar {
    display: none !important;
}


/* Cards */

.program-grid .program-card {

    flex-shrink: 0 !important;

    scroll-snap-align: none !important;

    box-sizing: border-box !important;

}

/* =========================================================
   PROGRAMS SLIDER — FINAL
========================================================= */

.program-grid {
    width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scroll-behavior: auto !important;
    scroll-snap-type: none !important;

    touch-action: pan-y !important;

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;

    gap: 24px !important;
}

.program-grid::-webkit-scrollbar {
    display: none !important;
}


/* =========================================================
   DESKTOP + LAPTOP
   ALWAYS 3 CARDS
========================================================= */

@media (min-width: 1001px) {

    .program-grid {
        gap: 24px !important;
    }

    .program-grid .program-card {
        flex: 0 0 calc((100% - 48px) / 3) !important;

        width: calc((100% - 48px) / 3) !important;

        min-width: calc((100% - 48px) / 3) !important;

        box-sizing: border-box !important;

        scroll-snap-align: none !important;
    }
}


/* =========================================================
   TABLET
   ALWAYS 2 CARDS
========================================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    .program-grid {
        gap: 18px !important;
    }

    .program-grid .program-card {
        flex: 0 0 calc((100% - 18px) / 2) !important;

        width: calc((100% - 18px) / 2) !important;

        min-width: calc((100% - 18px) / 2) !important;
    }
}


/* =========================================================
   MOBILE
   ALWAYS 1 CARD
========================================================= */

@media (max-width: 600px) {

    .program-grid {
        gap: 16px !important;
    }

    .program-grid .program-card {
        flex: 0 0 100% !important;

        width: 100% !important;

        min-width: 100% !important;
    }
}


/* =========================================================
   HIDE PREVIOUS / NEXT BUTTONS
========================================================= */

.program-slider-nav,
.program-slider-btn,
.program-slider-btn.prev,
.program-slider-btn.next {
    display: none !important;
}


@media (min-width: 601px) and (max-width: 1000px) {
    .program-grid .program-card {
        flex: 0 0 calc((100% - 18px) / 2) !important;
        min-width: calc((100% - 18px) / 2) !important;
    }
}

@media (max-width: 600px) {
    .program-grid .program-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
    }
}



/* =========================================================
   PROGRAMS SLIDER — FINAL OVERRIDE
========================================================= */

.program-grid {
    width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    scroll-behavior: auto !important;
    scroll-snap-type: none !important;

    touch-action: pan-y !important;

    scrollbar-width: none !important;
    -ms-overflow-style: none !important;

    gap: 24px !important;
}

.program-grid::-webkit-scrollbar {
    display: none !important;
}


/* =========================================================
   DESKTOP / LAPTOP = EXACTLY 3 CARDS
========================================================= */

@media (min-width: 1001px) {

    .program-grid {
        gap: 24px !important;
    }

    .program-grid .program-card {
        flex: 0 0 calc((100% - 48px) / 3) !important;
        width: calc((100% - 48px) / 3) !important;
        min-width: calc((100% - 48px) / 3) !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   TABLET = EXACTLY 2 CARDS
========================================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    .program-grid {
        gap: 18px !important;
    }

    .program-grid .program-card {
        flex: 0 0 calc((100% - 18px) / 2) !important;
        width: calc((100% - 18px) / 2) !important;
        min-width: calc((100% - 18px) / 2) !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   MOBILE = EXACTLY 1 CARD
========================================================= */

@media (max-width: 600px) {

    .program-grid {
        gap: 16px !important;
    }

    .program-grid .program-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* =========================================================
   HIDE ALL OLD CONTROLS
========================================================= */

.program-slider-nav,
.program-slider-btn,
.program-slider-btn.prev,
.program-slider-btn.next {
    display: none !important;
}



/* =========================================================
   PROGRAM SLIDER - FINAL RESPONSIVE CSS
========================================================= */

.program-grid {
    display: flex !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 24px !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    /* IMPORTANT:
       JS controls smooth/auto scrolling */
    scroll-behavior: auto !important;

    scroll-snap-type: none !important;

    touch-action: pan-y !important;

    overscroll-behavior-x: none !important;

    scrollbar-width: none !important;

    -ms-overflow-style: none !important;
}


.program-grid::-webkit-scrollbar {
    display: none !important;
}


/* =========================================================
   DESKTOP / LAPTOP
   1001px+
   EXACTLY 3 CARDS
========================================================= */

@media (min-width: 1001px) {

    .program-grid {
        gap: 24px !important;
    }

    .program-grid .program-card {
        flex: 0 0 calc((100% - 48px) / 3) !important;

        min-width: calc((100% - 48px) / 3) !important;

        max-width: calc((100% - 48px) / 3) !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   TABLET
   601px - 1000px
   EXACTLY 2 CARDS
========================================================= */

@media (min-width: 601px) and (max-width: 1000px) {

    .program-grid {
        gap: 18px !important;
    }

    .program-grid .program-card {
        flex: 0 0 calc((100% - 18px) / 2) !important;

        min-width: calc((100% - 18px) / 2) !important;

        max-width: calc((100% - 18px) / 2) !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   MOBILE
   600px AND BELOW
   EXACTLY 1 CARD
========================================================= */

@media (max-width: 600px) {

    .program-grid {
        gap: 16px !important;

        width: 100% !important;

        /* JS controls this */
        scroll-behavior: auto !important;

        overflow-x: hidden !important;
        overflow-y: hidden !important;

        touch-action: pan-y !important;
    }

    .program-grid .program-card {
        flex: 0 0 100% !important;

        min-width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   REMOVE SLIDER BUTTONS
========================================================= */

.program-slider-nav,
.program-slider-btn,
.program-slider-btn.prev,
.program-slider-btn.next {
    display: none !important;
}


/* =========================================================
   PREVENT HORIZONTAL TOUCH SWIPE
========================================================= */

.program-grid {
    -webkit-user-select: none;
    user-select: none;

    -webkit-overflow-scrolling: auto !important;
}

.initiatives-carousel {
    position: relative;
    z-index: 2;
    width: min(1160px, 100%);
    margin: 0px 164px !important;
    padding: 12px 4px 30px !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}




/* =========================================================
   DESKTOP / LAPTOP
   1001px+
   EXACTLY 3 CARDS
========================================================= */

@media (max-width: 1440px) {



    .initiatives-carousel {
    position: relative;
    z-index: 2;
    width: min(1160px, 100%);
    margin: 0px 114px !important;
    padding: 12px 4px 30px !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

}

/* =========================================================
   TABLET
   601px - 1000px
   EXACTLY 2 CARDS
========================================================= */

@media (max-width: 768px) {



    .initiatives-carousel {
    position: relative;
    z-index: 2;
    width: min(1160px, 80%);
    margin: 0px 80px !important;
    padding: 12px 4px 30px !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

}


/* =========================================================
   MOBILE
   600px AND BELOW
   EXACTLY 1 CARD
========================================================= */

@media (max-width: 600px) {

    .program-grid {
        gap: 16px !important;

        width: 100% !important;

        /* JS controls this */
        scroll-behavior: auto !important;

        overflow-x: hidden !important;
        overflow-y: hidden !important;

        touch-action: pan-y !important;
    }

    .program-grid .program-card {
        flex: 0 0 100% !important;

        min-width: 100% !important;

        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    .initiatives-carousel {
    position: relative;
    z-index: 2;
    width: min(1160px, 100%);
    margin: 7px !important;
    padding: 12px 4px 30px !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 24px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

}


@media (max-width: 1024px ) and (min-width: 769px){
        .initiatives-carousel {
        position: relative;
        z-index: 2;
        width: min(1160px, 90%);
        margin: 0px 58px !important;
        padding: 12px 4px 30px !important;
        display: flex !important;
        grid-template-columns: none !important;
        gap: 24px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
}








/* =========================================================
   MOBILE PROGRAM SLIDER CONTROLS
========================================================= */

.program-slider-controls {
    display: none;
}

@media (max-width: 600px) {

    .program-slider-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-top: 24px;
    }

    .program-slider-controls button {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 50%;
        background: #ffffff;
        color: #111111;
        font-size: 22px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition:
            background 0.3s ease,
            color 0.3s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    .program-slider-controls button:hover:not(:disabled) {
        background: #111111;
        color: #ffffff;
        transform: translateY(-2px);
    }

    .program-slider-controls button:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

    .program-slider-controls button:focus-visible {
        outline: 2px solid #111111;
        outline-offset: 4px;
    }
}



@media (max-width: 480px) {
    .download {
        font-size: 14px !important;
        padding: 13px 31px !important;
    }
}