/* ===== CSS RESET & BASE STYLES ===== */
/* Reset removes browser default margins/paddings for consistent styling */
* {
  margin: 0;             /* Remove all default margins */
  padding: 0;            /* Remove all default paddings */
  box-sizing: border-box; /* Include padding/border in element's total width/height */
}

/* Base body styling for the entire page */
body {
  font-family: Times New Roman, Times, serif; /* Primary font for text */
  line-height: 1.6;      /* Space between lines of text (improves readability) */
  color: #111;           /* Main text color (dark gray) */
  background-color: #d1d1d1; /* Page background color (light gray) */
}

/* ===== SITE HEADER SECTION ===== */
/* Main header container at top of page */
.site-header {
  display: flex;          /* Use flexbox for flexible layout */
  flex-direction: column; /* Stack children vertically (logo, then navigation) */
  align-items: center;    /* Center items horizontally */
  background-color: #21406A; /* Dark blue header background */
  color: #ffffff;         /* White text color in header */
  padding: 15px 25px;     /* Internal spacing: 15px top/bottom, 25px left/right */
}

/* Logo area containing text spans and image */
.logo {
  display: flex;          /* Flexbox for horizontal alignment of logo parts */
  align-items: center;    /* Vertically center all logo elements */
  gap: 12px;              /* Space between logo text spans and image */
}

/* Logo image styling */
.logo img {
  height: 300px;          /* Fixed height for logo image */
  margin: 0 12px 20px 12px; /* Margins: 0 top, 12px left/right, 20px bottom */
}

/* Text spans on either side of logo image */
.logo span {
  font-size: 22px;        /* Large text size for prominence */
  font-weight: bold;      /* Bold text for emphasis */
  white-space: nowrap;    /* Prevent text from wrapping to new lines */
}

/* Left side text aligned to the right */
.logo-left {
  text-align: right;      /* Align text to the right */
}

/* Main navigation menu styling */
.main-nav a {
  color: #ffffff;         /* White link color */
  text-decoration: none;  /* Remove underline from links */
  margin-left: 18px;      /* Space between navigation links */
  font-size: 24px;        /* Large font size for readability */
  font-weight: bold;      /* Bold text for emphasis */
}

/* Hover effect for navigation links */
.main-nav a:hover {
  text-decoration: underline; /* Underline links on hover for interactivity */
}

/* ===== MAIN CONTENT AREA ===== */
/* Generic content section container */
.content-section {
  max-width: 1200px;      /* Maximum width to prevent overly wide content on large screens */
  margin: 0 auto;         /* Center the section horizontally */
  padding: 10px 10px;     /* Internal spacing: 40px top/bottom, 20px left/right */
  margin-bottom: 40px;     /* Space after each section */
  margin-top: 40px;     /* Space after each section */
}

/* Video element styling */
.content-section video {
  display: block;         /* Treat video as block element (not inline) */
  margin: 0 auto;         /* Center video horizontally within container */
}

/* ===== SPLIT LAYOUT SECTION (Map/Boxes on left, Info rows on right) ===== */
/* Container for two-column layout */
.split-section {
  max-width: 1200px;      /* Maximum width matching other content sections */
  margin: 60px auto;      /* Vertical margin: 60px top/bottom, auto centers horizontally */
  display: flex;          /* Flexbox for two-column layout */
  gap: 40px;              /* Space between left and right columns */
}

/* ===== LEFT COLUMN (Map and orange info box) ===== */
.left-column {
  flex: 1;                /* Take up 1 fraction of available space (half of container) */
  display: flex;          /* Flexbox for vertical stacking */
  flex-direction: column; /* Stack children vertically */
}

/* Google Maps iframe styling */
.map-box {
  width: 100%;              /* Ensure container is full width */
  overflow: hidden;         /* Prevent overflow issues */
}

.map-box iframe {
  width: 100%;            /* Full width of parent container */
  height: 260px;          /* Fixed height for map */
  border: 0;              /* Remove iframe border */
  display: block;         /* Remove inline spacing */
}

/* Orange info box below map */
.orange-box {
  background: #f36c21;    /* Orange background color */
  color: white;           /* White text color */
  padding: 25px;          /* Internal spacing on all sides */
  margin-top: 20px;       /* Space between map and this box */
  text-align: center;     /* Center text horizontally */
}

.orange-box p {
  font-size: 20px;        /* Increase font size for paragraph text */
  font-weight: bold;      /* Bold text for emphasis */
}

/* ===== RIGHT COLUMN (Info rows with numbers) ===== */
.right-column {
  flex: 1;                /* Take up 1 fraction of available space (half of container) */
}

