/* Navbar direction fix: LTR on desktop, RTL on mobile if needed */
.nav-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  direction: ltr;
}
@media (max-width: 768px) {
  .nav-list {
    flex-direction: column;
    direction: rtl;
    align-items: flex-end;
  }
}
.carousel-arrows-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 18px;
}
.carousel-arrows-row .carousel-arrow.left {
  order: 1;
}
.carousel-arrows-row .carousel-arrow.right {
  order: 2;
}
@media (max-width: 600px) {
  .carousel-arrows-row {
    gap: 16px;
    margin-top: 10px;
  }
}
/* Modern Carousel Styles */
.custom-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 32px auto;
  max-width: 98vw;
}
.carousel-image-wrapper {
  width: 90vw;
  max-width: 600px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(26,77,46,0.10);
  overflow: hidden;
}
.custom-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  transition: opacity 0.3s;
}
.carousel-arrow {
  background: #1a4d2e;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.carousel-arrow:hover {
  background: #b48a00;
}
@media (max-width: 600px) {
  .carousel-image-wrapper {
    height: 200px;
    max-width: 98vw;
  }
  .custom-carousel {
    gap: 8px;
  }
  .carousel-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.5rem;
  }
}
/* Hide Mailchimp honeypot message and field */
div[aria-hidden="true"] {
  display: none !important;
}
/* Add space below sitemap in footer */
.footer-sitemap {
  margin-bottom: 32px;
}
/* Admission Apply Button */
.apply-btn {
  display: inline-block;
  background: #1a4d2e;
  color: #fff;
  font-size: 1.18em;
  font-weight: 600;
  padding: 13px 38px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(26,77,46,0.10);
  transition: background 0.2s, transform 0.18s, box-shadow 0.18s;
  letter-spacing: 0.5px;
}
.apply-btn:hover {
  background: #b48a00;
  color: #fffbe9;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 24px rgba(180,138,0,0.13);
}
@media (min-width: 1200px) {
  .gallery-fancy-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    margin-top: 48px;
  }
  .fancy-card {
    min-height: 380px;
    box-shadow: 0 8px 40px rgba(26,77,46,0.18);
    border-radius: 28px;
  }
  /* Removed stray properties that were outside of a selector block */
}
/* Masonry grid with mixed card sizes */
.gallery-fancy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 32px;
  margin-bottom: 64px;
}
.fancy-card {
  position: relative;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent !important;
  transition: transform 0.22s, box-shadow 0.22s;
  display: flex;
  align-items: flex-end;
}
.fancy-card img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
  border-radius: 15px;
}
.fancy-card.tall img {
  height: 420px;
}
.fancy-card.wide img {
  height: 220px;
}
.fancy-card img {
  height: 320px;
}
.fancy-card:hover {
  transform: scale(1.08);
  box-shadow: none;
}
.fancy-card:hover img {
  /* No blur, just scale up */
  transform: scale(1.09);
}
/* Overlay removed as requested */
@media (max-width: 900px) {
  .gallery-fancy-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
  }
  .fancy-card img {
    height: 180px;
  }
}
@media (max-width: 600px) {
  .gallery-fancy-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .fancy-card img {
    height: 120px;
  }
  .fancy-card {
    min-height: 120px;
  }
}
/* Fancy Masonry Gallery Styles */
.gallery-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 48px 16px;
}
.gallery-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  background: #f7f7f7;
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.gallery-profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #1a4d2e;
}
.gallery-profile-info h1 {
  font-size: 1.7rem;
  color: #1a4d2e;
  margin-bottom: 4px;
}
.gallery-profile-info p {
  color: #444;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.gallery-social a {
  color: #fff;
  background: #1a4d2e;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 1.2rem;
  transition: background 0.2s;
  text-decoration: none;
  border-bottom: none;
}
.gallery-social a:hover {
  background: #2e7d32;
}
.gallery-masonry {
  column-count: 4;
  column-gap: 24px;
}
.gallery-card {
  background: transparent !important;
  display: inline-block;
  margin: 0 0 24px;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: none;
}
.gallery-card img {
  width: 100%;
  display: block;
  object-fit: cover;
  height: auto;
  max-height: 340px;
  transition: filter 0.3s;
  border-radius: 12px;
}
.gallery-card:hover img {
  filter: brightness(0.85) blur(1px);
}
.gallery-card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(26,77,46,0.85);
  color: #fff;
  font-size: 1.1rem;
  padding: 12px 8px;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
  letter-spacing: 0.5px;
}
.gallery-card:hover .gallery-card-caption {
  opacity: 1;
}
@media (max-width: 1100px) {
  .gallery-masonry {
    column-count: 3;
    column-gap: 18px;
  }
}
@media (max-width: 800px) {
  .gallery-masonry {
    column-count: 2;
    column-gap: 12px;
  }
  .gallery-profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px;
  }
}
@media (max-width: 500px) {
  .gallery-masonry {
    column-count: 1;
    column-gap: 0;
  }
  .gallery-card img {
    max-height: 180px;
  }
  .gallery-profile-img {
    width: 56px;
    height: 56px;
  }
  .gallery-profile-info h1 {
    font-size: 1.1rem;
  }
}

