/* ----------------------- */
/* 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);
  }
  
  /* ----------------------- */
  /* 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;
  }
  
  /* 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    */
/* ==================== */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 30px 40px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  .close-btn {
    color: #aaa;
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  
  .close-btn:hover,
  .close-btn:focus {
    color: #000;
  }
  
  /* 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;
}

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

@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;
}
.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 fall {
  0% {
    transform: translateY(-60px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0.7;
  }
}


/* ===== Fall Camp Section ===== */
.fall-camp {
  position: relative;
  background: url('../images/fall-bg.png') center/cover no-repeat fixed; /* add fall-bg.jpg */
  color: #fff;
  padding: clamp(40px, 6vw, 80px) var(--space);
}

.fall-camp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(92, 40, 15, 0.65); /* warm brown overlay */
  z-index: 0;
}

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

.fall-camp h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: #FFD166; /* golden header */
  margin-bottom: .5rem;
}

.fall-camp .camp-tagline {
  font-weight: 700;
  color: #FDE68A; /* soft amber */
  margin-bottom: 1rem;
}

.fall-camp .camp-intro,
.fall-camp .camp-subtitle {
  margin-bottom: .75rem;
  color: #fff8f0;
}

.fall-style {
  background: rgba(255, 255, 255, 0.9);
  color: #5c2a06;
  border: 2px solid #e07a5f;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.fall-style p, .fall-style li {
  color: #5c2a06;
}

/* add vertical spacing between the stacked elements */
.fall-camp .camp-pricing-card,
.fall-camp .camp-disclaimer,
.fall-camp .camp-grid {
  margin: 1.5rem auto; /* space above & below each block */
  padding: 1rem;       /* inner padding for comfort */
}

.fall-camp .camp-card {
  padding: 1.2rem;
  margin: 1rem 0;
}

.fall-btn {
  background: linear-gradient(180deg, #E76F51, #B64926);
  border: none;
  color: #fff;
  font-weight: 900;
  padding: .9rem 1.4rem;
  border-radius: 12px;
  margin: 2rem auto 0; /* more space above the button */
  display: inline-block;
  box-shadow: 0 8px 18px rgba(183, 73, 38, 0.35);
  transition: transform .18s ease, box-shadow .18s ease;
}

.fall-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(183, 73, 38, 0.5);
}
/* === 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 */