/* ----------------------- */
/* General Styles */
/* ----------------------- */
body {
    margin: 0;
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Rubik', sans-serif;
    background-color: #f0f4f8;
    color: #333333;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
  }
  
  a:hover {
    color: #FF4040;
  }
  
  html {
    scroll-behavior: smooth;
  }

  
  .error-field {
    border-color: #FF4040 !important;
    box-shadow: 0 0 5px rgba(255, 64, 64, 0.8);
  }
  .field-error{
    color: #b91c1c;
    font-weight: 700;
    font-size: .9rem;
    margin: 4px 0 0 2px;
  }
  
  /* ----------------------- */
  /* Header Styles */
  /* ----------------------- */
  header {
    background-color: #FF4040; /* Primary color */
    color: white;
    padding: 20px;
  }
  
  /* Header Logo Section */
  .logo-header {
    display: flex;
    align-items: center;
    gap: 20px;  /* Space between the logo and the title */
    margin-bottom: 10px;
  }
  
  .logo-header img {
    max-width: 100px; /* Adjust as needed */
    /* Optional: add a border or shadow if desired */
  }
  
  .logo-header h1 {
    font-size: 2.5rem; /* Larger, bolder font */
    font-weight: bold;
    margin: 0;
  }
  
  /* Navigation Styles */
  header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header nav ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
  }
  
  header nav ul li {
    margin-right: 15px;
  }
  
  header nav ul li a {
    color: white;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
  }
  
  header nav ul li a.active {
    background-color: #00BFFF;
    border-radius: 5px;
  }
  
  /* Responsive nav wrapping for all pages */
  @media (max-width: 900px) {
    header nav { flex-wrap: wrap; gap: 8px; }
    header nav ul { flex-wrap: wrap; row-gap: 6px; }
    .language-switcher { margin-left: 0; }
  }
  
  /* Language Switcher */
  .language-switcher {
    display: inline-block;
    margin-left: 20px;
  }
  
  .lang-btn {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .lang-btn:hover {
    color: #ffeb3b;
  }
/* Hero Section */
.hero {
    text-align: center;
    padding: 50px 20px;
    background-color: #F0F0F0;
}

.hero h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    margin-bottom: 30px;
}

/* Courses Section */
.courses {
    padding: 50px 20px;
    background-color: #FFFFFF;
  }
  
  .courses h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.2rem;
    font-weight: bold;
  }
  
  .course-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .course-item {
    background-color: #FFD700;
    padding: 20px;
    width: 250px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
  }
  
  .course-item:hover {
    transform: translateY(-10px);
    background-color: #4682B4;
  }
  
  .course-item h3 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }
  
  .course-item p {
    color: #333;
  }
  
  /* Toggle Button for Detailed Schedules */
  .toggle-btn {
    display: block;
    margin: 30px auto;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  
  /* Detailed Courses Container */
  #course-details {
    display: none;
    margin-top: 20px;
  }
  
  /* Course Section (wraps title and schedule table) */
  .course-section {
    border: 2px solid #ccc;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
    border-radius: 8px;
  }
  
  /* Alternate background colors for course sections */
  .course-section:nth-child(odd) {
    background-color: #f9e4d4;  /* Peach tone */
  }
  
  .course-section:nth-child(even) {
    background-color: #ffffff;
  }
  
  .course-section h3 {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }
  
  /* Schedule Table Styling */
  .schedule-table {
    width: 80%;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #ccc;
    background-color: #f9f9f9;
  }
  
  .schedule-table th,
  .schedule-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  .schedule-table th {
    background-color: #ddd;
    font-weight: bold;
  }
  
  /* For tables that show "Coming Soon", ensure the cell spans all columns */
  .schedule-table td {
    text-align: center;
    font-style: italic;
  }
  
/* Summer Camp Section – pops out with a bright background, border, and shadow */
.summer-camp {
    position: relative;
    padding: 50px 20px;
    background-color: #eef5f9;  /* Light blue-gray background */
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /*margin: 40px auto;*/
    max-width: 95vw;
    width: 95vw;
  }
  
  .summer-camp h2 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }
  
  .summer-camp p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #333;
  }
  
  /* Wrap each day’s schedule in a box that “pops out” */
  .camp-day-wrapper {
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    margin: 20px auto;
    padding: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Optional: Alternate background for visual interest */
  .camp-day-wrapper:nth-of-type(odd) {
    background-color: #ffeedd;  /* A soft peach tone */
  }
  
  .camp-day {
    margin-bottom: 10px;
  }
  
  .camp-day h3 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    color: #333;
  }
  
  /* Schedule Table Styling – reused/updated */
  .schedule-table {
    width: 90%;
    margin: 0 auto 20px auto;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
  }
  
  .schedule-table th,
  .schedule-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  .schedule-table th {
    background-color: #ddd;
    font-weight: bold;
  }
  
  /* For "Coming Soon" tables, italicize text */
  .schedule-table td {
    font-style: italic;
  }
  
  /* Extra activities paragraph */
  .camp-extra {
    text-align: center;
    font-size: 1.1rem;
    font-style: italic;
    margin-top: 20px;
    color: #333;
  }
  
  /* Registration Button – styled to stand out */
  .register-btn {
    display: block;
    margin: 30px auto 0 auto;
    padding: 15px 30px;
    font-size: 1.1rem;
    background-color: #FF4040;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .register-btn:hover {
    background-color: #00BFFF;
  }
  
  /* ==================== */