/* Gallery Styles */
.gallery-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 0 16px;
}
.gallery-header {
  text-align: center;
  margin-bottom: 32px;
}
.gallery-header h1 {
  font-size: 2.5rem;
  color: #1a4d2e;
  margin-bottom: 8px;
}
.gallery-header p {
  font-size: 1.2rem;
  color: #444;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-item:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 24px rgba(26,77,46,0.18);
}
.gallery-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: filter 0.3s;
}
/* Remove blur on gallery images hover */
.gallery-item:hover img {
  filter: brightness(0.95);
}
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(26,77,46,0.85);
  color: #fff;
  font-size: 1.1rem;
  padding: 12px 8px;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
  letter-spacing: 0.5px;
}
.gallery-item:hover .gallery-caption {
  opacity: 1;
}
@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
  }
  .gallery-item img {
    height: 120px;
  }
  .gallery-header h1 {
    font-size: 1.5rem;
  }
}
/* Ensure no color or background effect on sitemap hover */
.footer-sitemap-list a:hover,
.footer-sitemap-list a:focus {
    color: inherit !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 4px;
    outline: none;
}
/* Sitemap Section (right side of footer) */
.footer-sitemap {
    margin-left: 0;
    margin-right: 32px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-width: 220px;
    max-width: 350px;
}
/* Restored original sitemap design and hover effect */
.footer-sitemap {
    margin-left: 0;
    margin-right: 32px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    min-width: 220px;
    max-width: 350px;
}
.footer-sitemap-title {
    font-size: 20px;
    margin-bottom: 10px;
    color: #b48a00;
    text-align: right;
}
.footer-sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.footer-sitemap-list li {
    margin: 0;
}
.footer-sitemap-list a {
    color: #1a4d2e;
    font-size: 1.08em;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    text-decoration: none;
    border-radius: 4px;
    transition: transform 0.22s cubic-bezier(.77,0,.18,1), color 0.2s;
}
.footer-sitemap-list a:hover {
    transform: scale(1.13);
    color: inherit;
    background: none;
}
.footer-sitemap .footer-sitemap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fada7a;
    border-radius: 50%;
    margin-right: 4px;
    box-shadow: 0 1px 3px rgba(180,138,0,0.07);
}
@media (max-width: 900px) {
    .footer-sitemap {
        display: none !important;
    }
    .footer-sitemap-title {
        text-align: center;
    }
    .footer-sitemap-list {
        align-items: center;
    }
}
/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    display: flex;
    flex-direction: column; /* Ensures the body stretches and has vertical space */
    height: 100vh; /* Full viewport height */
}

/* Spacer for navbar */
.navbar-spacer {
  height: 40px;
  min-height: 40px;
  width: 100%;
  display: block;
}

/* Navbar background */
nav {
  background-color: #F5F0CD;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the entire navbar content */
  padding: 0 40px;
  height: 90px;
  position: relative; /* Needed for absolute logo */
  width: 100%;
}

/* Logo styling */
.nav-logo {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  z-index: 10;
}

.logo {
    height: 60px;
}

/* Navbar styling for larger screens */
.nav-list {
  display: flex; /* Ensure the nav items are visible on larger screens */
  flex-direction: row-reverse; /* Show nav items from right to left, Home on left */
  justify-content: center; /* Center the nav items horizontally */
  align-items: center; /* Align items vertically */
  list-style: none; /* Remove default list styling */
  gap: 20px; /* Add spacing between nav items */
  margin: 0;
  padding: 0;
  flex-grow: 1; /* Allow the nav-list to take up available space */
}

/* Link styling */
.nav-list li a {
    color: #333; /* Set the text color */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Adjust font size */
    padding: 10px 15px; /* Add padding for better clickability */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for links */
.nav-list li a:hover {
    color: #000; /* Darker color on hover */
    background-color: #FFDDD1; /* Add a subtle background color */
    border-radius: 5px; /* Add rounded corners */
}

/* Dropdown styling */
.dropdown {
    position: relative; /* Ensure the dropdown content is positioned relative to the parent */
}

.dropdown .dropdown-content {
    display: none; /* Hide the dropdown by default */
    position: absolute; /* Position it relative to the parent */
    background-color: #F5F0CD; /* Background color for the dropdown */
    min-width: 160px; /* Minimum width of the dropdown */
    z-index: 1000; /* Ensure it appears above other elements */
    top: 100%; /* Position it below the "More" menu item */
    left: 0; /* Align it with the "More" menu item */
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visibility */
    border-radius: 5px; /* Add rounded corners */
}

/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block; /* Show the dropdown when hovering over the parent */
}

