:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}
/* Remove duplicated html/body styles - these are now in App.css */
/* .navbar-container {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100%;
  max-width: 100%;
} */

/* Completely redo navbar container to fix width issues */
.navbar-container {
  position: sticky;
  top: 0;
  z-index: 10000;
  width: 100vw; /* Use viewport width units */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}



.navbar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw; /* Use viewport width units */
  max-width: 100vw; /* Match viewport width */
  background-color: #2c3e50;
  color: #fff;
  display: flex;
  justify-content: space-between; /* Space out logo, links, and contact info */
  align-items: center;
  padding: 10px 20px;
  box-sizing: border-box; /* Include padding in the width calculation */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin: 0;
  height: 100px;
  z-index: 10000;
}
li {
  white-space: nowrap; /* Prevents the text from breaking */
}

a {
  white-space: nowrap; /* Ensure the <Link> text stays on one line */
  display: inline-block; /* Ensures the link text behaves properly */
}

.navbar-logo img {
  max-width: 100%; /* Ensure the image scales proportionally */
  max-height: 100%; /* Prevent the image from overflowing its container */
  width: auto; /* Explicitly set width */
  height: auto; /* Maintain aspect ratio */
  margin-right: 50px;
  max-height: 50px;
}

.navbar-links {
  list-style: none;
  display: flex;
  gap: 50px;
  flex-wrap: wrap;
  justify-content: center;
}

.navbar-links li {
  display: inline-block;
  margin-right: auto;
  margin-left: auto;
}

.navbar-links a {
  text-decoration: none;
  color: #ecf0f1;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: bold;
  transition: color 0.3s ease;
}

.navbar-links a:hover {
  color: #3498db;
}

.navbar-contact {
  flex: 0.8; /* Keeps this section flexible relative to others */
  text-align: right; /* Align text to the right within the section */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 5%;
  margin-left: auto;
  margin-right: auto;
}

.contact-phone {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
}

.contact-address {
  margin: 0;
  font-size: 12px;
  color: #bdc3c7;
}


/* Hamburger Menu (hidden by default) */
.hamburger-menu {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  margin-left: auto;
  outline: none;
}
.hamburger-menu:focus,
.hamburger-menu:active {
  outline: none; /* Removes default outline */
  background: none; /* Ensures no background color change */
  box-shadow: none; /* Removes any default shadows */
}

.social-links {
  margin-top: 1vh;
  gap: 20px;
}

.social-icon {
  font-size: 24px;
  color: #fff;
  transition: color 0.3s ease;
  gap: 20px;
}

.social-icon:hover {
  color: #3498db;
}

.more-tab {
  position: relative;
}
.more-button {
  background: none;
  border: none;
  color: #ecf0f1;
  font-size: clamp(14px, 2vw, 16px);
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.3s ease;
}
.more-button:hover,
.more-button:focus {
  color: #3498db;
  outline: none;
}
.more-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  width: auto;
  background: #2c3e50;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-radius: 0 0 6px 6px;
  z-index: 10010;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: visible;
  white-space: normal;
}
.more-dropdown.show {
  display: block;
}
.more-dropdown li {
  width: 100%;
}
.more-dropdown a {
  display: block;
  padding: 12px 20px;
  color: #ecf0f1;
  text-decoration: none;
  font-size: 16px;
  transition: background 0.2s, color 0.2s;
}
.more-dropdown a:hover {
  background: #34495e;
  color: #3498db;
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar-links {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background-color: #2c3e50;
    padding: 0;
    text-align: center;
    z-index: 10002;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    transition: transform 0.3s ease;
  }

  .navbar-links.active {
    display: flex;
  }

  .navbar-links li {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
  }

  .navbar-links a, .navbar-links .more-button {
    display: block;
    width: 100%;
    padding: 18px 0;
    font-size: 18px;
    border-bottom: 1px solid #34495e;
    background: none;
    color: #ecf0f1;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
  }
  .navbar-links a:last-child, .navbar-links .more-button:last-child {
    border-bottom: none;
  }
  .navbar-links a:hover, .navbar-links .more-button:hover {
    background: #34495e;
    color: #3498db;
  }

  .navbar-contact {
    display: none;
  }

  /* Adjust hamburger menu */
  .hamburger-menu {
    display: block;
    position: absolute;
    margin-left: 30vw;
    z-index: 10003;
  }

  /* Overlay for mobile menu */
  .mobile-navbar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
  }
  .mobile-navbar-overlay.active {
    display: block;
  }

  .more-tab {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }
  .more-button {
    width: 100%;
    text-align: center;
  }
  .more-dropdown {
    position: static;
    min-width: 100vw;
    box-shadow: none;
    border-radius: 0;
    background: #2c3e50;
    z-index: 10004;
    display: none;
  }
  .more-dropdown.show {
    display: block;
  }
  .more-dropdown a {
    font-size: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #34495e;
  }
  .more-dropdown a:last-child {
    border-bottom: none;
  }
}

/* Freeze scroll on body when mobile menu is open */
body.mobile-navbar-open {
  overflow: hidden !important;
  position: fixed;
  width: 100vw;
}

.mobile-more-backdrop {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  z-index: 11000;
  pointer-events: auto;
}
.mobile-more-dropdown {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -10%);
  min-width: 80vw;
  background: #2c3e50;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 11001;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  pointer-events: auto;
}
.mobile-more-dropdown li {
  width: 100%;
}
.mobile-more-dropdown a {
  display: block;
  width: 100%;
  padding: 18px 0;
  font-size: 18px;
  color: #ecf0f1;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #34495e;
  background: none;
  transition: background 0.2s, color 0.2s;
  pointer-events: auto;
}
.mobile-more-dropdown a:last-child {
  border-bottom: none;
}
.mobile-more-dropdown a:hover {
  background: #34495e;
  color: #3498db;
}