/* Modal Form Styles    */
/* ==================== */
/* === Professional Modal Styling === */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .winter-modal {
    background: #ffffff;
    margin: 2% auto 2%;
    padding: 0;
    border-radius: 24px;
    width: 95%;
    max-width: 780px;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.3s ease;
    overflow: hidden;
    will-change: transform;
  }

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

  .modal-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    padding: 2.5rem 2.5rem 2rem;
    color: white;
    text-align: center;
    position: relative;
  }

  .modal-header h3 {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .modal-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin: 0;
  }

  .winter-modal form {
    padding: 2.5rem;
  }

  .form-section {
    margin-bottom: 2.5rem;
  }

  .section-title {
    color: #1e3a8a;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .section-title::before {
    content: "";
    width: 4px;
    height: 1.2rem;
    background: #3B82F6;
    border-radius: 2px;
  }

  .section-desc {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .form-group {
    margin-bottom: 0;
  }

  .form-group label {
    display: block;
    color: #334155;
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }

  .form-group input {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: #f8fafc;
    box-sizing: border-box;
  }

  .form-group input:focus {
    outline: none;
    border-color: #3B82F6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
  }

  .field-hint {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.35rem;
  }

  /* Days Selection */
  .days-selection {
    margin-top: 1.5rem;
  }

  .week-group {
    margin-bottom: 2rem;
  }

  .week-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #1e3a8a;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.85rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
  }

  .days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.85rem;
  }

  .day-checkbox {
    position: relative;
    cursor: pointer;
    display: block;
  }

  .day-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .day-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.75rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
  }

  .day-checkbox:hover .day-label {
    border-color: #3B82F6;
    background: #eff6ff;
  }

  .day-checkbox input[type="checkbox"]:checked + .day-label {
    background: linear-gradient(135deg, #3B82F6, #1e40af);
    border-color: #1e40af;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  }

  .day-checkbox.disabled .day-label {
    background: #f1f5f9;
    border-color: #cbd5e1;
    opacity: 0.6;
    cursor: not-allowed;
  }

  .day-name {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
  }

  .day-checkbox input[type="checkbox"]:checked + .day-label .day-name {
    color: white;
  }

  .day-date {
    font-size: 0.85rem;
    margin-top: 0.25rem;
    color: #475569;
  }

  .day-checkbox input[type="checkbox"]:checked + .day-label .day-date {
    color: rgba(255,255,255,0.9);
  }

  .closed-badge {
    display: block;
    background: #dc2626;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    margin-top: 0.35rem;
  }

  .selection-note {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .selection-note i {
    color: #f59e0b;
    font-size: 1.2rem;
  }

  /* Form Actions */
  .form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #f1f5f9;
  }

  .btn-primary {
    flex: 1;
    background: linear-gradient(135deg, #FF4040, #ff6b6b);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1.1rem 2rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(255, 64, 64, 0.3);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 64, 64, 0.5);
  }

  .btn-secondary {
    background: white;
    color: #64748b;
    font-weight: 600;
    font-size: 1rem;
    padding: 1.1rem 2rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
  }

  #winter-register-success {
    background: #dcfce7;
    color: #166534;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    margin-top: 1rem;
  }

  /* Modal Responsive */
  @media (max-width: 768px) {
    .winter-modal {
      width: 98%;
      margin: 1% auto;
    }

    .modal-header {
      padding: 2rem 1.5rem 1.5rem;
    }

    .modal-header h3 {
      font-size: 1.6rem;
    }

    .winter-modal form {
      padding: 2rem 1.5rem;
    }

    .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .days-grid {
      grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
      gap: 0.65rem;
    }

    .day-label {
      padding: 0.85rem 0.5rem;
    }

    .form-actions {
      flex-direction: column-reverse;
    }
  }
  
  .close-btn {
    color: #64748b;
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  .close-btn:hover,
  .close-btn:focus {
    color: #0f172a;
  }

  /* Fall Register Form */
  #fall-register-form label {
    display: block;
    margin-top: 10px;
    font-weight: 800;
    color: #334155;
  }
  #fall-register-form input[type="text"],
  #fall-register-form input[type="email"],
  #fall-register-form input[type="tel"]{
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
    background: #fff;
  }
  #fall-register-form input:focus{
    border-color: #FF4040;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 64, 64, .18);
  }
  #fall-register-form .register-btn{
    background-color: #FF4040;
    color:#fff;
    border:none;
    border-radius:12px;
    padding: .7rem 1.2rem;
    font-weight:800;
  }
  #fall-register-form .register-btn:hover{ background:#ff5555; }
  #fall-register-form .cta-secondary{ border-radius:12px; }
  
  /* Registration Form Fields */
  #registration-form label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: #333;
  }
  
  #registration-form input,
  #registration-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    background-color: #fff;
  }
  
  #registration-form input:focus,
  #registration-form textarea:focus {
    border-color: #FF4040;
    outline: none;
  }
  
  #registration-form button[type="submit"] {
    margin-top: 20px;
    padding: 12px 20px;
    background-color: #FF4040;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
  }
  
  #registration-form button[type="submit"]:hover {
    background-color: #00BFFF;
  }

  
  /* ------------------------ */