/* Dropdown link styling */
.dropdown-content li a {
    color: #333; /* Text color */
    padding: 12px 16px; /* Add padding for better spacing */
    display: block; /* Make the links block-level for full clickable area */
    text-decoration: none; /* Remove underline */
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for dropdown links */
.dropdown-content li a:hover {
    color: #000; /* Darker text color on hover */
    background-color: #FFDDD1; /* Add a subtle background color */
    border-radius: 5px; /* Add rounded corners */
}

/* Dropdown list item styling */
.dropdown-content li {
    list-style: none; /* Remove default list styling */
}

/* Hamburger menu hidden by default, shown only on small screens */
.hamburger {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2100;
  background: none;
  border: none;
  padding: 0;
}
.hamburger .bar {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: #333;
  border-radius: 2px;
  transition: 0.4s cubic-bezier(.77,0,.18,1);
}
@media (max-width: 768px) {
  .gallery-item {
    width: 90vw !important;
    min-width: 90vw !important;
    max-width: 90vw !important;
  }
  .gallery-item img {
    width: 100% !important;
    min-width: 90vw !important;
    max-width: 90vw !important;
    height: 270px;
    object-fit: cover;
  }
  .nav-logo {
    right: 16px !important;
  }
  .hamburger {
    display: flex;
  }
}
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Responsive navbar */
@media (max-width: 768px) {
    nav {
        align-items: flex-start;
        padding: 10px 20px;
        position: relative;
        z-index: 1001;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        background: #F5F0CD;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2000;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-100%);
        transition: opacity 0.4s cubic-bezier(.77,0,.18,1), transform 0.5s cubic-bezier(.77,0,.18,1);
    }

    .nav-list.active {
        display: flex;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-list li {
        padding: 20px 0;
        border: none;
        font-size: 2rem;
        width: 100%;
        text-align: center;
    }

    .nav-list li a {
        color: #333;
        font-size: 2rem;
        width: 100%;
        display: block;
    }

  .hamburger {
    display: block;
    z-index: 2100;
    position: absolute;
    top: 36px;
    left: 20px;
    right: auto;
    margin: 0;
  }

    .nav-list {
        background: rgba(245, 240, 205, 0.96); /* Slightly less transparent for clarity */
    }

    .nav-list li {
        font-size: 1.3rem; /* Slightly larger for readability */
        font-weight: 600;   /* Make text bolder */
        letter-spacing: 0.02em; /* Slightly more spacing for clarity */
    }

    .nav-list li a {
        color: #222; /* Much darker for clarity */
        font-size: 1.3rem;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(245,240,205,0.3); /* Subtle shadow for contrast */
    }

    .nav-list li {
        font-size: 1.2rem; /* Smaller font size */
    }

    .nav-list li a {
        color: rgba(51, 51, 51, 0.7); /* Semi-transparent dark text */
        font-size: 1.2rem; /* Smaller font size */
    }

    .nav-list li + li {
        border-top: 1px dashed rgba(34,34,34,0.18);
        border-image: linear-gradient(to right, rgba(34,34,34,0.08), rgba(245,240,205,0.7), rgba(34,34,34,0.08));
        border-image-slice: 1;
        margin-top: 0;
    }
}

/* ============================ */
/* FOOTER SECTION STYLING BELOW */
/* ============================ */

/* Layout fix to push footer down */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* Footer Styling */
.site-footer {
    background-color: #F5F0CD; /* Same background color as the navbar */
    padding: 40px 20px; /* Add more padding for a spacious look */
    text-align: center;
    font-size: 14px;
    color: #333; /* Text color matches the navbar */
    border-top: 2px solid #ccc; /* Subtle top border for separation */
}

.footer-content {
    max-width: 1200px; /* Limit the width for better alignment */
    margin: 0 auto; /* Center the content */
    display: flex;
    justify-content: space-between; /* Spread items evenly */
    align-items: flex-start;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px; /* Add spacing between sections */
}

/* Newsletter Section */
.newsletter {
    flex: 1;
    max-width: 45%; /* Limit the width for better alignment */
    text-align: left; /* Align text to the left */
}

.newsletter h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333; /* Match the text color */
}

.newsletter p {
    font-size: 14px;
    margin-bottom: 10px;
}

/* Contact Info Section */
.contact-info {
    flex: 1;
    max-width: 45%; /* Limit the width for better alignment */
    text-align: right; /* Align text to the right */
}

.contact-info p {
    margin: 5px 0;
    font-size: 14px;
}

/* Copyright Section */
 .copyright {
   margin-top: 120px;
   font-size: 12px;
   color: #555; /* Subtle text color for copyright */
   text-align: center;
   width: 100%;
   border-top: 1px solid #ccc; /* Add a subtle divider */
   padding-top: 10px;
}

/* Hover Effects */
.footer-content a {
    color: #333; /* Match the text color */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth hover effect */
}

.footer-content a:hover {
    color: #000; /* Darker text color on hover */
    background-color: #FFDDD1; /* Subtle background color on hover */
    border-radius: 5px; /* Add rounded corners */
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Stack items vertically */
        text-align: center; /* Center-align text */
    }

    .newsletter,
    .contact-info {
        max-width: 100%; /* Full width for smaller screens */
        text-align: center; /* Center-align text */
    }

    .contact-info p {
        margin: 5px 0;
    }
}

