/* style.css */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
  --font-primary: 'Oswald', sans-serif;
  --font-secondary: 'Nunito', sans-serif;

  --primary-color: #388E3C; /* Darker, sophisticated green */
  --primary-color-light: #4CAF50; /* Brighter green for accents/hovers */
  --secondary-color: #FFA000; /* Amber/Gold for retro contrast */
  --secondary-color-light: #FFC107;
  --accent-color: #D32F2F; /* Retro Red for specific accents */
  
  --text-color-dark: #212121; /* Very dark grey for primary text */
  --text-color-medium: #555555; /* Medium grey for secondary text */
  --text-color-light: #FFFFFF;
  --text-color-on-gradient: #FFFFFF;

  --bg-color-light: #F5F5F5;
  --bg-color-white: #FFFFFF;
  --bg-color-dark-section: #263238; /* For dark themed sections if any */

  --gradient-primary-bg: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  --gradient-retro-cool: linear-gradient(45deg, #42A5F5, #66BB6A); /* Blue to Green */
  --gradient-retro-warm: linear-gradient(45deg, #FFA726, #FF7043); /* Orange to Coral */

  --card-bg-color: var(--bg-color-white);
  --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  --header-height: 70px;
  --transition-speed: 0.3s;
  --transition-cubic: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/*--------------------------------------------------------------
# Base Styles & Resets
--------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px; /* Base font size */
}

body {
  font-family: var(--font-secondary);
  color: var(--text-color-dark);
  background-color: var(--bg-color-light);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

main {
  padding-top: var(--header-height); /* Offset for fixed header */
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--primary-color-light);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--text-color-dark);
  margin-bottom: 0.75rem;
  line-height: 1.3;
  font-weight: 700;
}

h1 { font-size: 2.8rem; margin-bottom: 1.5rem; }
h2 { font-size: 2.2rem; margin-bottom: 1.25rem; } /* Section titles */
h3 { font-size: 1.6rem; margin-bottom: 1rem; } /* Card titles */
h4 { font-size: 1.3rem; margin-bottom: 0.5rem; }

p {
  margin-bottom: 1rem;
  color: var(--text-color-medium);
}

.section-title {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #222222; /* Darker for contrast as per prompt */
}

.section-subtitle {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  font-size: 1.1rem;
  color: var(--text-color-medium);
}

/*--------------------------------------------------------------
# Layout (Container, Columns)
--------------------------------------------------------------*/
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.section {
  padding: 60px 0;
}

.columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

.columns.is-multiline { flex-wrap: wrap; }
.columns.is-vcentered { align-items: center; }
.columns.is-centered { justify-content: center; }
.columns.has-text-centered .column { text-align: center; }

.column.is-one-quarter { flex: none; width: 25%; }
.column.is-one-third { flex: none; width: 33.3333%; }
.column.is-half { flex: none; width: 50%; }
.column.is-two-thirds { flex: none; width: 66.6666%; }

@media (max-width: 768px) {
  .column.is-one-quarter,
  .column.is-one-third,
  .column.is-half,
  .column.is-two-thirds {
    width: 100%;
  }
}
/*--------------------------------------------------------------
# Buttons (Global Styles)
--------------------------------------------------------------*/
.btn, button, input[type="submit"], input[type="button"] {
  display: inline-block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.8rem 1.8rem;
  border-radius: var(--border-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-speed) var(--transition-cubic);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  line-height: 1.5; /* Ensure consistent height */
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(0px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border-color: var(--primary-color);
}
.btn-primary:hover {
  background-color: var(--primary-color-light);
  border-color: var(--primary-color-light);
  color: var(--text-color-light);
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--text-color-dark);
  border-color: var(--secondary-color);
}
.btn-secondary:hover {
  background-color: var(--secondary-color-light);
  border-color: var(--secondary-color-light);
  color: var(--text-color-dark);
}

.btn-tertiary {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-tertiary:hover {
  background-color: var(--primary-color);
  color: var(--text-color-light);
  border-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card {
  background-color: var(--card-bg-color);
  border-radius: var(--border-radius-md);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure cards in a row have same height if content varies */
  text-align: left; /* Default text align for card content */
}

.card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-5px);
}

.card .card-image {
  width: 100%;
  height: 220px; /* Consistent height for card images */
  overflow: hidden;
  background-color: var(--bg-color-medium); /* Placeholder bg */
}

