/* ======= Hero Section ======= */
    .hero-section {
        position: relative;
        overflow: hidden;
        padding: 60px 0;
        min-height: 800px;
    }

    /* Hero image styling */
    .hero-img {
        border-radius: 15px;
        width: 100%;
        object-fit: cover;
        height: auto;
        /* default for mobile */
    }

    /* ======= Desktop view: defined hero image height ======= */
    @media (min-width: 992px) {
        .hero-img {
            height: 550px;
            /* adjust as needed (500–650px works well) */
        }
    }

    .training-card {
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 75%;
        padding: 60px 70px;
        top: 300px;
    }

    .training-card .content {
        flex: 1;
        width: 100%;
    }

    .training-card .content h3 {
        font-weight: 700;
        margin-bottom: 15px;
    }

    .training-card .content p {
        margin-bottom: 20px;
        color: #333;
    }

    /* Steps Box */
    .steps-box {
        background: linear-gradient(190deg, #4F83FF, #0016C2);
        color: #fff;
        border-radius: 10px;
        padding: 40px 40px;
        width: 93%;
    }

    /* Each Step Row */
    .step {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 0;
    }

    /* Circle Container */
    .circle {
        background: #FFFBFB;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        /* prevents shrinking on smaller screens */
    }

    /* Icon Inside Circle */
    .circle img {
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

    /* Step Text */
    .step span {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.4;
    }

    /* Button */
    .training-card .btn {
        border-radius: 25px;
    }

    /* Responsive */
    @media (max-width: 767px) {
        .training-card {
            position: static;
            transform: none;
            width: 100%;
            box-shadow: none;
            padding: 15px;
            margin-top: 20px;
        }

        .steps-box {
            display: none;
        }
    }

    .about__v4.section {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #D9D9D9 !important;
    }


    .campuses-line {
        display: flex;
        align-items: center;
        /* ensures perfect vertical alignment */
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .campus-circles {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .campuses-line h2 {
        font-weight: bold;
        margin: 0;
        line-height: 1;
        /* keeps heading tight */
    }

    .campus-circle {
        width: 54px;
        height: 54px;
        background: #FFFFFF;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .campus-circle img {
        width: 80%;
        height: 80%;
        object-fit: contain;
    }

    /* ✅ Mobile view */
    @media (max-width: 767px) {
        .about__v4.section {
            margin-top: 0 !important;
            background-color: #EEEEF0 !important;
        }

        .campuses-line {
            flex-direction: column;
        }

        .campus-circles {
            justify-content: center;
            flex-wrap: nowrap;
        }

        .campus-circle {
            width: 38px;
            height: 38px;
        }
    }

    .programmes {
        position: relative;
        background-color: #0016C2;
        color: #000;
        overflow: hidden;
    }

    /* Background image with opacity for desktop only */
    .programmes::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('../images/grid blocks.png') center/cover no-repeat;
        opacity: 0.5;
        z-index: 0;
    }

    /* Make sure the content stays above the overlay */
    .programmes>* {
        position: relative;
        z-index: 1;
    }

    .programme-card {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        background: #fff;
    }

    .programme-img {
        width: 100%;
        height: 400px;
        object-fit: cover;
        display: block;
    }

    .programme-body {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 30px 20px 50px;
        height: 65%;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }

    .programme-body h5 {
        color: #000;
    }

    .programme-body p {
        font-size: 0.95rem;
        color: #555;
    }

    /* ========================= */
    /* 📱 MOBILE VIEW STYLES */
    /* ========================= */
    @media (max-width: 768px) {
        .programmes {
            background-color: #EEF1FF;
            /* light background */
        }

        .programmes::before {
            display: none;
            /* remove background image */
        }

        #programs {
            color: #000 !important;
        }

        .programme-card {
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            width: 80%;
            margin: auto;
        }

        .programme-img {
            display: none;
        }

        .programme-body {
            position: relative;
            height: auto;
            padding: 25px 20px;
            text-align: center;
        }

        .programme-body h5 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #000;
            position: relative;
            display: inline-block;
        }

        /* underline below “3 Months” */
        .programme-body h5::after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background: #C8CEFD;
            margin: 8px auto 15px;
            border-radius: 2px;
        }

        .programme-body p {
            color: #555;
            font-size: 1rem;
        }

        .register-link {
            text-decoration: none;
        }
    }