/* School Info Section */
/* School Info Section */
/* School Info Section */
/* School Info Section */
/* School Info Section */
.school-info {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    gap: 20px; /* Space between the box and the image */
    width: 100%; /* Full width */
    margin-top: 40px; /* Space from the top */
    padding: 20px; /* Adds space around the content */
}

/* School details box */
.school-details {
    background-color: #FADA7A;
    padding: 20px; /* More padding for better spacing */
    width: 300px; /* Increased width */
    height: 300px; /* Increased height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 40px; /* More space between the box and the image */
}

.school-details h2 {
    color: #5B6555;
    font-size: 24px;
    text-align: center;
}

.school-info {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    gap: 120px; /* Significantly increased space between the box and the image */
    width: 100%; /* Full width */
    margin-top: 30px; /* Further reduced space from the top to move the elements up */
    padding: 90px; /* Increased padding for even more space around the content */
}

.school-details {
    background-color: #FADA7A;
    padding: 20px; /* More padding for better spacing */
    width: 300px; /* Increased width */
    height: 300px; /* Increased height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 40px; /* More space between the box and the image */
    border-radius: 25px; /* Increased curve to the text box */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition */
}

.school-details:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

.school-details .slogan {
    color: #5B6555;
    font-size: 18px; /* Slightly larger font for better readability */
    line-height: 1.5; /* Add line height for spacing */
    text-align: center;
    margin-top: 10px;
}

.about-btn {
    display: inline-block;
    background-color: #FFDDD1;
    color: #333;
    font-size: 16px; /* Increase button text size */
    padding: 12px 24px; /* Adjust padding for better clickability */
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #FFDDD1; /* Ensure sufficient contrast */
    color: #333;
}

.about-btn:focus {
    outline: 2px solid #F5BFA0; /* Add focus outline for accessibility */
    outline-offset: 4px;
}

.about-btn:hover {
    background-color: #F5BFA0;
    color: #000; /* Add contrast on hover */
}

.school-image img {
    width: 100%; /* Make the image responsive to the container width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image fills the container while keeping its aspect ratio */
    border-radius: 15px; /* Add a slight curve to the image */
    max-height: 800px; /* Increase the height for a more rectangular shape */
}

/* Responsive adjustments for school-info section */
@media (max-width: 768px) {
    .school-info {
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Reduce gap for smaller screens */
        padding: 20px; /* Adjust padding */
    }

    .school-details {
        width: 100%; /* Full width for smaller screens */
        height: auto; /* Adjust height */
        margin-right: 0; /* Remove right margin */
    }

    .school-image img {
        width: 100%; /* Make image responsive */
        height: auto; /* Maintain aspect ratio */
    }
}

/* Call-to-action section */
.call-to-action {
    text-align: center;
    margin-top: 40px;
}

.call-to-action a {
    display: inline-block;
    background-color: #FFDDD1;
    color: #333;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.call-to-action a:hover {
    background-color: #F5BFA0;
}

/* Goals Section Styling */
.goals-section {
    text-align: center; /* Center-align all content */
    margin: 40px auto; /* Add spacing above and below the section */
    max-width: 800px; /* Limit the width of the section */
    padding: 20px; /* Add padding for spacing */
    position: relative; /* Allow positioning of child elements */
}

.goals-image {
    width: 45%; /* Slightly reduce the width to 45% of the container */
    max-width: 280px; /* Limit the maximum width of the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px; /* Keep the slight curve for the image corners */
    margin: 0 auto 20px; /* Center the image and add spacing below it */
    margin-left: -60px; /* Move the image further to the left */
    transform-origin: center; /* Ensure scaling happens from the center */
}

.goals-header {
    font-size: 47px; /* Increase the font size for the header */
    color: #333; /* Match the text color with the rest of the site */
    margin-bottom: 10px; /* Add spacing below the header */
}

.goals-paragraph {
    font-size: 15px; /* Adjust the font size for the paragraph */
    color: #555; /* Use a slightly lighter color for the paragraph */
    line-height: 1.6; /* Improve readability with line height */
}

.goals-list {
  padding-left: 0;
  margin: 16px 0 18px 0;
  color: #444;
  font-size: 1.08rem;
  line-height: 1.7;
  list-style: none; /* Remove bullet points */
}
.goals-list li {
  margin-bottom: 8px;
  padding-left: 0;
}

/* Columns Section Styling */
.columns-section {
    display: flex; /* Arrange columns in a row */
    justify-content: space-between; /* Add space between columns */
    align-items: flex-start; /* Align items at the top */
    gap: 20px; /* Add spacing between columns */
    margin: 120px auto; /* Add much more spacing above and below the section */
    max-width: 1200px; /* Limit the width of the section */
    padding: 20px; /* Add padding around the section */
}

.column {
    flex: 1; /* Make all columns equal in width */
    text-align: center; /* Center-align the content */
}