/* Header at top of right column */
.right-header {
  background: #1f3f66;    /* Dark blue background */
  color: white;           /* White text */
  padding: 20px;          /* Internal spacing */
  text-align: center;     /* Center text horizontally */
  font-size: 24px;        /* Increase font size for paragraph text */
  font-weight: bold;      /* Bold text for emphasis */
}

/* Individual info row (numbered items) */
.info-row {
  display: flex;          /* Flexbox for horizontal layout (number + text) */
  align-items: center;    /* Vertically center number and text */
  color: white;           /* White text color */
  height: 120px;          /* Fixed height for consistency */
}

/* Number styling in info rows */
.info-row .num {
  width: 80px;            /* Fixed width for number column */
  font-size: 60px;        /* Very large font size for emphasis */
  font-weight: bold;      /* Bold numbers */
  text-align: center;     /* Center numbers horizontally */
  opacity: 0.8;           /* Slight transparency for subtle effect */
}

/* Text styling in info rows */
.info-row .text {
  padding: 25px;          /* Internal spacing around text */
  font-size: 24px;        /* Large font size for readability */
  flex: 1;                /* Take up remaining space in row */
}

/* Color classes for different info rows */
.blue { background: #b8baf0; }   /* Light blue background for row 01 */
.red { background: #e31b23; }    /* Red background for row 02 */
.green { background: #2db14a; }  /* Green background for row 03 */

/* ===== IMAGE BUTTONS SECTION (Language flags) ===== */
/* Container for flag/image buttons */
.image-buttons {
  display: flex;          /* Flexbox for horizontal button layout */
  justify-content: center;/* Center buttons horizontally */
  flex-wrap: wrap;        /* Allow buttons to wrap to new line on small screens */
  gap: 20px;              /* Space between buttons */
}

/* Individual image button (flag + text overlay) */
.image-button {
  position: relative;     /* Enables absolute positioning for child elements */
  display: inline-block;  /* Treat as block but allow inline flow */
  width: 250px;           /* Fixed width for buttons */
  height: 200px;          /* Fixed height for buttons */
  border: 4px solid #21406A; /* Blue border matching header */
  border-radius: 8px;     /* Rounded corners */
  overflow: hidden;       /* Hide anything that overflows (like image/text) */
  text-decoration: none;  /* Remove underline from link */
  transition: transform 0.3s, box-shadow 0.3s; /* Smooth hover animations */
}

/* Image inside button (flag images) */
.image-button img {
  width: 250px;           /* Match container width */
  height: 200px;          /* Match container height */
  object-fit: cover;      /* Crop image to fill container while maintaining aspect ratio */
}

/* Text overlay on image buttons */
.button-text {
  position: absolute;     /* Position relative to parent .image-button */
  bottom: 0;              /* Stick to bottom of button */
  width: 100%;            /* Full width of button */
  text-align: center;     /* Center text horizontally */
  background: rgba(33, 64, 106, 0.8); /* Semi-transparent blue overlay (80% opacity) */
  color: white;           /* White text on overlay */
  padding: 8px 0;         /* Vertical padding: 8px top/bottom, 0 left/right */
  font-weight: bold;      /* Bold text for emphasis */
  font-size: 24px;        /* Large font size */
}

/* Hover effect for image buttons */
.image-button:hover {
  transform: scale(1.05); /* Slightly enlarge button on hover (5% larger) */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Add shadow for depth effect */
}

/* ===== INFO BANNER (Three-part banner with floating middle) ===== */
/* Main banner container */
.info-banner {
  position: relative;     /* Enables absolute positioning for child elements */
  display: flex;          /* Flexbox for three-column layout */
  max-width: 1100px;      /* Maximum width */
  margin-bottom: 50px;    /* Space below banner */
  min-height: 220px;      /* Minimum height for consistent appearance */
  color: white;           /* White text color */
  font-family: Arial, Helvetica, sans-serif; /* Different font for contrast */
  font-size: 20px;        /* Large font size */
}

/* Left section of banner (blue background) */
.banner-left {
  flex: 1;                /* Take up 1 fraction of available space */
  background-color: #1f3f66; /* Dark blue matching header */
  padding: 30px;          /* Internal spacing */
  display: flex;          /* Flexbox for centering content */
  align-items: center;    /* Vertically center content */
  justify-content: center;/* Horizontally center content */
  text-align: center;     /* Center text alignment */
}

/* Right section of banner (orange background) */
.banner-right {
  flex: 1;                /* Take up 1 fraction of available space */
  background-color: #f36c21; /* Orange matching other elements */
  padding: 30px;          /* Internal spacing */
  display: flex;          /* Flexbox for centering content */
  align-items: center;    /* Vertically center content */
  justify-content: center;/* Horizontally center content */
  text-align: center;     /* Center text alignment */
}

/* Middle floating box (centered over left/right sections) */
.banner-middle {
  position: absolute;     /* Remove from normal flow, position relative to banner */
  top: 50%;               /* Position 50% from top */
  left: 50%;              /* Position 50% from left */
  transform: translate(-50%, -50%); /* Center perfectly using negative margins */
  background-color: #3cc1c1; /* Teal/cyan background */
  color: #c40000;         /* Dark red text color */
  padding: 25px 30px;     /* Internal spacing: 25px top/bottom, 30px left/right */
  border-radius: 20px;    /* Very rounded corners */
  font-weight: bold;      /* Bold text for emphasis */
  text-align: center;     /* Center text horizontally */
  z-index: 2;             /* Ensure this appears above other elements */
}

/* Decorative ribbon in top-right corner */
.banner-ribbon {
  position: absolute;     /* Remove from normal flow */
  top: 0;                 /* Position at top */
  right: 30px;            /* 30px from right edge */
  width: 30px;            /* Narrow width */
  height: 50px;           /* Tall height */
  background-color: #9ef0c3; /* Light green color */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); /* Creates ribbon shape */
}

/* ===== SITE FOOTER ===== */
/* Main footer container */
.site-footer {
  background-color: #21406A; /* Dark blue matching header */
  color: #ffffff;         /* White text */
  text-align: center;     /* Center all text */
  padding: 20px;          /* Internal spacing */
  font-size: 20px;        /* Large font size */
}

/* Container for footer content (logo/info on left, form on right) */
.footer-content {
  display: flex;          /* Flexbox for two-column layout */
  justify-content: center;/* Center columns horizontally */
  gap: 40px;              /* Space between columns */
  max-width: 1200px;      /* Maximum width matching other sections */
  margin: 0 auto 20px auto; /* Center horizontally, 20px margin below */
  flex-wrap: wrap;        /* Allow columns to stack on small screens */
}

/* Left side of footer (logo and contact info) */
.footer-info {
  text-align: left;       /* Left-align text (overrides footer's center alignment) */
  max-width: 400px;       /* Maximum width for this section */
}

/* Logo in footer */
.footer-logo {
  width: 180px;           /* Smaller than header logo */
  margin: 30px 0 15px 0;  /* Margins: 30px top, 0 left/right, 15px bottom */
}

/* Address/contact information */
.footer-address {
  margin: 30px 0 15px 0;  /* Margins: 30px top, 0 left/right, 15px bottom */
  line-height: 1.5;       /* Increased line spacing for readability */
}

/* Container for icon buttons (phone, Facebook) */
.footer-buttons {
  display: flex;          /* Flexbox for horizontal layout */
  gap: 10px;              /* Space between icons */
}

/* Individual icon button styling */
.footer-icon {
  display: inline-block;  /* Treat as block but allow inline flow */
  width: 28px;            /* Fixed width for icons */
  height: 28px;           /* Fixed height for icons */
  overflow: hidden;       /* Hide overflow */
  border-radius: 4px;     /* Slightly rounded corners */
}

/* Images inside icon buttons */
.footer-icon img {
  width: 100%;            /* Fill container width */
  height: 100%;           /* Fill container height */
  object-fit: contain;    /* Show entire image without cropping */
}

/* Right side of footer (contact form) */
.footer-contact {
  max-width: 500px;       /* Maximum width for form */
  text-align: center;     /* Center form elements */
}

/* Form heading */
.footer-contact h3 {
  margin-bottom: 15px;    /* Space below heading */
  color: #ffffff;         /* White text */
  font-size: 20px;        /* Large font size */
}

/* Form input fields (text, email, phone) and textarea */
.contact-form input,
.contact-form textarea {
  width: 100%;            /* Full width of parent container */
  padding: 10px;          /* Internal spacing */
  margin-bottom: 10px;    /* Space between form fields */
  border: none;           /* Remove default borders */
  border-radius: 4px;     /* Slightly rounded corners */
  font-size: 16px;        /* Standard font size */
}

/* Focus state for form fields */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid #ffffff; /* White outline when field is focused */
}

/* Form submit button */
.contact-form button {
  background-color: #ffffff; /* White background */
  color: #21406A;         /* Dark blue text (matching header/footer) */
  padding: 10px 20px;     /* Internal spacing: 10px top/bottom, 20px left/right */
  border: none;           /* Remove default button border */
  border-radius: 4px;     /* Slightly rounded corners */
  font-weight: bold;      /* Bold text */
  cursor: pointer;        /* Show pointer cursor on hover (indicates clickable) */
  transition: 0.3s;       /* Smooth transition for hover effects */
}

/* Hover effect for submit button */
.contact-form button:hover {
  background-color: #ddd; /* Light gray background on hover */
}

/* ===== RESPONSIVE DESIGN (Mobile/Tablet) ===== */
/* Styles applied when screen width is 768px or less */
@media (max-width: 768px) {
  /* Header adjustments for mobile */
  .site-header {
    align-items: flex-start; /* Align items to left on mobile */
  }
  
  /* Navigation spacing on mobile */
  .main-nav {
    margin-top: 10px;     /* Add space above navigation */
  }
  
  /* Navigation link adjustments for mobile */
  .main-nav a {
    margin-left: 0;       /* Remove left margin */
    margin-right: 15px;   /* Add right margin between links */
    display: inline-block; /* Ensure proper spacing */
  }
  
  /* Footer content stacks vertically on mobile */
  .footer-content {
    flex-direction: column; /* Stack columns vertically */
    align-items: center;   /* Center items horizontally */
    text-align: center;    /* Center all text */
  }
  
  /* Footer info alignment on mobile */
  .footer-info {
    text-align: center;   /* Center text (overrides left alignment) */
  }
  
  /* Center icon buttons on mobile */
  .footer-buttons {
    justify-content: center; /* Center icons horizontally */
  }
}

/* ===== ABOUT PAGE STYLES ===== */
/* Main page title */
.section-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f3f66;
  margin-bottom: 20px;
  text-align: left;
}

/* Blue container */
.kids-box {
  background-color: #1f3f66;
  display: flex;
  gap: 40px;
  padding: 40px;
}

/* Each column */
.kids-column {
  flex: 1;
  color: #ffffff;
  text-align: center;
  line-height: 1.8;
  font-size: 18px;
  position: relative;
}

/* Vertical dotted separators */
.kids-column:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 10%;
  height: 80%;
  border-right: 2px dotted rgba(255, 255, 255, 0.6);
}

