@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Questrial&display=swap");

:root {
  /* Font Families */
  --font-heading: "Barlow Condensed", sans-serif;
  --font-body: "Questrial", sans-serif;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.7;

 --primary-teal: #7ed6c7;
  --primary-yellow: #f9d66a;
  --secondary-orange: #f45c42;
  --secondary-orange-light: #faa935;
  --secondary-green: #64b551;
  --secondary-blue: #5078f0;
  --secondary-purple: #3d3b98;
  --white: #ffffff;
  --light-gray: #f6f7f8;
  --dark-teal: #2f5454;
  
  /* Calculate darker/lighter variants for hover states */
  --primary-teal-dark: #5cccb9;
  --primary-yellow-dark: #f7ca4a;
  --secondary-orange-dark: #e8462c;
  --secondary-orange-light-dark: #f09a1f;
  --secondary-green-dark: #4fa03e;
  --secondary-blue-dark: #3a64e8;
  --secondary-purple-dark: #2a2878;
  --dark-teal-dark: #1e3a3a;

  /* Calculate lighter variants */
  --primary-teal-light: #a3e4d8;
  --primary-yellow-light: #fbe49a;
  --secondary-orange-light-light: #fcbb62;
  --secondary-green-light: #87c978;
  --secondary-blue-light: #8099f4;
  
  /* Bootstrap CSS Variables Override */
  --bs-primary: var(--primary-teal) !important;
  --bs-primary-rgb: 126, 214, 199 !important;
  --bs-primary-bg-subtle: var(--primary-teal-light) !important;
  --bs-primary-border-subtle: var(--primary-teal-light) !important;
  --bs-primary-text-emphasis: var(--dark-teal) !important;
  
  --bs-secondary: var(--secondary-orange-light) !important;
  --bs-secondary-rgb: 250, 169, 53 !important;
  --bs-secondary-bg-subtle: var(--secondary-orange-light-light) !important;
  --bs-secondary-border-subtle: var(--secondary-orange-light-light) !important;
  --bs-secondary-text-emphasis: var(--dark-teal) !important;
  
  --bs-success: var(--secondary-green) !important;
  --bs-success-rgb: 100, 181, 81 !important;
  --bs-success-bg-subtle: var(--secondary-green-light) !important;
  --bs-success-border-subtle: var(--secondary-green-light) !important;
  --bs-success-text-emphasis: var(--dark-teal) !important;
  
  --bs-info: var(--secondary-blue) !important;
  --bs-info-rgb: 80, 120, 240 !important;
  --bs-info-bg-subtle: var(--secondary-blue-light) !important;
  --bs-info-border-subtle: var(--secondary-blue-light) !important;
  --bs-info-text-emphasis: var(--dark-teal) !important;
  
  --bs-warning: var(--primary-yellow) !important;
  --bs-warning-rgb: 249, 214, 106 !important;
  --bs-warning-bg-subtle: var(--primary-yellow-light) !important;
  --bs-warning-border-subtle: var(--primary-yellow-light) !important;
  --bs-warning-text-emphasis: var(--dark-teal) !important;
  
  --bs-danger: var(--secondary-orange) !important;
  --bs-danger-rgb: 244, 92, 66 !important;
  --bs-danger-bg-subtle: var(--secondary-orange-light) !important;
  --bs-danger-border-subtle: var(--secondary-orange-light) !important;
  --bs-danger-text-emphasis: var(--dark-teal) !important;
  
  --bs-light: var(--light-gray) !important;
  --bs-light-rgb: 246, 247, 248 !important;
  --bs-light-bg-subtle: var(--white) !important;
  --bs-light-border-subtle: #e9ecef !important;
  --bs-light-text-emphasis: var(--dark-teal) !important;
  
  --bs-dark: var(--dark-teal) !important;
  --bs-dark-rgb: 47, 84, 84 !important;
  --bs-dark-bg-subtle: #495057 !important;
  --bs-dark-border-subtle: #6c757d !important;
  --bs-dark-text-emphasis: var(--dark-teal-dark) !important;
  
  --bs-white: var(--white) !important;
  --bs-white-rgb: 255, 255, 255 !important;
  
  --bs-black: #000000 !important;
  --bs-black-rgb: 0, 0, 0 !important;
  
  /* Body colors */
  --bs-body-color: var(--dark-teal) !important;
  --bs-body-color-rgb: 47, 84, 84 !important;
  --bs-body-bg: var(--white) !important;
  --bs-body-bg-rgb: 255, 255, 255 !important;
  
  /* Link colors */
  --bs-link-color: var(--secondary-blue) !important;
  --bs-link-hover-color: var(--secondary-blue-dark) !important;
  --bs-link-color-rgb: 80, 120, 240 !important;
  --bs-link-hover-color-rgb: 58, 100, 232 !important;
  
  /* Border colors */
  --bs-border-color: #dee2e6 !important;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175) !important;
  
  /* Focus ring */
  --bs-focus-ring-color: rgba(126, 214, 199, 0.25) !important;

   /* Base SVG Filters */
  --svg-filter-primary: brightness(0) saturate(100%) invert(65%) sepia(30%) saturate(500%) hue-rotate(130deg) brightness(90%) contrast(85%);
  --svg-filter-secondary: brightness(0) saturate(100%) invert(50%) sepia(60%) saturate(800%) hue-rotate(350deg) brightness(90%) contrast(85%);
  --svg-filter-success: brightness(0) saturate(100%) invert(60%) sepia(40%) saturate(600%) hue-rotate(90deg) brightness(95%) contrast(85%);
  --svg-filter-info: brightness(0) saturate(100%) invert(55%) sepia(50%) saturate(700%) hue-rotate(180deg) brightness(95%) contrast(85%);
  --svg-filter-warning: brightness(0) saturate(100%) invert(77%) sepia(40%) saturate(500%) hue-rotate(5deg) brightness(105%) contrast(85%);
  --svg-filter-danger: brightness(0) saturate(100%) invert(50%) sepia(60%) saturate(800%) hue-rotate(350deg) brightness(90%) contrast(85%);
  --svg-filter-light: brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(200%) hue-rotate(180deg) brightness(105%) contrast(95%);
  --svg-filter-dark: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(500%) hue-rotate(160deg) brightness(90%) contrast(90%);
  
  /* Special Effects */
  --svg-filter-white: brightness(0) invert(1);
  --svg-filter-black: brightness(0);
  --svg-filter-overlay: brightness(0) invert(1) opacity(0.4);
  --svg-filter-glow: brightness(0) saturate(100%) invert(65%) sepia(30%) saturate(500%) hue-rotate(130deg) brightness(120%) contrast(90%) drop-shadow(0 0 8px rgba(102, 204, 187, 0.3));
  
}