.column-image {
    width: 100%; /* Keep the image responsive */
    max-width: 300px; /* Limit the maximum width of the image */
    height: 380px; /* Slightly increase the height to stretch the image vertically */
    object-fit: cover; /* Ensure the image fills the container while maintaining aspect ratio */
    margin-bottom: 20px; /* Add spacing below the image */
    border-radius: 15px; /* Add rounded corners to the image */
}

.column-box {
    padding: 20px; /* Add padding inside the box */
    border-radius: 10px; /* Add rounded corners to the box */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition for hover effect */
}

.column-box:hover {
    transform: scale(1.05); /* Slightly enlarge the box on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add a deeper shadow for depth */
}

.column-header {
    font-size: 24px; /* Adjust the font size for the header */
    color: #333; /* Match the text color */
    margin-bottom: 10px; /* Add spacing below the header */
}

.column-paragraph {
    font-size: 15px; /* Adjust the font size for the paragraph */
    color: #555; /* Use a slightly lighter color for the paragraph */
    line-height: 1.6; /* Improve readability with line height */
    margin-bottom: 20px; /* Add spacing below the paragraph */
}

.column-btn {
    display: inline-block; /* Make the button inline-block */
    background-color: #FFDDD1; /* Button background color */
    color: #333; /* Button text color */
    padding: 10px 20px; /* Add padding to the button */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Add rounded corners */
    font-size: 16px; /* Adjust the font size */
    transition: background-color 0.3s ease, color 0.3s ease; /* Add smooth hover effect */
}

.column-btn:hover {
    background-color: #F5BFA0; /* Change background color on hover */
    color: #000; /* Change text color on hover */
}

/* Gallery Section Styling */
.gallery-section {
    margin: 80px auto; /* Add spacing above and below the section */
    max-width: 1200px; /* Limit the width of the section */
    text-align: center; /* Center-align the header */
    padding: 20px; /* Add padding around the section */
}

.gallery-header {
    font-size: 36px; /* Adjust the font size for the header */
    color: #333; /* Match the text color */
    margin-bottom: 40px; /* Add spacing below the header */
}

.gallery-grid {
    display: grid; /* Use grid layout */
    grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
    gap: 20px; /* Add spacing between grid items */
}

.gallery-item {
    overflow: hidden; /* Hide overflow for hover effect */
    border-radius: 10px; /* Add rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.gallery-item img {
    width: 100%; /* Make the image responsive */
    height: 100%; /* Ensure the image fills the container */
    object-fit: cover; /* Maintain aspect ratio while filling the container */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.gallery-item:hover {
    transform: scale(1.05); /* Slightly enlarge the item on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Add a deeper shadow on hover */
}

.gallery-item:hover img {
    transform: scale(1.1); /* Slightly zoom in the image on hover */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gallery-section {
        width: 100%;
        max-width: 1000px;
        margin: auto;
        overflow: hidden;
        position: relative;
        margin-bottom: 70px;
    }

  .gallery-grid {
    display: flex;
    width: auto;
    animation: slideAnimation 65s linear infinite;
  }

    .gallery-item {
        width: 8.3333%; /* 100% / 12 */
        flex-shrink: 0;
        position: relative;
    }

  .gallery-item img {
    width: 100%;
    height: 400px;
    display: block;
    object-fit: cover;
  }
    .columns-section{
        flex-direction: column;
    }
    .column-box{
        width: 75%;
        margin: auto;
    }
    
}

@keyframes slideAnimation {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); } /* Scrolls through all 12 images */
}


@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Adjust to 1 column for very small screens */
    }
}

#mc_embed_signup{
    background:#F5F0CD;
    clear:left; 
    font:14px Helvetica,Arial,sans-serif; 
    width: 73%;
}

.about-columns {
    margin-top: 32px;
    margin-bottom: 32px;
    background: #fffbe9;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
    padding: 32px 24px;
    max-width: 1200px;
    width: 95%;
    display: flex;
    gap: 32px;
    justify-content: center;
}

@media (max-width: 900px) {
    .about-columns {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 24px 8px;
    }
}

/* Goals Section Styling */
.goals-section {
    text-align: center; /* Center-align all content */
    margin: 40px auto; /* Add spacing above and below the section */
    max-width: 800px; /* Limit the width of the section */
    padding: 20px; /* Add padding for spacing */
    position: relative; /* Allow positioning of child elements */
}

.goals-image {
    width: 45%; /* Slightly reduce the width to 45% of the container */
    max-width: 280px; /* Limit the maximum width of the image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 15px; /* Keep the slight curve for the image corners */
    margin: 0 auto 20px; /* Center the image and add spacing below it */
    margin-left: -60px; /* Move the image further to the left */
    transform-origin: center; /* Ensure scaling happens from the center */
}

.goals-header {
    font-size: 47px; /* Increase the font size for the header */
    color: #333; /* Match the text color with the rest of the site */
    margin-bottom: 10px; /* Add spacing below the header */
}

.goals-paragraph {
    font-size: 15px; /* Adjust the font size for the paragraph */
    color: #555; /* Use a slightly lighter color for the paragraph */
    line-height: 1.6; /* Improve readability with line height */
}