.card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-speed) ease;
}

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

.card .card-content {
  padding: 1.5rem;
  flex-grow: 1; /* Allows content to fill space, pushing buttons down */
  display: flex;
  flex-direction: column;
}
.card .card-content > *:last-child {
    margin-bottom: 0; /* Remove bottom margin from last child if it's p */
}
.card .card-content .btn {
    margin-top: auto; /* Push button to bottom */
    align-self: flex-start; /* Align button to start if card content is not centered */
}


.card .card-title {
  font-size: 1.4rem;
  color: var(--text-color-dark);
  margin-bottom: 0.75rem;
}

.course-price {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Testimonial Card Specifics */
.testimonial-card {
    text-align: center;
}
.testimonial-card .card-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 1.5rem auto 1rem auto; /* Centered, spacing */
    border: 4px solid var(--bg-color-white);
}
.testimonial-card .card-image img {
    border-radius: 50%;
}
.testimonial-card .card-content h4 {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--primary-color);
}
.testimonial-card .card-content p {
    font-style: italic;
    color: var(--text-color-medium);
}

/* Resource Card (for external links) */
.resource-card {
    background: var(--bg-color-white);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
    transition: var(--transition-speed) ease;
    height: 100%;
}
.resource-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-3px);
}
.resource-card h4 a {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    color: var(--primary-color);
}
.resource-card p {
    font-size: 0.9rem;
    color: var(--text-color-medium);
    margin-top: 0.5rem;
}

/* Info Card (Innovation section) */
.info-card {
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: 100%;
}
.info-card h3 {
    color: var(--text-color-dark); /* Ensure readability */
}
.info-card p {
    color: var(--text-color-medium); /* Ensure readability */
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-family: var(--font-secondary);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-color-dark); /* Label color for contact form (on dark bg, this will be overridden) */
}

#contact-form-section .form-group label {
    color: var(--text-color-light); /* Labels on dark contact form background */
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid #ccc;
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--text-color-dark);
  background-color: var(--bg-color-white);
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 76, 175, 80), 0.25); /* Fallback primary-color-rgb */
}
/* Define --primary-color-rgb if needed or use hex with alpha */
:root { --primary-color-rgb: 56, 142, 60; } /* For #388E3C */

textarea {
  resize: vertical;
  min-height: 120px;
}

#contact-form .btn-submit {
    width: auto;
    min-width: 200px;
}

/*--------------------------------------------------------------
# Header / Navigation
--------------------------------------------------------------*/
#main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--gradient-primary-bg); /* Retro gradient */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  height: var(--header-height);
  padding: 0; /* Remove default padding */
  display: flex; /* Align items vertically */
  align-items: center; /* Align items vertically */
}

#main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* Ensure container takes full header height */
}

#main-header .logo a {
  font-family: var(--font-primary);
  font-size: 1.8em;
  color: var(--text-color-light);
  text-decoration: none;
  font-weight: 700;
}
#main-header .logo span {
  color: var(--secondary-color-light); /* Accent color for logo part */
}

#main-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

#main-nav ul li {
  margin-left: 25px;
}

#main-nav ul li a {
  font-family: var(--font-secondary);
  font-weight: 700;
  color: var(--text-color-light);
  text-decoration: none;
  padding: 10px 0;
  position: relative;
  transition: color var(--transition-speed) ease;
  font-size: 0.95rem;
  text-transform: uppercase;
}

#main-nav ul li a:hover,
#main-nav ul li a.active { /* Add .active class via JS for current page */
  color: var(--secondary-color-light); /* Highlight color */
}

#main-nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--secondary-color-light);
  transition: width var(--transition-speed) ease;
}

#main-nav ul li a:hover::after,
#main-nav ul li a.active::after {
  width: 100%;
}

#burger-menu {
  display: none; /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
#burger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--text-color-light);
  margin: 5px 0;
  border-radius: 3px;
  transition: all var(--transition-speed) ease;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#main-footer {
  background-color: #333; /* Dark retro footer */
  color: #ccc;
  padding: 40px 0 20px 0;
  font-size: 0.9rem;
}

#main-footer .footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Space between columns */
  margin-bottom: 30px;
}

#main-footer .footer-column {
  flex: 1;
  min-width: 200px; /* Minimum width before wrapping */
  margin-bottom: 20px; /* Space for wrapped columns */
}