/* Modal Loading & Completion Styles */
/* ------------------------ */

/* Common modal styles for loading and completion */
.modal-loading,
.modal-complete {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

/* Centered modal content */
.loading-content,
.complete-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Animation container for horizontal animation */
.animation-container {
  width: 100%;
  margin: 0 auto;
}

/* Horizontal animation track */
.animation-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;  /* Adjust as needed */
  margin: 0 auto;
  position: relative;
}

/* Spacing for individual elements */
.computer-container,
.email-container,
.logo-container {
  margin: 0;
}

/* Computer emoji styling */
.computer {
  font-size: 3rem;
}

/* Company logo styling */
.logo {
  max-width: 100px;
  height: auto;
}

/* Email emoji styling and horizontal animation */
.email {
  font-size: 3rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: sendEmailHoriz 2s linear infinite;
}

/* Keyframes for horizontal email movement */
@keyframes sendEmailHoriz {
  0% {
    left: 0;
    opacity: 1;
  }
  50% {
    left: calc(100% - 100px); /* Adjust 100px if needed for the logo width */
    opacity: 1;
  }
  80% {
    left: calc(100% - 100px);
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

/* Loading text styling */
.loading-text {
  font-size: 1.2rem;
  color: #FF4040;
  margin-top: 20px;
  font-weight: bold;
}

/* Completion modal styles (for registration) */
.complete-animation {
  margin-bottom: 20px;
}

.complete-animation .complete {
  font-size: 4rem;
  animation: completePulse 1s ease-out;
}

@keyframes completePulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

#registration-complete-message {
  font-size: 1.5rem;
  font-weight: bold;
  color: #FF4040;
}

/* Abacus Section Styles */
.abacus-section {
    padding: 50px 20px;
    background-color: #f1f8e9;
    text-align: center;
    position: relative; /* Added */
    overflow: hidden;    /* Added */
}

#abacus-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
}

.abacus-frame {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 600px;
    height: 400px;
    border: 15px solid #6d4c41; /* Brown color for wooden frame */
    border-radius: 15px;
    background-color: #d7ccc8;
    position: relative;
}

.abacus-frame::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #8d6e63;
    top: 30%; /* Dividing bar at 30% from the top */
}

.abacus-rod {
    position: relative;
    width: 60px;
    height: 100%;
}

.abacus-rod::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 100%;
    background-color: #8d6e63;
    left: 50%;
    transform: translateX(-50%);
}

.upper-bead,
.lower-bead {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #ffeb3b; /* Yellow beads */
    border-radius: 50%;
    cursor: pointer;
    transition: top 0.3s ease, bottom 0.3s ease, background-color 0.3s ease;
}

/* Upper Bead */
.upper-bead {
    top: 0; /* Start at the top */
}

.upper-bead.active {
    top: calc(30% - 40px - 5px); /* Stop just above the dividing line */
}

/* Lower Beads */
/* Positions will be set dynamically via JavaScript */

/* Bead Hover Effect */
.upper-bead:hover,
.lower-bead:hover {
    background-color: #fdd835;
}

/* Abacus Value Display */
#abacus-value {
    margin-top: 30px;
    font-size: 24px;
    color: #333333;
}

/* Buttons */
button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #FF4040;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
    background-color: #00BFFF;
    transform: translateY(-2px);
}

/* Game Info Section */
.game-info {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.24); /* Adjust the alpha value as needed */
    text-align: center;
}

.game-info p {
    font-size: 18px;
}

.game-info h3 {
    font-size: 32px;
    margin: 10px 0;
}

/* Win and Give Up Messages */
#win-message,
#give-up-message {
    padding: 50px 20px;
    background-color: rgba(255, 255, 255, 0.24); /* Adjust the alpha value as needed */
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1100; /* Added */
}

#win-message h2,
#give-up-message h2 {
    font-size: 36px;
    color: #d32f2f; /* Red color to grab attention */
    animation: fadeInDown 1s ease-out;
}

.quote-container {
    margin: 30px auto;
    max-width: 600px;
    padding: 20px;
    background-color: #ffe0b2; /* Soft orange background */
    border-left: 5px solid #ff6f00; /* Accent border */
    position: relative;
    animation: pulse 2s infinite;
}

#inspiring-quote {
    font-size: 24px;
    font-style: italic;
    color: #e65100; /* Deep orange text */
    animation: fadeInUp 1s ease-out;
}

#try-again-button {
    margin-top: 20px;
    padding: 15px 30px;
    background-color: #FF4040;
    color: white;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#try-again-button:hover {
    background-color: #00BFFF;
    transform: translateY(-2px);
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 111, 0, 0.7);
    }
    70% {
        box-shadow: 0 0 30px 10px rgba(255, 111, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 111, 0, 0);
    }
}

/* Confetti Container Styles */
.confetti {
    position: absolute; /* Changed from relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks through the confetti */
    overflow: hidden;
    z-index: 1000; /* Ensure it appears on top of other elements */
}

/* Confetti Piece Styles */
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 30px;
    background-color: #ffeb3b;
    animation: confetti-fall 3s linear infinite;
}

.confetti-piece:nth-child(odd) {
    background-color: #f44336;
}

.confetti-piece:nth-child(even) {
    background-color: #2196f3;
}

/* Confetti Animation */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}
/* Adjust z-index for confetti canvas */
canvas.confetti-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1100 !important; /* Ensure it appears above other elements */
    pointer-events: none;
}

