:root {
            --primary-blue: rgb(12,129,247);;
            --accent-gold: #ffcc00;
            --text-dark: #333333;
            --light-bg: #f4f7f6;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-dark);
            line-height: 1.7;
            background-color: #ffffff;
        }
        /* Hero Section */
        .edu_hero-section {
            /* background-color: rgb(31, 26, 26); */
            height: 350px; /* your banner height */
            background-image: url('/assets/img/Untitled\ design\ \(4\).jpg'); /* path from your project */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: white;
            padding: 80px 0 60px;
            margin-top: 50px;
            text-align: center;
            border-bottom: 5px solid var(--accent-gold);
        }
        .edu_hero-title {
            font-weight: 800;
            margin-bottom: 20px;
            color: lightgrey;
        }

        /* Section Styling */
        .edu_section-padding {
            padding: 20px 0;
        }
        .edu_bg-alternate {
            background-color: var(--light-bg);
        }
        .edu_section-header {
            color: var(--primary-blue);
            font-weight: 700;
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 10px;
        }
        .edu_section-header::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 4px;
            text-align: center;
            background-color: var(--accent-gold);
            /* background-color: aqua; */
        }
        .text-center .edu_section-header::after {
            left: 50%;
            transform: translateX(-50%);
        }

        /* Cards */
        .edu_info-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            height: 100%;
            border-top: 4px solid var(--primary-blue);
            transition: transform 0.3s ease;
        }
        .edu_info-card:hover {
            transform: translateY(-5px);
            border-top-color: var(--accent-gold);
        }
        .edu_info-card h4 {
            color: var(--primary-blue);
            font-weight: bold;
        }

        /* Lists */
        .edu_custom-list {
            list-style: none;
            padding-left: 0;
        }
        .edu_custom-list li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
        }
        .edu_custom-list li::before {
            /* content: "\f00c"; */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 2px;
            color: var(--accent-gold);
            font-size: 1.1rem;
        }

        /* Quote Box */
        .edu_quote-box {
            background-color: var(--light-bg);
            border-left: 5px solid var(--accent-gold);
            padding: 20px 30px;
            font-size: 1.25rem;
            font-style: italic;
            font-weight: bold;
            color: var(--primary-blue);
            margin: 20px 0;
        }

        /* CTA Section */
        .edu_cta-section {
            background-color: var(--primary-blue);
            color: white;
            text-align: center;
            border-top: 5px solid var(--accent-gold);
        }
        .edu_cta-section .edu_section-header {
            color: white;
        }


        /* Scroll to Top Button */
        #edu_scrollTopBtn {
            display: none;
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 99;
            font-size: 18px;
            border: none;
            outline: none;
            background-color: var(--accent-gold);
            color: var(--primary-blue);
            cursor: pointer;
            padding: 15px;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: 0.3s;
        }
        #edu_scrollTopBtn:hover {
            background-color: var(--primary-blue);
            color: white;
        }

        /* Image gallery styling */
    .img_container {
      max-width: 700px;
      margin: 50px auto;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      padding: 0 10px;
    }

    .img_container__img-holder {
      width: calc(25% - 10px);
      cursor: pointer;
    }

    .img_container__img-holder img {
      width: 100%;
      height: 80px;
      object-fit: cover;
      display: block;
      border-radius: 4px;
      transition: transform 0.3s ease;
    }

    @media (max-width: 768px) {
      .img_container__img-holder {
        width: calc(50% - 10px);
      }
    }

    @media (max-width: 480px) {
      .img_container__img-holder {
        width: 100%;
      }
    }

    .img_container__img-holder:hover img {
      transform: scale(1.03);
    }

    /* Popup Styling */
    .img_popup {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.85);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      padding: 10px;
    }

    .img_popup img {
      max-width: 900px;
      width: 100%;
      max-height: 90vh;
      object-fit: contain;
      opacity: 0;
      margin-top: 70px;
      transform: translateY(-100px);
    }

    .img_close-btn {
      width: 35px;
      height: 30px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      z-index: 1001;
    }

    .img_close-btn .bar {
      height: 4px;
      background: #fff;
    }

    .img_close-btn .bar:nth-child(1) {
      transform: rotate(45deg);
    }

    .img_close-btn .bar:nth-child(2) {
      transform: translateY(-4px) rotate(-45deg);
    }

    .img_opened {
      display: flex;
    }

    .img_opened img {
      animation: animatepopup 0.4s ease-in-out forwards;
    }

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