@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
  --primary-color: #10497E;
  --secondary-color: #A41E22;
  --light-gray-color: #f3f3f3;
  --dark-gray-color: #232323;
  --white-color: #fff;
  --black-color: #000;
  --green-color: green;
  --text-color-primary: rgba(14, 13, 13, 0.9803921569);
  --text-color-secondary: rgba(35, 35, 35, 0.8274509804);
  --text-color-light: rgba(190, 187, 187, 0.662745098);
  --text-color-hover: rgba(190, 187, 187, 0.9529411765);
  --overlay-bg-color: rgba(0, 139, 186, 0.8156862745);
  --header-bg-color: #10497E;
  --header-bg-image: url(../images/New_gate.JPG);
  --header-bg-image-scroll: url(https://edmundricesinon.ac.tz/static/EDMUND/images/bg7.jpg);
  --footer-bg-color: #10497E;
  --cookie-banner-bg-color: #10497E;
  --cookie-button-bg-color: var(--white-color);
  --cookie-button-text-color: rgba(16, 73, 126, 0.7607843137);

  --font-family-default: "Lato", sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-bolder: 900;

  --base-font-size: 16px;
  --h1-font-size: 38px;
  --h2-font-size: 30px;
  --large-font-size: larger;
  --xlarge-font-size: x-large;
  --xxlarge-font-size: xx-large;

  --spacing-unit: 10px;
  --padding-small: var(--spacing-unit);
  --padding-medium: calc(var(--spacing-unit) * 2);
  --padding-large: calc(var(--spacing-unit) * 3);

  --border-radius-small: 5px;
  --border-radius-medium: 10px;
  --border-radius-large: 20px;
  --border-radius-circle: 50%;

  --box-shadow-light: 2px 2px 3px rgba(0, 0, 0, 0.3764705882);
  --box-shadow-medium: 0px -2px 10px rgba(0, 0, 0, 0.5);
  --box-shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.1);

  --transition-short: 0.3s;
  --transition-medium: 0.5s;
  --transition-long: 0.8s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-family-default);
}

body {
  background: var(--white-color);
  font-size: var(--base-font-size);
}

.no-scroll {
  overflow: hidden;
}

/* General Container Styles */
.main_container {
  width: 100%;
}

.main_container .main_wrapper {
  width: 100%;
  margin: auto;
}

/* Connect/Whatsapp Styles */
.main_container .main_wrapper .Connect {
  display: flex;
  position: absolute;
  padding: var(--padding-large);
}

.main_container .main_wrapper .Connect .whatsapp {
  position: fixed;
  top: 50%;
  left: var(--spacing-unit);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around;
  align-items: center;
  margin: calc(var(--spacing-unit) / 2);
}

.main_container .main_wrapper .Connect .whatsapp .chip {
  color: var(--green-color);
}

.main_container .main_wrapper .Connect .whatsapp a {
  text-decoration: none;
  color: var(--green-color);
  font-size: var(--large-font-size);
  z-index: 999;
}

.main_container .main_wrapper .Connect .whatsapp a i {
  font-size: 70px; /* Consider making this a variable if used elsewhere */
  color: var(--green-color);
}

/* Top Bar Section Styles */
.main_container .main_wrapper section { /* This is likely the top bar */
  display: flex;
  justify-content: space-between;
  padding: var(--padding-small);
  background: var(--header-bg-color);
  width: 100%;
  margin: auto;
  position: fixed;
  top: 0;
  z-index: 4;
}

.main_container .main_wrapper section .time_management {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_container .main_wrapper section .menu-btn {
  cursor: pointer;
  padding: calc(var(--padding-small) * 1.5);
  display: none; /* Controlled by JS or media queries */
  flex-direction: column;
}

.main_container .main_wrapper section .hidden { /* Utility class */
  display: none;
}

.main_container .main_wrapper section #overlay.hidden { /* Overlay specific */
  display: none;
}

.main_container .main_wrapper section .bar {
  width: 30px;
  height: 3px;
  margin: 6px 0; /* Consider var if consistent */
  transition: var(--transition-medium);
  background-color: var(--black-color); /* Default for mobile, overridden in all.css for desktop */
}

.main_container .main_wrapper section div.time_management,
.main_container .main_wrapper section .quick_contact {
  padding: calc(var(--spacing-unit) / 2);
}

.main_container .main_wrapper section div.time_management a,
.main_container .main_wrapper section .quick_contact a {
  text-decoration: none;
  color: var(--white-color);
  padding: var(--padding-small);
  font-weight: 600; /* Consider var */
}

.main_container .main_wrapper section .quick_contact {
  display: flex;
  align-items: center;
}

.main_container .main_wrapper section .quick_contact .__closet h4 {
  padding: 0;
  cursor: pointer;
  color: var(--white-color);
  display: none; /* Appears to be for a hidden feature */
}

.main_container .main_wrapper section .quick_contact .__closet span {
  display: none;
  min-height: 100px; /* Consider var */
  position: absolute;
  background-color: var(--white-color);
  width: 100%;
}

.main_container .main_wrapper section .quick_contact .__closet:hover {
  cursor: pointer;
}

.main_container .main_wrapper section .quick_contact .__closet:hover span {
  display: flex;
  align-items: center;
  text-align: center;
}

.main_container .main_wrapper section .quick_contact .__social_media svg {
  width: 20px; /* Consider var */
  height: 20px; /* Consider var */
  fill: var(--text-color-light);
  cursor: pointer;
  margin-right: var(--spacing-unit);
}

.main_container .main_wrapper section .quick_contact .__social_media svg:hover {
  fill: var(--white-color);
  transition: all ease-in-out var(--transition-long);
}

/* ed_link_headers - Main Navigation Area below top bar */
.main_container .main_wrapper .ed_link_headers {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white-color);
  margin-top: 70px; /* Height of the fixed top bar */
  /* This is for the non-hero version of the header */
}

.main_container .main_wrapper .ed_link_headers .menu-close {
  display: none; /* For mobile menu */
}

.main_container .main_wrapper .ed_link_headers .outer_link_header {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--white-color);
  position: absolute; /* This might need review based on scroll behavior */
  top: 60px; /* Adjust if top bar height changes */
  box-shadow: var(--box-shadow-light);
  padding: calc(var(--padding-small) * 1.5);
}

.main_container .main_wrapper .ed_link_headers .outer_link_header div.contact_chip img {
  width: 70px; /* Consider var */
  height: 63px; /* Consider var */
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%; /* Consider var or make it more fluid */
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header .menu-close {
  display: none; /* For mobile menu */
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div > a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: var(--font-weight-bolder); /* 900 */
  font-size: 20px; /* Consider var */
  margin: auto; /* This might be an issue with flex, review */
  font-weight: var(--font-weight-normal); /* Overwrites previous, check desired */
  letter-spacing: 0.03em;
  transition: color var(--transition-short) ease-in-out, font-size var(--transition-short) ease-in-out;
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div > a:hover {
  color: var(--secondary-color);
  /* transition property is on the base selector */
  font-size: 18px; /* Intentional shrink? Review */
}

/* Dropdown Menu Styles for .ed_link_headers */
.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div.dropdown_menu span {
  display: none;
  position: absolute;
  min-width: 300px; /* Consider var */
  z-index: 999;
  transition-delay: var(--transition-medium);
  padding: var(--padding-small);
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div.dropdown_menu:hover span {
  display: flex;
  background: var(--white-color);
  flex-direction: column;
  transition: all ease-out var(--transition-medium);
  transition-delay: var(--transition-medium);
  border-radius: var(--border-radius-medium);
  z-index: 3; /* Lower than whatsapp icon */
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div.dropdown_menu:hover span a {
  padding: var(--padding-small) 0 var(--padding-small) var(--padding-medium);
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600; /* Consider var */
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div.dropdown_menu:hover span a {
  /* Add base transition to the link itself */
  transition: color var(--transition-medium) ease-in-out, border-left-color var(--transition-medium) ease-in-out, padding-left var(--transition-medium) ease-in-out;
}

.main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div.dropdown_menu:hover span a:hover {
  color: var(--text-color-hover);
  border-left: 5px solid var(--secondary-color);
  height: 40px; /* Consider var or line-height */
  margin-left: 2px;
  padding-left: calc(var(--padding-medium) - 5px); /* Adjust padding to account for border */
  /* transition property is on the base selector */
}

/* ed_link_header - Hero Header Styles */
.main_container .main_wrapper .ed_link_header { /* This is for the hero version of the header */
  position: relative;
  width: 100%;
  background: var(--header-bg-image) no-repeat;
  background-position: 120% -5%; /* These values might need adjustment */
  background-size: cover;
  height: 100vh;
}

.main_container .main_wrapper .ed_link_header .menu-close {
  display: none; /* For mobile menu */
}

.main_container .main_wrapper .ed_link_header .outer_link_header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.4941176471); /* Consider var --white-color with alpha */
  position: absolute;
  top: 60px; /* Adjust if top bar height changes */
  box-shadow: var(--box-shadow-light);
  padding: calc(var(--padding-small) * 1.5);
}

.main_container .main_wrapper .ed_link_header .outer_link_header div.contact_chip img {
  width: 70px; /* Consider var */
  height: 63px; /* Consider var */
  color: var(--secondary-color); /* color won't apply to img src, is this for a placeholder? */
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header {
  width: 85%; /* Consider var or make it more fluid */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header .menu-close {
  display: none; /* For mobile menu */
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div > a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: var(--font-weight-bolder);
  font-size: 20px; /* Consider var */
  margin: auto; /* Review for flex */
  /* font-weight: 500; /* Redundant with bolder? Check desired */
  letter-spacing: 0.03em;
  transition: color var(--transition-short) ease-in-out, border-bottom-color var(--transition-short) ease-in-out, font-size var(--transition-short) ease-in-out;
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div > a:hover {
  border-bottom: 4px solid var(--secondary-color);
  /* transition property is on the base selector */
  font-size: 21px; /* Slight increase on hover */
}

/* Dropdown Menu Styles for .ed_link_header (Hero) */
.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div.dropdown_menu span {
  display: none;
  position: absolute;
  min-width: 300px; /* Consider var */
  z-index: 9999; /* Higher than other dropdown */
  transition-delay: var(--transition-medium);
  padding: var(--padding-small);
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div.dropdown_menu:hover span {
  display: flex;
  background: rgba(255, 255, 255, 0.9843137255); /* Consider var --white-color with alpha */
  color: var(--primary-color);
  border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) var(--border-radius-medium);
  flex-direction: column;
  transition: all ease-out var(--transition-medium);
  transition-delay: var(--transition-medium);
  z-index: 3;
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div.dropdown_menu:hover span a {
  padding: var(--padding-small) 0 var(--padding-small) var(--padding-medium);
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600; /* Consider var */
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div.dropdown_menu:hover span a {
  /* Add base transition to the link itself */
  transition: color var(--transition-medium) ease-in-out, border-left-color var(--transition-medium) ease-in-out, padding-left var(--transition-medium) ease-in-out;
}

.main_container .main_wrapper .ed_link_header .outer_link_header .link_header div.dropdown_menu:hover span a:hover {
  color: #585858; /* Consider var */
  border-left: 4px solid rgba(164, 30, 34, 0.6980392157); /* var --secondary-color with alpha */
  height: 40px; /* Consider var or line-height */
  margin-left: 2px;
  padding-left: calc(var(--padding-medium) - 4px); /* Adjust padding to account for border */
  /* transition property is on the base selector */
}

/* Scrolled Header State */
.main_container .main_wrapper #main-header.scroll {
  background-color: rgba(255, 187, 0, 0.231372549) transparent; /* This seems unusual, review */
  background: var(--header-bg-image-scroll) no-repeat;
  height: 150px; /* Consider var */
  transition: all ease-in-out var(--transition-long);
  position: static; /* Overrides fixed positioning on scroll, ensure this is intended */
}

.main_container .main_wrapper #main-header.scroll #logo img {
  height: 70px; /* Consider var */
  width: 70px; /* Consider var */
  transition: all ease-in-out var(--transition-long);
  border: 1px solid var(--dark-gray-color);
  border-radius: var(--border-radius-circle);
  padding: var(--padding-small);
}

.main_container .main_wrapper #main-header.scroll .link_header a {
  color: #555; /* Consider var */
}

/* Footer Styles */
.main_footer {
  /* position: static; /* Default, can be removed */
  /* left: 0; /* Default for static */
  /* bottom: 0; /* Default for static */
  width: 100%;
  background-color: var(--footer-bg-color);
  color: var(--white-color);
  text-align: left;
  padding: var(--padding-large); /* 50px */
}

.main_footer .footer_content {
  padding: var(--padding-large); /* 30px */
  display: flex;
  justify-content: space-evenly;
  width: 70%; /* Consider making this more responsive or full width */
  margin: auto; /* Center if width is less than 100% */
}

.main_footer .footer_content .school_info .school_logo_footer img {
  width: 100px; /* Consider var */
  height: 100px; /* Consider var */
  border-radius: var(--border-radius-circle);
  background: var(--white-color);
  padding: calc(var(--spacing-unit) / 2); /* 5px */
}

.main_footer .footer_content .school_info .head_teacher {
  padding: var(--padding-large); /* 30px */
  font-size: var(--large-font-size);
  color: var(--white-color);
  display: flex;
  flex-direction: column;
}

.main_footer .footer_content .school_info .head_teacher span.head_t {
  padding: calc(var(--spacing-unit) / 2); /* 5px */
  font-size: var(--large-font-size); /* Redundant with parent, check if needed */
  font-weight: 600; /* Consider var */
  color: var(--white-color);
}

.main_footer .footer_content .school_info .head_teacher h2 {
  border-bottom: 1px solid var(--white-color);
  width: fit-content;
}

.main_footer .footer_content .school_info .head_teacher section {
  margin-top: var(--padding-medium); /* 20px */
  display: flex;
  flex-wrap: wrap; /* Good for responsiveness */
}

.main_footer .footer_content .school_info .head_teacher section span {
  cursor: pointer;
  margin-right: calc(var(--spacing-unit) * 0.8); /* 8px */
}

.main_footer .footer_content .school_info .head_teacher section span i {
  border: 1px solid var(--white-color);
  border-radius: var(--border-radius-circle);
  padding: var(--padding-small); /* 10px */
  margin-top: calc(var(--spacing-unit) * 0.3); /* 3px */
}

.main_footer .footer_content .school_info .head_teacher section span a {
  color: var(--white-color);
  text-decoration: none;
}

.main_footer .footer_content .school_info .head_teacher section span:hover {
  /* color: var(--white-color); /* No change, can be removed */
  transition: all ease-in-out var(--transition-medium);
  font-size: var(--large-font-size); /* Potential conflict if parent is already large */
}

.main_footer .footer_content .footer_contacts {
  width: 50%; /* Consider responsiveness */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main_footer .footer_content .footer_contacts h2 {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--white-color);
}

.main_footer .footer_content .footer_contacts .contacts_info {
  display: flex;
  flex-direction: column;
  padding: calc(var(--padding-small) * 1.5); /* 15px */
  margin: var(--padding-small); /* 10px */
}

.main_footer .footer_content .footer_contacts .contacts_info span {
  padding: var(--padding-small); /* 10px */
  font-size: 15px; /* Consider var */
  cursor: pointer;
}

.main_footer .footer_content .footer_contacts .contacts_info span a {
  color: var(--white-color);
  text-decoration: none;
}

.main_footer .footer_content .footer_contacts .contacts_info span:hover {
  font-weight: 500; /* Consider var */
  transition: all ease-in var(--transition-long);
}

/* Cookie Banner Styles */
.main_footer .footer_content #cookieBanner {
  position: fixed;
  bottom: var(--padding-medium); /* 20px */
  left: var(--padding-large); /* 30px */
  width: 30%; /* Consider responsiveness */
  padding: var(--padding-small); /* 10px */
  background-color: var(--cookie-banner-bg-color);
  color: var(--white-color);
  text-align: center;
  box-shadow: var(--box-shadow-medium);
  border-radius: var(--border-radius-medium);
  height: 200px; /* Consider var or auto */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure it's above other content */
}

.main_footer .footer_content #cookieBanner p {
  margin: 0; /* Overrides default p margin */
}

.main_footer .footer_content #cookieBanner button {
  margin: calc(var(--spacing-unit) / 2); /* 5px */
  width: 40%; /* Consider responsiveness */
  height: 40px; /* Consider var */
  padding: calc(var(--spacing-unit) * 0.8) calc(var(--spacing-unit) * 1.5); /* 8px 15px */
  background-color: var(--cookie-button-bg-color);
  color: var(--cookie-button-text-color);
  border: 1px solid transparent; /* Prepare for border transition */
  cursor: pointer;
  border-radius: var(--border-radius-small); /* Added for consistency */
  transition: background-color var(--transition-medium) ease-in-out, color var(--transition-medium) ease-in-out, border-color var(--transition-medium) ease-in-out, padding var(--transition-medium) ease-in-out;
}

.main_footer .footer_content #cookieBanner button:hover {
  /* transition property is on the base selector */
  border: 1px solid var(--white-color);
  padding: var(--padding-small) calc(var(--spacing-unit) * 1.8); /* 10px 18px */
  background: var(--cookie-button-text-color); /* Swaps bg with text color */
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
}

/* Last Footer Section Styles */
.main_footer .last_footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--padding-small) 0 var(--padding-small);
  margin-top: var(--padding-medium); /* Added spacing */
}