.section-title {
  font-size: 28px;
  color: #1f3f66;
  margin-bottom: 20px;
}

.blue-box {
  background-color: #1f3f66;
  color: white;
  padding: 30px 40px;
}

/* Bullet list */
.bullet-list {
  list-style-type: disc;
  padding-left: 20px;
}

.bullet-list li {
  margin-bottom: 18px;
  line-height: 1.7;
  font-size: 18px;
}

@media (max-width: 768px) {
  .kids-box {
    flex-direction: column;
  }

  .kids-column:not(:last-child)::after {
    display: none;
  }
}

/* ===== LANGUAGES PAGE STYLES ===== */
.languages-section {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* LEFT */
.languages-left {
  font-size: 20px;
  flex: 1.2;
}

.languages-left p {
  margin-bottom: 15px;
  line-height: 1.7;
}

.bullet-list {
  margin-top: 20px;
  padding-left: 20px;
}

.bullet-list li {
  margin-bottom: 20px;
  line-height: 1.7;
}

/* RIGHT */
.languages-right {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Title ribbon */
.languages-title {
  background: #1f3f66;
  color: white;
  padding: 15px 30px;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.languages-title::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 28px solid transparent;
  border-bottom: 28px solid transparent;
  border-left: 20px solid #1f3f66;
}

/* Cards */
.language-card {
  position: relative;
  margin-bottom: 30px;
  border: 6px solid #f36c21;
}

.language-card img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* Text over image */
.language-card span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.35);
}