/* Apply fonts to entire site */
* {
  font-family: var(--font-body);
  line-height: var(--line-height-normal);
}

/* Headings use Barlow Condensed */
h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.display-7,
.display-8,
.display-9,
.display-10,
.section-title,
.card-title,
.fw-bold,
.fw-semibold,
.navbar-brand,
.hero-section h1,
.section-title .enrollment-section-title,
.philosophy-section-title,
.news-section h2 {
  font-family: var(--font-heading) !important;
  line-height: var(--line-height-tight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Assign progressive font-weight from h1 to display-10 */
/* Balanced heading sizes */
h1, .display-1 { 
  font-size: 3rem !important;        /* 48px */
  font-weight: 900 !important;
}

h2, .display-2 { 
  font-size: 2.5rem !important;      /* 40px */
  font-weight: 800 !important;
}

h3, .display-3 { 
  font-size: 2rem !important;        /* 32px */
  font-weight: 700 !important;
}

h4, .display-4 { 
  font-size: 1.75rem !important;     /* 28px */
  font-weight: 600 !important;
}

h5, .display-5 { 
  font-size: 1.5rem !important;      /* 24px */
  font-weight: 500 !important;
}

h6, .display-6 { 
  font-size: 1.25rem !important;     /* 20px */
  font-weight: 400 !important;
}

.display-7, .display-8, .display-9, .display-10 {
  font-weight: 300 !important; /* Semi-bold for smaller headings */
}

/* Body text uses Questrial */
body,
p,
.lead,
.btn,
.navbar-nav .nav-link,
.card-body,
.text-muted,
.small {
  font-family: var(--font-body) !important;
  font-weight: 400;
  line-height: var(--line-height-normal);
}

/* Buttons with Questrial */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 500 !important; /* Medium weight for buttons */
  letter-spacing: 0.3px;
}

/* Navigation */
.navbar-nav .nav-link {
  font-family: var(--font-body) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
  padding-bottom: 10px;
}

/* Lead paragraphs with looser line height */
.lead {
  line-height: var(--line-height-loose) !important;
  font-weight: 400;
}

/* Card text */
.card-body {
  line-height: var(--line-height-normal);
}

/* Text colors */
.text-primary {
  color: var(--bs-primary) !important;
  transition: color 0.3s ease-in-out;
}

/* Hover effect */
.text-primary:hover {
  color: var(--bs-dark) !important;
}
/* Background color classes */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-white {
  background-color: var(--bs-white) !important;
}

.bg-black {
  background-color: var(--bs-black) !important;
}

/* Text color classes */
.text-primary {
  color: var(--bs-primary) !important;
}

.text-primary-yellow-light {
  color: var(--primary-yellow-light) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-info {
  color: var(--bs-info) !important;
}

.text-warning {
  color: var(--bs-warning) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

.text-light {
  color: var(--bs-light) !important;
}

.text-white {
  color: var(--bs-white) !important;
}

.text-black {
  color: var(--bs-black) !important;
}

/* Border color classes */
.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

.border-success {
  border-color: var(--bs-success) !important;
}

.border-info {
  border-color: var(--bs-info) !important;
}

.border-warning {
  border-color: var(--bs-warning) !important;
}

.border-danger {
  border-color: var(--bs-danger) !important;
}

.border-dark {
  border-color: var(--bs-dark) !important;
}

.border-light {
  border-color: var(--bs-light) !important;
}

.border-white {
  border-color: var(--bs-white) !important;
}

.border-black {
  border-color: var(--bs-black) !important;
}

/* Optional: Additional custom color classes */
.bg-primary-teal {
  background-color: var(--primary-teal) !important;
}

.bg-primary-yellow {
  background-color: var(--primary-yellow) !important;
}

.bg-secondary-orange {
  background-color: var(--secondary-orange) !important;
}

.bg-secondary-orange-light {
  background-color: var(--secondary-orange-light) !important;
}

.bg-secondary-green {
  background-color: var(--secondary-green) !important;
}

.bg-secondary-blue {
  background-color: var(--secondary-blue) !important;
}

.bg-secondary-purple {
  background-color: var(--secondary-purple) !important;
}

.text-secondary-purple {
  color: var(--secondary-purple) !important;
}

.bg-dark-teal {
  background-color: var(--dark-teal) !important;
}

/* Subtle background classes (Bootstrap 5.3+) */
.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}

.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}
/* Alert colors */
.alert-primary {
  --bs-alert-color: var(--bs-dark);
  --bs-alert-bg: var(--bs-primary);
  --bs-alert-border-color: var(--bs-primary);
}

.alert-secondary {
  --bs-alert-color: var(--white);
  --bs-alert-bg: var(--bs-secondary);
  --bs-alert-border-color: var(--bs-secondary);
}

/* Apply fonts to entire site */
* {
  font-family: var(--font-body);
  line-height: var(--line-height-normal);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6,
.section-title,
.card-title,
.fw-bold,
.fw-semibold {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  line-height: var(--line-height-tight);
}

/* Body text */
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-height-normal);
}

p,
.lead {
  line-height: var(--line-height-loose);
}

.btn-yellow:hover {
  background-color: var(--secondary-orange-light);
  color: var(--dark-teal);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}


/* Bootstrap component overrides (keep your existing color overrides) */
.btn-primary {
  --bs-btn-bg: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-bg: #6bc4b3 !important;
  --bs-btn-hover-border-color: #6bc4b3 !important;
  --bs-btn-active-bg: #5ab2a2 !important;
  --bs-btn-active-border-color: #5ab2a2 !important;
  color: var(--bs-dark) !important;
}

.btn-secondary {
  --bs-btn-bg: var(--bs-secondary) !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-bg: #e34a32 !important;
  --bs-btn-hover-border-color: #e34a32 !important;
  --bs-btn-active-bg: #d14028 !important;
  --bs-btn-active-border-color: #d14028 !important;
  color: var(--white) !important;
}

.btn-success {
  --bs-btn-bg: var(--bs-success) !important;
  --bs-btn-border-color: var(--bs-success) !important;
}

.btn-info {
  --bs-btn-bg: var(--bs-info) !important;
  --bs-btn-border-color: var(--bs-info) !important;
}