.mobile-more-link {
  display: block;
  width: 100%;
  padding: 18px 0;
  font-size: 18px;
  color: #ecf0f1;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  border: none;
  border-bottom: 1px solid #34495e;
  background: none;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.mobile-more-link:last-child {
  border-bottom: none;
}
.mobile-more-link:hover {
  background: #34495e;
  color: #3498db;
}
/**
 * Swiper 11.2.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 10, 2025
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
/* AchievementsCarousel.css */
.carousel-container {
  width: 100%;
  max-width: 100vw;
  position: relative;
  z-index: 1; /* Lower z-index to ensure navbar menu appears above */
}

.swiper-container {
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel-image {
  width: 50%;
  max-width: 100%; /* Prevent oversized images */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure full image is visible */
  border-radius: 10px;
  background-color: transparent; /* Ensure it's not black */
}

/* Adjust carousel content for better readability */
.carousel-content {
  text-align: center;
  padding: 0 10px;
}

.carousel-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.carousel-description {
  font-size: 0.9rem;
  color: #222222;
  max-width: 80%;
  margin: auto;
}

/* Swiper Navigation */
.swiper-button-prev, 
.swiper-button-next {
  color: #007bff; /* Blue arrows */
}

.swiper-pagination-bullet {
  background-color: #007bff; /* Blue pagination dots */
}
.carousel-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 10px;
}
/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .carousel-container {
    margin-top: 20%;
    margin-left: auto;
    margin-right: auto;
  }

  .carousel-image {
    width: 80%; /* Make images larger for better visibility on small screens */
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }

  .carousel-title {
    font-size: 1rem; /* Reduce title size slightly */
    margin-left: auto;
    margin-right: auto;
  }

  .carousel-description {
    font-size: 0.8rem; /* Reduce text size for better fit */
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .swiper-button-prev, 
  .swiper-button-next {
    display: none; /* Hide navigation arrows for better usability on mobile */
  }
}html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}
.programs-section {
    padding: 50px 20px;
    background-color: #f9f9f9;
    text-align: center;
  }
  
  .section-heading {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #2c3e50;
  }
  
  .programs-list {
    display: flex;
    flex-direction: column;
    gap: 40px; 
    align-items: center;
  }
  
  .program-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1000px;
  }
  
  .program-image {
    width: 100px;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 20px; /* Space between image and text */
    margin-left: 5%;
  }
  
  .program-text {
    text-align: right;
  }
  
  .program-text h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #34495e;
    margin-right: 5%;
  }
  
  .program-text p {
    font-size: 16px;
    color: #2a2a2a;
    margin-right: 5%;
  }
  
  @media (max-width: 768px) {
    .programs-list {
      gap: 20px;
    }
  
    .program-item {
      flex-direction: column;
      align-items: center;
      margin-left: auto;
      margin-right: auto;
    }
  
    .program-image {
      margin-right: 0;
      margin-bottom: 10px;
    }
  
    .program-text {
      text-align: center;
      padding-left: 30px;
      padding-right: 40px;
    }
  }.camps-section {
    padding: 50px 20px;
    background-color: #f2f2f2;
    text-align: center;
  }
  
  .camps-heading {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #2c3e50;
  }
  
  .camps-list {
    display: flex;
    flex-wrap: wrap; /* Ensures camps wrap to the next line if needed */
    gap: 150px;
    justify-content: center; /* Centers the camp items horizontally */
  }
  
  .camp-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px; /* Set a fixed width for uniform layout */
    text-align: center;
  }
  
  .camp-image {
    width: 100%;
    height: auto; /* Adjust the height for consistency */
    object-fit: cover; /* Ensures images fill the container without distortion */
    border-radius: 8px;
    margin-bottom: 15px;
  }
  
  .camp-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #34495e;
  }
  
  .camp-date-range,
  .camp-times,
  .camp-age-range {
    margin: 5px 0;
    font-size: 16px;
    color: #7f8c8d;
  }
  
  .camps-button-container {
    margin-top: 30px;
  }
  
  .camps-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background-color: #3498db;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .camps-button:hover {
    background-color: #2980b9;
  }
  html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Ensure Tabs stay below the Navbar */
.tabs-container {
  display: flex;
  justify-content: center;
  background-color: #e0e0e0;
  border-bottom: 2px solid #ccc;
  width: 100vw;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  position: relative; /* Ensure it doesn't overlap */
}

/* Tab Buttons */
.tab-button {
  background-color: #e0e0e0;
  border: none;
  padding: 15px 25px;
  font-size: clamp(1rem, 1.8vw, 1.2rem); /* Dynamically scale text */
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  white-space: nowrap; /* Prevents wrapping */
}

.tab-button.active {
  background-color: #ffffff;
  color: #0a74da;
  font-weight: bold;
  border-bottom: 2px solid #ffffff;
}

.tab-button:hover {
  background-color: #d1d1d1;
}

/* Section headers */
.subject-header {
  text-align: center;
  margin-bottom: 30px;
}

.subject-title {
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  color: #0a74da;
}

.subject-divider {
  width: 120px;
  height: 4px;
  background-color: #f36a1b;
  margin: 0 auto;
  border-radius: 2px;
  border: none;
}

/* Default Grid Layout - Desktop (Three Columns) */
.level-grid.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 20px 60px;
}