/* ===== ABOUT PAGE STYLES ===== */
/* Main page title */
.page-title {
  text-align: center;     /* Center the main heading */
  color: #21406A;         /* Dark blue color matching theme */
  font-size: 36px;        /* Large font size for main title */
  margin-bottom: 40px;    /* Space below the title */
  padding-bottom: 15px;   /* Space below text */
  border-bottom: 3px solid #f36c21; /* Orange underline for emphasis */
}

/* Tabs container (left tabs + right news) */
.tabs-container {
  display: flex;          /* Two-column layout */
  gap: 40px;              /* Space between columns */
  margin-bottom: 60px;    /* Space below before approach section */
  min-height: 400px;      /* Minimum height for balance */
}

/* LEFT TABS COLUMN */
.left-tabs {
  flex: 1;                /* Take up 1 part of available space */
  border: 2px solid #21406A; /* Blue border matching theme */
  border-radius: 8px;     /* Rounded corners */
  overflow: hidden;       /* Keep children within border radius */
  background-color: #ffffff; /* Orange background for active tab */
}

/* Tab headers (buttons) */
.tab-header {
  display: flex;          /* Two buttons side by side */
  background-color: #21406A; /* Dark blue background */
}

.tab-btn {
  flex: 1;                /* Each button takes equal width */
  padding: 15px 20px;     /* Comfortable click area */
  background: transparent; /* Transparent by default */
  border: none;           /* Remove default button border */
  color: white;           /* White text */
  font-size: 20px;        /* Readable font size */
  font-weight: bold;      /* Emphasized text */
  cursor: pointer;        /* Pointer cursor on hover */
  transition: all 0.3s;   /* Smooth transition for hover effects */
}

.tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Light hover effect */
}

.tab-btn.active {
  background-color: #f36c21; /* Orange background for active tab */
  color: white;           /* White text for contrast */
}

/* Tab content area */
.tab-content {
  display: none;          /* Hidden by default */
  padding: 30px;          /* Comfortable internal spacing */
  background-color: white; /* White background for content */
  min-height: 300px;      /* Minimum height for consistency */
}

.tab-content.active {
  display: block;         /* Show active content */
}

.tab-content p {
  font-size: 20px;        /* Comfortable reading size */
  line-height: 1.7;       /* Improved readability with line spacing */
  color: #333;            /* Dark gray text for good contrast */
}

/* RIGHT NEWS COLUMN */
.right-news {
  flex: 1;                /* Take up 1 part of available space */
  border: 2px solid #1f3f66; /* Slightly darker blue border */
  border-radius: 8px;     /* Rounded corners */
  overflow: hidden;       /* Keep children within border radius */
  background-color: #f8f9fa; /* Very light gray background */
}

.news-header {
  background-color: #1f3f66; /* Dark blue background */
  color: white;           /* White text */
  padding: 15px 20px;     /* Internal spacing */
  text-align: center;     /* Centered text */
}

.news-header h3 {
  font-size: 24px;        /* Prominent size for heading */
  margin: 0;              /* Remove default margins */
}

.news-content {
  padding: 20px;          /* Internal spacing */
/*  background-color: #1f3f66; /* Dark blue background */
}

.news-item {
  margin-bottom: 25px;    /* Space between news items */
  padding-bottom: 25px;   /* Space below each item */
  border-bottom: 1px solid #e0e0e0; /* Separator between items */
}

.news-item:last-child {
  margin-bottom: 0;       /* Remove bottom margin from last item */
  padding-bottom: 0;      /* Remove bottom padding from last item */
  border-bottom: none;    /* Remove border from last item */
}

.news-item h4 {
  color: #21406A;         /* Blue color matching theme */
  font-size: 20px;        /* Prominent but not too large */
  margin-bottom: 10px;    /* Space below heading */
}

.news-item p {
  font-size: 18px;        /* Slightly smaller than main content */
  line-height: 1.6;       /* Good readability */
  color: #555;            /* Medium gray text */
}

/* APPROACH TO LEARNING SECTION */
.approach-section {
  background-color: #f8f9fa; /* Light gray background */
  border-radius: 8px;     /* Rounded corners */
  padding: 30px;          /* Internal spacing */
  border-top: 5px solid #f36c21; /* Orange top border for emphasis */
}

.approach-section h2 {
  color: #1f3f66;         /* Dark blue color */
  font-size: 28px;        /* Large font size */
  margin-bottom: 25px;    /* Space below heading */
  text-align: center;     /* Center the heading */
}

.approach-list {
  margin-left: 40px;      /* Indent list from left */
  counter-reset: item;    /* Reset counter for custom numbering */
}

.approach-list li {
  font-size: 20px;        /* Comfortable reading size */
  line-height: 1.7;       /* Good line spacing */
  margin-top: 40px;       /* Space BEFORE each numbered item */
  margin-bottom: 15px;    /* Space after list items */
  color: #333;            /* Dark gray text */
  padding-left: 15px;     /* Space between number and text */
  position: relative;     /* For custom numbering */
  list-style-type: none;  /* Remove default numbering */
}

.approach-list li:first-child {
  margin-top: 0;          /* Remove top margin from first item */
}

.approach-list li:before {
  content: counter(item) ". "; /* Custom numbering format */
  counter-increment: item; /* Increment counter */
  color: #f36c21;         /* Orange numbers */
  font-weight: bold;      /* Emphasized numbers */
  position: absolute;     /* Position relative to li */
  left: -25px;            /* Position to left of text */
}