#main-footer h4 {
  font-family: var(--font-primary);
  color: var(--text-color-light);
  font-size: 1.2rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#main-footer p {
  color: #aaa;
  line-height: 1.7;
}

#main-footer ul {
  list-style: none;
  padding: 0;
}

#main-footer ul li {
  margin-bottom: 10px;
}

#main-footer ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color var(--transition-speed) ease, padding-left var(--transition-speed) ease;
}

#main-footer ul li a:hover {
  color: var(--text-color-light);
  padding-left: 5px; /* Subtle hover effect */
  text-decoration: none;
}

#main-footer .social-links li a {
  display: inline-block; /* For better hover area */
}
/* No icons needed as per prompt: "textual links" */

#main-footer .copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #444;
  color: #888;
  font-size: 0.85rem;
}

#main-footer .copyright a {
    color: #aaa;
}
#main-footer .copyright a:hover {
    color: var(--text-color-light);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--text-color-light); /* Default color for text inside */
  padding: 120px 0; /* Adjust padding as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh; /* Ensure it's substantial but not fixed 400px */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75));
  z-index: 1;
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind overlay */
}

.hero-section .container.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-section h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  /* color: var(--text-color-light); Already set in HTML, but good to ensure */
  /* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); Already set in HTML */
}

.hero-section p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  /* color: var(--text-color-light); Already set in HTML */
  /* text-shadow: 1px 1px 3px rgba(0,0,0,0.5); Already set in HTML */
  line-height: 1.7;
}

.hero-section .btn-primary {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Simple parallax */
    padding: 80px 0;
    color: var(--text-color-light);
}
.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.85), rgba(var(--secondary-color-rgb, 255, 160, 0), 0.85));
    z-index: 1;
}
:root { --secondary-color-rgb: 255, 160, 0; }

.stats-section .container {
    position: relative;
    z-index: 2;
}
.stats-section .section-title {
    color: var(--text-color-light); /* White title on dark overlay */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.stat-widget {
    padding: 20px;
}
.stat-number {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-color-light);
    display: block;
    margin-bottom: 0.5rem;
}
.stat-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.event-list .event-item.card {
    margin-bottom: 1.5rem;
}
.event-item .card-content h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
}
.event-item .card-content p strong {
    color: var(--text-color-dark);
}

/*--------------------------------------------------------------
# Portfolio / Testimonials Section
--------------------------------------------------------------*/
.portfolio-section {
    background-image: var(--gradient-retro-cool); /* Example gradient */
}
.portfolio-section .section-title,
.portfolio-section .section-subtitle {
    color: var(--text-color-dark); /* Ensure readability on light gradient */
}
/* If gradient is dark, use light text and text-shadow */


/*--------------------------------------------------------------
# Behind The Scenes Section
--------------------------------------------------------------*/
.behind-the-scenes-section {
    background-color: var(--bg-color-white); /* Contrasting background */
}
.behind-the-scenes-section .image-container img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--card-shadow);
}
.behind-the-scenes-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# Press Section
--------------------------------------------------------------*/
.press-card .card-image {
    height: 120px; /* Adjust for logos */
    padding: 1rem; /* Padding around logo */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color-light);
}
.press-card .card-image img {
    max-height: 80%; /* Ensure logo fits well */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain;
}
.press-card .card-content p {
    font-style: italic;
    text-align: center;
}
.press-card .card-content em {
    font-weight: bold;
    color: var(--primary-color);
}

/*--------------------------------------------------------------
# Innovation Section
--------------------------------------------------------------*/
.innovation-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
}
.innovation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8));
    z-index: 1;
}
.innovation-section .container {
    position: relative;
    z-index: 2;
}
/* Section title and subtitle styling is done via HTML inline styles for color */

/*--------------------------------------------------------------
# External Resources Section
--------------------------------------------------------------*/
.external-resources-section {
    background-color: var(--bg-color-white);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
}
.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.85));
    z-index: 1;
}
.contact-section .container {
    position: relative;
    z-index: 2;
    max-width: 700px;
}
/* Section title and subtitle styling done via HTML inline styles for color */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    background-color: rgba(255,255,255,0.9); /* Slightly transparent inputs */
    border-color: rgba(255,255,255,0.5);
    color: var(--text-color-dark);
}
#contact-form input[type="text"]::placeholder,
#contact-form input[type="email"]::placeholder,
#contact-form textarea::placeholder {
    color: #888;
}
#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form textarea:focus {
    background-color: var(--bg-color-white);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3);
}