/* Level Item Styling */
.level-item {
  background-color: #010101;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.level-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Image Container */
.level-image-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.level-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.level-item:hover .level-image {
  transform: scale(1.05);
}

.level-content {
  padding: 20px;
}

.level-title {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  color: #0a74da;
  margin-bottom: 10px;
}

.level-description {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: #232222;
  line-height: 1.6;
}

.info-session {
  text-align: center;
}

h4 {
  color:#0a74da;
}
a {
  color: #f36a1b;
}

/* ✅ RESPONSIVE DESIGN */

/* 🔹 Fix Layout Between 1000px - 1200px */
@media (max-width: 1200px) {
  .level-grid.three-column-grid {
    grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns */
    padding: 20px 40px;
    gap: 25px;
  }
}

/* 🔹 Medium-Sized Screens (768px - 1024px) */
@media (max-width: 1024px) {
  .level-grid.three-column-grid {
    grid-template-columns: repeat(2, 1fr); /* Change to 2 columns */
    padding: 20px;
    gap: 20px;
  }

  .level-image-container {
    height: 250px; /* Adjust image height */
  }

  .tabs-container {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* 🔹 Mobile-Friendly Adjustments (Below 768px) */
@media (max-width: 768px) {
  .tabs-container {
    flex-direction: column; /* Stack tabs on top of each other */
    align-items: center;
  }

  .tab-button {
    padding: 10px 15px;
    font-size: 1rem;
    width: 100%; /* Full width tabs */
  }

  .level-grid.three-column-grid {
    grid-template-columns: repeat(1, 1fr); /* Switch to single-column */
    padding: 15px;
    gap: 15px;
  }

  .level-item {
    max-width: 90%; /* Prevents too much stretching */
    margin: auto;
  }

  .level-image-container {
    height: 200px;
  }
}

/* 🔹 Extra Small Screens (Below 480px) */
@media (max-width: 480px) {
  .subject-title {
    font-size: 1.8rem; /* Further reduce font size */
  }

  .tab-button {
    font-size: 0.9rem;
    padding: 10px;
  }

  .level-image-container {
    height: 180px;
  }

  .level-title {
    font-size: 1.1rem;
  }

  .level-description {
    font-size: 0.9rem;
  }
}
:root{--rpv-core__annotation--link-hover-background-color: rgba(255, 255, 0, 0.2);--rpv-core__annotation-popup-wrapper-background-color: #faf089;--rpv-core__annotation-popup-wrapper-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--rpv-core__annotation-popup-content-border-top-color: #1a202c;--rpv-core__arrow-border-color: rgba(0, 0, 0, 0.3);--rpv-core__asking-password-color: #000;--rpv-core__asking-password-wrapper-background-color: #fff;--rpv-core__asking-password-wrapper-border-color: rgba(0, 0, 0, 0.3);--rpv-core__button-background-color: rgba(0, 0, 0, 0.3);--rpv-core__button-color: #000;--rpv-core__doc-error-background-color: #fff;--rpv-core__doc-error-text-background-color: #c02424;--rpv-core__doc-error-text-color: #fff;--rpv-core__doc-loading-background-color: #fff;--rpv-core__full-screen-target-background-color: #fff;--rpv-core__inner-page-background-color: #fff;--rpv-core__menu-divider-border-bottom-color: rgba(0, 0, 0, 0.3);--rpv-core__menu-item-color: #000;--rpv-core__menu-item--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-core__menu-item--disabled-color: rgba(0, 0, 0, 0.3);--rpv-core__minimal-button-color: #000;--rpv-core__minimal-button--hover-background-color: rgba(0, 0, 0, 0.1);--rpv-core__minimal-button--disabled-color: rgba(0, 0, 0, 0.3);--rpv-core__minimal-button--selected-background-color: rgba(0, 0, 0, 0.1);--rpv-core__modal-body-background-color: #fff;--rpv-core__modal-body-border-color: rgba(0, 0, 0, 0.3);--rpv-core__modal-overlay-background-color: rgba(0, 0, 0, 0.5);--rpv-core__page-layer-box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);--rpv-core__popover-body-background-color: #fff;--rpv-core__popover-body-border-color: rgba(0, 0, 0, 0.3);--rpv-core__popover-body-color: #000;--rpv-core__primary-button-background-color: #2566e8;--rpv-core__primary-button-color: #fff;--rpv-core__progress-bar-background-color: rgba(0, 0, 0, 0.1);--rpv-core__progress-bar-progress-background-color: #2566e8;--rpv-core__progress-bar-progress-color: #fff;--rpv-core__separator-border-bottom-color: rgba(0, 0, 0, 0.3);--rpv-core__spinner-border-color: rgba(0, 0, 0, 0.4);--rpv-core__spinner-border-transparent-color: transparent;--rpv-core__splitter-background-color: transparent;--rpv-core__splitter--hover-background-color: rgba(0, 0, 0, 0.2);--rpv-core__text-layer-text--selection-background-color: rgb(0, 0, 255, 1);--rpv-core__text-layer-text--selection-color: transparent;--rpv-core__textbox-background-color: #fff;--rpv-core__textbox-border-color: rgba(0, 0, 0, 0.2);--rpv-core__textbox-color: #000;--rpv-core__tooltip-body-background-color: #000;--rpv-core__tooltip-body-color: #fff}.rpv-core__viewer--dark{--rpv-core__asking-password-background-color: #363636;--rpv-core__asking-password-color: #fff;--rpv-core__asking-password-wrapper-border-color: #191919;--rpv-core__asking-password-wrapper-background-color: #191919;--rpv-core__button-background-color: #171717;--rpv-core__button-color: #fff;--rpv-core__doc-error-background-color: #191919;--rpv-core__doc-error-text-background-color: #c02323;--rpv-core__doc-error-text-color: #fff;--rpv-core__doc-loading-background-color: #191919;--rpv-core__full-screen-target-background-color: #1a1a1a;--rpv-core__inner-page-background-color: #1a1a1a;--rpv-core__menu-divider-border-bottom-color: #000;--rpv-core__menu-item-color: #fff;--rpv-core__menu-item--hover-background-color: #2566e8;--rpv-core__menu-item--disabled-color: #5e5e5e;--rpv-core__minimal-button-color: #fff;--rpv-core__minimal-button--disabled-color: #5e5e5e;--rpv-core__minimal-button--hover-background-color: #191919;--rpv-core__minimal-button--selected-background-color: #1657bb;--rpv-core__modal-body-background-color: #363636;--rpv-core__primary-button-background-color: #2566e8;--rpv-core__popover-body-background-color: #363636;--rpv-core__popover-body-color: #fff;--rpv-core__progress-bar-background-color: #000;--rpv-core__separator-border-bottom-color: #000;--rpv-core__spinner-border-color: #fff;--rpv-core__splitter-background-color: #1a1a1a;--rpv-core__splitter--hover-background-color: #2566e8;--rpv-core__textbox-background-color: #121212;--rpv-core__textbox-border-color: #121212;--rpv-core__textbox-color: #fff;--rpv-core__tooltip-body-background-color: #414141;--rpv-core__tooltip-body-color: #fff}.rpv-core__annotation{position:absolute}.rpv-core__annotation-layer{z-index:1}.rpv-core__arrow{border-bottom:1px solid var(--rpv-core__arrow-border-color);border-left-color:var(--rpv-core__arrow-border-color);border-right:1px solid var(--rpv-core__arrow-border-color);border-top-color:var(--rpv-core__arrow-border-color);height:10px;position:absolute;width:10px;z-index:0}.rpv-core__arrow--tl{bottom:0;left:0;transform:translate(50%, 50%) rotate(45deg)}.rpv-core__arrow--tc{bottom:0;left:50%;transform:translate(-50%, 50%) rotate(45deg)}.rpv-core__arrow--tr{bottom:0;right:0;transform:translate(-50%, 50%) rotate(45deg)}.rpv-core__arrow--rt{left:0;top:0;transform:translate(-50%, 50%) rotate(135deg)}.rpv-core__arrow--rc{left:0;top:50%;transform:translate(-50%, -50%) rotate(135deg)}.rpv-core__arrow--rb{bottom:0;left:0;transform:translate(-50%, -50%) rotate(135deg)}.rpv-core__arrow--bl{left:0;top:0;transform:translate(50%, -50%) rotate(225deg)}.rpv-core__arrow--bc{left:50%;top:0;transform:translate(-50%, -50%) rotate(225deg)}.rpv-core__arrow--br{right:0;top:0;transform:translate(-50%, -50%) rotate(225deg)}.rpv-core__arrow--lt{right:0;top:0;transform:translate(50%, 50%) rotate(315deg)}.rpv-core__arrow--lc{right:0;top:50%;transform:translate(50%, -50%) rotate(315deg)}.rpv-core__arrow--lb{bottom:0;right:0;transform:translate(50%, -50%) rotate(315deg)}.rpv-core__asking-password{background-color:var(--rpv-core__asking-password-background-color);border-radius:.25rem;color:var(--rpv-core__asking-password-color);padding:2rem}.rpv-core__asking-password--rtl{direction:rtl}.rpv-core__asking-password-wrapper{align-items:center;background-color:var(--rpv-core__asking-password-wrapper-background-color);border:1px solid var(--rpv-core__asking-password-wrapper-border-color);display:flex;height:100%;justify-content:center;width:100%}.rpv-core__asking-password-message{margin:.5rem 0}.rpv-core__asking-password-body{align-items:center;display:flex;justify-content:center}.rpv-core__asking-password-input{width:15rem}.rpv-core__asking-password-input--ltr{margin-right:.5rem}.rpv-core__asking-password-input--rtl{margin-left:.5rem}.rpv-core__button{background-color:var(--rpv-core__button-background-color);border:none;border-radius:.25rem;color:var(--rpv-core__button-color);cursor:pointer;height:2rem;padding:0 1rem}.rpv-core__button--rtl{direction:rtl}.rpv-core__canvas-layer{direction:ltr;left:0;position:absolute;overflow:hidden;top:0}.rpv-core__doc-error{align-items:center;background-color:var(--rpv-core__doc-error-background-color);display:flex;justify-content:center;height:100%}.rpv-core__doc-error--rtl{direction:rtl}.rpv-core__doc-error-text{background-color:var(--rpv-core__doc-error-text-background-color);border-radius:.25rem;color:var(--rpv-core__doc-error-text-color);line-height:1.5;max-width:50%;padding:.5rem}.rpv-core__doc-loading{background-color:var(--rpv-core__doc-loading-background-color);align-items:center;display:flex;justify-content:center;height:100%;width:100%;min-height:inherit}.rpv-core__doc-loading--rtl{direction:rtl}.rpv-core__icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1;text-align:center}.rpv-core__icon--rtl{transform:scale(-1, 1)}.rpv-core__inner-container{min-height:inherit}.rpv-core__inner-pages{overflow:auto}.rpv-core__inner-pages--rtl{direction:rtl}.rpv-core__inner-pages--single{overflow:hidden}.rpv-core__inner-page-container--single{overflow:auto}.rpv-core__inner-page{background-color:var(--rpv-core__inner-page-background-color)}.rpv-core__inner-page--single{display:flex;align-items:center;justify-content:center}.rpv-core__inner-page--dual-even{display:flex;align-items:center;justify-content:flex-end}.rpv-core__inner-page--dual-odd{display:flex;align-items:center;justify-content:flex-start}.rpv-core__inner-page--dual-cover{display:flex;align-items:center;justify-content:center}.rpv-core__inner-page--dual-cover-odd{display:flex;align-items:center;justify-content:flex-end}.rpv-core__inner-page--dual-cover-even{display:flex;align-items:center;justify-content:flex-start}.rpv-core__annotation--link a{height:100%;left:0;position:absolute;top:0;width:100%}.rpv-core__annotation--link a:hover{background-color:var(--rpv-core__annotation--link-hover-background-color)}.rpv-core__menu{display:flex;flex-direction:column}.rpv-core__menu--rtl{direction:rtl;text-align:right}.rpv-core__menu-divider{border-bottom:1px solid var(--rpv-core__menu-divider-border-bottom-color);margin:.25rem 0}.rpv-core__menu-item{align-items:center;background-color:rgba(0,0,0,0);color:var(--rpv-core__menu-item-color);border:none;cursor:pointer;display:flex;justify-content:center;padding:.25rem 0;width:100%}.rpv-core__menu-item:focus{background-color:var(--rpv-core__menu-item--hover-background-color);outline:0}.rpv-core__menu-item:hover{background-color:var(--rpv-core__menu-item--hover-background-color)}.rpv-core__menu-item-icon{align-items:center;display:flex}.rpv-core__menu-item-icon--ltr{padding-left:1rem;padding-right:.5rem}.rpv-core__menu-item-icon--rtl{padding-left:.5rem;padding-right:1rem}.rpv-core__menu-item-label{flex-grow:1;flex-shrink:1;white-space:nowrap}.rpv-core__menu-item-label--ltr{padding-right:2rem}.rpv-core__menu-item-label--rtl{padding-left:2rem}.rpv-core__menu-item-check--ltr{padding-right:1rem}.rpv-core__menu-item-check--rtl{padding-left:1rem}.rpv-core__menu-item--disabled{color:var(--rpv-core__menu-item--disabled-color)}.rpv-core__menu-item--disabled:hover{background-color:rgba(0,0,0,0)}.rpv-core__menu-item--ltr{text-align:left}.rpv-core__menu-item--rtl{direction:rtl;text-align:right}.rpv-core__minimal-button{background-color:rgba(0,0,0,0);border:none;border-radius:.25rem;color:var(--rpv-core__minimal-button-color);cursor:pointer;height:2rem;padding:0 .5rem}.rpv-core__minimal-button:hover{background-color:var(--rpv-core__minimal-button--hover-background-color)}.rpv-core__minimal-button--disabled{color:var(--rpv-core__minimal-button--disabled-color)}.rpv-core__minimal-button--rtl{direction:rtl}.rpv-core__minimal-button--selected{background-color:var(--rpv-core__minimal-button--selected-background-color)}.rpv-core__modal-body{background-color:var(--rpv-core__modal-body-background-color);border:1px solid var(--rpv-core__modal-body-border-color);border-radius:.25rem;margin:1rem;max-width:32rem;overflow:auto}.rpv-core__modal-body--rtl{direction:rtl}.rpv-core__modal-overlay{background-color:var(--rpv-core__modal-overlay-background-color);bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999;align-items:center;display:flex;justify-content:center}.rpv-core__page-layer{align-items:center;display:flex;justify-content:center;overflow:visible;position:relative}.rpv-core__page-layer::after{content:"";position:absolute;bottom:.25rem;left:.25rem;right:.25rem;top:.25rem;box-shadow:var(--rpv-core__page-layer-box-shadow)}.rpv-core__page-layer--single{margin:0 auto}.rpv-core__page-size-calculator{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.rpv-core__popover-body{background-color:var(--rpv-core__popover-body-background-color);border:1px solid var(--rpv-core__popover-body-border-color);border-radius:.25rem;color:var(--rpv-core__popover-body-color);left:0;padding:.5rem 0;position:absolute;top:-9999px;z-index:9999}.rpv-core__popover-body-arrow{background-color:var(--rpv-core__popover-body-background-color)}.rpv-core__popover-body--rtl{direction:rtl}.rpv-core__popover-overlay{bottom:0;left:0;position:fixed;right:0;top:0}.rpv-core__annotation-popup-wrapper{background-color:var(--rpv-core__annotation-popup-wrapper-background-color);box-shadow:var(--rpv-core__annotation-popup-wrapper-box-shadow);font-size:.75rem;padding:.25rem;word-break:break-word}.rpv-core__annotation-popup-wrapper--rtl{direction:rtl}.rpv-core__annotation-popup-title{font-weight:600;margin-bottom:.25rem}.rpv-core__annotation-popup-date{font-size:.5rem}.rpv-core__annotation-popup-content{border-top:1px solid var(--rpv-core__annotation-popup-content-border-top-color);padding:.25rem;max-height:16rem;overflow:auto}.rpv-core__primary-button{background-color:var(--rpv-core__primary-button-background-color);border:none;border-radius:.25rem;color:var(--rpv-core__primary-button-color);cursor:pointer;height:2rem;padding:0 1rem}.rpv-core__primary-button--rtl{direction:rtl}.rpv-core__progress-bar{background-color:var(--rpv-core__progress-bar-background-color);border-radius:9999px;padding:.125rem}.rpv-core__progress-bar--rtl{direction:rtl}.rpv-core__progress-bar-progress{align-items:center;background-color:var(--rpv-core__progress-bar-progress-background-color);border-radius:9999px;color:var(--rpv-core__progress-bar-progress-color);display:flex;font-size:.75rem;justify-content:center;height:.75rem}.rpv-core__separator{border-bottom:1px solid var(--rpv-core__separator-border-bottom-color)}.rpv-core__spinner{border-bottom:2px solid var(--rpv-core__spinner-border-transparent-color);border-left:2px solid var(--rpv-core__spinner-border-transparent-color);border-right:2px solid var(--rpv-core__spinner-border-color);border-top:2px solid var(--rpv-core__spinner-border-color);border-radius:9999px}.rpv-core__spinner--animating{animation-duration:.4s;animation-name:rpv-core__spinner-transform;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes rpv-core__spinner-transform{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.rpv-core__splitter{background-color:var(--rpv-core__splitter-background-color);cursor:ew-resize;height:100%;width:.25rem}.rpv-core__splitter:hover,.rpv-core__splitter--resizing{cursor:col-resize;background-color:var(--rpv-core__splitter--hover-background-color)}.rpv-core__splitter-body--resizing{cursor:col-resize}.rpv-core__splitter-sibling--resizing{pointer-events:none;user-select:none}.rpv-core__textbox{background-color:var(--rpv-core__textbox-background-color);border:1px solid var(--rpv-core__textbox-border-color);box-sizing:border-box;border-radius:.25rem;color:var(--rpv-core__textbox-color);padding:0 .5rem;height:2rem;width:100%}.rpv-core__textbox--rtl{direction:rtl}.rpv-core__text-layer{left:0;position:absolute;top:0;height:100%;width:100%;opacity:.2;line-height:1;z-index:1}.rpv-core__text-layer span::selection{background-color:var(--rpv-core__text-layer-text--selection-background-color);color:var(--rpv-core__text-layer-text--selection-color)}.rpv-core__text-layer br::selection{color:rgba(0,0,0,0)}.rpv-core__text-layer-text{color:rgba(0,0,0,0);cursor:text;position:absolute;transform-origin:0% 0%;white-space:pre}.rpv-core__tooltip-body{background-color:var(--rpv-core__tooltip-body-background-color);border-radius:.25rem;color:var(--rpv-core__tooltip-body-color);left:0;max-width:20rem;position:absolute;text-align:center;top:-9999px;z-index:9999}.rpv-core__tooltip-body--rtl{direction:rtl}.rpv-core__tooltip-body-arrow{background-color:var(--rpv-core__tooltip-body-background-color)}.rpv-core__tooltip-body-content{padding:.5rem}.rpv-core__display--block{display:block}.rpv-core__display--hidden{display:none}@media(min-width: 640px){.rpv-core__display--hidden-small{display:none}.rpv-core__display--block-small{display:block}}@media(min-width: 768px){.rpv-core__display--hidden-medium{display:none}.rpv-core__display--block-medium{display:block}}@media(min-width: 1024px){.rpv-core__display--hidden-large{display:none}.rpv-core__display--block-large{display:block}}.rpv-core__viewer{min-height:inherit}
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

.form {
    background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);
    padding: 40px; /* More padding for a larger feel */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 700px; /* Make form wider */
    max-width: 90vw; /* Responsive max width */
    min-height: 800px; /* Make form taller */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.summer-message {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin: 2rem;
    max-width: 500px;
}

.sun-animation {
    font-size: 4rem;
    animation: sunRotate 8s linear infinite;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

@keyframes sunRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.beach-animation {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    overflow: hidden;
    z-index: 1;
}

.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(45deg, #4682B4, #5F9EA0, #87CEEB);
    border-radius: 50% 50% 0 0;
    animation: waveMove 6s ease-in-out infinite;
}

.wave1 {
    animation-delay: 0s;
    opacity: 0.7;
}

.wave2 {
    animation-delay: 2s;
    opacity: 0.5;
}

.wave3 {
    animation-delay: 4s;
    opacity: 0.3;
}

@keyframes waveMove {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}



.summer-message h1 {
    color: #2E8B57;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-text {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #4682B4;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-weight: 500;
}

.container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh; /* Make container taller */
    background: linear-gradient(135deg, #E0F6FF 0%, #F0F8FF 100%);
}

h1 {
    text-align: center;
    color: #272727;
}

label {
    display: block;
    color: #000000;
    font-weight: 500;
}

input,
select,
textarea,
button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    background-color: #28a745;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #218838;
}

.pdf-viewer {
    overflow: auto;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .form {
        width: 95%;
        padding: 15px;
    }

    .summer-message {
        margin: 1rem;
        padding: 1.5rem;
    }

    .sun-animation {
        font-size: 3rem;
    }



    h1 {
        font-size: 22px;
    }

    input,
    select,
    textarea,
    button {
        font-size: 14px;
        padding: 8px;
    }

    button {
        font-size: 14px;
        padding: 12px;
    }
}

@media screen and (max-width: 480px) {
    .summer-message {
        margin: 0.5rem;
        padding: 1rem;
    }

    .sun-animation {
        font-size: 2.5rem;
    }



    .beach-animation {
        height: 35px;
    }
}html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.contact-page {
    min-width: 100vw;
    background-color: #f4f4f9; 
    font-family: 'Arial', sans-serif;
    color: #333; 
    box-sizing: border-box;
  }
  
  .contact-title {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #2c3e50; 
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  .contact-content {
    display: flex;
    flex-wrap: wrap; 
    margin-left: 25%;
    gap: 50px;
}

.contact-details {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    background-color: #fff;
    padding: 15px; 
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}
  
  .contact-details h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #34495e;
    border-bottom: 2px solid #3498db; 
    padding-bottom: 10px;
  }
  
  .contact-details p {
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.6;
    color: #202222;
  }
  
  .contact-details ul {
    padding-left: 20px;
    margin: 15px 0;
    font-size: 16px;
    color: #202222;
    line-height: 1.6;
  }
  
  .contact-details ul li {
    margin-bottom: 10px;
  }

  .contact-form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }

  .contact-form-container h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #34495e;
  }

  .form-note {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .form-group {
    display: flex;
    flex-direction: column;
  }

  .form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
  }

  .form-group textarea {
    resize: vertical;
    min-height: 100px;
  }

  .contact-form button {
    background-color: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .contact-form button:hover {
    background-color: #2980b9;
  }
  
  .contact-map {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
    border-radius: 10px;
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    margin-right: 25%;
  }
  
  iframe {
    width: 100%;
    height: 300px;
    border: 0;
  }
  
/* Responsive Design */
@media (max-width: 768px) {
    .contact-content {
      flex-direction: column;
      align-items: center; /* Centers items on smaller screens */
      margin-right: auto;
      margin-left: auto;
    }
  
    .contact-details {
      max-width: 100%; /* Full width for smaller screens */
    }
  
    .contact-map {
      max-width: 100%; /* Full width for smaller screens */
    }

    .iframe {
      margin-right: auto;
      margin-left: auto;
      align-items: center;
    }
  }
  html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.camp-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #E0F6FF 0%, #F0F8FF 100%);
  padding: 2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.summer-message-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
}

.summer-message {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  margin: 2rem;
  max-width: 500px;
  background: linear-gradient(135deg, #87CEEB 0%, #98D8E8 50%, #B0E0E6 100%);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 700px;
  max-width: 90vw;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.sun-animation {
  font-size: 4rem;
  animation: sunRotate 8s linear infinite;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

@keyframes sunRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.beach-animation {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  overflow: hidden;
  z-index: 1;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, #4682B4, #5F9EA0, #87CEEB);
  border-radius: 50% 50% 0 0;
  animation: waveMove 6s ease-in-out infinite;
}

.wave1 {
  animation-delay: 0s;
  opacity: 0.7;
}

.wave2 {
  animation-delay: 2s;
  opacity: 0.5;
}

.wave3 {
  animation-delay: 4s;
  opacity: 0.3;
}

@keyframes waveMove {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

.summer-message h1 {
  color: #2E8B57;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 3;
  position: relative;
}

.message-text {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #4682B4;
  line-height: 1.6;
  margin-bottom: 1rem;
  font-weight: 500;
  z-index: 3;
  position: relative;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .camp-page {
    padding: 1.5rem 0;
  }
  
  .summer-message-container {
    padding: 0 1rem;
  }
  
  .summer-message {
    margin: 1rem;
    padding: 1.5rem;
    min-height: 300px;
  }

  .sun-animation {
    font-size: 3rem;
  }

  .beach-animation {
    height: 35px;
  }
}

@media screen and (max-width: 480px) {
  .camp-page {
    padding: 1rem 0;
  }
  
  .summer-message-container {
    padding: 0 0.75rem;
  }
  
  .summer-message {
    margin: 0.5rem;
    padding: 1rem;
    min-height: 250px;
  }

  .sun-animation {
    font-size: 2.5rem;
  }

  .beach-animation {
    height: 35px;
  }
}html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.teams-page {
  text-align: center;
  width: 100%;
  max-width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Category Titles */
.teams-category {
  margin-top: 3%;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.category-title {
  font-size: 2em;
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 20px;
  word-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* Unique Colors for Each Competition */
.category-title.vex-iq {
  background-color: #007bff;
}

.category-title.vex-vrc {
  background-color: #f36a1b;
}

.category-title.vex-ai {
  background-color: #32a852;
}

.category-title.first-tech-challenge {
  background-color: #007bff;
}

/* Improved Layout - Uses Grid for Better Spacing */
.teams-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 350px));
  gap: 30px;
  padding: 20px;
  background-color: #ffffff;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  box-sizing: border-box;
}

/* This technique helps center items in the last row */
.teams-container::after {
  content: "";
  grid-column: auto / span 1;
}

/* Info Section */
.info-section {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

.info-section h2 {
  font-size: 2em;
  color: #333;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.info-section p {
  font-size: 1.1em;
  color: #666;
  line-height: 1.6;
  word-wrap: break-word;
}

/* Team Cards */
.team-card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: visible;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  padding: 15px;
  height: auto;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.team-card:hover {
  transform: translateY(-5px);
  z-index: 10;
}

.team-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 5px;
}

.team-title {
  font-size: 1.2em;
  margin: 15px 0;
  color: #333;
  word-wrap: break-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Flair Styles */
.team-flair {
  display: inline-block;
  padding: 5px 10px;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  border-radius: 12px;
  margin-bottom: 10px;
  word-wrap: break-word;
  max-width: 100%;
}

.team-flair.vex-iq {
  background-color: #007bff;
}

.team-flair.vex-vrc {
  background-color: #f36a1b;
}

.team-flair.vex-ai {
  background-color: #32a852;
}

.team-flair.first-tech-challenge {
  background-color: #007bff;
}

/* Age Group Flair */
.team-age-group {
  display: inline-block;
  padding: 5px 10px;
  font-size: 0.9em;
  font-weight: bold;
  color: #fff;
  border-radius: 12px;
  margin-bottom: 10px;
  word-wrap: break-word;
  max-width: 100%;
}

.team-age-group.elementary-school { background-color: #673ab7; }
.team-age-group.middle-school { background-color: #673ab7; }
.team-age-group.high-school { background-color: #673ab7; }
/* Achievements & Next Competition Section */
.team-achievements {
  margin-top: 15px;
  font-size: 0.9em;
  color: #444;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.team-achievements .awards {
  margin-bottom: 10px;
  color: #1ca0ff;
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  text-align: center;
}

.team-achievements .rank {
  color: #f3461b;
  font-weight: bold;
  margin-bottom: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

.next-competition {
  color: #32a852;
  font-weight: bold;
  margin-top: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

/* Enhanced Responsive Design */
@media (max-width: 1200px) {
  .teams-container {
    max-width: 95%;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .teams-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 15px;
  }
  
  .category-title {
    font-size: 1.8em;
  }
  
  .info-section {
    max-width: 95%;
  }
  
  .info-section h2 {
    font-size: 1.8em;
  }
  
  .info-section p {
    font-size: 1em;
  }
}

@media (max-width: 768px) {
  .teams-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px;
  }
  
  .team-card {
    min-height: 400px;
    max-width: 450px;
    margin: 0 auto;
  }
  
  .category-title {
    font-size: 1.6em;
    padding: 8px 12px;
  }
  
  .info-section h2 {
    font-size: 1.6em;
  }
}

@media (max-width: 576px) {
  .teams-category {
    padding: 10px 5px;
  }
  
  .team-card {
    padding: 12px;
    min-height: 380px;
  }
  
  .team-image {
    height: 160px;
  }
  
  .team-title {
    font-size: 1.1em;
    margin: 12px 0;
  }
  
  .team-flair, .team-age-group {
    font-size: 0.8em;
    padding: 4px 8px;
  }
  
  .team-achievements {
    font-size: 0.85em;
  }
  
  /* Adjust the ribbon for small screens */
  .team-card.world-championship::after {
    top: 15px;
    right: -40px;
    font-size: 8px;
    padding: 4px 40px;
  }
  
  /* Scale down the emoji background on smaller screens */
  .team-card.world-championship::before {
    font-size: 100px;
  }
}

/* Special case for 1 item in a category */
.teams-container.single-item {
  grid-template-columns: minmax(280px, 350px);
}

/* Special case for 2 items in a category */
.teams-container.two-items {
  grid-template-columns: repeat(2, minmax(280px, 350px));
}

/* For categories with 4 or 5 items, this ensures proper centering of the last row */
.teams-container.four-items,
.teams-container.five-items {
  grid-template-columns: repeat(3, minmax(280px, 350px));
  grid-auto-flow: dense;
}

/* Media queries for special cases */
@media (max-width: 992px) {
  .teams-container.two-items,
  .teams-container.four-items,
  .teams-container.five-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .teams-container.single-item,
  .teams-container.two-items,
  .teams-container.four-items,
  .teams-container.five-items {
    grid-template-columns: 1fr;
  }
}

/* Container for the table with vertical scrolling */
.teams-table-container {
  margin: 2rem auto;
  max-width: 90%;
  max-height: 400px; /* Adjust this height as needed */
  overflow-y: auto;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Table styles */
.teams-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-family: Arial, sans-serif;
}

.teams-table th,
.teams-table td {
  border: 1px solid #ddd;
  padding: 12px;
}

.teams-table th {
  background-color: #f2f2f2;
  font-size: 1.1em;
}

.teams-table tr:nth-child(even) {
  background-color: #fafafa;
}

.teams-table tr:hover {
  background-color: #f1f1f1;
}

/* Highlight rows for WHEELHOUSE FOUNDATION teams */
.highlight-row {
  background-color: #d1f0ff !important;
  font-weight: bold;
  color: #003366;
}

/* Optional: Style the table header */
.teams-table-container h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.5em;
}

/* For empty cards to maintain grid layout */
.empty-card {
  grid-column: span 1;
  visibility: hidden;
  min-height: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Special styling for World Championship teams */
.team-card.world-championship {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 250, 220, 0.6); /* Light gold background */
  border: 2px solid #ffdc73;
  box-shadow: 0 6px 8px rgba(255, 215, 0, 0.2);
}

/* Background emoji decorations */
.team-card.world-championship::before {
  content: "🏆 🌎 🏅";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 120px;
  opacity: 0.15; /* Increased from 0.07 to make emojis more visible */
  pointer-events: none; /* Don't interfere with clicks */
  z-index: 0;
  transform: rotate(-10deg);
  letter-spacing: 15px;
}

/* Championship corner ribbon */
.team-card.world-championship::after {
  content: "WORLD FINALS";
  position: absolute;
  top: 20px;
  right: -35px;
  background: linear-gradient(to right, #ffd700, #ffb300);
  color: #5b4301;
  font-size: 10px;
  font-weight: bold;
  padding: 5px 40px;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  letter-spacing: 1px;
  z-index: 2;
}

/* Make sure card content is above the emoji background */
.team-card.world-championship * {
  position: relative;
  z-index: 1;
}

/* Subtle glow effect on hover */
.team-card.world-championship:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(255, 215, 0, 0.25);
}
/* Thank You Page Styles */
html, body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
.thank-you-container {
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  padding: 20px;
  text-align: center;
}

  
  .thank-you-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .thank-you-card h1 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
  }
  
  .thank-you-card p {
    font-size: 16px;
    color: #555;
    margin: 10px 0;
  }
  
  .purchase-details {
    margin: 15px 0;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
  }
  
  .purchase-details p {
    margin: 5px 0;
  }
  
  .home-button {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .home-button:hover {
    background: #0056b3;
  }
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    .thank-you-container {
      width: 100%;
    }
    .thank-you-card {
      padding: 20px;
      width: 85%;
      margin-left: 10%;
      margin-right: 20%;
    }
  
    .thank-you-card h1 {
      font-size: 20px;
    }
  
    .home-button {
      padding: 10px 16px;
      font-size: 14px;
    }
  }
  
  /* Fade-in Animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* Footer Styling */
.footer {
  height: fit-content;
  width: 100vw; /* Use viewport width units */
  max-width: 100vw; /* Match viewport width */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end; /* Aligns all sections to the bottom */
  padding: 20px 50px;
  background-color: #2c3e50;
  color: #ecf0f1;
  margin-top: auto;
  box-sizing: border-box;
  left: 0;
  right: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

/* Footer Sections */
.footer-left,
.footer-center,
.footer-right {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}

/* Footer Text Scaling */
.footer-left h3,
.footer-right h3 {
  font-size: clamp(16px, 2vw, 20px);
}

.footer-left p,
.footer-center p,
.footer-right ul li a {
  font-size: clamp(12px, 1.8vw, 14px);
  line-height: 1.5;
  color: #bdc3c7;
}

/* Footer Center - Anchored to Bottom */
.footer-center {
  text-align: center;
  align-self: flex-end; /* Ensures it aligns to the bottom */
}

/* Social Media Section */
.footer-social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.footer-social-icon {
  font-size: 24px;
  color: #ecf0f1;
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer-social-icon:hover {
  transform: scale(1.2);
  color: #3498db;
}

/* Footer Right Alignment */
.footer-right {
  text-align: right;
  align-self: flex-start;
  padding: 1%;
}

/* Footer Links */
.footer-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-right ul li {
  margin: 5px 0;
}

.footer-right ul li a {
  text-decoration: none;
  color: #ecf0f1;
  transition: color 0.3s ease;
}

.footer-right ul li a:hover {
  color: #3498db;
}

/* Responsive Iframe */
iframe {
  width: 100%;
  max-width: 500px;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  margin-top: 10px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
  }

  .footer-left,
  .footer-right {
    order: 1;
  }

  .footer-center {
    order: 2; /* Moves it to the bottom */
    margin-top: 20px;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    text-align: center;
    width: 100%;
  }

  .footer-social-links {
    margin-top: 10px;
    margin-bottom: 15px;
  }
  
  .footer-social-icon {
    font-size: 28px; /* Slightly larger for better mobile tap targets */
  }

  iframe {
    max-width: 90%;
  }
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    font-family: Arial, sans-serif;
  }
  
  /* Main container */
  .season2025-page {
    margin: 0 auto;
    padding: 1em;
  }
  
  /* Tabs container */
  .tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-bottom: 2px solid #ddd;
    margin-bottom: 1em;
  }
  
  /* Tab buttons */
  .tab-button {
    cursor: pointer;
    padding: 0.7em 1.5em;
    margin: 0.3em;
    font-size: 1em;
    background-color: #f8f8f8;
    border: none;
    border-radius: 4px 4px 0 0;
    transition: background 0.3s ease;
  }
  
  .tab-button:hover {
    background-color: #e0e0e0;
  }
  
  .tab-button.active {
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    border-bottom: 3px solid #0056b3;
  }
  
  /* Team section */
  .team-section {
    padding: 1em;
    margin: 1em 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fafafa;
    text-align: center;
  }
  
  .team-section h2 {
    margin-top: 0;
    font-size: 1.5em;
  }
  
  /* Images side by side */
  .team-images {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
    margin: 1em 0;
  }
  
  .team-images img {
    width: 30%;
    min-width: 200px;
    height: auto;
    border-radius: 4px;
  }
  
  /* Team statistics */
  .team-stats {
    font-size: 1.1em;
  }
  
  /* Fade-in animation */
  .fade-in {
    animation: fadeIn 0.5s ease-in;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* Container for the table */
  .teams-table-container {
    margin: 2rem auto;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  .teams-table-container h2 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5em;
  }
  
  /* Table styles */
  .teams-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    margin: 0 auto;
  }
  
  .teams-table th,
  .teams-table td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  .teams-table th {
    background-color: #f2f2f2;
    font-size: 1.1em;
  }
  
  .teams-table tr:nth-child(even) {
    background-color: #fafafa;
  }
  
  .teams-table tr:hover {
    background-color: #f1f1f1;
  }
  
  /* Highlight rows for WHEELHOUSE FOUNDATION teams */
  .highlight-row {
    background-color: #d1f0ff !important;
    font-weight: bold;
    color: #003366;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .season2025-page {
      padding: 0.5em;
      text-align: center;
    }
    
    .tabs-container {
      justify-content: center;
    }
    
    .tab-button {
      padding: 0.5em 1em;
      margin: 0.3em;
      font-size: 0.9em;
    }
    
    .team-section h2 {
      font-size: 1.3em;
    }
    
    .team-images {
      flex-direction: column;
      align-items: center;
    }
    
    .team-images img {
      width: 80%;
      margin-bottom: 1em;
    }
    
    .teams-table-container {
      margin: 1rem auto;
      padding: 0 10px;
      max-height: 300px;
    }
    
    .teams-table th,
    .teams-table td {
      padding: 6px;
      font-size: 0.9em;
    }
    
    .teams-table-container h2 {
      font-size: 1.3em;
    }
  }
  
  @media (max-width: 480px) {
    .tab-button {
      padding: 0.4em 0.8em;
      font-size: 0.8em;
    }
    
    .team-stats {
      font-size: 1em;
    }
    
    .teams-table th,
    .teams-table td {
      padding: 4px;
      font-size: 0.8em;
    }
    
    .teams-table-container {
      margin: 0.5rem auto;
      max-height: 250px;
    }
  }
  /* Base styles for the entire page */
.course-offering-page {
  width: 100%;
  max-width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  font-family: Arial, sans-serif;
  margin: 0;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.course-offering-container {
  max-width: 1200px;
  width: 100%;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  box-sizing: border-box;
}

/* Course title styling */
.course-title {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
  word-wrap: break-word;
  hyphens: auto;
}

/* Main content layout */
.course-content {
  display: flex;
  flex-direction: row;
  gap: 40px;
  width: 100%;
}

/* Left side - Description */
.course-description {
  flex: 3;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.description-text p {
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  text-align: justify;
}

/* Course details section */
.course-details {
  background-color: #f5f9ff;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.detail-item {
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
}

.detail-label {
  font-weight: bold;
  margin-right: 10px;
  min-width: 100px;
  color: #333;
}

.detail-value {
  color: #555;
}

/* Action buttons */
.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.register-button, .info-button {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.register-button {
  background-color: #007bff;
  color: white;
}

.register-button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.info-button {
  background-color: white;
  color: #007bff;
  border: 2px solid #007bff;
}

.info-button:hover {
  background-color: #f0f7ff;
  transform: translateY(-2px);
}

/* Right side - Images */
.course-images {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.image-container {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.course-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.course-image:hover {
  transform: scale(1.02);
}

/* Responsive design */
@media (max-width: 1024px) {
  .course-offering-container {
    padding: 30px;
  }
  
  .course-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 900px) {
  .course-content {
    flex-direction: column;
  }
  
  .course-description, .course-images {
    flex: 1;
    width: 100%;
  }
  
  .course-images {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .image-container {
    flex: 1;
    min-width: 250px;
  }
}

@media (max-width: 768px) {
  .course-offering-container {
    padding: 25px;
  }
  
  .course-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
  
  .course-actions {
    flex-direction: column;
  }
  
  .register-button, .info-button {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .course-offering-page {
    padding: 15px 10px;
  }
  
  .course-offering-container {
    padding: 20px 15px;
    border-radius: 8px;
  }
  
  .course-title {
    font-size: 1.5rem;
  }
  
  .description-text p {
    font-size: 0.95rem;
  }
  
  .detail-item {
    flex-direction: column;
    margin-bottom: 15px;
  }
  
  .detail-label {
    margin-bottom: 4px;
  }
  
  .course-images {
    gap: 15px;
  }
}
/* Base styles for the disclaimer page */
.disclaimer-page {
  width: 100%;
  max-width: 100vw;
  padding: 40px 20px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-family: Arial, sans-serif;
  margin: 0;
  overflow-x: hidden;
}

.disclaimer-container {
  max-width: 1200px;
  width: 100%;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 40px;
  box-sizing: border-box;
}

/* Title styling */
.disclaimer-title {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
  border-bottom: 2px solid #eee;
  padding-bottom: 15px;
}

/* Content styling */
.disclaimer-content {
  text-align: left;
}

.disclaimer-content p {
  margin-bottom: 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* Responsive design */
@media (max-width: 1024px) {
  .disclaimer-container {
    padding: 30px;
  }
  
  .disclaimer-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .disclaimer-page {
    padding: 30px 15px;
  }
  
  .disclaimer-container {
    padding: 25px;
  }
  
  .disclaimer-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .disclaimer-page {
    padding: 20px 10px;
  }
  
  .disclaimer-container {
    padding: 20px 15px;
    border-radius: 8px;
  }
  
  .disclaimer-title {
    font-size: 1.5rem;
  }
  
  .disclaimer-content p {
    font-size: 0.95rem;
  }
}
/* 1) Ensure every element uses border-box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2) Remove any default padding/margins on html/body, prevent horizontal scroll */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* 3) Page Container
   - max-width keeps it from stretching too wide on desktop
   - width:100% lets it shrink on mobile
   - margin: 0 auto centers it
   - padding ensures some breathing room inside on small screens
*/
.page-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem; /* reduce from 1.5rem to 1rem for tighter mobile spacing */
}

/* 4) Title always full-width (of .page-container), centered */
.page-title {
  text-align: center;
  font-size: 1.75rem;       /* ~28px instead of 32px – scales better on narrow viewports */
  line-height: 2rem;        /* ~32px */
  font-weight: 700;
  margin-bottom: 1rem;      /* small gap under title */
}

/* 5) Collage Container (masonry style, no gaps) */
.collage-container {
  column-count: 1;          /* 1 column by default on mobile */
  column-gap: 0;            /* no horizontal gap */
  margin: 0;
  padding: 0;
}

/* 2 columns once we hit 640px */
@media (min-width: 640px) {
  .collage-container {
    column-count: 2;
  }
}

/* 3 columns once we hit 1024px */
@media (min-width: 1024px) {
  .collage-container {
    column-count: 3;
  }
}

/* 6) Each Tile 
   - inline-block so it flows into columns without forcing a row height
   - width:100% fills its column horizontally
   - break-inside: avoid prevents splitting across columns
   - zero margin/padding so tiles touch
   - relative positioning for overlay
*/
.collage-item {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  break-inside: avoid;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

/* 7) Image itself (natural height, responsive width) */
.collage-image {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

/* 8) Overlay for hover (unchanged) */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  padding: 0.5rem;
}
.collage-item:hover .overlay {
  opacity: 1;
}
.collage-item:hover .collage-image {
  opacity: 0.3;
}
.team-name {
  font-size: 1rem;       /* ~16px on mobile */
  line-height: 1.25rem;  /* ~20px */
  font-weight: 600;
  text-transform: uppercase;
}

/* 9) Description Text Below Collage */
.description {
  margin-top: 1rem;        /* small gap above paragraph */
  font-size: 1rem;         /* ~16px */
  line-height: 1.5rem;     /* ~24px */
  color: #333;
  text-align: center;      /* keep text centered on mobile */
  padding: 0 1rem;         /* add a little horizontal padding so it never touches screen edge */
}
.alumni-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: all 180ms ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.alumni-card.clickable {
  cursor: pointer;
}

.alumni-card.clickable:hover,
.alumni-card.clickable:focus {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  outline: none;
}

.alumni-card.clickable:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

.alumni-headshot-container {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.alumni-headshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.alumni-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 2.5rem;
  font-weight: 600;
  border-radius: 50%;
}

.alumni-name {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: #272727;
  margin: 0;
  line-height: 1.2;
}

.alumni-college {
  font-size: 0.95rem;
  color: #555;
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .alumni-card {
    padding: 1.25rem;
  }
  
  .alumni-headshot-container {
    width: 110px;
    height: 110px;
  }
  
  .alumni-initials {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .alumni-card {
    padding: 1rem;
  }
  
  .alumni-headshot-container {
    width: 100px;
    height: 100px;
  }
  
  .alumni-initials {
    font-size: 1.75rem;
  }
} .alumni-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 2rem 0;
}

.alumni-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.alumni-header {
  text-align: center;
  margin-bottom: 3rem;
}

.alumni-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #272727;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.alumni-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: #555;
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}

.alumni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Responsive grid breakpoints */
@media (min-width: 640px) {
  .alumni-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .alumni-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .alumni-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .alumni-page {
    padding: 1.5rem 0;
  }
  
  .alumni-container {
    padding: 0 1rem;
  }
  
  .alumni-header {
    margin-bottom: 2rem;
  }
  
  .alumni-grid {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .alumni-page {
    padding: 1rem 0;
  }
  
  .alumni-container {
    padding: 0 0.75rem;
  }
}