.btn-warning {
  --bs-btn-bg: var(--bs-warning) !important;
  --bs-btn-border-color: var(--bs-warning) !important;
  color: var(--bs-dark) !important;
}

.btn-danger {
  --bs-btn-bg: var(--bs-danger) !important;
  --bs-btn-border-color: var(--bs-danger) !important;
}

.btn-dark {
  --bs-btn-bg: var(--bs-dark) !important;
  --bs-btn-border-color: var(--bs-dark) !important;
  --bs-btn-hover-bg: #6bc4b3 !important;
  --bs-btn-hover-border-color: #6bc4b3 !important;
  --bs-btn-active-bg: #6bc4b3 !important;
  --bs-btn-active-border-color: #6bc4b3 !important;
  color: var(--white) !important;
}

/* Outline Button Variants */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary) !important;
  --bs-btn-border-color: var(--bs-primary) !important;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: var(--bs-dark) !important;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  --bs-btn-active-color: var(--bs-dark) !important;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary) !important;
  --bs-btn-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-bg: var(--bs-secondary) !important;
  --bs-btn-hover-border-color: var(--bs-secondary) !important;
  --bs-btn-hover-color: var(--white) !important;
  --bs-btn-active-bg: var(--bs-secondary) !important;
  --bs-btn-active-border-color: var(--bs-secondary) !important;
  --bs-btn-active-color: var(--white) !important;
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success) !important;
  --bs-btn-border-color: var(--bs-success) !important;
  --bs-btn-hover-bg: var(--bs-success) !important;
  --bs-btn-hover-border-color: var(--bs-success) !important;
  --bs-btn-hover-color: var(--white) !important;
  --bs-btn-active-bg: var(--bs-success) !important;
  --bs-btn-active-border-color: var(--bs-success) !important;
  --bs-btn-active-color: var(--white) !important;
}

.btn-outline-info {
  --bs-btn-color: var(--bs-info) !important;
  --bs-btn-border-color: var(--bs-info) !important;
  --bs-btn-hover-bg: var(--bs-info) !important;
  --bs-btn-hover-border-color: var(--bs-info) !important;
  --bs-btn-hover-color: var(--white) !important;
  --bs-btn-active-bg: var(--bs-info) !important;
  --bs-btn-active-border-color: var(--bs-info) !important;
  --bs-btn-active-color: var(--white) !important;
}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning) !important;
  --bs-btn-border-color: var(--bs-warning) !important;
  --bs-btn-hover-bg: var(--bs-warning) !important;
  --bs-btn-hover-border-color: var(--bs-warning) !important;
  --bs-btn-hover-color: var(--bs-dark) !important;
  --bs-btn-active-bg: var(--bs-warning) !important;
  --bs-btn-active-border-color: var(--bs-warning) !important;
  --bs-btn-active-color: var(--bs-dark) !important;
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger) !important;
  --bs-btn-border-color: var(--bs-danger) !important;
  --bs-btn-hover-bg: var(--bs-danger) !important;
  --bs-btn-hover-border-color: var(--bs-danger) !important;
  --bs-btn-hover-color: var(--white) !important;
  --bs-btn-active-bg: var(--bs-danger) !important;
  --bs-btn-active-border-color: var(--bs-danger) !important;
  --bs-btn-active-color: var(--white) !important;
}

.btn-outline-dark {
  --bs-btn-color: var(--bs-dark) !important;
  --bs-btn-border-color: var(--bs-dark) !important;
  --bs-btn-hover-bg: var(--bs-primary) !important;
  --bs-btn-hover-border-color: var(--bs-primary) !important;
  --bs-btn-hover-color: var(--bs-dark) !important;
  --bs-btn-active-bg: var(--bs-primary) !important;
  --bs-btn-active-border-color: var(--bs-primary) !important;
  --bs-btn-active-color: var(--bs-dark) !important;
}

/* SVG Grid Filter Variables - Based on Your Color Variables */

/* SVG Grid Container Base */
.svg-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.svg-grid-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Primary Color Variations */
.svg-grid-primary { filter: var(--svg-filter-primary); opacity: 0.3; }
.svg-grid-primary-light { filter: var(--svg-filter-primary); opacity: 0.15; }
.svg-grid-primary-dark { filter: var(--svg-filter-primary); opacity: 0.5; }
.svg-grid-primary-glow { filter: var(--svg-filter-glow); opacity: 0.4; }

/* Secondary Color Variations */
.svg-grid-secondary { filter: var(--svg-filter-secondary); opacity: 0.3; }
.svg-grid-secondary-light { filter: var(--svg-filter-secondary); opacity: 0.15; }
.svg-grid-secondary-dark { filter: var(--svg-filter-secondary); opacity: 0.5; }

/* Success Color Variations */
.svg-grid-success { filter: var(--svg-filter-success); opacity: 0.3; }
.svg-grid-success-light { filter: var(--svg-filter-success); opacity: 0.15; }
.svg-grid-success-dark { filter: var(--svg-filter-success); opacity: 0.5; }

/* Info Color Variations */
.svg-grid-info { filter: var(--svg-filter-info); opacity: 0.3; }
.svg-grid-info-light { filter: var(--svg-filter-info); opacity: 0.15; }
.svg-grid-info-dark { filter: var(--svg-filter-info); opacity: 0.5; }

/* Warning Color Variations */
.svg-grid-warning { filter: var(--svg-filter-warning); opacity: 0.3; }
.svg-grid-warning-light { filter: var(--svg-filter-warning); opacity: 0.15; }
.svg-grid-warning-dark { filter: var(--svg-filter-warning); opacity: 0.5; }

/* Danger Color Variations */
.svg-grid-danger { filter: var(--svg-filter-danger); opacity: 0.3; }
.svg-grid-danger-light { filter: var(--svg-filter-danger); opacity: 0.15; }
.svg-grid-danger-dark { filter: var(--svg-filter-danger); opacity: 0.5; }

/* Neutral Color Variations */
.svg-grid-white { filter: var(--svg-filter-white); opacity: 0.2; }
.svg-grid-white-light { filter: var(--svg-filter-white); opacity: 0.1; }
.svg-grid-white-dark { filter: var(--svg-filter-white); opacity: 0.3; }

.svg-grid-black { filter: var(--svg-filter-black); opacity: 0.2; }
.svg-grid-black-light { filter: var(--svg-filter-black); opacity: 0.1; }
.svg-grid-black-dark { filter: var(--svg-filter-black); opacity: 0.3; }