/*--------------------------------------------------------------
# Page Specific Styles (Success, Privacy, Terms)
--------------------------------------------------------------*/
.success-page-container,
.privacy-page-container,
.terms-page-container {
    padding-top: var(--header-height); /* For fixed header */
    color: var(--text-color-dark);
}

.success-page-content {
    min-height: calc(100vh - var(--header-height) - 180px); /* 180px approx footer height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    background-color: var(--bg-color-white);
}
.success-page-content h1 {
    color: var(--primary-color);
    font-size: 3rem;
}
.success-page-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
}

.static-page-content { /* For privacy.html, terms.html */
    padding: 40px 0; /* Additional padding beyond header offset for main */
    background-color: var(--bg-color-white);
}
.static-page-content .container {
    max-width: 900px; /* Readable width for text-heavy pages */
}
.static-page-content h1 {
    margin-bottom: 2rem;
    color: var(--primary-color);
}
.static-page-content h2, .static-page-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color-light);
}

/* Specific padding for privacy and terms content to not overlap fixed header */
/* The main tag already has padding-top. If specific pages need more: */
body.privacy-page main,
body.terms-page main {
    /* If the global main padding-top is enough, this is not needed */
    /* padding-top: calc(var(--header-height) + 40px); /* Example if more space is needed */
}
/* The prompt asks for padding-top: 100px. The header is 70px.
   So an additional 30px is needed if the target is from viewport top.
   It's better to ensure the main content container within these pages has the padding.
   The .static-page-content rule with padding: 40px 0 should handle this inside main.
*/

/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/
@media (max-width: 992px) {
  .hero-section h1 { font-size: 2.8rem; }
  .hero-section p { font-size: 1.1rem; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}

@media (max-width: 768px) {
  #main-nav {
    position: relative; /* For burger menu positioning */
  }
  #burger-menu {
    display: block; /* Show burger on mobile */
    z-index: 1001; /* Above nav links */
  }
  #nav-links {
    display: none; /* Hidden by default */
    flex-direction: column;
    position: absolute;
    top: calc(var(--header-height) - 15px); /* Position below header */
    right: -15px; /* Align to right of container */
    background: var(--primary-color); /* Same as header or slightly darker */
    width: 250px;
    padding: 20px;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-align: left;
  }
  #nav-links.active {
    display: flex; /* Show when active */
  }
  #main-nav ul li {
    margin-left: 0;
    margin-bottom: 15px;
    width: 100%;
  }
  #main-nav ul li a {
    display: block; /* Full width clickable */
    padding: 10px;
    font-size: 1rem;
  }
  #main-nav ul li a::after {
      display: none; /* Remove underline effect for mobile dropdown */
  }

  .hero-section { padding: 80px 0; }
  .hero-section h1 { font-size: 2.2rem; }
  .hero-section p { font-size: 1rem; }

  .footer-columns { flex-direction: column; text-align: center; }
  .footer-column { min-width: 100%; }
}

@media (max-width: 576px) {
  .section { padding: 40px 0; }
  .section-title { font-size: 1.8rem; }
  .section-subtitle { font-size: 1rem; margin-bottom: 1.5rem; }
  
  .hero-section h1 { font-size: 2rem; }
  .hero-section p { font-size: 0.9rem; }
  .hero-section .btn-primary { padding: 0.8rem 1.5rem; font-size: 0.9rem;}

  .btn, button, input[type="submit"], input[type="button"] {
    font-size: 0.9rem;
    padding: 0.7rem 1.5rem;
  }
  .card .card-content { padding: 1rem; }
  .card .card-title { font-size: 1.2rem; }
  .course-price { font-size: 1rem; }

  /* Forcing columns to stack */
    .columns .column {
        width: 100% !important; /* Force stack on small screens */
        flex: none !important;
    }
}

/* Fix for Animate.css on scroll - if elements are animated on scroll,
   they might be hidden initially. Ensure they are visible if not animated. */
.animate__animated {
  visibility: visible; /* Ensure elements are visible even if JS for scroll animation fails */
}
*{
  opacity: 1 !important;
}
html,body{
  overflow-x: hidden;
}
#burger-menu{
  display: none !important;
}
@media (max-width: 768px) {
  #nav-links{
    display: none !important;
  }
}