/* About Section */
.about {
    padding: 50px 20px;
    background-color: #e0f7fa;  /* Light, calming background */
    text-align: center;
    border-top: 3px solid #FF4040;  /* A bold top border for emphasis */
    border-bottom: 3px solid #FF4040;
    margin: 40px auto;
    max-width: 1200px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .about h2 {
    font-size: 2.6rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
  }
  
  .about p {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.3rem;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    text-justify: inter-word;
    padding: 0 20px;
  }

/* Contact Section */
.contact {
    padding: 50px 20px;
    background-color: #FFFFFF;
}

.contact h2 {
    text-align: center;
    margin-bottom: 40px;
}

#contact-form {
    max-width: 600px;
    margin: 0 auto;
}

#contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#contact-form input:focus,
#contact-form textarea:focus {
    border-color: #FF4040;
    outline: none;
}

#contact-form button {
    background-color: #FF4040;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#contact-form button:hover {
    background-color: #00BFFF;
    transform: translateY(-2px);
}

#form-message {
    margin-top: 10px;
    font-size: 16px;
}

/* Loading Spinner Styles */
#loading-animation {
  display: none; /* Hidden by default */
  margin: 20px auto;
  text-align: center;
}

.spinner {
  border: 8px solid #f3f3f3; /* Light gray */
  border-top: 8px solid #FF4040; /* Primary color */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

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

/* Enhance the confirmation message styling */
#form-message {
  font-size: 1.2rem;
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}

/* ------------------------ */
/* Loading Modal Styles     */
/* ------------------------ */
.modal-loading,
.modal-complete {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

/* Centered modal content */
.loading-content,
.complete-content {
  background: #fff;
  padding: 30px 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Container for the animation */
.animation-container {
  width: 100%;
  margin: 0 auto;
}

/* Horizontal animation track */
.animation-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 300px;  /* Adjust width as needed */
  margin: 0 auto;
  position: relative;
}

/* Computer emoji styling */
.computer {
  font-size: 3rem;
}

/* Company logo styling */
.logo {
  max-width: 100px;
  height: auto;
}

/* Email emoji styling and horizontal animation */
.email {
  font-size: 3rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: sendEmailHoriz 2s linear infinite;
}

/* Keyframes for horizontal email movement */
@keyframes sendEmailHoriz {
  0% {
    left: 0;
    opacity: 1;
  }
  50% {
    left: calc(100% - 100px); /* 100px approximates the width of the logo */
    opacity: 1;
  }
  80% {
    left: calc(100% - 100px);
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

/* Loading text styling */
.loading-text {
  font-size: 1.2rem;
  color: #FF4040;
  margin-top: 20px;
  font-weight: bold;
}

/* ------------------------ */
/* Completion Modal Styles  */
/* ------------------------ */
.complete-animation {
  margin-bottom: 20px;
}

.complete-animation .complete {
  font-size: 4rem;
  animation: completePulse 1s ease-out;
}

@keyframes completePulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

#complete-message {
  font-size: 1.5rem;
  font-weight: bold;
  color: #FF4040;
}


/* Footer */
footer {
    background-color: #FF4040;
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-media {
    margin: 15px 0;
}

.social-media .social-icon {
    display: inline-block;
    margin: 0 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-media .social-icon i {
    font-size: 30px;
    color: #FFFFFF;
    transition: color 0.3s ease;
}

.social-media .social-icon:hover {
    transform: scale(1.2);
}

.social-media .social-icon:hover i {
    color: #ffeb3b; /* Bright yellow on hover */
}

.created-by {
    margin-top: 10px;
    font-size: 14px;
    animation: glowingText 2s infinite;
}

.created-by a {
    color: #FFFFFF;
    text-decoration: none;
}

@keyframes glowingText {
    0% {
        text-shadow: 0 0 5px #FFFFFF;
    }
    50% {
        text-shadow: 0 0 20px #ff0;
    }
    100% {
        text-shadow: 0 0 5px #FFFFFF;
    }
}

/* Fade-in Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.section:nth-of-type(1) {
    animation-delay: 0s;
}

.section:nth-of-type(2) {
    animation-delay: 0.5s;
}

.section:nth-of-type(3) {
    animation-delay: 1s;
}

.section:nth-of-type(4) {
    animation-delay: 1.5s;
}

.section:nth-of-type(5) {
    animation-delay: 2s;
}


/* Navigation Links */
header nav ul li a {
    color: white; /* Default text color */
    position: relative; /* For the underline animation */
    padding: 10px 15px;
    text-decoration: none;
    transition: color 0.3s ease;
    background: none; /* Ensure no background */
    border: none; /* Remove any borders if present */
}

header nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px; /* Underline thickness */
    background-color: #00BFFF; /* Blue underline */
    transition: width 0.3s ease;
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
    width: 100%; /* Full width underline on hover/active */
}

header nav ul li a:hover,
header nav ul li a.active {
    color: #FFD700; /* Yellow text on hover/active */
}
/* Keyframes for entrance animation */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to announcement container on load */
.announcement-container {
  animation: fadeSlideIn 1.2s ease-out 0.2s both;
}


.announcement-card {
  background: #fff8f0;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 3rem;
  margin: 3rem auto;
  max-width: 1200px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-in-out;
}

.announcement-card.show {
  opacity: 1;
  transform: translateY(0);
}

.announcement-image {
  flex: 1 1 400px;
  max-width: 500px;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.announcement-text {
  flex: 1 1 500px;
  text-align: center;
}

.announcement-text h2 {
  font-size: 2.5rem;
  color: #ff4040;
  margin-bottom: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(255, 64, 64, 0.15);
}

.announcement-text p {
  font-size: 1.3rem;
  color: #444;
  margin-bottom: 1.2rem;
  line-height: 1.7;
  font-weight: 500;
}

.announcement-text .annc-meta {
  font-size: 1.15rem;
  color: #666;
  margin-bottom: 1rem;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 64, 64, 0.05);
  border-radius: 10px;
  border-left: 4px solid #ff4040;
}

.announcement-text .annc-note {
  font-size: 1.1rem;
  color: #555;
  font-style: italic;
  margin-bottom: 2rem;
}

@keyframes softPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 64, 64, 0.5);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 10px 8px rgba(255, 64, 64, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 64, 64, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -100%;
  }
  100% {
    background-position: 200%;
  }
}

.cta-button {
  display: inline-block;
  background-color: #ff4040;
  color: white;
  padding: 1rem 2.2rem;
  border-radius: 14px;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 64, 64, 0.3);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  animation: softPulse 3s infinite;
  background-image: linear-gradient(120deg, #ff4040, #ff7373, #ff4040);
  background-size: 200%;
}

.cta-button:hover {
  background-position: 100%;
  animation: shimmer 1.5s infinite linear, softPulse 2s infinite;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 64, 64, 0.4);
  color:white;
}