/* Light & Dark Theme Specific */
.svg-grid-light { filter: var(--svg-filter-light); opacity: 0.3; }
.svg-grid-dark { filter: var(--svg-filter-dark); opacity: 0.3; }

/* Special Theme Combinations */
.svg-grid-dark-theme { filter: var(--svg-filter-white); opacity: 0.1; }
.svg-grid-dark-theme-primary { filter: var(--svg-filter-primary); opacity: 0.2; }
.svg-grid-light-theme { filter: var(--svg-filter-black); opacity: 0.1; }
.svg-grid-light-theme-primary { filter: var(--svg-filter-primary); opacity: 0.15; }

/* Overlay Effects */
.svg-grid-overlay { filter: var(--svg-filter-overlay); opacity: 0.3; }
.svg-grid-blend-overlay { 
    filter: var(--svg-filter-white); 
    opacity: 0.2; 
    mix-blend-mode: overlay;
}
.svg-grid-blend-soft-light { 
    filter: var(--svg-filter-white); 
    opacity: 0.15; 
    mix-blend-mode: soft-light;
}
.svg-grid-blend-screen { 
    filter: var(--svg-filter-white); 
    opacity: 0.1; 
    mix-blend-mode: screen;
}

/* Animation Variations */
.svg-grid-float {
    animation: svgFloat 20s ease-in-out infinite;
}

.svg-grid-pulse {
    animation: svgPulse 10s ease-in-out infinite;
}

.svg-grid-drift {
    animation: svgDrift 25s linear infinite;
}

@keyframes svgFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-20px) scale(1.02); }
}

@keyframes svgPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

@keyframes svgDrift {
    0% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(-10px) translateY(-15px); }
    50% { transform: translateX(5px) translateY(-25px); }
    75% { transform: translateX(15px) translateY(-10px); }
    100% { transform: translateX(0) translateY(0); }
}

/* Size Variations */
.svg-grid-small { transform: scale(0.8); }
.svg-grid-large { transform: scale(1.2); }
.svg-grid-zoom { transform: scale(1.1); }

/* Pattern Density Variations */
.svg-grid-dense { transform: scale(0.7); }
.svg-grid-sparse { transform: scale(1.5); }

/* Responsive SVG Grid */
@media (max-width: 768px) {
    .svg-grid-container img {
        transform: scale(1.1); /* Slightly larger on mobile for better coverage */
    }
    
    .svg-grid-float,
    .svg-grid-pulse,
    .svg-grid-drift {
        animation-duration: 30s; /* Slower animations on mobile */
    }
}
/* Header & Navigation */
.main-header {
  position: relative;
}

.site-main {
  margin-top: 80px; /* Adjust based on navbar height */
}
.navbar {
  background-color: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* padding: 25px 0 15px 0; */
  position: sticky;
  top: 0;
  z-index: 1040;
  overflow: visible;
}

.navbar .container {
  position: relative;
  overflow: visible;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo Styles */
.logo-overflow {
  position: absolute;
  z-index: 1030;
  left: 15px;
  top: -25px;
  transform: translateX(-10px);
}

.logo-svg {
  width: 140px;
  height: auto;
  display: block;
  transition: all 0.3s ease;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.15));
}

/* Desktop Menu */
.desktop-menu {
  position: relative;
  z-index: 1020;
  margin-left: 160px;
}

.navbar-nav {
  position: relative;
  z-index: 1020;
}

.navbar-nav .nav-item {
  margin: 0 8px;
  position: relative;
}

.navbar-nav .nav-link {
  padding: 8px 12px;
  font-weight: 500;
  color: var(--dark-teal);
  transition: color 0.3s ease;
  cursor: pointer;
  position: relative;
  padding-bottom: 10px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--secondary-orange) !important;
  font-weight: 600;
  position: relative;
}

.active-indicator {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--secondary-orange);
  border-radius: 50%;
}

/* Expandable Navbar Section */
.navbar-expansion {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 999;
  padding: 2rem 0;
  border-top: 1px solid var(--light-gray);
}

.navbar-expansion.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Active parent expansion styling */
.navbar-expansion.active-parent {
  border-top-width: 6px;
}

/* Expansion Content - 2 Column Layout */
.expansion-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 15px;
  align-items: start;
}

/* Column 1: Parent Name */
.expansion-parent-column {
  padding: 1rem;
  border-right: 2px solid #e9ecef;
}