/* Nested bullet list inside approach items */
.approach-bullets {
  margin-top: 15px;       /* Space above bullet list */
  margin-left: 40px;      /* Indent bullet list more to show bullets */
  list-style-type: disc;  /* Show disc bullets */
  list-style-position: outside; /* Bullets outside the text */
}

.approach-bullets li {
  font-size: 18px;        /* Slightly smaller than main text */
  line-height: 1.6;       /* Good line spacing */
  margin-bottom: 5px;     /* Reduced space between bullets */
  margin-top: 0;          /* No top margin for bullets */
  color: #555;            /* Slightly lighter gray */
  padding-left: 10px;     /* Space after bullet */
  position: static;       /* Reset position from parent */
  list-style-type: disc;  /* Ensure disc bullets show */
}

.approach-bullets li:before {
  content: none;          /* Remove the numbered counter */
  display: none;          /* Hide any before content */
}

/* Responsive design for tablets and mobile */
@media (max-width: 992px) {
  .tabs-container {
    flex-direction: column; /* Stack columns vertically on smaller screens */
    gap: 30px;              /* Reduce gap when stacked */
  }
  
  .left-tabs,
  .right-news {
    width: 100%;            /* Full width when stacked */
  }
  
  .tab-btn {
    font-size: 18px;        /* Slightly smaller font on mobile */
    padding: 12px 15px;     /* Adjusted padding for mobile */
  }
  
  .tab-content {
    min-height: 200px;      /* Reduced height for mobile */
    padding: 20px;          /* Adjusted padding for mobile */
  }
}

/* Responsive design for mobile phones */
@media (max-width: 576px) {
  .page-title {
    font-size: 28px;        /* Smaller title on mobile */
  }
  
  .tab-header {
    flex-direction: column; /* Stack tab buttons vertically on very small screens */
  }
  
  .tab-btn {
    font-size: 16px;        /* Smaller font on very small screens */
    padding: 10px 15px;     /* Adjusted padding */
  }
  
  .approach-section h2 {
    font-size: 24px;        /* Smaller heading on mobile */
  }
  
  .approach-list {
    margin-left: 20px;      /* Reduced indent on mobile */
  }
  
  .approach-list li {
    font-size: 18px;        /* Smaller text on mobile */
    margin-top: 30px;       /* Space before each item on mobile */
  }
  
  .approach-bullets li {
    font-size: 16px;        /* Smaller bullets on mobile */
  }
}

/* ===== ACTIVITIES PAGE STYLES ===== */
.activities-title {
  color: #d2713d;           /* Orange/coral color for title */
  font-size: 2.5em;         /* Large title size */
  margin-bottom: 30px;      /* Space below title */
  font-weight: 300;         /* Light weight for elegant look */
  letter-spacing: 2px;      /* Spaced out letters */
  text-align: left;         /* Left aligned */
}