.highlight-link {
  color: #ff4040;
  text-decoration: underline;
  font-weight: 600;
}




/* Courses Page Styling */
.courses-page {
    padding: 50px 20px;
    background-color: #FFFFFF;
    text-align: center;
}

.course-section {
    margin-bottom: 40px;
}

.schedule-table {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
}

.schedule-table th, .schedule-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.schedule-table th {
    background-color: #FFD700;
    color: #333;
}

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

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

.summer-camp {
  padding: 60px 20px;
  background-color: #f0faff;
  border-radius: 10px;
  margin: 0 auto;
}

/* Subtitle under "Summer Camp" heading */
.camp-subtitle {
  text-align: center;
  font-size: 1.25rem;
  margin-bottom: 40px;
  color: #444;
}

/* Pricing Card */
.camp-pricing-card {
  background: #fff5dc;
  border-left: 8px solid #ffb400;
  padding: 20px 30px;
  margin-bottom: 50px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.camp-pricing-card p {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Disclaimer Box */
.camp-disclaimer {
  background-color: #fff3cd;
  color: #856404;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  border-left: 6px solid #f0ad4e;
  margin: 2rem auto;
  font-size: 1rem;
  max-width: 700px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}

/* Extra Activities Note */
.camp-extra {
  text-align: center;
  font-style: italic;
  margin-bottom: 30px;
  font-size: 1.1rem;
  color: #666;
}

/* Animated Register Button */
.register-btn.pulse {
  display: block;
  margin: 0 auto;
  padding: 12px 30px;
  font-size: 1.2rem;
  background-color: #FF4040;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  animation: pulseBtn 1.5s infinite;
  transition: background-color 0.3s ease;
}

.register-btn.pulse:hover {
  background-color: #e63939;
}

/* Cards Container */
.camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Individual Camp Day Card */
.camp-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.camp-card:hover {
  transform: translateY(-5px);
}

/* Day Title */
.camp-day-header {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  text-align: center;
  color: #3a7bd5;
}

/* Schedule List */
.camp-schedule {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Time + Activity Pairing */
.camp-schedule li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: inset 0 1px 0 #eee;
}

.camp-schedule li span:first-child {
  flex: 0 0 100px;
  font-weight: 600;
  color: #2c3e50;
}

.camp-schedule li span:last-child {
  flex: 1;
  padding-left: 1rem;
  color: #555;
  line-height: 1.4;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .camp-schedule li {
    flex-direction: column;
    align-items: flex-start;
  }

  .camp-schedule li span:first-child {
    margin-bottom: 0.2rem;
  }

  .camp-pricing-card {
    padding: 16px 20px;
  }

  .camp-disclaimer {
    font-size: 0.95rem;
    padding: 0.9rem 1rem;
  }
}

/* Pulse Animation */
@keyframes pulseBtn {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 64, 64, 0.4);
  }
  70% {
    transform: scale(1.03);
    box-shadow: 0 0 0 12px rgba(255, 64, 64, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 64, 64, 0);
  }
}
.map-container {
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 12px;
}

.map-btn {
  background-color: #ff4040;
  color: white;
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 64, 64, 0.2);
}

.map-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.5s ease forwards;
}

.map-modal-content {
  position: relative;
  width: 90%;
  max-width: 960px;
  height: 80vh;
  background-color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  overflow: hidden;
}

.close-map-btn {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 2rem;
  color: #333;
  cursor: pointer;
  z-index: 10;
}

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

/* ===========================
   Courses Section - Final Clean Version
   =========================== */

/* Background for section */
.courses.section {
  background-color: #f9f9f9;
  padding: 60px 20px;
  border-radius: 12px;
}

/* Course Cards Grid */
.course-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

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