.parent-title {
  font-weight: 700;
  color: var(--dark-teal);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.parent-description {
  color: #666;
  line-height: 1.6;
}
.parent-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.parent-title-link:hover .parent-title {
  color: var(--secondary-orange);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Column 2: Child Items */
.expansion-child-column {
  padding: 1rem;
}

.child-list-container {
  max-width: 500px;
}

.child-list-title {
  font-weight: 600;
  color: var(--dark-teal);
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-teal);
}

.child-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.child-link-item {
  margin-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.child-link-item:last-child {
  border-bottom: none;
}

.child-link-item:hover {
  background-color: #f8f9fa;
}

.child-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.5rem;
  color: #555;
  text-decoration: none;
  transition: all 0.2s ease;
}

.child-link:hover {
  color: var(--secondary-orange) !important;
  padding-left: 1rem;
}

/* Active child link styling */
.child-link-item.active-child .child-link {
  background: #f8f9fa;
  color: var(--secondary-orange) !important;
  padding-left: 1rem;
  border-left: 3px solid var(--secondary-orange);
}

.child-link-item.active-child .link-arrow {
  opacity: 1;
  color: var(--secondary-orange) !important;
}

.link-text {
  font-weight: 500;
}

.link-arrow {
  color: var(--secondary-orange) !important;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.child-link:hover .link-arrow {
  opacity: 1;
}

/* Color coding for different expansions */
.expansion-about .parent-title {
  color: var(--primary-teal);
}
.expansion-about .child-list-title {
  border-color: var(--primary-teal);
}

.expansion-programs .parent-title {
  color: var(--secondary-blue);
}
.expansion-programs .child-list-title {
  border-color: var(--secondary-blue);
}

.expansion-learning .parent-title {
  color: var(--secondary-blue);
}
.expansion-learning .child-list-title {
  border-color: var(--secondary-blue);
}

.expansion-enrolment .parent-title {
  color: var(--primary-yellow);
}
.expansion-enrolment .child-list-title {
  border-color: var(--primary-yellow);
}

.expansion-community .parent-title {
  color: var(--secondary-green);
}
.expansion-community .child-list-title {
  border-color: var(--secondary-green);
}
/* Color coding for different expansions */
.expansion-governance .parent-title {
  color: var(--secondary-purple);
}
.expansion-governance .child-list-title {
  border-color: var(--secondary-purple);
}

/* Responsive Design */
@media (max-width: 768px) {
  .expansion-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.5rem 15px;
  }

  .expansion-parent-column {
    border-right: none;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 2rem;
    margin-bottom: 1rem;
  }

  .parent-title {
  }

  .child-list-container {
    max-width: 100%;
  }
}

/* Expansion border colors */
.expansion-about {
  border-top: 4px solid var(--primary-teal);
}

.expansion-programs,
.expansion-learning {
  border-top: 4px solid var(--secondary-blue);
}

.expansion-enrolment {
  border-top: 4px solid var(--primary-yellow);
}

.expansion-community {
  border-top: 4px solid var(--secondary-green);
}
/* CTA Buttons */
.cta-buttons {
  position: relative;
  z-index: 1020;
}

.btn-purple {
  background-color: var(--purple);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-purple:hover {
  background-color: #8e44ad;
  transform: translateY(-2px);
  color: white;
}

.btn-yellow {
  background-color: var(--primary-yellow);
  color: #333;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-yellow:hover {
  background-color: #f39c12;
  transform: scale(1.1);
}

/* Mobile Bottom Menu */
.mobile-bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1030;
  padding: 10px 0;
  border-top: 1px solid var(--light-gray);
}

.mobile-bottom-menu .nav-link {
  text-align: center;
  /* padding: 8px 5px; */
  color: var(--dark-teal);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.mobile-bottom-menu .nav-link i {
  font-size: 1.1rem;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.mobile-bottom-menu .nav-link span {
  font-size: 1rem;
  transition: all 0.3s ease;
}

@media (max-width: 415px) {
  .mobile-bottom-menu .nav-link span {
  font-size: 0.8rem;
  transition: all 0.3s ease;
}
}

/* Hover State */
.mobile-bottom-menu .nav-link:hover {
  color: var(--bs-primary) !important;
}

.mobile-bottom-menu .nav-link:hover i,
.mobile-bottom-menu .nav-link:hover span {
  color: var(--bs-primary) !important;
}

/* Active State */
.mobile-bottom-menu .nav-link.active {
  color: var(--bs-primary) !important;
}

.mobile-bottom-menu .nav-link.active i,
.mobile-bottom-menu .nav-link.active span {
  color: var(--bs-primary) !important;
}

/* Optional: Add background color change on active/hover */
.mobile-bottom-menu .nav-link:hover,
.mobile-bottom-menu .nav-link.active {
  /* background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-radius: 8px; */
}

/* RESPONSIVE BREAKPOINTS */
@media (min-width: 1200px) {
  .desktop-menu {
    display: flex !important;
  }
  .mobile-bottom-menu {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .desktop-menu {
    display: flex !important;
  }
  .mobile-bottom-menu {
    display: none !important;
  }
  .logo-svg {
    width: 130px;
  }
  .desktop-menu {
    margin-left: 140px;
  }
  .navbar {
    padding: 15px 0;
  }
}

@media (max-width: 991px) {
  .desktop-menu {
    display: none !important;
  }
  .mobile-bottom-menu {
    display: block !important;
  }
  .logo-svg {
    width: 100px;
  }
  .navbar {
    padding: 15px 0;
  }
  .navbar .container {
    min-height: 60px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .logo-svg {
    width: 120px;
  }
}

@media (max-width: 767px) {
  .logo-svg {
    width: 125px;
  }
}

@media (max-width: 575px) {
  .logo-svg {
    width: 110px;
  }
}

/* Hover effects */
.logo-svg:hover {
  transform: scale(1.05);
}

.navbar-scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.header-scrolled .logo-overflow {
  transform: translateX(-10px) scale(0.9);
  transition: all 0.3s ease;
}

/* Rest of your existing styles remain the same */
.hero-section {
  background: linear-gradient(
    135deg,
    var(--primary-teal) 0%,
    var(--secondary-blue) 100%
  );
  color: var(--white);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.hero-section h1 {
  /* font-size: 3.5rem; */
  margin-bottom: 1.5rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

/* Buttons */
.btn-custom {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* Hero Section - Extra Large */
.hero-section h1 {
  /* font-size: clamp(2.5rem, 5vw, 4.5rem); */
  /* Responsive scaling */
  font-weight: 700;
  line-height: 1.1;
}

.hero-section p {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.6;
}

/* Section Headings */
.section-title {
  /* font-size: var(--font-size-4xl); */
  font-weight: 700;
}

/* Feature Cards */
.feature-card .card-title {
  /* font-size: var(--font-size-2xl); */
  font-weight: 600;
}

.feature-card .card-text {
  /* font-size: var(--font-size-base); */
  line-height: var(--line-height-loose);
}

/* Links */
.link-more {
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* Mobile Bottom Menu */
.mobile-bottom-menu .nav-link {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.mobile-bottom-menu .nav-link i {
  font-size: 1.4rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  :root {
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.5rem;
  }

  .hero-section h1 {
    /* font-size: clamp(2rem, 8vw, 3rem); */
  }

  .mobile-bottom-menu .nav-link {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 576px) {
  .navbar-nav .nav-link {
    font-size: var(--font-size-base);
  }

  .btn-custom {
    font-size: var(--font-size-sm);
  }
}

/* Enrollment Section Styles */
/* Enrollment Section Base */
.enrollment-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    min-height: 600px;
    position: relative;
    overflow: hidden;
}
/* Content Styling */
.enrollment-section__content {
    background: transparent;
}

/* Image Section */
.enrollment-section__image {
    background: transparent;
}

.image-container {
    max-width: 500px;
    width: 100%;
}

.image-container img {
    height: 500px;
    object-fit: cover;
}

/* Feature Items */
.enrollment-section__feature-item {
    transition: all 0.3s ease;
    border: 1px solid transparent !important;
}

.enrollment-section__feature-item:hover {
    transform: translateY(-2px);
}

/* CTA Cards */
.cta-card {
    border: 2px solid transparent;
    transition: all 0.3s ease;
    background: white;
    min-height: 100px;
}

.cta-card-primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, #6bc4b3 100%);
    color: white;
}

.cta-card-primary .cta-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.cta-card-primary .cta-icon {
    color: white;
}

.cta-card-secondary {
    border-color: #e9ecef;
    background: white;
    color: var(--bs-dark);
}

.cta-card-secondary .cta-icon {
    color: var(--primary);
}

.cta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.cta-card-primary:hover {
    background: linear-gradient(135deg, #5ab2a2 0%, var(--primary) 100%);
    border-color: #5ab2a2;
}

.cta-card-secondary:hover {
    border-color: var(--primary);
    background: #f8f9fa;
}

.cta-card-secondary:hover .cta-title,
.cta-card-secondary:hover .fas.fa-arrow-right {
    color: var(--primary);
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .enrollment-section__wrapper {
        margin: 2rem !important;
    }
    
    .image-container img {
        height: 450px;
    }
}

@media (max-width: 991.98px) {
    .enrollment-section {
        min-height: auto;
    }
    
    .enrollment-section__image {
        min-height: 400px;
        order: -1;
    }
    
    .enrollment-section__content {
        min-height: auto;
    }
    
    .image-container {
        max-width: 400px;
    }
    
    .image-container img {
        height: 350px;
    }
    
    .enrollment-section__wrapper {
        margin: 1.5rem !important;
    }
    
    .enrollment-section-title {
        /* font-size: 3rem !important; */
    }
}

@media (max-width: 767.98px) {
    .enrollment-section__image img {
        height: 300px !important;
    }
    
    .enrollment-section-title {
        /* font-size: 2.5rem !important; */
    }
    
    .enrollment-section__wrapper {
        margin: 1rem !important;
        padding: 2rem 1.5rem !important;
    }
    
    .enrollment-section__text {
        /* font-size: 1.1rem !important; */
    }
    
    .cta-card {
        min-height: 90px;
        padding: 1.5rem !important;
   }
}

@media (max-width: 575.98px) {
    .enrollment-section__feature-item {
        padding: 1rem !important;
    }
    
    .image-container img {
        height: 250px !important;
    }
    
    .enrollment-section__wrapper {
        margin: 0.5rem !important;
        padding: 1.5rem 1rem !important;
    }
}

/* Philosophy Section - Scoped Styles */
.philosophy-section {
  background: var(--white);
}

.philosophy-section__image {
  min-height: 500px;
  position: relative;
}

.philosophy-section__wrapper {
  /* max-width: 540px;
  margin: 0 auto; */
}

.philosophy-section__features .philosophy-section__feature-item {
  padding: 0.5rem 0;
}

.philosophy-section__features .philosophy-section__feature-item span {
  color: var(--dark-teal);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .philosophy-section__image {
    min-height: 400px;
  }

  .philosophy-section__wrapper {
    text-align: center;
    /* padding: 2rem !important; */
  }
}
/* Special Kindergarten Elements */
.kindergarten-text {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--secondary-purple);
}

.playful-text {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--primary-yellow);
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.child-friendly-text {
  /* font-size: var(--font-size-lg); */
  line-height: var(--line-height-loose);
  letter-spacing: 0.5px;
}
/* Hero Section */
.shared-bg {
  /* padding: 80px 0;
  background: linear-gradient(
      135deg,
      rgba(26, 188, 156, 0.8) 0%,
      rgba(26, 188, 156, 0.6) 100%
    ),
    url("https://scontent.fkul15-1.fna.fbcdn.net/v/t51.82787-15/527469112_18035682881676425_4968869966235324112_n.webp?stp=dst-jpg_tt6&_nc_cat=105&ccb=1-7&_nc_sid=127cfc&_nc_ohc=38zZ0BGGW-QQ7kNvwE742zk&_nc_oc=Adn1Le4Tt9TlPWgWzsdwFQwic960phMScelUui-XshULnbAMRDOoD0IPUwRS7ZhmCfW189YHEo4WUDoqQv_dTRWV&_nc_zt=23&_nc_ht=scontent.fkul15-1.fna&_nc_gid=W5vStk6OaO5-v0hzQgkP_Q&oh=00_AfgMo9lbi1RTyITi5dHWWTqTUTGavO1iFXvOQKyKzuImkA&oe=69247019"); */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

    /* Hero Video Background Section */
.hero-video-section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
}

.video-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Play Trigger Button */
.play-fullscreen-trigger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.play-fullscreen-trigger:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.play-icon-container {
    font-size: 3rem;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.play-fullscreen-trigger:hover .play-icon-container {
    transform: scale(1.1);
}

.play-text {
    font-size: 1.1rem;
    font-weight: 600;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Video Modal */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.video-modal.active {
    display: flex;
}

.video-modal-content {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.video-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.video-modal-header h3 {
    margin: 0;
    color: #333;
}

.close-modal {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #333;
}

.video-modal-body {
    padding: 0;
}

.modal-video {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .play-icon-container {
        font-size: 2.5rem;
    }
    
    .video-modal-content {
        width: 95%;
        margin: 20px;
    }
}
/* Section Styles */
.section {
  padding: 80px 0;
}

.section-light {
  background-color: var(--light-gray);
}

.section-orange {
  background-color: var(--secondary-orange-light);
}

.section-title {
  color: var(--secondary-purple);
  margin-bottom: 3rem;
  text-align: center;
}

/* Feature Cards */
.feature-card {
  background-color: var(--white);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-card .card-img-top {
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s;
}

.feature-card:hover .card-img-top {
  transform: scale(1.05);
}

.feature-card .card-body {
  padding: 25px;
}

.feature-card .card-title {
  color: var(--secondary-purple);
  margin-bottom: 15px;
}

.link-more {
  color: var(--secondary-blue);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.link-more::after {
  content: "→";
  margin-left: 5px;
  transition: transform 0.3s;
}

.link-more:hover::after {
  transform: translateX(5px);
}

/* Gateway Sections */
.gateway-section {
  padding: 80px 0;
}

.gateway-img {
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.gateway-content {
  padding: 0 40px;
}

.gateway-content .heading {
  color: var(--secondary-green);
  /* font-size: 1.2rem; */
  margin-bottom: 10px;
}

.gateway-content .title {
  color: var(--secondary-purple);
  /* font-size: 2.2rem; */
  margin-bottom: 20px;
}

.gateway-content .inner-content p {
  margin-bottom: 25px;
  /* font-size: 1.1rem; */
}
/* News Section */
.news-card {
  background-color: var(--white);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.news-card .card-img-top {
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s;
}

.news-card:hover .card-img-top {
  transform: scale(1.05);
}

.news-card .card-body {
  padding: 20px;
}

.news-card .card-title {
  color: var(--secondary-purple);
  margin-bottom: 10px;
}

.news-date {
  color: var(--secondary-blue);
  /* font-size: 0.9rem; */
}
/* Fix for stretched-link issue */
.card-footer {
  position: relative;
  z-index: 5;
}
/* Pagination Styles */
.pagination {
  margin-bottom: 0;
}

.page-link {
  color: var(--secondary-purple);
  border: 1px solid #dee2e6;
  padding: 0.5rem 1rem;
}

.page-link:hover {
  color: var(--white);
  background-color: var(--secondary-purple);
  border-color: var(--secondary-purple);
}

.page-item.active .page-link {
  background-color: var(--secondary-purple);
  border-color: var(--secondary-purple);
  color: white;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

/* Filter Section */
.news-filters {
  border-bottom: 1px solid #e9ecef;
}

.search-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.category-filter .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Category Badge */
.card-category-overlay {
  /* font-size: 0.75rem; */
  font-weight: 500;
}

/* Active Filters */
.active-filters .badge {
  /* font-size: 0.75rem; */
  padding: 0.35em 0.65em;
}

/* Results Info */
.results-info {
  /* font-size: 0.9rem; */
}

/* Single News */
.post-navigation a {
    color: var(--bs-primary) !important;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.post-navigation a:hover {
    color: var(--bs-dark) !important;
}
/* Directory Section */
.section.directory {
  padding: 4rem 0;
  background-color: #f8f9fa;
}

.category-card {
  /* background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 2rem;
    height: 100%;
    transition: transform 0.3s ease; */
}

.category-card:hover {
  /* transform: translateY(-5px); */
}

.category-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 5px solid;
}

.category-title {
  font-weight: 700;
  color: var(--bs-dark);
  margin-bottom: 0.5rem;
}

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

.submenu-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.submenu-item:last-child {
  border-bottom: none;
}

.submenu-link {
  color: #333;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.submenu-link:hover {
  color: var(--primary-teal);
  padding-left: 0.5rem;
}

.submenu-link i {
  margin-right: 0.75rem;
  width: 20px;
  text-align: center;
}

/* Category Colors */
.category-about .category-header {
  border-color: var(--primary-teal);
}

.category-learning .category-header {
  border-color: var(--secondary-blue);
}

.category-community .category-header {
  border-color: var(--secondary-green);
}

.category-enrolment .category-header {
  border-color: var(--primary-yellow);
}

/* .category-governance {
    background: linear-gradient(135deg, #4A235A 0%, #6C3483 100%);
    border-left: 4px solid #8E44AD;
} */

.category-governance .category-header {
    border-color: var(--secondary-purple);
}

/* .category-governance .submenu-link:hover {
    background: rgba(142, 68, 173, 0.2);
    border-left-color: #8E44AD;
} */
.fade-in {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* SVG Animation */
.text {
  fill: var(--secondary-purple);
  transform-origin: center;
  animation: rotate-text 20s linear infinite;
}

@keyframes rotate-text {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .gateway-content {
    padding: 40px 0 0;
    text-align: center;
  }

  .hero-section h1 {
    /* font-size: 2.8rem; */
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 80px 0;
  }

  .hero-section h1 {
    /* font-size: 2.2rem; */
  }

  .hero-section p {
    /* font-size: 1.1rem; */
  }

  .section {
    padding: 60px 0;
  }

  .section-title {
    /* font-size: 1.8rem; */
  }

  .gateway-content .title {
    /* font-size: 1.8rem; */
  }
}

@media (max-width: 576px) {
  .hero-section h1 {
    /* font-size: 1.8rem; */
  }
}

/* About */
.transition-hover:hover {
    transform: translateY(-5px);
}
.transition-hover {
    transition: all 0.3s ease;
}

/* Timeline responsive design */
.timeline-item:nth-child(odd) .timeline-content-wrapper {
    padding-right: 2rem;
}

.timeline-item:nth-child(even) .timeline-content-wrapper {
    padding-left: 2rem;
}

/* Hover effects */
.timeline-content {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.timeline-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    border-color: var(--primary-teal);
}

/* Mobile responsiveness */
@media (max-width: 992px) {
    .timeline-item:nth-child(odd) .timeline-content-wrapper,
    .timeline-item:nth-child(even) .timeline-content-wrapper {
        padding-left: 2rem;
        padding-right: 0;
    }
    
    .timeline-content {
        margin-left: 1rem;
    }
    
    .display-5 {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .timeline-item:nth-child(odd) .timeline-content-wrapper,
    .timeline-item:nth-child(even) .timeline-content-wrapper {
        padding-left: 1.5rem;
    }
    
    .timeline-content {
        margin-left: 0.5rem;
        padding: 1.5rem !important;
    }
    
    .display-5 {
        font-size: 1.75rem !important;
    }
}

/* Contact Form */

 /* CF7 Bootstrap Styling */
.wpcf7-form-wrapper {
    width: 100%;
}

.wpcf7-form-wrapper .row {
    margin-bottom: 1rem;
}

.wpcf7-form-wrapper .form-label {
    /* display: block;
    margin-bottom: 0.5rem; */
    font-weight: 600;
}

.wpcf7-form-wrapper .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

.wpcf7-form-wrapper .wpcf7-form-control {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wpcf7-form-wrapper select.wpcf7-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* Checkbox styling - FIXED */
.wpcf7-form-wrapper .form-check {
    margin: 1.5rem 0;
    padding: 0;
}

.wpcf7-form-wrapper .wpcf7-acceptance .wpcf7-list-item {
    margin: 0 !important;
}

.wpcf7-form-wrapper .wpcf7-acceptance .wpcf7-list-item label {
    display: flex !important;
    align-items: flex-start !important;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
    padding: 0;
    color: #6c757d;
}

.wpcf7-form-wrapper .wpcf7-acceptance input[type="checkbox"] {
    margin-right: 10px !important;
    margin-top: 0.25em !important;
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

.wpcf7-form-wrapper .wpcf7-acceptance .wpcf7-list-item-label {
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Submit button */
.wpcf7-form-wrapper .wpcf7-submit {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.wpcf7-form-wrapper .wpcf7-submit:hover {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Validation Styles */
.wpcf7-form-wrapper .wpcf7-not-valid-tip {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

.wpcf7-form-wrapper .wpcf7-not-valid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3circle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.wpcf7-form-wrapper .wpcf7-response-output {
    margin: 1.5rem 0 0 !important;
    padding: 1rem !important;
    border-radius: 0.375rem !important;
}

/* Footer - Mobile & Tablet Compatibility */
.main-footer {
  background-color: var(--dark-teal);
  color: var(--white);
  padding: 60px 0 30px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0; /* Ensure no extra margin */
}

/* Colorful Stripes */
.footer-stripes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  display: flex;
  z-index: 1;
}

.stripe {
  flex: 1;
  height: 100%;
}

.stripe-teal {
  background-color: var(--primary-teal);
}
.stripe-yellow {
  background-color: var(--primary-yellow);
}
.stripe-orange {
  background-color: var(--secondary-orange);
}
.stripe-green {
  background-color: var(--secondary-green);
}
.stripe-blue {
  background-color: var(--secondary-blue);
}
.stripe-purple {
  background-color: var(--secondary-purple);
}

/* Body padding adjustment for bottom menu */
body {
  font-family: var(--font-body);
  /* font-size: var(--font-size-base); */
  line-height: var(--line-height-loose);
  font-weight: 400;
  color: var(--dark-teal);
  /* padding-bottom: 80px; Space for bottom menu - increased for safety */
}

.footer-stripes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  display: flex;
}

.stripe {
  flex: 1;
  height: 100%;
}

.stripe-teal {
  background-color: #1abc9c;
}
.stripe-yellow {
  background-color: #f1c40f;
}
.stripe-orange {
  background-color: #e67e22;
}
.stripe-green {
  background-color: #2ecc71;
}
.stripe-blue {
  background-color: #3498db;
}
.stripe-purple {
  background-color: #9b59b6;
}

.footer-logo {
  max-height: 80px;
  width: auto;
}

.footer-contact p {
  margin-bottom: 0.5rem;
}

/* Footer contact link hover effects */
.footer-contact a {
    transition: all 0.3s ease;
}

.footer-contact a:hover {
    color: var(--primary-teal) !important;
    transform: translateX(5px);
}

/* Footer social links hover effects */
.footer-social-links a {
    transition: all 0.3s ease;
}
.footer-social-links {
  margin-top: 1.5rem;
}

.footer-social-links a {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.footer-social-links a:hover {
  background-color: #1abc9c;
  transform: translateY(-3px);
}

.footer-copyright {
  border-top: 1px solid #dee2e6;
  padding-top: 1.5rem;
  margin-top: 1rem;
}

.footer-copyright .footer-link {
  color: #ecf0f1;
  text-decoration: none;
}

.footer-copyright .footer-link:hover {
  color: #1abc9c;
  text-decoration: underline;
}

.copyright_text {
  color: #bdc3c7;
}

.developer-logo img:hover {
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .footer-logo {
    max-height: 80px;
  }
}

@media (max-width: 991px) {
  .footer-content {
    padding-bottom: 2rem;
  }
  .footer-copyright p {
    flex-direction: column;
    gap: 0.5rem;
  }

  .developer-logo {
    border-left: none;
    padding-left: 0;
    margin-top: 0.5rem;
    border-top: 1px solid #dee2e6;
    border-left: none;
    padding-top: 0.5rem;
    width: 100%;
    justify-content: center;
  }

  .footer-copyright span[aria-hidden="true"] {
    display: none;
  }

  .footer-link {
    margin: 0 0.25rem;
  }
}

/* Remove text underline for all links on hover and active states */
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* Specific for footer links */
.footer-link:hover,
.footer-link:focus,
.footer-link:active {
    text-decoration: none !important;
}

/* Specific for submenu links */
.submenu-link:hover,
.submenu-link:focus,
.submenu-link:active {
    text-decoration: none !important;
}

/* Specific for social links */
.footer-social-links a:hover,
.footer-social-links a:focus,
.footer-social-links a:active {
    text-decoration: none !important;
}

/* Specific for contact links */
.footer-contact a:hover,
.footer-contact a:focus,
.footer-contact a:active {
    text-decoration: none !important;
}

/* Breadcrumb links */
.breadcrumb-item a:hover,
.breadcrumb-item a:focus,
.breadcrumb-item a:active {
    text-decoration: none !important;
}

/* Card title links */
.card-title a:hover,
.card-title a:focus,
.card-title a:active {
    text-decoration: none !important;
}

/* Category card links */
.category-title a:hover,
.category-title a:focus,
.category-title a:active {
    text-decoration: none !important;
}

/* Button links */
.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none !important;
}

/* Navigation links */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
    text-decoration: none !important;
}
/* Ensure bottom menu stays at bottom and doesn't overlap */
.mobile-bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1030;
  padding: 10px 0;
  border-top: 1px solid var(--light-gray);
}

/* Optional: Add subtle background to indicate reserved space */
@media (max-width: 991px) {
  .mobile-bottom-menu {
    background: var(--white);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* welcome page */
.page-header {
    position: relative;
    overflow: hidden;
}

.page-header img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Add translucent color overlay using pseudo-element */
.page-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Black with 30% opacity */
    z-index: 2;
}

.page-header .container {
    position: relative;
    z-index: 3;
}

.object-fit-cover {
    object-fit: cover;
}

/* Ensure the section has proper height */
.page-header {
    /* min-height: 400px; */
    display: flex;
    align-items: center;
}

/* Responsive height adjustments */
@media (max-width: 768px) {
    .page-header {
        min-height: 300px;
    }
    
    .page-header h1 {
        /* font-size: 2.5rem !important; */
    }
    
    .page-header .lead {
        /* font-size: 1.2rem !important; */
    }
}

.principal-photo-wrapper {
    position: relative;
}

.quote-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}



/* Colorful Scrollbar - Cross Browser */
/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--bs-dark);
  border-radius: 10px;
  border: 2px solid var(--white);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-dark);
  transform: scale(1.1);
}

/* For Firefox */
html {
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: var(--bs-dark) transparent; /* thumb track */
}

/* Optional: For better Firefox hover effect */
html:hover {
  scrollbar-color: var(--bs-dark) transparent;
}

/* Colorful Scrollbar - Enhanced Cross-Browser */
/* WebKit Browsers */
@media (hover: hover) and (pointer: fine) {
  /* Only show custom scrollbar on devices with fine pointer (not touch) */
  ::-webkit-scrollbar {
    width: 10px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: var(--bs-dark);
    border-radius: 10px;
    border: 2px solid var(--white);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--bs-dark);
    transform: scale(1.1);
  }
}

/* Firefox */
@supports (scrollbar-color: auto) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-dark) transparent;
  }
}

/* Fallback for browsers that don't support custom scrollbars */
/* This ensures basic scrollbar functionality everywhere */
.scroll-container {
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}