.enrol-section {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px auto;
  background: #fffbe9;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: 32px 24px 40px 24px;
}

.enrol-section .goals-header {
  margin-top: 0;
  color: #b48a00;
  font-size: 2rem;
  letter-spacing: 0.01em;
}

.enrol-section .goals-paragraph {
  color: #444;
  font-size: 1.1rem;
  margin-bottom: 24px;
  line-height: 1.7;
}

.enrol-section .column-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 32px;
  background: linear-gradient(90deg, #FADA7A 60%, #ffe9b0 100%);
  color: #222;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: 0 2px 8px rgba(245, 218, 122, 0.15);
  border: none;
  transition: 
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}

.enrol-section .column-btn:hover,
.enrol-section .column-btn:focus {
  background: linear-gradient(90deg, #ffe9b0 0%, #FADA7A 100%);
  color: #8a6a00;
  box-shadow: 0 4px 16px rgba(245, 218, 122, 0.25);
  transform: translateY(-2px) scale(1.04);
  text-decoration: none;
  outline: none;
}

/* News Feed Section Styling */
.news-feed-section {
  max-width: 1200px;
  margin: 56px auto 48px auto;
  padding: 0 16px;
}

.news-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 32px;
}

.news-card {
  background: #fffbe9;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}

.news-card:hover {
  box-shadow: 0 6px 24px rgba(245, 218, 122, 0.18);
  transform: translateY(-2px) scale(1.01);
}

.news-card-img, .news-card-video {
  width: 100%;
  height: 270px; /* Increased height for images and videos */
  object-fit: cover;
  background: #fada7a;
  display: block;
}

.news-card-video-wrapper {
  width: 100%;
  height: 270px; /* Increased height for videos */
  background: #fada7a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card-content {
  padding: 20px 18px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-card-title {
  font-size: 1.25rem;
  color: #b48a00;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.news-card-date {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 10px;
}

.news-card-text {
  color: #444;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .news-feed-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}
@media (max-width: 600px) {
  .news-feed-section {
    padding: 0 2vw;
  }
  .news-feed-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .news-card {
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(245, 218, 122, 0.13);
  }
  .news-card-img, .news-card-video, .news-card-video-wrapper {
    height: 350px; /* Even taller for mobile */
    border-radius: 18px 18px 0 0;
  }
  .news-card-content {
    padding: 18px 8px 18px 8px;
    font-size: 1.08rem;
  }
  .news-card-title {
    font-size: 1.15rem;
  }
}

/* ======================================= */
/* === CONTACT FORM STYLES START HERE === */
/* ======================================= */

/* Main Container for the form */
.contact-container {
    background-color: #ffffff; /* White background for the content */
    padding: 40px;
    border-radius: 8px;
    width: 95%; /* Use percentage for better responsiveness */
    max-width: 800px;
    text-align: center; /* Center-align text */
    margin: 40px auto; /* Add margin to separate from header/footer */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Header Section inside the contact container */
.contact-container .header h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 500;
}

.contact-container .header p {
    color: #666;
    margin-bottom: 20px;
}

.contact-container .social-icons a {
    color: #555;
    margin: 0 10px;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-container .social-icons a:hover {
    color: #000;
}

/* Contact Info Section specific to the form container */
.contact-container .contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 30px 0;
    color: #555;
}



/* This targets ONLY the contact info inside the form container, not the footer one */
.contact-container .contact-info p {
    margin: 5px 0;
}

.separator {
    border-left: 1px solid #ccc;
    height: 40px;
}

/* Form Styling */
.contact-form {
    margin-top: 30px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: center; /* Center the submit button */
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1; /* Allows fields to grow and fill space */
}

.phone-group {
    flex-grow: 0.5; /* Makes the phone field smaller */
}

.full-width {
    flex-basis: 100%;
}

.form-group label {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
}

.form-group input,
.form-group textarea {
    background-color: #fbeee9; /* The pale pink/salmon color */
    border: 1px solid #e0c9c3; /* A very subtle border */
    border-radius: 4px;
    padding: 12px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box; 
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #c4a9a1;
    box-shadow: 0 0 5px rgba(212, 185, 178, 0.5);
}

.contact-form textarea {
    resize: vertical; /* Allow user to resize vertically */
}

/* Submit Button specific to this form */
.contact-form button[type="submit"] {
    background-color: #5a665a; /* Dark green/grey color */
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form button[type="submit"]:hover {
    background-color: #495449; /* Slightly darker on hover */
}


/* Responsive Design for the contact form */
@media (max-width: 768px) {
    .contact-form .form-row {
        flex-direction: column; /* Stack fields vertically */
        gap: 20px;
    }

    .phone-group {
       flex-grow: 1; /* Let phone field take full width on mobile */
    }

    .contact-container .contact-info {
        flex-direction: column;
        gap: 15px;
    }

    .separator {
        display: none; /* Hide the separator on mobile */
    }
}
@media (min-width: 1000px) {
  .contact-container {
    max-width: 950px;
    padding: 60px 60px 60px 60px;
    font-size: 1.13rem;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 1.08rem;
    padding: 16px;
  }
}
@media (min-width: 1200px) {
  .contact-container {
    max-width: 1200px;
    padding: 80px 100px 80px 100px;
    font-size: 1.22rem;
  }
  .contact-form input,
  .contact-form textarea {
    font-size: 1.18rem;
    padding: 22px;
  }
}

.contact-oval-img-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
}

.contact-oval-img {
  width: 210px;
  height: 210px;
  object-fit: cover;
  border-radius: 50% / 45%;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border: 5px solid #fada7a;
  background: #fffbe9;
  transition: width 0.2s, height 0.2s;
}

@media (max-width: 600px) {
  .contact-oval-img {
    width: 120px;
    height: 120px;
  }
}

/* ============================= */
/* Students Page Custom Sections */
/* ============================= */

.student-achievements, .student-resources, .student-testimonials {
  background: #fffbe9;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  max-width: 800px;
  margin: 40px auto 32px auto;
  padding: 32px 24px;
  text-align: center;
}

.student-achievements h2,
.student-resources h2,
.student-testimonials h2 {
  color: #b48a00;
  font-size: 2rem;
  margin-bottom: 18px;
}

.student-achievements ul,
.student-resources ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 500px;
}

.student-achievements li {
  background: #fada7a;
  margin: 10px 0;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 1.08rem;
  color: #5B6555;
  box-shadow: 0 1px 4px rgba(245, 218, 122, 0.10);
}

.student-resources li {
  margin: 10px 0;
}

.student-resources a {
  color: #5B6555;
  text-decoration: underline;
  transition: color 0.2s;
}

.student-resources a:hover {
  color: #b48a00;
}

.student-testimonials .testimonial-carousel {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  min-height: 120px;
}

.student-testimonials .testimonial {
  display: none;
  background: #fada7a;
  border-radius: 10px;
  padding: 24px 18px 18px 18px;
  margin: 0 auto 10px auto;
  font-size: 1.1rem;
  color: #333;
  box-shadow: 0 1px 6px rgba(245, 218, 122, 0.13);
  transition: opacity 0.4s;
}

.student-testimonials .testimonial.active {
  display: block;
  opacity: 1;
}

.student-testimonials .testimonial span {
  display: block;
  margin-top: 10px;
  color: #5B6555;
  font-size: 0.98rem;
  font-style: italic;
}

@media (max-width: 600px) {
  .student-achievements, .student-resources, .student-testimonials {
    padding: 18px 6vw;
    font-size: 0.98rem;
  }
  .student-testimonials .testimonial-carousel {
    min-height: 100px;
  }
}

/* ============================= */
/* Students Page: Events & FAQ   */
/* ============================= */

.student-events, .student-faq {
  background: #fffbe9;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  max-width: 800px;
  margin: 40px auto 32px auto;
  padding: 32px 24px;
  text-align: center;
}

.student-events h2,
.student-faq h2 {
  color: #b48a00;
  font-size: 2rem;
  margin-bottom: 18px;
}

.student-events ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 500px;
}

.student-events li {
  background: #fada7a;
  margin: 10px 0;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 1.08rem;
  color: #5B6555;
  box-shadow: 0 1px 4px rgba(245, 218, 122, 0.10);
}

.faq-list {
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.faq-item {
  background: #fada7a;
  border-radius: 8px;
  margin-bottom: 18px;
  padding: 18px 20px 12px 20px;
  box-shadow: 0 1px 4px rgba(245, 218, 122, 0.10);
}

.faq-item h4 {
  color: #b48a00;
  margin-bottom: 8px;
  font-size: 1.13rem;
}

.faq-item p {
  color: #444;
  font-size: 1.02rem;
  margin: 0;
}

@media (max-width: 600px) {
  .student-events, .student-faq {
    padding: 18px 6vw;
    font-size: 0.98rem;
  }
  .faq-list {
    padding: 0 2vw;
  }
}

/* ============================= */
/* Students Page: Contact Button */
/* ============================= */

.student-contact-btn {
  display: inline-block;
  background-color: #FFDDD1;
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(245, 218, 122, 0.15);
  border: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  margin: 0 auto;
}

.student-contact-btn:hover,
.student-contact-btn:focus {
  background-color: #F5BFA0;
  color: #8a6a00;
  box-shadow: 0 4px 16px rgba(245, 218, 122, 0.25);
  transform: translateY(-2px) scale(1.04);
  outline: none;
}

/* Admission Requirements, Key Dates, FAQ, Why Choose Us, Testimonials Sections */
.admission-requirements, .admission-key-dates, .admission-faq, .why-choose-us, .admission-testimonials {
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0;
  right: 0;
  position: relative;
  float: none;
  display: block;
}

/* Custom Styles for Specific Pages or Sections */
.custom-section {
  background-color: #f0f4f8;
  padding: 40px 20px;
  border-radius: 8px;
  margin: 20px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.custom-section h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.custom-section h2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(to right, #fada7a, #ffe9b0);
}

.custom-section p {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.custom-section a {
  display: inline-block;
  background-color: #FFDDD1;
  color: #333;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.custom-section a:hover {
  background-color: #F5BFA0;
  transform: translateY(-2px);
}

/* Specific styles for the Admissions page */
.admissions-page .hero-section {
  background: url('../images/admissions-hero.jpg') no-repeat center center/cover;
  color: white;
  padding: 80px 20px;
  text-align: center;
  position: relative;
}

.admissions-page .hero-section h1 {
  font-size: 36px;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.admissions-page .hero-section p {
  font-size: 18px;
  margin-bottom: 30px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.admissions-page .hero-section a {
  background-color: #F5BFA0;
  color: #333;
  padding: 15px 30px;
  border-radius: 5px;
  font-size: 18px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.admissions-page .hero-section a:hover {
  background-color: #e6a76e;
  transform: translateY(-2px);
}

/* Styles for the Admission Requirements section */
.admission-requirements {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

.admission-requirements h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.admission-requirements h2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(to right, #fada7a, #ffe9b0);
}

.admission-requirements ul {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
  text-align: left;
}

.admission-requirements ul li {
  margin-bottom: 10px;
  color: #555;
  position: relative;
  padding-left: 10px;
}

.admission-requirements ul li::before {
  content: '';
  position: absolute;
  left: 0;
  color: #b48a00;
  margin-right: 0.5em;
}

/* Key Dates section styles */
.admission-key-dates {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

.admission-key-dates h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.admission-key-dates h2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(to right, #fada7a, #ffe9b0);
}

.admission-key-dates ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: left;
}

.admission-key-dates ul li {
  margin-bottom: 15px;
  padding-left: 20px;
  position: relative;
  color: #555;
}

.admission-key-dates ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 18px;
  margin-right: 0.5em;
}

/* FAQ section styles */
.admission-faq {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

.admission-faq h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.admission-faq h2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(to right, #fada7a, #ffe9b0);
}

.admission-faq .faq-list {
  margin-top: 12px;
}

.admission-faq .faq-item {
  margin-bottom: 18px;
  background: #f9f9f9;
  padding: 18px;
  border-radius: 6px;
  position: relative;
}

.admission-faq .faq-item h4 {
  margin: 0 0 6px 0;
  color: #2b6e4f;
  font-size: 1.08em;
}

.admission-faq .faq-item p {
  margin: 0;
  color: #444;
}

/* Why Choose Us section styles */
.why-choose-us {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

.why-choose-us h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.why-choose-us h2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(to right, #fada7a, #ffe9b0);
}

.why-choose-us ul {
  margin-top: 10px;
  list-style: disc inside;
  padding: 0;
  margin-left: 20px;
}

/* Testimonials section styles */
.admission-testimonials {
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
}

.admission-testimonials h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.admission-testimonials h2::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  bottom: -5px;
  left: 0;
  background: linear-gradient(to right, #fada7a, #ffe9b0);
}

.admission-testimonials .testimonial-carousel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admission-testimonials .testimonial {
  background: #fff;
  border-left: 4px solid #1a4d2e;
  padding: 16px 18px;
  border-radius: 6px;
  font-style: italic;
  color: #333;
}

.admission-testimonials .testimonial span {
  display: block;
  margin-top: 8px;
  font-size: 0.98em;
  color: #1a4d2e;
  font-style: normal;
}

/* Custom scrollbar for WebKit browsers */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #c4a9a1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b48a00;
}

/* Animations */
.fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.slideIn {
  animation: slideIn 0.7s ease-out forwards;
}

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

.zoomIn {
  animation: zoomIn 0.6s ease-out forwards;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Accessibility improvements */
:focus {
  outline: 3px solid #F5BFA0;
  outline-offset: 2px;
}

button:focus,
input:focus,
textarea:focus {
  outline: 3px solid #F5BFA0;
  outline-offset: 2px;
}

/* High contrast mode styles */
@media (prefers-contrast: high) {
  body {
    background-color: #000;
    color: #fff;
  }

  a {
    color: #FFDD57;
  }

  .navbar,
  .footer {
    background-color: #111;
  }

  .card,
  .box {
    background-color: #222;
    border: 1px solid #444;
  }

  .button,
  .btn {
    background-color: #FFDD57;
    color: #000;
  }
}

/* Back to Top Arrow (large screens only) */
#backToTop {
  display: none; /* Always hidden by default */
  position: fixed;
  right: 38px;
  bottom: 48px;
  z-index: 9999;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 218, 122, 0.18);
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(.77,0,.18,1), opacity 0.25s;
  opacity: 0.92;
  padding: 0;
}
#backToTop svg {
  display: block;
  width: 38px;
  height: 38px;
}
#backToTop:hover {
  transform: scale(1.13) translateY(-6px);
  opacity: 1;
  box-shadow: 0 8px 32px rgba(245, 218, 122, 0.28);
}
@media (min-width: 1025px) {
  #backToTop.show {
    display: block;
  }
}
@media (max-width: 1024px) {
  #backToTop {
    display: none !important;
  }
}

.class-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}