/* Course Card Base */
.course-card {
  background-color: #ffffff;
  border: 2px solid #ffde59;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  cursor: pointer;

  /* Animate on load */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s forwards;
  animation-delay: var(--animation-delay, 0s);
}

.course-card:hover {
  transform: translateY(-8px);
  background-color: #ffffff;
}

/* Category backgrounds */
.course-card:nth-child(1) { background-color: #fffaf0; } /* Mental Math */
.course-card:nth-child(2) { background-color: #f8f7fc; } /* Russian ABCs */
.course-card:nth-child(3) { background-color: #f0fff4; } /* Reading */
.course-card:nth-child(4) { background-color: #fef6f6; } /* Programming */
.course-card:nth-child(5) { background-color: #fefcf6; } /* Art */
.course-card:nth-child(6) { background-color: #f0f8ff; } /* Early Development */

/* Hover shadows category */
.course-card:nth-child(1):hover { box-shadow: 0 12px 24px rgba(255, 183, 3, 0.4); } /* Mental Math - Gold */
.course-card:nth-child(2):hover { box-shadow: 0 12px 24px rgba(153, 102, 255, 0.4); } /* Russian ABCs - Purple */
.course-card:nth-child(3):hover { box-shadow: 0 12px 24px rgba(80, 200, 120, 0.4); } /* Reading - Green */
.course-card:nth-child(4):hover { box-shadow: 0 12px 24px rgba(255, 99, 99, 0.4); } /* Programming - Red */
.course-card:nth-child(5):hover { box-shadow: 0 12px 24px rgba(255, 192, 203, 0.4); } /* Art - Pink */
.course-card:nth-child(6):hover { box-shadow: 0 12px 24px rgba(100, 149, 237, 0.4); } /* Early Development - Cornflower Blue */


/* Make whole card clickable */
.course-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

/* Card Content */
.course-card i {
  font-size: 40px;
  color: #FFB703;
  margin-bottom: 12px;
  transition: transform 0.3s, color 0.3s;
}

.course-card:hover i {
  transform: scale(1.2) rotate(5deg);
  color: #FF8C00;
}

.course-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #333;
  position: relative;
}

.course-card p {
  font-size: 15px;
  color: #555;
  margin-bottom: 15px;
}

.course-card ul {
  padding: 0;
  list-style: none;
}

.course-card ul li {
  font-size: 14px;
  margin-bottom: 6px;
  color: #555;
}

/* Responsive Improvements for Course Cards */
@media (max-width: 1200px) {
  .course-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .course-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .course-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 10px;
  }

  .course-card {
    margin-bottom: 20px;
    padding: 20px;
  }

  .course-card h3 {
    font-size: 20px;
  }

  .course-card i {
    font-size: 36px;
  }

  .course-card p {
    font-size: 14px;
  }

  .course-card ul li {
    font-size: 13px;
  }
}



/* Badges */
.badge {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 8px;
  vertical-align: middle;
  color: #fff;
  font-weight: bold;
  cursor: default;
  opacity: 0;
  transform: translateY(-5px);
  animation: badgeFade 1s forwards, pulse 1.5s infinite;
  animation-delay: 1s, 2s;
  pointer-events: auto;
}

.popular-badge {
  background: #FFB703; /* Golden / attention color */
}

.growing-badge {
  background: #50C878; /* Green / fresh */
}

.new-badge {
  background: #FF6363;
  cursor: pointer;
}

.badge:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

/* Pulse effect (optional) */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* Badge fade animation */
@keyframes badgeFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card fade-up animation */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Summer Camp Title */
.summer-camp h2 {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 0.5rem;
  color: #FF4040;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  animation: fadeInDown 1s ease forwards;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.summer-camp h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #FF4040;
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Tagline */
.summer-camp .camp-tagline {
  text-align: center;
  font-size: 1.5rem;
  color: #FF7F50;
  margin-bottom: 1rem;
  font-weight: bold;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

/* Intro and subtitle */
.summer-camp .camp-intro,
.summer-camp .camp-subtitle {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 1rem;
  font-size: 1.1rem;
  color: #555;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

/* Animations */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================
   Mobile Responsive Tweaks
   ========================== */

@media (max-width: 768px) {
  .summer-camp h2 {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .summer-camp .camp-tagline {
    font-size: 1.2rem;
  }

  .summer-camp .camp-intro,
  .summer-camp .camp-subtitle {
    font-size: 0.95rem;
    padding: 0 15px;
  }

  .summer-camp h2::after {
    width: 40px;
    height: 3px;
  }
}

.summer-camp.section {
  background: linear-gradient(180deg, #fff6f0 0%, #fef9f6 50%, #ffffff 100%);
  padding: 60px 20px;
  border-radius: 12px;
  position: relative;
}

.summer-camp.section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.summer-camp.section > * {
  position: relative;
  z-index: 1;
}
/* Summer Camp Schedule Cards */
.camp-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

/* Hover effect */
.camp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Day header inside card */
.camp-card .camp-day-header {
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #FF4040;
}

/* Schedule list for readability */
.camp-card .camp-schedule {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.camp-card .camp-schedule li {
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: #555;
  display: flex;
  justify-content: space-between;
}
.hero-media { position: relative; }
.hero-gradient{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.08) 100%);
  pointer-events:none;
}
.sched-hero{
  position:relative;
  background:
    radial-gradient(900px 140px at 10% -10%, rgba(255,64,64,.12), transparent 60%),
    radial-gradient(900px 160px at 80% 0%, rgba(0,191,255,.12), transparent 60%),
    linear-gradient(180deg,#fff, #f8fbff);
  padding:34px 0 24px;
}
.sched-hero .wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.sched-hero .wrap{ text-align:center; }
.sched-hero .title{
  font-size: clamp(1.6rem,3.2vw,2.2rem);
  margin:.2rem 0 .4rem; font-weight:900; color:#111827; text-shadow:0 2px 10px rgba(0,0,0,.06)
}
.sched-hero .sub{color:#5d6472;margin:0 0 .6rem}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap}
.sched-hero .hero-cta{ justify-content:center; }
.btn-primary{
  background:#FF4040;color:#fff;border:0;border-radius:12px;
  padding:.7rem 1rem;font-weight:800;box-shadow:0 8px 20px rgba(255,64,64,.25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s
}
.btn-primary:hover{transform:translateY(-2px);background:#ff5555;box-shadow:0 10px 24px rgba(255,64,64,.32);color:#fff}
.cta-secondary{
  display:inline-block;padding:.7rem 1rem;border-radius:12px;font-weight:800;
  background:#fff;border:1px solid #e5e7eb;color:#111827
}
.cta-secondary:hover{transform:translateY(-2px);background:#f8fafc;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.hero-pill{
  display:inline-block; font-weight:800; font-size:.85rem; letter-spacing:.2px;
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,64,64,.1); color:#b91c1c; /* brand red family */
  margin-bottom:.35rem;
}
.hero-sub{ margin:.2rem 0 .35rem; color:var(--muted); font-weight:600 }
.hero-desc{ margin:.2rem 0 .7rem; color:var(--ink) }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.35rem 0 .6rem }
.cta-secondary{
  display:inline-block; padding:.7rem 1rem; border-radius:12px;
  font-weight:800; text-decoration:none; background:#fff;
  border:1px solid #e5e7eb; color:#111827;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cta-secondary:hover{ transform:translateY(-2px); background:#f8fafc; box-shadow:var(--shadow) }
.hero-highlights{
  list-style:none; padding:0; margin:.6rem 0 .4rem;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:.5rem .8rem;
}
.hero-highlights li{ display:flex; align-items:center; gap:.5rem; color:#334155 }
.hero-highlights i{ width:22px; text-align:center }
.hero-meta{ display:flex; gap:1rem; margin-top:.35rem; color:#475569 }
.meta-item{ display:flex; align-items:center; gap:.45rem }
@media (max-width: 900px){ .hero-highlights{ grid-template-columns:1fr; } }


/* ===== Falling Leaves Effect ===== */
.falling-leaves {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* allow clicks through */
  overflow: hidden;
  z-index: 9999; /* above content, below modals if needed */
}

.leaf {
  position: absolute;
  top: -60px;
  width: 30px; height: 30px;
  background-image: url('../images/leaf.png'); /* your custom leaf image (transparent PNG) */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
  animation: fall linear forwards;
}

@keyframes snowfall {
  0% {
    transform: translate3d(0, -60px, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(50px, 110vh, 0) rotate(180deg);
    opacity: 0.4;
  }
}

/* Snowflakes Container */
.snowflakes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.snowflake {
  position: absolute;
  top: -60px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  animation: snowfall linear infinite;
  opacity: 0.8;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}


/* ===== Fall Camp Section ===== */
.winter-camp {
  position: relative;
  background: url('../images/winter-camp.png') center/cover no-repeat;
  color: #fff;
  padding: clamp(60px, 8vw, 100px) 0;
  overflow: hidden;
}

.winter-camp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 58, 138, 0.75);
  pointer-events: none;
}
  z-index: 0;
}

.fall-camp-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Winter Camp Content */
.winter-camp-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space);
  text-align: center;
}

.winter-camp h2 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: .75rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

.winter-camp .camp-tagline {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: #E0F2FE;
  margin-bottom: 3rem;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.2);
}

/* Info Cards Grid */
.camp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}

.info-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.info-card i {
  font-size: 2.5rem;
  color: #3B82F6;
  margin-bottom: 1rem;
}

.info-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: .5rem;
}

.info-card p {
  font-size: 1rem;
  color: #475569;
  margin: 0;
}

/* Activities Section */
.activities-section {
  margin: 4rem 0 3rem;
}

.activities-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 2.5rem;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

.activity-pill {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 2px solid transparent;
}

.activity-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
  border-color: #3B82F6;
}

.pill-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.pill-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e3a8a;
  text-align: left;
}

/* Camp Notes */
.camp-notes {
  max-width: 800px;
  margin: 2rem auto;
  text-align: center;
}

.camp-notes p {
  background: rgba(255, 193, 7, 0.2);
  border-left: 4px solid #FFC107;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.note-highlight {
  background: rgba(59, 130, 246, 0.25) !important;
  border-left-color: #3B82F6 !important;
}

/* Camp CTA */
.camp-cta {
  margin-top: 3rem;
  text-align: center;
}

.winter-register-btn {
  background: linear-gradient(135deg, #FF4040, #ff6b6b);
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 1.2rem;
  padding: 1.1rem 2.5rem;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 64, 64, 0.5);
  transition: all 0.3s ease;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.winter-register-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(255, 64, 64, 0.7);
  background: linear-gradient(135deg, #ff6b6b, #FF4040);
}

.winter-register-btn:active {
  transform: translateY(-2px) scale(1);
}

.camp-location {
  margin-top: 1.5rem;
  font-size: 1rem;
  color: #E0F2FE;
  font-weight: 600;
}

.camp-location i {
  margin-right: .5rem;
  color: #60a5fa;
}

/* === Winter Camp Responsive === */
@media (max-width: 768px) {
  .winter-camp {
    padding: clamp(40px, 8vw, 60px) 0;
  }

  .winter-camp h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .camp-info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 2rem 0;
  }

  .info-card {
    padding: 1.5rem 1.25rem;
  }

  .activities-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .activity-pill {
    padding: 1rem 1.25rem;
  }

  .winter-register-btn {
    font-size: 1.1rem;
    padding: 1rem 2rem;
  }

  .camp-location {
    font-size: 0.9rem;
  }

  .camp-notes p {
    font-size: 0.9rem;
    padding: 0.85rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .camp-info-grid {
    margin: 1.5rem 0;
  }

  .info-card i {
    font-size: 2rem;
  }

  .info-card h3 {
    font-size: 1.1rem;
  }

  .pill-icon {
    font-size: 1.75rem;
  }

  .pill-title {
    font-size: 0.9rem;
  }

  .activity-pill {
    padding: 0.85rem 1rem;
    gap: 0.75rem;
  }

  .winter-register-btn {
    font-size: 1rem;
    padding: .9rem 1.8rem;
  }

  .camp-notes p {
    font-size: 0.85rem;
  }
}
/* === Announcement Carousel === */
.announcement-carousel {
  position: relative;
  max-width: 1200px;
  margin: 3rem auto;
  overflow: hidden;
}

.announcement-slide {
  width: 100%;
  opacity: 0;
  transform: translateX(8%);
  transition: opacity .5s ease, transform .5s ease;
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}

.announcement-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
  pointer-events: auto;
}

.annc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  color: #ff4040;
  border: 2px solid #ffd1d1;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index: 5;
}
.annc-nav:hover { transform: translateY(-50%) scale(1.05); background:#fff7f7; }
.annc-nav.prev { left: 8px; }
.annc-nav.next { right: 8px; }

.annc-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: .5rem;
}
.annc-dots button {
  width: 10px; height: 10px;
  border-radius: 999px; border: 0;
  background: #ffd1d1; cursor: pointer;
}
.annc-dots button[aria-selected="true"] {
  background: #ff4040; width: 22px;
  transition: width .2s ease;
}

/* Keep your existing .announcement-card, .announcement-image, .announcement-text, .cta-button styles */

/* Responsive Design for Announcements */
@media (max-width: 1024px) {
  .announcement-card {
    padding: 2.5rem 2rem;
    gap: 1.75rem;
  }
  
  .announcement-text h2 {
    font-size: 2.2rem;
  }
  
  .announcement-text p {
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .announcement-card {
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    margin: 2rem auto;
  }
  
  .announcement-text {
    text-align: center;
  }
  
  .announcement-text h2 {
    font-size: 1.8rem;
  }
  
  .announcement-text p {
    font-size: 1.1rem;
  }
  
  .announcement-text .annc-meta {
    font-size: 1rem;
    padding: 0.6rem 1rem;
  }
  
  .announcement-image {
    max-width: 100%;
    flex: 1 1 auto;
  }
  
  .annc-nav {
    width: 36px;
    height: 36px;
  }
  
  .annc-nav.prev { left: 4px; }
  .annc-nav.next { right: 4px; }
  
  .cta-button {
    padding: 0.9rem 1.8rem;
    font-size: 1.05rem;
  }
}

@media (max-width: 640px) {
  .announcement-carousel {
    margin: 1.5rem auto;
  }
  
  .announcement-card {
    padding: 1.5rem 1rem;
    gap: 1.25rem;
    border-radius: 18px;
  }
  
  .announcement-text h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .announcement-text p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .announcement-text .annc-meta {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
  }
  
  .announcement-text .annc-note {
    font-size: 0.95rem;
  }
  
  .announcement-image {
    border-radius: 12px;
  }
  
  .annc-nav {
    width: 32px;
    height: 32px;
  }
  
  .annc-dots {
    margin-top: 1rem;
  }
  
  .cta-button {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .announcement-card {
    padding: 1.25rem 0.75rem;
  }
  
  .announcement-text h2 {
    font-size: 1.3rem;
  }
  
  .announcement-text p {
    font-size: 0.95rem;
  }
  
  .annc-nav {
    display: none; /* Hide arrows on very small screens, use swipe */
  }
}

/* Schedule Hero Responsive */
@media (max-width: 768px) {
  .sched-hero {
    padding: 28px 0 20px;
  }
  
  .sched-hero .wrap {
    padding: 0 1rem;
  }
  
  .sched-hero .title {
    font-size: 1.6rem;
  }
  
  .sched-hero .sub {
    font-size: 0.95rem;
  }
  
  .hero-cta {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .btn-primary,
  .cta-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  
  .hero-pill {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .sched-hero .title {
    font-size: 1.4rem;
  }
  
  .sched-hero .sub {
    font-size: 0.9rem;
  }
}