.activities-intro {
  background: linear-gradient(135deg, #2c4563 0%, #3d5a7a 100%); /* Dark blue gradient */
  color: white;             /* White text */
  padding: 30px;            /* Internal spacing */
  border-radius: 8px;       /* Rounded corners */
  margin-bottom: 40px;      /* Space below intro section */
  display: flex;            /* Flexbox for two-column layout */
  justify-content: space-between; /* Space between columns */
  align-items: center;      /* Vertically center content */
  gap: 30px;                /* Space between text and links */
  box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Shadow for depth */
}

.intro-text {
  flex: 1;                  /* Take up available space */
  line-height: 1.8;         /* Comfortable line spacing */
  font-size: 18px;          /* Readable font size */
}

.intro-links {
  list-style: none;         /* Remove default bullets */
  background-color: rgba(255,255,255,0.95); /* Almost white background */
  padding: 25px 30px;       /* Internal spacing */
  border-radius: 5px;       /* Rounded corners */
  min-width: 280px;         /* Minimum width for links box */
}

.intro-links li {
  color: #2c4563;           /* Dark blue text */
  margin-bottom: 15px;      /* Space between list items */
  padding-left: 20px;       /* Space for bullet */
  position: relative;       /* For custom bullet positioning */
  font-size: 0.95em;        /* Slightly smaller text */
}

.intro-links li:last-child {
  margin-bottom: 0;         /* Remove margin from last item */
}

.intro-links li::before {
  content: "◆";             /* Diamond bullet */
  position: absolute;       /* Position relative to li */
  left: 0;                  /* Align to left */
  color: #5d8fb8;           /* Light blue color */
}

.activities-grid {
  display: grid;            /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive columns */
  gap: 30px;                /* Space between cards */
  margin-top: 40px;         /* Space above grid */
}

.activity-card {
  background-color: white;  /* White background */
  padding: 35px;            /* Internal spacing */
  border-radius: 8px;       /* Rounded corners */
  box-shadow: 0 3px 10px rgba(0,0,0,0.1); /* Subtle shadow */
}

.activity-card h2 {
  color: #333;              /* Dark gray text */
  font-size: 1.5em;         /* Large heading size */
  margin-bottom: 25px;      /* Space below heading */
  padding-bottom: 15px;     /* Space below text */
  border-bottom: 3px solid #f0b454; /* Yellow/gold underline */
  font-weight: 500;         /* Medium weight */
  letter-spacing: 1px;      /* Spaced letters */
}

.activity-description,
.activity-list {
  color: #555;              /* Medium gray text */
  line-height: 1.7;         /* Comfortable line spacing */
  margin-bottom: 25px;      /* Space below text */
  font-size: 0.95em;        /* Slightly smaller text */
}

.highlight {
  font-weight: 600;         /* Bold highlighted text */
  color: #2c4563;           /* Dark blue color */
}

.activity-image {
  width: 100%;              /* Full width of container */
  height: 300px;            /* Fixed height */
  object-fit: cover;        /* Crop to fill space */
  border-radius: 5px;       /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Subtle shadow */
}

/* Responsive styles for activities page */
@media (max-width: 768px) {
  .activities-intro {
    flex-direction: column; /* Stack vertically on mobile */
  }

  .intro-links {
    width: 100%;            /* Full width on mobile */
    min-width: auto;        /* Remove minimum width */
  }

  .activities-grid {
    grid-template-columns: 1fr; /* Single column on mobile */
  }

  .activities-title {
    font-size: 2em;         /* Smaller title on mobile */
  }
}

/* ===== COMPREHENSIVE MOBILE RESPONSIVE STYLES ===== */

/* Tablets and Small Laptops (992px and below) */
@media (max-width: 992px) {
  /* Header adjustments */
  .logo img {
    height: 200px;          /* Smaller logo on tablets */
  }
  
  .logo span {
    font-size: 18px;        /* Smaller text */
  }
  
  .main-nav a {
    font-size: 20px;        /* Smaller nav links */
    margin-left: 12px;      /* Less spacing */
  }
  
  /* Split section becomes single column */
  .split-section {
    flex-direction: column; /* Stack vertically */
    gap: 30px;
  }
  
  /* Languages page */
  .languages-section {
    flex-direction: column !important;
  }
  
  .languages-left,
  .languages-right {
    width: 100% !important;
  }
}

/* Mobile Phones (768px and below) */
@media (max-width: 768px) {
  /* Base content adjustments */
  body {
    font-size: 16px;        /* Slightly smaller base font */
  }
  
  /* Header - Stack logo elements vertically */
  .site-header {
    padding: 10px 15px;     /* Less padding on mobile */
  }
  
  .logo {
    flex-direction: column; /* Stack vertically */
    text-align: center;     /* Center everything */
    gap: 8px;
  }
  
  .logo img {
    height: 150px;          /* Smaller logo */
    margin: 10px 0;         /* Adjust margins */
  }
  
  .logo span {
    font-size: 16px;        /* Smaller text */
    white-space: normal;    /* Allow text wrapping */
  }
  
  .logo-left,
  .logo-right {
    text-align: center;     /* Center both text blocks */
  }
  
  /* Navigation - Stack vertically */
  .main-nav {
    display: flex;
    flex-direction: column; /* Stack nav links */
    gap: 8px;
    width: 100%;
    margin-top: 15px;
  }
  
  .main-nav a {
    font-size: 18px;        /* Smaller links */
    margin: 0;              /* Remove side margins */
    padding: 8px 0;         /* Add vertical padding */
  }
  
  /* Content sections */
  .content-section {
    padding: 20px 15px;     /* Less padding */
  }
  
  /* Video on homepage */
  .content-section video {
    width: 100%;            /* Full width */
    height: auto;           /* Auto height */
  }
  
  /* Split section (map + info boxes) */
  .split-section {
    flex-direction: column;
    margin: 30px auto;
    padding: 0 15px;
  }
  
  .left-column,
  .right-column {
    width: 100%;
  }
  
  .map-box iframe {
    width: 100%;
    height: 300px;          /* Shorter on mobile */
  }
  
  /* Specific fix for index page map in split-section */
  .split-section .map-box iframe {
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    max-width: 100% !important;
  }
  
  .left-column .map-box {
    width: 100%;
    overflow: hidden;
    min-height: 300px;
  }
  
  .split-section .left-column {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .info-row {
    height: auto;           /* Auto height */
    padding: 15px 0;        /* Vertical padding */
  }
  
  .info-row .num {
    font-size: 40px;        /* Smaller numbers */
    width: 60px;
  }
  
  .info-row .text {
    font-size: 18px;        /* Smaller text */
    padding: 15px;
  }
  
  .right-header {
    font-size: 20px;        /* Smaller header */
  }
  
  /* Image buttons (language flags on homepage) */
  .image-buttons {
    flex-direction: column; /* Stack vertically */
    align-items: center;
  }
  
  .image-button {
    width: 100%;            /* Full width */
    max-width: 300px;       /* Max width for better appearance */
    height: 180px;
  }
  
  .image-button img {
    width: 100%;
    height: 180px;
  }
  
  /* Info banner (3-part banner on homepage) */
  .info-banner {
    flex-direction: column; /* Stack vertically */
    min-height: auto;
  }
  
  .banner-left,
  .banner-right,
  .banner-middle {
    width: 100% !important;
    padding: 20px !important;
  }
  
  .banner-middle {
    position: static !important; /* Remove floating */
    transform: none !important;
    margin: 0 !important;
  }
  
  .banner-ribbon {
    display: none;          /* Hide ribbon on mobile */
  }
  
  /* Kids box (3 columns on classes page) */
  .kids-box {
    flex-direction: column !important; /* Stack vertically */
  }
  
  .kids-column {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  /* Blue boxes (adults/special classes) */
  .blue-box {
    padding: 20px !important;
  }
  
  .bullet-list li {
    font-size: 18px;        /* Slightly smaller */
  }
  
  /* Languages page */
  .languages-section {
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  .languages-left,
  .languages-right {
    width: 100% !important;
  }
  
  .languages-title {
    font-size: 24px !important;
    padding: 15px !important;
  }
  
  .language-card {
    width: 100% !important;
    height: 180px !important;
  }
  
  .language-card img {
    height: 180px !important;
  }
  
  /* About page tabs */
  .tabs-container {
    flex-direction: column;
  }
  
  .left-tabs,
  .right-news {
    width: 100%;
  }
  
  .tab-header {
    flex-direction: column; /* Stack tab buttons vertically */
  }
  
  .tab-btn {
    font-size: 18px;
    padding: 12px 15px;
  }
  
  .tab-content {
    padding: 20px;
    min-height: 200px;
  }
  
  .tab-content p {
    font-size: 18px;
  }
  
  /* Approach section */
  .approach-section h2 {
    font-size: 24px;
  }
  
  .approach-list {
    margin-left: 20px;
  }
  
  .approach-list li {
    font-size: 18px;
    margin-top: 30px;
  }
  
  .approach-bullets {
    margin-left: 25px;
  }
  
  .approach-bullets li {
    font-size: 16px;
  }
  
  /* Section titles */
  .section-title,
  .page-title {
    font-size: 28px;        /* Smaller titles */
  }
  
  /* Footer */
  .site-footer {
    padding: 30px 15px;
  }
  
  .footer-content {
    flex-direction: column; /* Stack vertically */
    gap: 30px;
    text-align: center;
  }
  
  .footer-info,
  .footer-contact {
    width: 100%;
  }
  
  .footer-logo {
    max-width: 150px;       /* Smaller logo */
  }
  
  .footer-address {
    font-size: 16px;
  }
  
  .footer-buttons {
    justify-content: center;
  }
  
  .contact-form input,
  .contact-form textarea {
    font-size: 16px;        /* Easier to read on mobile */
  }
  
  .contact-form button {
    font-size: 18px;
    padding: 12px 30px;
  }
}

/* Very Small Mobile Phones (576px and below) */
@media (max-width: 576px) {
  /* Extra small adjustments */
  .logo img {
    height: 120px;          /* Even smaller logo */
  }
  
  .logo span {
    font-size: 14px;
  }
  
  .main-nav a {
    font-size: 16px;
  }
  
  .page-title,
  .section-title {
    font-size: 24px;
  }
  
  .info-row .num {
    font-size: 32px;
    width: 50px;
  }
  
  .info-row .text {
    font-size: 16px;
  }
  
  .activities-title {
    font-size: 1.5em;
  }
  
  .activity-card h2 {
    font-size: 1.2em;
  }
  
  .footer-logo {
    max-width: 120px;
  }
}