.main_footer .last_footer .left_last {
  display: flex;
  justify-content: space-around;
  width: 70%; /* Consider responsiveness */
  cursor: pointer; /* On the container? */
}

.main_footer .last_footer .left_last div a {
  color: var(--white-color);
  text-decoration: none;
}

.main_footer .last_footer .right_last {
  cursor: pointer; /* On the container? */
}

.main_footer .last_footer .right_last span a {
  text-decoration: none;
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
}

.main_footer .last_footer .left_last div,
.main_footer .last_footer .right_last div { /* Assuming right_last also contains a div */
  transition: color var(--transition-medium) ease-in, font-size var(--transition-medium) ease-in;
}

.main_footer .last_footer .left_last div:hover,
.main_footer .last_footer .right_last div:hover {
  color: rgba(35, 35, 35, 0.4117647059); /* Consider var --text-color-secondary with alpha */
  font-size: medium; /* Consider var */
  /* transition property is on the base selector */
}

/* Base styles from all_pages.css and main_pages.css will be merged below */
/* Placeholder for page-specific styles */

/* Media Queries - Consolidated */
@media (max-width: 1024px) {
  body {
    font-size: 14px; /* Adjust base font for smaller screens */
  }

  /* Adjustments for .main_container and top bar */
  .main_container .main_wrapper section { /* Top bar */
    height: auto; /* Let content define height */
    padding: var(--padding-small); /* Original padding was 10px */
    /* background: var(--white-color); /* from all.css @media */
  }

  .main_container .main_wrapper section .time_management,
  .main_container .main_wrapper section .quick_contact {
    display: none; /* Hide desktop top bar elements */
  }

  .main_container .main_wrapper section .menu-btn {
    display: flex; /* Show mobile menu button */
  }

  .main_container .main_wrapper section .bar {
     background: var(--black-color); /* Ensure bars are visible on light bg */
  }

  /* Mobile Navigation Menu Styles */
  .main_container .main_wrapper .ed_link_header .outer_link_head, /* From all.css @media - for hero */
  .main_container .main_wrapper .ed_link_headers .outer_link_head { /* From all.css @media - for standard */
    display: none; /* Initially hidden */
    width: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: 1000; /* High z-index for modal menu */
    background-color: var(--white-color);
    padding: var(--padding-medium);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--box-shadow-dark);
    transition: transform var(--transition-long) ease, opacity var(--transition-medium) ease;
    height: 100vh; /* Full height menu */
    overflow-y: auto; /* Scroll if content overflows */
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head.open,
  .main_container .main_wrapper .ed_link_headers .outer_link_head.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .contact_chip,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .contact_chip {
    display: none; /* Hide contact chip in mobile menu */
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header {
    background: var(--white-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align items to the top */
    padding: var(--padding-large); /* 30px */
    height: auto; /* Let content define height */
    width: 100%;
    z-index: 999; /* Below overlay background but above page */
    gap: var(--padding-medium); /* Space between links */
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .menu-close, /* Hero */
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .menu-close { /* Standard */
    display: block;
    cursor: pointer;
    position: absolute;
    top: var(--padding-medium); /* 20px */
    right: var(--padding-medium); /* 20px / 10px from original */
    padding: var(--padding-small);
    z-index: 1001; /* Above the menu content */
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .menu-close i,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .menu-close i {
    color: var(--primary-color);
    font-size: var(--xxlarge-font-size);
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .menu-close i:hover,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .menu-close i:hover {
    color: var(--secondary-color);
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header a,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header a,
  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .dropdown-toggle i { /* For dropdown toggles if they are 'i' */
    text-decoration: none;
    font-size: var(--xlarge-font-size);
    color: var(--primary-color);
    padding: var(--padding-small); /* Added padding for better touch targets */
    display: block; /* Make them block for easier layout */
    width: 100%;
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .dropdown-content,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .dropdown-content {
    display: flex; /* Changed from none to flex for control with max-height */
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition-medium) ease, opacity var(--transition-medium) ease;
    gap: var(--padding-small); /* 10px */
    background-color: var(--light-gray-color); /* Differentiate dropdown slightly */
    padding-left: var(--padding-medium); /* Indent dropdown items */
    border-radius: var(--border-radius-small);
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .dropdown-content a,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .dropdown-content a {
    font-size: var(--large-font-size); /* Slightly smaller than main links */
    padding: var(--padding-small); /* 10px */
    /* background: whitesmoke; /* from all.css @media */
    width: 100%; /* Take full width of the dropdown */
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .dropdown-content.show,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .dropdown-content.show {
    max-height: 500px; /* Adjust as needed */
    opacity: 1;
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .caret,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .caret {
    transition: transform var(--transition-short) ease;
    cursor: pointer;
    padding: var(--padding-small); /* Ensure caret is clickable */
  }

  .main_container .main_wrapper .ed_link_header .outer_link_head .link_header .caret.up,
  .main_container .main_wrapper .ed_link_headers .outer_link_head .link_header .caret.up {
    transform: rotate(180deg);
  }

  /* Original mobile nav from all.css (outer_link_header that is not .outer_link_head) - this seems to be an alternative mobile nav style or an older version. Review if this is still needed or if .outer_link_head replaces it. For now, I'll keep its responsive adjustments but comment out if it's truly unused after testing. */
  .main_container .main_wrapper .ed_link_header .outer_link_header,
  .main_container .main_wrapper .ed_link_headers .outer_link_header {
     /* display: none; /* This was in all.css @media, but might conflict with the .open logic for .outer_link_head. If .outer_link_head is the primary mobile nav, this entire block might be removable for mobile. */
    /* The following styles are from all.css @media for this selector. They describe a side-menu. */
    /* z-index: 5;
    width: 80%;
    position: absolute;
    flex-direction: row-reverse;
    top: 0;
    left: 0;
    height: 100vh;
    background: var(--white-color);
    justify-content: flex-start;
    box-shadow: unset; */
  }

  /* .main_container .main_wrapper .ed_link_header .outer_link_header div.contact_chip,
  .main_container .main_wrapper .ed_link_headers .outer_link_header div.contact_chip {
     display: none;
  } */

  /* .main_container .main_wrapper .ed_link_header .outer_link_header .link_header,
  .main_container .main_wrapper .ed_link_headers .outer_link_header .link_header {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* height: auto; /* Overridden from all.css @media */
  /* } */

  /* .main_container .main_wrapper .ed_link_header .outer_link_header .link_header .menu-close,
  .main_container .main_wrapper .ed_link_headers .outer_link_header .link_header .menu-close {
    display: block;
    cursor: pointer;
    position: absolute;
    top: var(--padding-large);
    right: var(--padding-small);
    padding: var(--padding-small);
    z-index: 6;
  } */

  /* .main_container .main_wrapper .ed_link_header .outer_link_header .link_header .menu-close i,
  .main_container .main_wrapper .ed_link_headers .outer_link_header .link_header .menu-close i {
    color: var(--primary-color);
    font-size: var(--xxlarge-font-size);
  } */

  /* .main_container .main_wrapper .ed_link_header .outer_link_header .link_header .menu-close i:hover,
  .main_container .main_wrapper .ed_link_headers .outer_link_header .link_header .menu-close i:hover {
    color: var(--secondary-color);
  } */

  /* .main_container .main_wrapper .ed_link_header .outer_link_header .link_header div,
  .main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div {
    display: flex;
    flex-direction: column;
    padding: var(--padding-small);
    width: 100%;
    height: 100%;
  } */

  /* .main_container .main_wrapper .ed_link_header .outer_link_header .link_header div a,
  .main_container .main_wrapper .ed_link_headers .outer_link_header .link_header div a {
    padding: var(--padding-medium);
  } */


  /* Hero Header Adjustments for Mobile */
  .main_container .main_wrapper .ed_link_header { /* Hero section */
    background-position: 38% -20%; /* Center image better */
    background-size: cover;
    height: 60vh; /* Shorter hero for mobile */
  }

  /* Footer adjustments for mobile */
  .main_footer {
    /* all: unset; /* This is too aggressive, selectively unset properties */
    padding: var(--padding-medium); /* Adjust padding */
    text-align: center; /* Center text in footer */
  }

  .main_footer .footer_content {
    /* all: unset; */
    flex-direction: column;
    width: 100%;
    padding: var(--padding-small);
    align-items: center;
  }

  .main_footer .footer_content .school_info {
    width: 100%;
    padding: var(--padding-small);
    align-items: center;
    display: flex; /* Added */
    flex-direction: column; /* Added */
  }

  .main_footer .footer_content .school_info .school_logo_footer {
    padding: var(--padding-small);
  }
  .main_footer .footer_content .school_info .school_logo_footer img {
    width: 70px;
    height: 70px;
  }

  .main_footer .footer_content .school_info .head_teacher {
    width: 100%;
    align-items: center; /* Center head teacher info */
    padding: var(--padding-medium); /* Adjust padding */
  }
  .main_footer .footer_content .school_info .head_teacher span.head_t {
    font-size: var(--large-font-size); /* Ensure it's readable */
  }
  .main_footer .footer_content .school_info .head_teacher section {
    justify-content: center; /* Center social icons */
  }

  .main_footer .footer_content .footer_contacts {
    width: 100%;
    align-items: center; /* Center contacts */
    padding: var(--padding-medium); /* Adjust padding */
  }
  .main_footer .footer_content .footer_contacts h2 {
    padding: var(--padding-small);
  }

  .main_footer .footer_content .footer_contacts .contacts_info {
    /* all: unset; /* Avoid */
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack contacts */
    align-items: center; /* Center align contact items */
    flex-wrap: wrap; /* Though column, wrap might be useful if items are short */
    justify-content: center;
    padding: 0; /* Reset padding */
  }
  .main_footer .footer_content .footer_contacts .contacts_info span {
    font-size: var(--base-font-size); /* 15px in original */
    text-align: center;
  }

  .main_footer .footer_content #cookieBanner {
    width: 85%;
    /* position: center center; /* This is not valid, use left/right/bottom/top and transform if needed */
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--padding-small);
    height: auto; /* Adjust height based on content */
    padding: var(--padding-medium);
  }
   .main_footer .footer_content #cookieBanner button {
    width: 60%; /* Make button more prominent */
  }


  .main_footer .last_footer {
    width: 100%;
    flex-direction: column;
    align-items: center; /* Center last footer items */
    padding: var(--padding-small) 0;
  }

  .main_footer .last_footer .left_last {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center; /* Center links */
    padding: var(--padding-medium) 0; /* 20px 0 */
    gap: var(--padding-small); /* Add gap between items */
  }
   .main_footer .last_footer .left_last div {
     text-align: center; /* Ensure individual link containers are centered if they wrap */
   }

  .main_footer .last_footer .right_last {
    text-align: center;
    padding: var(--padding-small);
  }
  .main_footer .last_footer .right_last span a {
    /* color: var(--white-color); /* Already set */
  }
}

/* === ALL PAGES STYLES === */

/* About Page */
.about_main_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 250px; /* Consider var if common */
}

.about_main_container .about_wrapper {
  width: 90%;
  background: url(../images/ed_1.jpg) no-repeat; /* Consider making image path a var if it changes */
  background-size: cover;
  background-attachment: fixed;
  height: 70vh;
  border-radius: var(--border-radius-medium); /* 10px */
  margin: auto;
}

.about_main_container .about_wrapper .about_content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allow wrapping on smaller screens if needed */
}

.about_main_container .about_wrapper .about_content .about_us {
  width: 45%;
  height: 500px; /* Consider var or auto */
  position: relative; /* Be cautious with positioning */
  top: 120px; /* Consider var */
  background: rgba(243, 243, 243, 0.6705882353); /* var(--light-gray-color) with alpha */
  padding: var(--padding-small); /* 10px */
  border-radius: 50px 0 0 var(--border-radius-small); /* Unusual border-radius */
  color: var(--text-color-secondary);
}

.about_main_container .about_wrapper .about_content .about_us h1 {
  text-align: center;
  padding: var(--padding-medium); /* 20px */
  margin: var(--padding-small); /* 10px */
  font-size: var(--h1-font-size); /* 38px */
  color: var(--primary-color);
}

.about_main_container .about_wrapper .about_content .about_us span {
  padding: 0 0 var(--padding-small) var(--padding-small);
  line-height: normal; /* Or set a specific var */
  letter-spacing: 1.5px; /* Consider var */
  min-width: var(--spacing-unit); /* 10px */
  text-align: justify;
  display: block; /* Ensure span takes padding correctly */
}

.about_main_container .about_wrapper .about_content .ed_proud {
  width: 45%;
  height: 500px; /* Consider var or auto */
  position: relative;
  top: 220px; /* Consider var */
  background: var(--light-gray-color);
  padding: var(--padding-small); /* 10px */
  border-radius: 0 50px var(--border-radius-small) 0; /* Unusual border-radius */
}

.about_main_container .about_wrapper .about_content .ed_proud h1 {
  color: var(--primary-color);
  padding: var(--padding-small) 0 0 0;
  font-size: var(--h1-font-size); /* 38px */
  width: max-content;
  margin: auto;
}

.about_main_container .about_wrapper .about_content .ed_proud ul {
  display: flex;
  /* justify-content: flex-start; /* Default for flex-direction column */
  flex-direction: column;
  width: 50%; /* Or more responsive width */
  margin: auto;
  list-style: none; /* Assuming no bullets needed */
}

.about_main_container .about_wrapper .about_content .ed_proud ul li {
  font-size: 22px; /* Consider var */
  padding: var(--padding-small); /* 10px */
  margin: var(--padding-small); /* 10px */
}

/* Main About Us Section (Generic page sectioning) */
.main_about_us { /* This class name is very specific, could be more generic like .page_section_banner */
  width: 100%;
}
.main_about_us .min_about_us { /* .page_banner_inner or similar */
  display: flex;
  flex-direction: column;
  /* background: url(../images/select2.jpg) repeat; /* Consider var for image */
  /* height: 80vh; Should be handled by content or specific class */
  background-size: cover;
  background-position: center;
  padding: var(--padding-large) 0; /* Add some padding */
}

.main_about_us .min_about_us h1 {
  display: flex;
  justify-content: center;
  align-items: center; /* Vertically center if height is fixed */
  /* height: 100%; /* Remove if banner height is not fixed */
  /* position: relative; /* Avoid if possible */
  /* top: 400px; /* Avoid fixed positioning */
  color: var(--white-color); /* Text on dark bg */
  font-size: 50px; /* Consider var */
  text-align: center; /* Ensure centered if flex not aligning */
}

.main_about_us section { /* This seems like a content section within .main_about_us */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow wrapping */
  padding: var(--padding-medium); /* 20px */
  width: 90%;
  margin: var(--padding-medium) auto; /* Center section */
}

.main_about_us section .left_section {
  display: flex;
  flex-direction: column;
  flex-basis: 60%; /* Example, adjust as needed */
  min-width: 300px; /* Prevent extreme squishing */
}

.main_about_us section .left_section .section_title {
  background: var(--primary-color);
  color: var(--white-color);
  padding: var(--padding-small); /* Added padding */
  border-radius: var(--border-radius-small); /* Added */
}

.main_about_us section .left_section .section_title h1 {
  font-size: var(--h1-font-size); /* 38px */
  padding: var(--padding-small); /* 10px */
}

.main_about_us section .left_section .links_inside_the_section {
  background: var(--primary-color);
  margin-top: var(--padding-medium); /* 20px */
  border-radius: var(--border-radius-small); /* Added */
}

.main_about_us section .left_section .links_inside_the_section .links {
  display: flex;
  /* justify-content: center; /* Align left for typical nav links */
  flex-direction: column;
  padding: var(--padding-large); /* 30px */
}

.main_about_us section .left_section .links_inside_the_section .links a {
  margin: var(--padding-small); /* 10px */
  color: var(--light-gray-color);
  text-decoration: none;
  font-size: 25px; /* Consider var */
  font-weight: 600; /* Consider var */
  cursor: pointer;
  padding: var(--padding-small); /* Add padding for better click area */
}

.main_about_us section .left_section .links_inside_the_section .links a:hover {
  color: rgba(138, 137, 137, 0.8274509804); /* Consider var --text-color-light-hover */
  /* padding: var(--padding-small); /* Already has padding */
  transition: color var(--transition-long) ease-in-out; /* Only transition color */
}

.main_about_us section .right_section {
  /* background: url(../images/ed_2.jpg) no-repeat; /* Var for image */
  background-size: cover;
  /* height: 80vh; /* Let content define height or use min-height */
  min-height: 400px; /* Example */
  flex-basis: 35%; /* Example */
  min-width: 300px;
  background-position: center center;
  border-radius: var(--border-radius-medium); /* 10px */
  /* background-position-x: right; /* Covered by center center */
  /* background-attachment: fixed; /* Use with caution, can have performance implications */
  padding: var(--padding-medium); /* Added padding */
  color: var(--white-color); /* Default text color for this section */
}

.main_about_us section .right_section h1 {
  padding: var(--padding-medium); /* 20px */
  color: var(--light-gray-color); /* Or var(--white-color) */
}

.main_about_us section .right_section ol {
  padding: 0 var(--padding-medium) var(--padding-medium) var(--padding-large); /* Adjust padding for list */
  list-style-position: inside; /* Example if using standard ol */
}

.main_about_us section .right_section ol li {
  padding: var(--padding-small); /* 10px */
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  text-align: justify;
  display: flex; /* For icon alignment */
  /* justify-content: flex-start; /* Default for flex */
  align-items: flex-start; /* Align icon with start of text */
  margin-bottom: var(--spacing-unit); /* Space between list items */
}

.main_about_us section .right_section ol li i {
  margin-right: calc(var(--spacing-unit) / 2); /* 5px */
  font-weight: var(--font-weight-bold); /* Icons might not have font-weight */
  color: var(--secondary-color); /* Example color for icon */
}

/* Contact Page Specific Styles */
.contact_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: var(--padding-large); /* Add some top margin */
}

.contact_wrapper .min_contact { /* Banner for contact page */
  /* height: 70vh; /* Let content or min-height define */
  min-height: 300px; /* Example */
  /* background: url(../images/contact.jpg); /* Var for image */
  background-size: cover;
  background-position: 10% 10%; /* Adjust as needed */
  width: 100%;
  display: flex; /* For centering text */
  justify-content: center; /* For centering text */
  align-items: center; /* For centering text */
}

.contact_wrapper .min_contact h2 {
  /* display: flex; /* Already on parent */
  /* justify-content: center; /* Already on parent */
  /* align-items: center; /* Already on parent */
  /* height: 100%; /* Remove */
  color: var(--white-color);
  font-size: var(--h1-font-size); /* 38px, or a banner specific var */
  text-align: center;
}

.contact_wrapper .contact_container {
  width: 90%; /* Center content */
  margin: var(--padding-large) auto; /* Add margin and center */
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  gap: var(--padding-medium); /* Add gap between items */
}

.contact_wrapper .contact_container .contact_personell {
  display: flex;
  flex-direction: column;
  /* justify-content: space-evenly; /* Space out items */
  gap: var(--padding-large); /* Add gap */
  flex-grow: 1; /* Allow to grow */
  flex-basis: 60%; /* Example */
  /* width: 90%; /* Controlled by parent's width and flex properties */
  padding: var(--padding-large); /* 30px */
}

.contact_wrapper .contact_container .contact_personell .headmaster,
.contact_wrapper .contact_container .contact_personell .academic,
.contact_wrapper .contact_container .contact_personell .brother,
.contact_wrapper .contact_container .contact_personell .Sister,
.contact_wrapper .contact_container .contact_personell .Accountant,
.contact_wrapper .contact_container .contact_personell .Secretary {
  padding: var(--padding-small); /* 10px */
  border-bottom: 4px solid var(--primary-color);
  /* width: 50%; /* Allow flex to manage width */
  display: flex;
  flex-direction: column;
}

.contact_wrapper .contact_container .contact_personell .headmaster h1,
.contact_wrapper .contact_container .contact_personell .academic h1,
.contact_wrapper .contact_container .contact_personell .brother h1,
.contact_wrapper .contact_container .contact_personell .Sister h1,
.contact_wrapper .contact_container .contact_personell .Accountant h1,
.contact_wrapper .contact_container .contact_personell .Secretary h1 {
  color: var(--secondary-color);
  font-size: var(--h2-font-size); /* Make titles consistent */
  margin-bottom: var(--spacing-unit);
}

.contact_wrapper .contact_container .contact_personell .headmaster h2, /* This seems to be a name */
.contact_wrapper .contact_container .contact_personell .academic h2,
.contact_wrapper .contact_container .contact_personell .brother h2,
.contact_wrapper .contact_container .contact_personell .Sister h2,
.contact_wrapper .contact_container .contact_personell .Accountant h2,
.contact_wrapper .contact_container .contact_personell .Secretary h2 {
  color: var(--primary-color);
  padding: var(--padding-small) 0; /* 10px 0 */
  font-size: calc(var(--base-font-size) * 1.25); /* Adjust size */
}

.contact_wrapper .contact_container .contact_personell .headmaster span, /* Contact details */
.contact_wrapper .contact_container .contact_personell .academic span,
.contact_wrapper .contact_container .contact_personell .brother span,
.contact_wrapper .contact_container .contact_personell .Sister span,
.contact_wrapper .contact_container .contact_personell .Accountant span,
.contact_wrapper .contact_container .contact_personell .Secretary span {
  font-size: var(--large-font-size);
  color: var(--text-color-secondary);
  padding: calc(var(--padding-small) * 1.5) 0; /* 15px 0 */
}

.contact_wrapper .contact_container .contact_personell .headmaster span b i, /* Icon within contact */
.contact_wrapper .contact_container .contact_personell .academic span b i,
.contact_wrapper .contact_container .contact_personell .brother span b i,
.contact_wrapper .contact_container .contact_personell .Sister span b i,
.contact_wrapper .contact_container .contact_personell .Accountant span b i,
.contact_wrapper .contact_container .contact_personell .Secretary span b i {
  color: var(--secondary-color);
  margin-right: var(--spacing-unit); /* Add space after icon */
}

.contact_wrapper .contact_container .direction { /* Map section */
  /* margin-right: 63px; /* Remove fixed margin */
  flex-grow: 1;
  flex-basis: 30%; /* Example */
  min-width: 280px; /* Ensure map is usable */
  position: relative; /* For absolute positioned h1 if kept */
}

.contact_wrapper .contact_container .direction h1 { /* Title for map */
  color: var(--white-color);
  text-align: center;
  padding: var(--padding-medium); /* 20px */
  background: var(--primary-color);
  text-transform: uppercase;
  /* position: absolute; /* Consider static positioning */
  /* top: -60px; /* Avoid negative positioning */
  width: 100%;
  border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; /* Rounded top corners */
  font-size: var(--h2-font-size);
}

.contact_wrapper .contact_container .direction .map {
  background: var(--primary-color); /* Or a lighter color for contrast with text */
  /* margin-top: 40px; /* Remove if h1 is static */
  color: var(--white-color);
  padding: var(--padding-large); /* 30px */
  text-align: right; /* Or center/left */
  height: 500px; /* Fixed height for map, ensure it's responsive or handled by map API */
  border-radius: 0 0 var(--border-radius-small) var(--border-radius-small); /* Rounded bottom */
}

/* Admin Main Container (Generic Banner Style) */
.admin_main_container { /* Can be .page_banner_container */
  display: flex; /* Not always needed if just a banner */
  width: 100%;
  margin-bottom: var(--padding-large); /* Space after banner */
}

.admin_main_container .main_container { /* This is confusing, rename to .banner_image_full or similar */
  /* background: url(../images/lab2.jpg) no-repeat; /* Var for image */
  height: 100vh; /* Full viewport height, use sparingly */
  background-position: center;
  background-size: cover;
  width: 100%; /* Ensure it takes full width if parent is flex */
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin_main_container .main_container h1 {
  /* display: flex; /* Already on parent */
  /* justify-content: center; /* Already on parent */
  /* align-items: center; /* Already on parent */
  /* height: 100%; /* Remove */
  color: #73603c; /* Specific color, consider var if used elsewhere, e.g. --warning-text-color */
  font-weight: var(--font-weight-bold);
  font-size: 50px; /* Consider var */
  text-align: center;
}

/* Alumni Page */
.alumni_main_container .alumni_container { /* Banner */
  /* background: url(../images/lab3.jpg) no-repeat; /* Var for image */
  height: 70vh;
  background-position: center;
  background-size: cover;
}

.alumni_main_container .alumni_list {
  display: flex; /* Not strictly necessary for just the container below */
  width: 100%;
  padding: var(--padding-large) 0; /* 30px 0 */
}

.alumni_main_container .alumni_list .in_container { /* Content container */
  width: 95%;
  margin: auto;
  display: flex;
  justify-content: space-evenly; /* Or space-around / flex-start */
  flex-wrap: wrap; /* Essential for responsiveness */
  gap: var(--padding-medium); /* Add gap between items */
  padding: var(--padding-medium) 0; /* 20px 0 */
}

.alumni_main_container .alumni_list .in_container div { /* Alumni card */
  padding: var(--padding-small); /* 10px */
  background: var(--primary-color);
  color: var(--white-color); /* Default text color for card */
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; /* Let content flow naturally or use gap */
  align-items: center;
  /* height: 250px; /* Let content define height, or use min-height */
  width: 30%; /* Adjust for responsiveness, works with flex-wrap */
  min-width: 280px; /* Minimum card width */
  border-radius: var(--border-radius-medium); /* 10px */
  margin-bottom: 200px; /* This is very large, is it for an image extending below? Review */
  text-align: center; /* Center text in card */
}

.alumni_main_container .alumni_list .in_container div img {
  width: 100%;
  height: 400px; /* Fixed height, may distort images. Consider aspect-ratio or object-fit */
  object-fit: cover; /* If using fixed height */
  border-radius: var(--border-radius-small); /* 5px */
  margin-bottom: var(--padding-small); /* Space below image */
}

.alumni_main_container .alumni_list .in_container div span {
  /* color: var(--primary-color); /* Text is on primary-color bg, should be light */
  color: var(--white-color);
  font-size: var(--large-font-size);
  font-weight: var(--font-weight-bold);
  padding: var(--padding-small); /* 10px */
}

/* School Main Container (Banner) */
.school_main_container .school_container {
  /* background: url(https://edmundricesinon.ac.tz/static/EDMUND/images/lab4.jpg) no-repeat; /* Var for image */
  height: 100vh;
  background-position: center;
  background-size: cover;
}

/* Utility Text Align Class */
.text_align { /* Could be more specific e.g., .section_call_to_action_text */
  text-align: center;
  font-size: var(--base-font-size); /* small is relative, be specific */
  padding: var(--padding-medium); /* Add some padding */
}
.text_align h1 {
  color: var(--text-color-secondary);
  font-size: var(--h2-font-size); /* Adjust as needed */
}
.text_align h1 a {
  text-decoration: none;
  color: var(--primary-color);
}
.text_align h1 a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

/* History Page */
.history_container {
  width: 100%;
  padding: var(--padding-large) var(--padding-small); /* 30px overall, more specific if needed */
}

.history_container .history_wrapper {
  width: 90%;
  max-width: 800px; /* Set a max-width for readability */
  display: flex;
  flex-direction: column;
  padding: var(--padding-medium); /* 20px */
  margin: calc(var(--padding-large) / 1.66) auto; /* 30px auto */
  background-color: var(--white-color); /* Add bg if needed */
  border-radius: var(--border-radius-medium); /* Add radius */
}

.history_container .history_wrapper h1 {
  color: var(--primary-color);
  padding: var(--padding-small) 0; /* 10px 0 */
  font-size: var(--h1-font-size);
  margin-bottom: var(--padding-medium); /* Space after title */
}

.history_container .history_wrapper span { /* Should be <p> tags for semantic HTML */
  padding: calc(var(--spacing-unit) / 2) 0; /* 5px 0 */
  margin-bottom: 1.9em; /* Keep if specific line spacing effect is desired */
  line-height: 1.9em;
  /* border-radius: var(--border-radius-medium); /* Spans typically don't have borders/bg */
  font-size: var(--base-font-size); /* 15px */
  text-align: justify;
  color: var(--text-color-primary);
}

/* Courses Page */
.main_courses_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--padding-large) 0; /* 100px top/bottom -> var(--padding-xlarge) or similar */
}

.main_courses_container .min_course_container { /* Wrapper for collapsibles */
  width: 90%;
  max-width: 900px; /* Max width for content */
  background: var(--primary-color);
  margin: auto;
  padding: var(--padding-medium); /* Add some padding inside */
  border-radius: var(--border-radius-medium);
}

.main_courses_container .min_course_container .collapsible { /* Individual collapsible item */
  border: 1px solid var(--white-color);
  margin-bottom: var(--padding-small); /* Space between items */
  border-radius: var(--border-radius-small); /* Rounded corners for each item */
  background-color: var(--primary-color); /* Ensure bg color for text contrast */
}
.main_courses_container .min_course_container .collapsible:last-child {
  margin-bottom: 0;
}

.main_courses_container .min_course_container .collapsible h2 { /* Clickable header */
  color: var(--white-color);
  padding: var(--padding-medium); /* 10px -> var(--padding-small) or medium for better touch */
  font-size: var(--h2-font-size); /* Adjust as needed */
  cursor: pointer;
  margin: 0; /* Remove default margin */
  display: flex; /* For icon alignment */
  justify-content: space-between; /* Space for icon */
  align-items: center;
}

.main_courses_container .min_course_container .collapsible span { /* Icon container */
  /* float: right; /* Avoid float with flex */
  padding: var(--padding-small); /* 10px */
  color: var(--white-color);
  font-weight: var(--font-weight-bold);
  /* Add transition for icon rotation if it's an icon font */
}

.main_courses_container .min_course_container .collapsible .content { /* Collapsible content */
  padding: var(--padding-medium); /* 10px */
  color: var(--light-gray-color);
  background-color: darken(var(--primary-color), 5%); /* Slightly darker bg for content */
  border-top: 1px solid var(--white-color); /* Separator line */
  border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
}
.main_courses_container .min_course_container .collapsible .content p {
  padding: 0; /* Remove padding if parent has it */
  margin: 0;
  color: var(--light-gray-color);
}


/* School Life Page */
.school_life_container {
  width: 100%;
  display: flex; /* Not strictly needed */
  flex-direction: column; /* Default flow */
  padding: var(--padding-large) var(--padding-small); /* 30px */
  margin-top: calc(var(--padding-large) * 1.66); /* 50px */
}

.school_life_container .school_life_wrapper h1 {
  color: var(--primary-color);
  font-size: 40px; /* Consider var */
  padding: var(--padding-large) var(--padding-large) var(--padding-small) calc(var(--padding-large) + var(--padding-large)); /* 80px 80px 10px 70px - unusual padding */
  text-align: center; /* More common for such titles */
  margin-bottom: var(--padding-medium);
}

.school_life_container .school_life_wrapper .inside_school_life { /* Grid container for images */
  display: flex; /* Use grid for more complex layouts if needed */
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: space-evenly; /* Or space-around */
  gap: var(--padding-medium); /* Add gap between items */
  width: 95%;
  max-width: 1200px; /* Max width for gallery */
  margin: auto;
}

/* Common styles for all picture items in school life */
.school_life_container .school_life_wrapper .inside_school_life > div[class^="pic"],
.school_life_container .school_life_wrapper .inside_school_life > div[class^="award"],
.school_life_container .school_life_wrapper .inside_school_life > div[class^="td"],
.school_life_container .school_life_wrapper .inside_school_life > div[class^="tk"],
.school_life_container .school_life_wrapper .inside_school_life > div[class^="fn"],
.school_life_container .school_life_wrapper .inside_school_life > div[class^="wdw"],
.school_life_container .school_life_wrapper .inside_school_life > div[class^="agr"] {
  background-position: center;
  background-size: cover;
  border-radius: var(--border-radius-medium); /* 10px */
  width: 30%; /* Adjust for number of items per row, consider using flex-basis */
  min-width: 280px; /* Min width for each item */
  height: 40vh; /* Fixed height, may crop images. Consider aspect-ratio */
  transition: background-size var(--transition-long) ease; /* Smooth transition for hover */
  cursor: pointer;
}

.school_life_container .school_life_wrapper .inside_school_life > div[class^="pic"]:hover {
  background-size: 110%; /* Zoom effect */
}

/* Specific image backgrounds - consider if these need to be dynamic or CSS is fine */
.school_life_container .school_life_wrapper .inside_school_life .pic1 { background-image: url(../images/capacity1.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .pic2 { background-image: url(../images/capacity2.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .pic3 { background-image: url(../images/capcity5.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .pic4 { background-image: url(../images/vs1.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .pic5 { background-image: url(../images/vs2.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .pic6 { background-image: url(../images/vs4.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .award1 { background-image: url(../images/award.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .award2 { background-image: url(../images/award1.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .award3 { background-image: url(../images/award2.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .td1 { background-image: url(../images/td.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .td2 { background-image: url(https://edmundricesinon.ac.tz/static/EDMUND/images/TRADITIONAL\ DANCE.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .td3 { background-image: url(../images/td3.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .tk1 { background-image: url(../images/tk1.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .tk2 { background-image: url(../images/tk2.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .tk3 { background-image: url(../images/tk3.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .fn1 { background-image: url(../images/fn1.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .fn2 { background-image: url(../images/fn2.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .fn3 { background-image: url(../images/fn3.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .wdw1 { background-image: url(../images/wdw1.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .fnart1 { background-image: url(https://edmundricesinon.ac.tz/static/EDMUND/images/TAILORING\ MACHINES.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .agr1 { background-image: url(../images/agri2.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .agr2 { background-image: url(../images/agri3.jpg); }
.school_life_container .school_life_wrapper .inside_school_life .agr3 { background-image: url(../images/agri4.jpg); }


/* Gallery Page */
.gallery_container {
  display: flex;
  width: 100%;
  flex-direction: column;
  padding: var(--padding-large) var(--padding-small); /* 30px */
  margin-top: calc(var(--padding-large) * 2); /* 60px */
}

.gallery_container .gallery_wrapper h1 { /* General title for gallery sections */
  color: var(--primary-color);
  padding: var(--padding-small); /* 10px */
  text-align: center;
  font-size: var(--h1-font-size);
  margin-bottom: var(--padding-medium);
}

.gallery_container .here_2024_gallery { /* Specific gallery section */
  margin-bottom: calc(var(--padding-large) * 3.33); /* 100px */
}

.gallery_container .here_2024_gallery h1 { /* Sub-section title */
  color: var(--secondary-color); /* #8b0000 -> var(--secondary-color) or new var */
  padding: var(--padding-medium); /* 20px */
  font-size: var(--h2-font-size); /* Adjust */
}

.gallery_container .here_2024_gallery .event_year h1 { /* Year indicator */
  color: var(--primary-color);
  padding: var(--padding-medium); /* 20px */
  text-align: right;
  font-size: var(--large-font-size);
}

.gallery_container .here_2024_gallery .event_year .__current_year { /* Image container */
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: var(--padding-medium); /* Add gap */
}

.gallery_container .here_2024_gallery .event_year .__current_year img {
  width: 30%; /* Adjust for number of images per row */
  min-width: 250px; /* Min image width */
  border-radius: var(--border-radius-medium); /* 10px */
  margin-top: var(--padding-medium); /* 20px - covered by gap */
  object-fit: cover; /* Ensure images look good */
  height: auto; /* Maintain aspect ratio */
}

.gallery_container .all_memories h1 { /* Another sub-section */
  color: var(--secondary-color); /* #8b0000 */
  padding: var(--padding-small); /* 10px */
  font-size: var(--h2-font-size); /* Adjust */
}

/* Masonry-like Gallery Styles */
.gallery_container .galler_pics { /* Main container for masonry */
  display: flex;
  flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
  justify-content: space-evenly;
  width: 96%;
  margin: auto;
  /* background: var(--primary-color); /* Remove background if columns have it or if not desired */
  /* background: 10px; /* This is invalid CSS */
  gap: var(--padding-small); /* Gap between columns */
}

.gallery_container .galler_pics .galery1,
.gallery_container .galler_pics .galery2,
.gallery_container .galler_pics .galery3 { /* Columns */
  display: flex;
  flex-direction: column;
  width: 32%; /* Approx 1/3 for three columns */
  min-width: 280px; /* Min width for a column */
  gap: var(--padding-small); /* Gap between images in a column */
}

.gallery_container .galler_pics .galery1 div, /* Individual image wrappers */
.gallery_container .galler_pics .galery2 div,
.gallery_container .galler_pics .galery3 div {
  /* padding: var(--padding-small); /* 10px - if items need internal padding */
  /* margin: calc(var(--spacing-unit) / 2); /* 5px - covered by gap */
  background-position: center;
  background-size: cover;
  border-radius: var(--border-radius-medium); /* 10px */
  width: 100%; /* Full width of column */
  /* height is set individually below - this is not ideal for maintenance */
}

/* Individual image styles - This is highly repetitive and hard to maintain.
   Consider using a CMS or JS to generate this if image heights are variable.
   If heights are consistent per row type, define classes for those types.
   Example: .gallery-item-tall, .gallery-item-short etc.
   For now, I will list a few and suggest abstracting.
*/
.gallery_container .galler_pics div[class^="one"] { height: 45vh; }
.gallery_container .galler_pics div[class^="two"] { height: 70vh; }
.gallery_container .galler_pics div[class^="thr"] { height: 40vh; }
/* ... and so on for all .fou, .fiv etc. and one2, two2 ... */

/* Example of how to apply specific backgrounds if they must remain in CSS */
.gallery_container .galler_pics .one { background-image: url(../images/select1.jpg); }
.gallery_container .galler_pics .two { background-image: url(../images/select2.jpg); }
/* ... and so on for all 30+ images ... This should ideally be handled by HTML <img> tags or JS. */


/* Packages/Subjects Page */
.packages {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--padding-large) * 2); /* 60px */
  padding: 0 var(--padding-small); /* Add horizontal padding */
}

.packages .o_level, .packages .A_level { /* Common styling for O and A level sections */
  display: flex;
  /* justify-content: space-around; /* Let content flow */
  flex-direction: column;
  width: 100%;
  margin-bottom: var(--padding-large); /* Space between sections */
}
.packages .o_level {
  border-bottom: 2px solid var(--dark-gray-color); /* gray */
}

.packages .o_level h1, .packages .A_level .a_level_subjects h1 { /* Titles for levels/forms */
  padding: var(--padding-small) var(--padding-small) var(--padding-small) var(--padding-large); /* 10px 10px 10px 30px */
  color: var(--primary-color);
  margin-top: var(--padding-large); /* 30px */
  font-size: var(--h1-font-size); /* Adjust as needed */
}
.packages .A_level .a_level_subjects h1 {
  color: var(--secondary-color); /* A-level title different color */
}

/* Form level containers */
.packages .o_level .form_1,
.packages .o_level .form_2,
.packages .o_level .form_3,
.packages .o_level .form_4,
.packages .A_level .a_level_subjects .form_v {
  display: flex;
  flex-direction: column; /* Or row if title is part of this block */
  /* justify-content: space-between; /* Not needed if just subjects list */
  margin-top: var(--padding-small); /* 10px */
  padding: var(--padding-large); /* 30px */
  width: 95%; /* Take most of the width */
  margin: var(--padding-medium) auto; /* Center it */
  border-radius: var(--border-radius-small); /* 5px */
  margin-bottom: var(--padding-medium); /* 20px */
  background-color: var(--light-gray-color); /* Add a slight background */
}
.packages .A_level .a_level_subjects .form_v {
  /* background: var(--light-gray-color); /* #f3f3f3 */ /* Already set above */
}

/* Subjects list container */
.packages .o_level .form_1 .subjects,
.packages .o_level .form_2 .subjects,
.packages .o_level .form_3 .subjects,
.packages .o_level .form_4 .subjects,
.packages .A_level .a_level_subjects .form_v { /* form_v is the subjects container for A-level */
  display: flex;
  justify-content: space-evenly; /* Or flex-start for left alignment */
  flex-wrap: wrap;
  /* width: 95%; /* Already on parent */
  padding: var(--padding-medium) 0; /* 20px 0 */
  cursor: pointer; /* On the container? Usually on individual items */
  gap: var(--padding-small); /* Add gap between subjects */
}

/* Individual subject item */
.packages .o_level .subjects .subject, /* Combined O-level subjects */
.packages .A_level .a_level_subjects .form_v .subject { /* A-level subjects */
  padding: var(--padding-small) var(--padding-medium); /* 10px 20px for wider buttons */
  font-size: var(--large-font-size);
  width: max-content; /* Fit content */
  color: var(--secondary-color);
  font-weight: 600;
  background: var(--white-color); /* whitesmoke */
  margin: 0; /* Removed margin, using gap on parent */
  border-radius: var(--border-radius-medium); /* 10px */
  border: 1px solid var(--primary-color);
  text-decoration: none; /* If it's a link */
  transition: background-color var(--transition-short) ease-in-out, color var(--transition-short) ease-in-out, border-color var(--transition-short) ease-in-out;
}
.packages .A_level .a_level_subjects .form_v .subject { /* Specific to A-level if different */
  color: var(--primary-color);
  border: 1px solid var(--secondary-color); /* Example of slight difference */
}

.packages .o_level .subjects .subject a,
.packages .A_level .a_level_subjects .form_v .subject a {
  text-decoration: none;
  color: inherit; /* Inherit color from parent .subject */
}

.packages .o_level .subjects .subject:hover,
.packages .A_level .a_level_subjects .form_v .subject:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
  border-color: var(--secondary-color);
}
.packages .A_level .a_level_subjects .form_v .subject:hover {
  background-color: var(--secondary-color);
  color: var(--white-color);
  border-color: var(--primary-color);
}

/* Collapsible Component Styles (e.g., for FAQ page) */
.collapsible {
  /* border: 1px solid var(--white-color); /* From all_pages.css, but white on white? */
  /* margin-bottom: var(--padding-small); Let's use gap on parent if needed */
  /* border-radius: var(--border-radius-small); */
  /* background-color: var(--primary-color); */ /* This was for .min_course_container */
}

.collapsible h2 { /* Assuming h2 is the clickable trigger along with .arrow */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--padding-medium);
  margin: 0; /* Reset default h2 margin */
  /* color: var(--white-color); /* From original .collapsible h2 */
  /* border-bottom: 1px solid var(--light-gray-color); /* Optional separator for header */
}

.collapsible .arrow {
  font-size: var(--large-font-size); /* Make arrow more visible */
  transition: transform var(--transition-short) ease-out;
  /* color: var(--white-color); /* From original .collapsible span */
}

.collapsible .arrow.collapsible-arrow-up {
  transform: rotate(180deg);
}

.collapsible .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-medium) ease-out;
  /* padding: var(--padding-medium); /* From original .content p, adjusted */
  /* color: var(--light-gray-color); /* From original .content p */
  /* background-color: darken(var(--primary-color), 5%); /* From original */
  /* border-top: 1px solid var(--white-color); /* From original */
  /* border-radius: 0 0 var(--border-radius-small) var(--border-radius-small); /* From original */
}
.collapsible .content.collapsible-content-active {
  /* max-height is set by JS to content.scrollHeight */
  /* Add padding when active if desired */
   padding: var(--padding-medium);
}

.collapsible .content p {
  padding: 0;
  margin: 0 0 var(--padding-small) 0; /* Space between paragraphs */
}
.collapsible .content p:last-child {
  margin-bottom: 0;
}


/* === ALL PAGES STYLES - MEDIA QUERIES === */
@media (max-width: 1024px) {
  /* About Page - Mobile */
  .about_main_container .about_wrapper {
    width: 95%;
    height: auto; /* fit-content */
    padding-bottom: var(--padding-large); /* Ensure space for positioned items */
  }
  .about_main_container .about_wrapper .about_content {
    flex-direction: column;
    align-items: center; /* Center items when stacked */
  }
  .about_main_container .about_wrapper .about_content .about_us,
  .about_main_container .about_wrapper .about_content .ed_proud {
    width: 95%;
    margin: var(--padding-medium) auto; /* Stack them with margin */
    border-radius: var(--border-radius-medium); /* 10px */
    text-align: justify;
    position: static; /* Remove absolute/relative positioning for stack */
    height: auto; /* Fit content */
    padding: var(--padding-medium);
  }
  .about_main_container .about_wrapper .about_content .about_us span,
  .about_main_container .about_wrapper .about_content .ed_proud span { /* Should be <p> */
    font-size: var(--base-font-size); /* 20px is too large for mobile body text */
    padding: var(--padding-small) 0;
  }
  .about_main_container .about_wrapper .about_content .about_us h1,
  .about_main_container .about_wrapper .about_content .ed_proud h1 {
    text-align: center;
    font-size: var(--h2-font-size); /* Smaller for mobile */
  }
   .about_main_container .about_wrapper .about_content .ed_proud ul {
    width: 100%; /* Full width for list */
  }
  .about_main_container .about_wrapper .about_content .ed_proud ul li {
    font-size: var(--base-font-size); /* Adjust font size */
  }


  /* Main About Us Section (Generic page sectioning) - Mobile */
  .main_about_us { /* This class name is very specific, could be more generic */
    width: 100%;
  }
  .main_about_us .min_about_us { /* Banner */
    background-position: center center; /* Ensure bg is centered */
    height: auto; /* Adjust height for mobile */
    min-height: 200px; /* Min height for banner */
    padding: var(--padding-medium) var(--padding-small);
  }
  .main_about_us .min_about_us h1 {
    font-size: var(--h2-font-size); /* 30px */
    position: static; /* Remove positioning */
    height: auto;
  }
  .main_about_us section { /* Content section */
    flex-direction: column;
    width: 100%;
    padding: var(--padding-medium) var(--padding-small);
  }
  .main_about_us section .left_section {
    margin: auto;
    width: 100%; /* Take full width */
  }
  .main_about_us section .left_section .section_title {
    background: var(--secondary-color); /* #8b0000 */
    color: var(--white-color);
  }
  .main_about_us section .left_section .section_title h1 {
    font-size: var(--h2-font-size); /* 30px */
  }
  .main_about_us section .left_section .links_inside_the_section {
    background-color: var(--secondary-color); /* #8b0000 */
  }
  .main_about_us section .left_section .links_inside_the_section .links {
    padding: var(--padding-medium);
  }
  .main_about_us section .left_section .links_inside_the_section .links a {
    color: var(--white-color);
    font-size: var(--large-font-size); /* Adjust for mobile */
  }
  .main_about_us section .left_section .links_inside_the_section .links a:hover {
    color: var(--light-gray-color); /* #8b0000 with low opacity or light gray */
    /* padding: var(--padding-small); /* Already has padding */
  }
  .main_about_us section .right_section {
    height: auto; /* 70vh is too much for mobile */
    min-height: 300px; /* Set a min height */
    background-position: center 10%; /* 50% 10% */
    width: 100%;
    margin: var(--padding-medium) auto 0 auto; /* Add top margin */
  }
  .main_about_us section .right_section ol li {
    font-size: var(--base-font-size); /* 16px */
  }
  .main_about_us section .right_section ol li i {
    font-size: var(--xlarge-font-size); /* x-large */
  }

  /* History Page - Mobile */
  .history_container {
    padding: var(--padding-medium) var(--padding-small); /* 10px */
  }
  .history_container .history_wrapper {
    width: 95%;
    margin: var(--padding-medium) auto; /* Adjust margin */
    padding: var(--padding-medium); /* 10px */
  }
  .history_container .history_wrapper h1 {
    font-size: var(--h1-font-size); /* 50px is too big, use h1 var or h2 var */
  }
   .history_container .history_wrapper span { /* <p> */
    font-size: var(--base-font-size);
    line-height: 1.7em; /* Adjust line height */
   }

  /* Admin Main Container (Banner) - Mobile */
  .admin_main_container {
    margin-bottom: var(--padding-medium); /* 50px */
  }
  .admin_main_container .main_container { /* Banner image */
    height: 70vh; /* Still quite tall for mobile */
    width: 95%;
    margin: auto;
    border-radius: var(--border-radius-medium); /* 10px */
  }
  .admin_main_container .main_container h1 {
    font-size: var(--h2-font-size); /* 30px */
  }

  /* Alumni Page - Mobile */
  .alumni_main_container .alumni_container { /* Banner */
    height: 50vh; /* 70vh */
  }
  .alumni_main_container .alumni_list .in_container {
    flex-direction: column;
    width: 100%;
    align-items: center; /* Center cards */
    gap: var(--padding-medium); /* Keep gap */
  }
  .alumni_main_container .alumni_list .in_container div { /* Alumni card */
    width: 90%; /* Make cards wider on mobile */
    max-width: 400px; /* Max card width */
    margin-bottom: var(--padding-large); /* 200px is too much, reduce significantly */
  }
  .alumni_main_container .alumni_list .in_container div img {
    width: 100%;
    height: 300px; /* Adjust height or use aspect ratio */
    border-radius: var(--border-radius-medium); /* 10px */
  }

  /* School Main Container (Banner) - Mobile */
  .school_main_container .school_container {
    height: 50vh; /* 70vh */
  }

  /* Contact Page - Mobile */
  .contact_wrapper .contact_container {
    flex-direction: column-reverse; /* Stack map above personnel */
    width: 100%;
    padding: 0 var(--padding-small);
  }
  .contact_wrapper .contact_container .contact_personell {
    /* display: flex; /* Already flex */
    width: 100%; /* Full width */
    padding: var(--padding-medium);
  }
  .contact_wrapper .contact_container .contact_personell .headmaster,
  .contact_wrapper .contact_container .contact_personell .academic,
  .contact_wrapper .contact_container .contact_personell .brother,
  .contact_wrapper .contact_container .contact_personell .Sister,
  .contact_wrapper .contact_container .contact_personell .Accountant,
  .contact_wrapper .contact_container .contact_personell .Secretary {
    width: 100%; /* Full width for each contact block */
    /* display: flex; /* Already flex */
    /* justify-content: center; /* Text align center instead if needed */
    align-items: center; /* Center content of each block */
    text-align: center; /* Center text */
  }
  .contact_wrapper .contact_container .contact_personell .headmaster span,
  .contact_wrapper .contact_container .contact_personell .academic span,
  .contact_wrapper .contact_container .contact_personell .brother span,
  .contact_wrapper .contact_container .contact_personell .Sister span,
  .contact_wrapper .contact_container .contact_personell .Accountant span,
  .contact_wrapper .contact_container .contact_personell .Secretary span {
    font-size: var(--base-font-size); /* Adjust font size */
  }

  .contact_wrapper .contact_container .direction { /* Map section */
    width: 90%;
    margin: var(--padding-medium) auto; /* Add margin */
    /* top: var(--padding-medium); /* 20px - remove if static */
  }
  .contact_wrapper .contact_container .direction h1 {
    font-size: var(--h2-font-size); /* Adjust */
    position: static; /* Make title static for simpler flow */
    border-radius: var(--border-radius-small);
    margin-bottom: var(--padding-small);
  }
  .contact_wrapper .contact_container .direction .map {
    margin-top: 0; /* Remove top margin if h1 is static */
    height: 300px; /* Adjust map height */
    border-radius: var(--border-radius-small);
  }

  /* School Life Page - Mobile */
  .school_life_container {
    width: 100%;
    padding: var(--padding-medium) var(--padding-small);
  }
  .school_life_container .school_life_wrapper {
    width: 100%;
  }
  .school_life_container .school_life_wrapper h1 {
    font-size: var(--h2-font-size); /* 30px */
    text-align: center;
    width: 100%;
    padding: var(--padding-medium); /* 10px */
  }
  .school_life_container .school_life_wrapper .inside_school_life {
    flex-direction: column; /* Stack images */
    width: 100%;
    align-items: center; /* Center images */
  }
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="pic"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="award"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="td"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="tk"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="fn"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="wdw"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="agr"] {
    width: 90%; /* Make images wider */
    max-width: 450px; /* Max width for images */
    height: 30vh; /* Adjust height */
    margin-top: var(--padding-medium); /* 20px - covered by gap on parent */
  }

  /* Gallery Page - Mobile */
  .gallery_container {
    padding: var(--padding-medium) var(--padding-small);
  }
  .gallery_container .here_2024_gallery .event_year .__current_year img {
    width: 45%; /* Two images per row */
    min-width: 0; /* Reset min-width */
  }
  .gallery_container .galler_pics .galery1,
  .gallery_container .galler_pics .galery2,
  .gallery_container .galler_pics .galery3 {
    width: 100%; /* Single column for masonry on mobile */
  }


  /* Packages/Subjects Page - Mobile */
  .packages .o_level .form_1,
  .packages .o_level .form_2,
  .packages .o_level .form_3,
  .packages .o_level .form_4,
  .packages .A_level .a_level_subjects .form_v {
    /* all: unset; /* Avoid this, reset specific properties */
    padding: var(--padding-medium);
    width: 100%; /* Full width */
  }
  .packages .o_level .form_1 .subjects,
  .packages .o_level .form_2 .subjects,
  .packages .o_level .form_3 .subjects,
  .packages .o_level .form_4 .subjects,
  .packages .A_level .a_level_subjects .form_v { /* This is the subjects container */
    width: 100%; /* 95% */
    padding: var(--padding-small) 0; /* 10px 0 */
    margin: auto;
    justify-content: center; /* Center subjects */
  }
  .packages .o_level .subjects .subject,
  .packages .A_level .a_level_subjects .form_v .subject {
    padding: var(--padding-small) var(--padding-medium); /* 10px */
    font-size: var(--base-font-size); /* Adjust font size */
    margin-top: var(--padding-small); /* Add some top margin if not using gap effectively */
  }
}

/* === MAIN PAGES STYLES === */
/* Index Page Specific Styles */
.index_main_container { /* Removed body tag for less specificity */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--padding-medium) 0; /* Add some overall padding */
}

/* Section containers for index page */
.index_main_container .level0_container,
.index_main_container .level0_container1,
.index_main_container .level0_container2,
.index_main_container .level0_container3,
.index_main_container .level0_container4 {
  width: 100%;
  display: flex; /* Common pattern, specific overrides below */
  flex-direction: column;
  margin-bottom: var(--padding-large); /* Space between sections */
  padding: 0 var(--padding-medium); /* Horizontal padding for sections */
}
.index_main_container .level0_container4 {
  margin-bottom: 0; /* No margin for the last container */
}


.index_main_container .level0_container {
  margin-top: var(--padding-medium); /* 20px */
}

.index_main_container .level0_container h1 {
  text-align: center;
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem); /* Responsive font size (80px original) */
  padding: var(--padding-medium); /* 20px */
  color: var(--primary-color);
  text-transform: uppercase;
}

.index_main_container .level0_container h2 { /* Subtitle for welcome */
  padding: var(--padding-medium); /* 20px */
  font-size: clamp(1.5rem, 3vw + 0.5rem, 1.875rem); /* Responsive (30px original) */
  color: var(--secondary-color);
  text-align: center; /* Center subtitle */
}

.index_main_container .level0_container .inside_level0 { /* Welcome message and image container */
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: space-evenly;
  align-items: center;
  padding: var(--padding-large) 0; /* 30px 0 */
  margin-top: var(--padding-large); /* 50px */
  gap: var(--padding-medium);
}

.index_main_container .level0_container .inside_level0 .welcome_message {
  width: auto; /* Let flexbox handle width */
  flex: 1 1 500px; /* Flex grow, shrink, basis */
  min-width: 300px; /* Min width */
  text-align: justify;
}

.index_main_container .level0_container .inside_level0 .welcome_message span {
  font-size: var(--xlarge-font-size); /* x-large */
  color: var(--text-color-primary);
  display: block; /* Ensure it takes full width if needed */
}

.index_main_container .level0_container .inside_level0 .gate_image {
  flex: 1 1 400px; /* Flex properties */
  display: flex; /* Center image if it's smaller than container */
  justify-content: center;
  align-items: center;
}
.index_main_container .level0_container .inside_level0 .gate_image img {
  width: 100%; /* Make image responsive */
  max-width: 550px; /* Original width */
  height: auto; /* Maintain aspect ratio */
  border-radius: var(--border-radius-medium); /* 10px */
  box-shadow: var(--box-shadow-light); /* Add some shadow */
}

/* "Why Us" Section */
.index_main_container .level0_container1 .us_us h1 { /* Section title */
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem); /* Responsive (80px original) */
  text-align: center;
  color: var(--primary-color);
  padding: var(--padding-medium); /* 20px */
  text-transform: uppercase;
  margin-bottom: var(--padding-medium);
}

.index_main_container .level0_container1 .why_edmund { /* Container for image cards */
  display: flex;
  justify-content: space-evenly; /* Or space-around */
  flex-wrap: wrap;
  gap: var(--padding-medium); /* Add gap between cards */
}

/* Common styles for "Why Us" cards */
.index_main_container .level0_container1 .why_edmund .Why_us1,
.index_main_container .level0_container1 .why_edmund .Why_us2,
.index_main_container .level0_container1 .why_edmund .Why_us3,
.index_main_container .level0_container1 .why_edmund .Why_us4 {
  display: flex; /* For overlay */
  height: 350px; /* Fixed height */
  color: var(--white-color);
  border-radius: var(--border-radius-large); /* 20px */
  background-size: cover;
  background-position: center; /* Ensure bg image is centered */
  cursor: pointer;
  overflow: hidden; /* Ensure overlay corners are rounded */
  position: relative; /* For overlay positioning */
  flex-grow: 1; /* Allow cards to grow */
}
/* Specific widths and background images */
/* Widths will be managed by flex-basis for responsiveness */
.index_main_container .level0_container1 .why_edmund .Why_us1 { background-image: url(../images/bg8.jpg); flex-basis: 58%; min-width: 300px; }
.index_main_container .level0_container1 .why_edmund .Why_us2 { background-image: url(../images/s3.JPG); flex-basis: 28%; min-width: 250px;}
.index_main_container .level0_container1 .why_edmund .Why_us3 { background-image: url(../images/ed_rice1.JPG); flex-basis: 43%; min-width: 280px;}
.index_main_container .level0_container1 .why_edmund .Why_us4 { background-image: url(../images/ed_1.jpg); flex-basis: 43%; min-width: 280px;}

/* Overlay for "Why Us" cards */
.index_main_container .level0_container1 .why_edmund .Why_us1 .overlay,
.index_main_container .level0_container1 .why_edmund .Why_us2 .overlay,
.index_main_container .level0_container1 .why_edmund .Why_us3 .overlay,
.index_main_container .level0_container1 .why_edmund .Why_us4 .overlay {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity var(--transition-medium) ease;
  background-color: var(--overlay-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: var(--border-radius-large); /* Match parent */
}

.index_main_container .level0_container1 .why_edmund .Why_us1 .overlay .text h2,
.index_main_container .level0_container1 .why_edmund .Why_us2 .overlay .text h2,
.index_main_container .level0_container1 .why_edmund .Why_us3 .overlay .text h2,
.index_main_container .level0_container1 .why_edmund .Why_us4 .overlay .text h2 {
  color: var(--white-color);
  padding: var(--padding-medium);
  text-transform: uppercase;
  font-size: var(--h2-font-size);
}

.index_main_container .level0_container1 .why_edmund .Why_us1:hover .overlay,
.index_main_container .level0_container1 .why_edmund .Why_us2:hover .overlay,
.index_main_container .level0_container1 .why_edmund .Why_us3:hover .overlay,
.index_main_container .level0_container1 .why_edmund .Why_us4:hover .overlay {
  opacity: 1;
}

/* Events/Updates Section */
.index_main_container .level0_container2 {
  margin-top: var(--padding-large);
}

.index_main_container .level0_container2 .__events h1 { /* Section Title */
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  text-align: center;
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}

.index_main_container .level0_container2 .__events h2 { /* Section Subtitle */
  font-size: clamp(1.8rem, 4vw + 0.8rem, 3.125rem);
  padding: var(--padding-small);
  color: var(--secondary-color);
  text-align: center;
  margin-bottom: var(--padding-medium);
}

.index_main_container .level0_container2 .__updates { /* News items container */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
  gap: var(--padding-medium);
}

.index_main_container .level0_container2 .__updates .__news { /* Individual news card */
  width: 30%;
  min-width: 300px;
  background: var(--black-color);
  height: 380px;
  position: relative;
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  box-shadow: var(--box-shadow-light);
  flex-grow: 1;
}

.index_main_container .level0_container2 .__updates .__news img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index_main_container .level0_container2 .__updates .__news .__event_detals {
  background: var(--primary-color);
  border-radius: 0 var(--border-radius-medium) 0 0;
  width: 70%; /* Increased width for better text fit */
  position: absolute;
  bottom: 0;
  right: 0;
  color: var(--white-color);
  padding: var(--padding-small);
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: var(--padding-small); /* 10px -> only bottom padding */
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .__head {
  width: auto; /* Adjust based on content */
  border-right: 2px solid rgba(255, 255, 255, 0.5); /* Thinner, less opaque border */
  padding-right: var(--padding-small); /* 10px */
  margin-right: var(--padding-small);
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .__head h1 { /* Event type e.g., "Event" */
  color: rgba(164, 30, 34, 0.7); /* var(--secondary-color) with more opacity */
  font-size: var(--base-font-size);
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .__head h2 { /* Event title */
  color: rgba(255, 255, 255, 0.9);
  padding: 2px 0;
  font-size: var(--large-font-size);
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .date_location {
  width: auto; /* Adjust based on content */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center align items */
  padding-left: var(--padding-small);
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .date_location i {
  color: var(--light-gray-color);
  font-size: var(--base-font-size);
  margin-bottom: calc(var(--spacing-unit)/2);
}
.index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .date_location i:last-child {
  margin-bottom: 0;
}


.index_main_container .level0_container2 .__updates .__news .__event_detals .__content {
  padding: var(--padding-small) 0; /* 10px 0 */
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__content span { /* Event description */
  text-align: justify;
  color: var(--light-gray-color);
  padding: var(--padding-small) 0;
  word-spacing: 1.5px;
  font-size: var(--base-font-size);
  margin-bottom: var(--padding-small);
  display: -webkit-box; /* For multi-line ellipsis */
  -webkit-line-clamp: 3; /* Show 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index_main_container .level0_container2 .__updates .__news .__event_detals .__content a { /* Read more button */
  background: var(--secondary-color);
  color: var(--white-color);
  padding: var(--padding-small);
  width: 60%; /* Adjust width */
  margin: var(--padding-small) auto 0 auto; /* auto horizontal margin */
  text-align: center;
  text-decoration: none;
  border-radius: var(--border-radius-small);
  transition: background-color var(--transition-short);
  display: block; /* Make it block to apply margin auto */
}
.index_main_container .level0_container2 .__updates .__news .__event_detals .__content a:hover {
  background: darken(var(--secondary-color), 10%);
}

/* Community/Testimonials Section */
.index_main_container .level0_container3 .__community h1 { /* Section title */
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  color: var(--primary-color);
  text-align: center;
  margin-bottom: var(--spacing-unit);
}

.index_main_container .level0_container3 .__community h2 { /* Section subtitle */
  text-align: center;
  font-size: clamp(1.8rem, 4vw + 0.8rem, 3.125rem);
  color: var(--secondary-color);
  margin-bottom: var(--padding-medium);
}

.index_main_container .level0_container3 .communities_parents { /* Testimonial cards container */
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: var(--padding-medium) 0;
  width: 100%;
  gap: var(--padding-medium);
}

.index_main_container .level0_container3 .communities_parents .community1 { /* Testimonial card */
  background: var(--light-gray-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  min-width: 280px;
  padding: var(--padding-medium);
  border-radius: var(--border-radius-large);
  text-align: center;
  box-shadow: var(--box-shadow-light);
  flex-grow: 1;
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_image {
  margin-bottom: var(--padding-medium);
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_image img {
  width: 150px;
  height: 150px;
  opacity: 0.9;
  border-radius: var(--border-radius-circle);
  transition: opacity var(--transition-long);
  object-fit: cover;
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_image img:hover {
  opacity: 1;
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_info_text {
  text-align: justify;
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_info_text h3 { /* Name */
  color: var(--primary-color);
  text-align: center;
  padding: var(--padding-small) 0;
  font-size: var(--xlarge-font-size);
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_info_text h4 { /* Role/Title */
  color: var(--secondary-color);
  text-align: center;
  padding: var(--padding-small) 0;
  font-size: var(--large-font-size);
  margin-bottom: var(--padding-small);
}

.index_main_container .level0_container3 .communities_parents .community1 .parent_info_text span { /* Testimonial text */
  font-size: var(--base-font-size);
  color: var(--text-color-primary);
  display: block;
}

.index_main_container .level0_container3 .communities_parents .community1 .circle { /* Decorative circles? */
  display: flex;
  margin-top: var(--padding-medium);
}

.index_main_container .level0_container3 .communities_parents .community1 .circle i { /* Assuming these are icons for circles */
  color: var(--primary-color);
  font-size: var(--base-font-size);
  margin: 0 calc(var(--spacing-unit)/2);
  padding: var(--padding-small);
  opacity: 0.4;
}

/* Welcome to School Section (Final CTA or info block) */
.index_main_container .level0_container4 {
  align-items: center;
  margin-bottom: var(--padding-large);
}

.index_main_container .level0_container4 .welcome_to_school { /* Inner container for this section */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 93%;
  padding: var(--padding-large);
  margin: auto;
  background: var(--light-gray-color);
  border-radius: var(--border-radius-medium);
  gap: var(--padding-medium);
}

.index_main_container .level0_container4 .welcome_to_school .left_level { /* Text content */
  padding: 0;
  flex: 1 1 60%;
  min-width: 300px;
}

.index_main_container .level0_container4 .welcome_to_school .left_level h2 { /* Title */
  padding: var(--padding-small) 0;
  color: var(--secondary-color);
  font-size: clamp(1.8rem, 4vw + 0.8rem, 3.125rem);
}

.index_main_container .level0_container4 .welcome_to_school .left_level p {
  text-align: justify;
  padding: var(--padding-small) 0;
  word-spacing: 0.5em;
  font-size: var(--large-font-size);
  color: var(--text-color-primary);
}

.index_main_container .level0_container4 .welcome_to_school .right_level { /* Button container */
  padding: var(--padding-small) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 20%;
  min-width: 200px;
}

.index_main_container .level0_container4 .welcome_to_school .right_level a { /* Button */
  background: var(--primary-color);
  color: var(--white-color);
  padding: var(--padding-medium) var(--padding-large);
  text-decoration: none;
  border-radius: var(--border-radius-small);
  font-size: var(--large-font-size);
  text-align: center;
  transition: background-color var(--transition-short) ease-in-out;
}
.index_main_container .level0_container4 .welcome_to_school .right_level a:hover {
  background: darken(var(--primary-color), 10%);
}


/* === END OF MAIN PAGES STYLES (Desktop) === */

/* === ALL PAGES STYLES - MEDIA QUERIES (includes MAIN PAGES queries now) === */
@media (max-width: 1024px) {
  /* About Page - Mobile ... (existing styles from all_pages.css) */
  .about_main_container .about_wrapper {
    width: 95%;
    height: auto; /* fit-content */
    padding-bottom: var(--padding-large); /* Ensure space for positioned items */
  }
  .about_main_container .about_wrapper .about_content {
    flex-direction: column;
    align-items: center; /* Center items when stacked */
  }
  .about_main_container .about_wrapper .about_content .about_us,
  .about_main_container .about_wrapper .about_content .ed_proud {
    width: 95%;
    margin: var(--padding-medium) auto; /* Stack them with margin */
    border-radius: var(--border-radius-medium); /* 10px */
    text-align: justify;
    position: static; /* Remove absolute/relative positioning for stack */
    height: auto; /* Fit content */
    padding: var(--padding-medium);
  }
  .about_main_container .about_wrapper .about_content .about_us span,
  .about_main_container .about_wrapper .about_content .ed_proud span { /* Should be <p> */
    font-size: var(--base-font-size); /* 20px is too large for mobile body text */
    padding: var(--padding-small) 0;
  }
  .about_main_container .about_wrapper .about_content .about_us h1,
  .about_main_container .about_wrapper .about_content .ed_proud h1 {
    text-align: center;
    font-size: var(--h2-font-size); /* Smaller for mobile */
  }
   .about_main_container .about_wrapper .about_content .ed_proud ul {
    width: 100%; /* Full width for list */
  }
  .about_main_container .about_wrapper .about_content .ed_proud ul li {
    font-size: var(--base-font-size); /* Adjust font size */
  }


  /* Main About Us Section (Generic page sectioning) - Mobile */
  .main_about_us {
    width: 100%;
  }
  .main_about_us .min_about_us {
    background-position: center center;
    height: auto;
    min-height: 200px;
    padding: var(--padding-medium) var(--padding-small);
  }
  .main_about_us .min_about_us h1 {
    font-size: var(--h2-font-size);
    position: static;
    height: auto;
  }
  .main_about_us section {
    flex-direction: column;
    width: 100%;
    padding: var(--padding-medium) var(--padding-small);
  }
  .main_about_us section .left_section {
    margin: auto;
    width: 100%;
  }
  .main_about_us section .left_section .section_title {
    background: var(--secondary-color);
    color: var(--white-color);
  }
  .main_about_us section .left_section .section_title h1 {
    font-size: var(--h2-font-size);
  }
  .main_about_us section .left_section .links_inside_the_section {
    background-color: var(--secondary-color);
  }
  .main_about_us section .left_section .links_inside_the_section .links {
    padding: var(--padding-medium);
  }
  .main_about_us section .left_section .links_inside_the_section .links a {
    color: var(--white-color);
    font-size: var(--large-font-size);
  }
  .main_about_us section .left_section .links_inside_the_section .links a:hover {
    color: var(--light-gray-color);
  }
  .main_about_us section .right_section {
    height: auto;
    min-height: 300px;
    background-position: center 10%;
    width: 100%;
    margin: var(--padding-medium) auto 0 auto;
  }
  .main_about_us section .right_section ol li {
    font-size: var(--base-font-size);
  }
  .main_about_us section .right_section ol li i {
    font-size: var(--xlarge-font-size);
  }

  /* History Page - Mobile */
  .history_container {
    padding: var(--padding-medium) var(--padding-small);
  }
  .history_container .history_wrapper {
    width: 95%;
    margin: var(--padding-medium) auto;
    padding: var(--padding-medium);
  }
  .history_container .history_wrapper h1 {
    font-size: var(--h1-font-size);
  }
   .history_container .history_wrapper span {
    font-size: var(--base-font-size);
    line-height: 1.7em;
   }

  /* Admin Main Container (Banner) - Mobile */
  .admin_main_container {
    margin-bottom: var(--padding-medium);
  }
  .admin_main_container .main_container {
    height: 70vh;
    width: 95%;
    margin: auto;
    border-radius: var(--border-radius-medium);
  }
  .admin_main_container .main_container h1 {
    font-size: var(--h2-font-size);
  }

  /* Alumni Page - Mobile */
  .alumni_main_container .alumni_container {
    height: 50vh;
  }
  .alumni_main_container .alumni_list .in_container {
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: var(--padding-medium);
  }
  .alumni_main_container .alumni_list .in_container div {
    width: 90%;
    max-width: 400px;
    margin-bottom: var(--padding-large);
  }
  .alumni_main_container .alumni_list .in_container div img {
    width: 100%;
    height: 300px;
    border-radius: var(--border-radius-medium);
  }

  /* School Main Container (Banner) - Mobile */
  .school_main_container .school_container {
    height: 50vh;
  }

  /* Contact Page - Mobile */
  .contact_wrapper .contact_container {
    flex-direction: column-reverse;
    width: 100%;
    padding: 0 var(--padding-small);
  }
  .contact_wrapper .contact_container .contact_personell {
    width: 100%;
    padding: var(--padding-medium);
  }
  .contact_wrapper .contact_container .contact_personell .headmaster,
  .contact_wrapper .contact_container .contact_personell .academic,
  .contact_wrapper .contact_container .contact_personell .brother,
  .contact_wrapper .contact_container .contact_personell .Sister,
  .contact_wrapper .contact_container .contact_personell .Accountant,
  .contact_wrapper .contact_container .contact_personell .Secretary {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .contact_wrapper .contact_container .contact_personell .headmaster span,
  .contact_wrapper .contact_container .contact_personell .academic span,
  .contact_wrapper .contact_container .contact_personell .brother span,
  .contact_wrapper .contact_container .contact_personell .Sister span,
  .contact_wrapper .contact_container .contact_personell .Accountant span,
  .contact_wrapper .contact_container .contact_personell .Secretary span {
    font-size: var(--base-font-size);
  }

  .contact_wrapper .contact_container .direction {
    width: 90%;
    margin: var(--padding-medium) auto;
  }
  .contact_wrapper .contact_container .direction h1 {
    font-size: var(--h2-font-size);
    position: static;
    border-radius: var(--border-radius-small);
    margin-bottom: var(--padding-small);
  }
  .contact_wrapper .contact_container .direction .map {
    margin-top: 0;
    height: 300px;
    border-radius: var(--border-radius-small);
  }

  /* School Life Page - Mobile */
  .school_life_container {
    width: 100%;
    padding: var(--padding-medium) var(--padding-small);
  }
  .school_life_container .school_life_wrapper {
    width: 100%;
  }
  .school_life_container .school_life_wrapper h1 {
    font-size: var(--h2-font-size);
    text-align: center;
    width: 100%;
    padding: var(--padding-medium);
  }
  .school_life_container .school_life_wrapper .inside_school_life {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="pic"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="award"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="td"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="tk"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="fn"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="wdw"],
  .school_life_container .school_life_wrapper .inside_school_life > div[class^="agr"] {
    width: 90%;
    max-width: 450px;
    height: 30vh;
  }

  /* Gallery Page - Mobile */
  .gallery_container {
    padding: var(--padding-medium) var(--padding-small);
  }
  .gallery_container .here_2024_gallery .event_year .__current_year img {
    width: 45%;
    min-width: 0;
  }
  .gallery_container .galler_pics .galery1,
  .gallery_container .galler_pics .galery2,
  .gallery_container .galler_pics .galery3 {
    width: 100%;
  }


  /* Packages/Subjects Page - Mobile */
  .packages .o_level .form_1,
  .packages .o_level .form_2,
  .packages .o_level .form_3,
  .packages .o_level .form_4,
  .packages .A_level .a_level_subjects .form_v {
    padding: var(--padding-medium);
    width: 100%;
  }
  .packages .o_level .form_1 .subjects,
  .packages .o_level .form_2 .subjects,
  .packages .o_level .form_3 .subjects,
  .packages .o_level .form_4 .subjects,
  .packages .A_level .a_level_subjects .form_v {
    width: 100%;
    padding: var(--padding-small) 0;
    margin: auto;
    justify-content: center;
  }
  .packages .o_level .subjects .subject,
  .packages .A_level .a_level_subjects .form_v .subject {
    padding: var(--padding-small) var(--padding-medium);
    font-size: var(--base-font-size);
    margin-top: var(--padding-small);
  }

  /* Index Page Specific Mobile Styles from main_pages.css */
  .index_main_container .level0_container h1 {
    font-size: var(--xxlarge-font-size); /* xx-large */
  }
  .index_main_container .level0_container h2 {
    font-size: var(--xlarge-font-size); /* x-large */
    width: 100%;
    text-align: center;
  }
  .index_main_container .level0_container .inside_level0 {
    flex-direction: column;
    /* justify-content: space-evenly; /* Already default for flex-column */
    padding: var(--padding-medium) var(--padding-small); /* Adjust padding */
  }
  .index_main_container .level0_container .inside_level0 .welcome_message {
    width: 100%;
    text-align: justify; /* Or center for mobile */
  }
  .index_main_container .level0_container .inside_level0 .welcome_message span {
    font-size: var(--xlarge-font-size); /* x-large */
    text-align: center; /* Center span text */
    padding: calc(var(--spacing-unit) * 0.3); /* 3px */
    width: 100%;
    display: block; /* Ensure it takes full width */
  }
  .index_main_container .level0_container .inside_level0 .gate_image {
    margin-top: var(--padding-large); /* 50px */
    /* z-index: -9; /* Avoid */
  }
  .index_main_container .level0_container .inside_level0 .gate_image img {
    width: 100%;
    height: auto; /* 400px -> auto for responsiveness */
    position: static; /* unset */
    margin: auto;
  }

  .index_main_container .level0_container1 .us_us h1 {
    font-size: var(--h1-font-size); /* 50px -> use var */
  }
  .index_main_container .level0_container1 .why_edmund {
    flex-direction: column; /* Stack cards */
  }
  .index_main_container .level0_container1 .why_edmund .Why_us1,
  .index_main_container .level0_container1 .why_edmund .Why_us2,
  .index_main_container .level0_container1 .why_edmund .Why_us3,
  .index_main_container .level0_container1 .why_edmund .Why_us4 {
    width: 90%; /* Make cards take more width */
    margin: var(--padding-small) auto; /* Adjust margin, use gap if parent has it */
    /* margin-top: var(--padding-medium); /* 20px */
    height: 250px; /* Adjust height for mobile */
    flex-basis: auto; /* Reset flex-basis */
  }
  .index_main_container .level0_container1 .why_edmund .Why_us1 .overlay .text h2,
  .index_main_container .level0_container1 .why_edmund .Why_us2 .overlay .text h2,
  .index_main_container .level0_container1 .why_edmund .Why_us3 .overlay .text h2,
  .index_main_container .level0_container1 .why_edmund .Why_us4 .overlay .text h2 {
    color: var(--secondary-color); /* Original was #A41E22 */
    font-size: var(--large-font-size); /* Adjust size */
  }
  /* :hover for overlay already defined, should work */

  .index_main_container .level0_container2 .__events h1 {
    font-size: var(--h1-font-size); /* 50px -> use var */
  }
  .index_main_container .level0_container2 .__events h2 {
    font-size: var(--h2-font-size); /* 30px -> use var */
  }
  .index_main_container .level0_container2 .__updates {
    flex-direction: column; /* Stack news items */
  }
  .index_main_container .level0_container2 .__updates .__news {
    width: 90%; /* Wider news items */
    margin: var(--padding-medium) auto; /* Adjust margin */
    height: auto; /* Adjust height based on content */
    min-height: 300px; /* Set a min-height */
  }
   .index_main_container .level0_container2 .__updates .__news .__event_detals {
    width: 100%; /* Full width details box */
    position: static; /* Or relative if preferred, but static is simpler */
    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
    padding: var(--padding-medium);
  }
  .index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date {
    flex-direction: column; /* Stack head and date */
    align-items: center;
    text-align: center;
  }
  .index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .__head {
    border-right: none; /* Remove border */
    border-bottom: 2px solid rgba(255,255,255,0.5); /* Add bottom border */
    width: 100%;
    padding-bottom: var(--padding-small);
    margin-bottom: var(--padding-small);
    text-align: center;
  }
   .index_main_container .level0_container2 .__updates .__news .__event_detals .__head_date .date_location {
    width: 100%;
    align-items: center;
    text-align: center;
   }


  .index_main_container .level0_container3 .__community h1 {
    font-size: var(--h1-font-size); /* 40px -> use var */
  }
  .index_main_container .level0_container3 .__community h2 {
    font-size: var(--h2-font-size); /* 40px -> use var */
  }
  .index_main_container .level0_container3 .communities_parents {
    flex-direction: column; /* Stack testimonials */
  }
  .index_main_container .level0_container3 .communities_parents .community1 {
    width: 100%; /* Full width testimonial */
    margin-top: var(--padding-medium); /* 20px */
    max-width: 500px; /* Add a max-width */
    margin-left: auto;
    margin-right: auto;
  }
  .index_main_container .level0_container3 .communities_parents .community1 .parent_image img {
    width: 100px;
    height: 100px;
  }
  .index_main_container .level0_container3 .communities_parents .community1 .circle i {
    /* text-align: center; /* Already centered by parent */
    display: none; /* Hide decorative circles on mobile */
  }

  .index_main_container .level0_container4 {
    flex-direction: column; /* Stack items */
    padding: 0 var(--padding-small); /* Adjust padding */
  }
  .index_main_container .level0_container4 .welcome_to_school {
    /* all: unset; /* Avoid */
    flex-direction: column;
    width: 100%; /* 90% */
    background: var(--light-gray-color);
    border-radius: var(--border-radius-medium);
    padding: var(--padding-medium); /* Adjust padding */
  }
  .index_main_container .level0_container4 .welcome_to_school .left_level {
    padding: var(--padding-small); /* 10px */
    margin: auto;
    width: 100%; /* Ensure it takes full width */
    text-align: center; /* Center text */
  }
  .index_main_container .level0_container4 .welcome_to_school .left_level h2 {
    padding: var(--padding-small) 0; /* 10px 0 */
    font-size: var(--xxlarge-font-size); /* xx-large */
  }
  .index_main_container .level0_container4 .welcome_to_school .left_level p {
    text-align: justify; /* Or center */
    font-size: var(--large-font-size); /* 20px is a bit large, use var */
    width: 100%;
  }
  .index_main_container .level0_container4 .welcome_to_school .right_level {
    margin: var(--padding-medium) auto 0 auto; /* Adjust margin */
    width: 100%; /* Button container takes full width */
    justify-content: center; /* Center button within */
  }
  .index_main_container .level0_container4 .welcome_to_school .right_level a {
    padding: var(--padding-medium); /* 10px -> var(--padding-medium) */
    width: 80%; /* inherit -> make button wider */
    max-width: 300px; /* Max button width */
    font-weight: 600;
    border-radius: var(--border-radius-small); /* 3px */
    font-size: var(--large-font-size); /* medium */
  }
  .index_main_container .level0_container4 .welcome_to_school .right_level a:hover {
    color: var(--secondary-color); /* Original hover color */
    background: var(--primary-color); /* Keep background same on hover for this one or slightly darken */
  }
}