/* =========================
RESPONSIVE DESIGN 
========================= */

@media (max-width: 768px) {
  /* Mobile body padding adjustment */
  body {
    padding-top: 120px; /* Adjusted for mobile header */
  }

  /* Mobile navigation adjustments */
  .site-header {
    flex-direction: column;
    padding: 15px 20px;
    text-align: center;
    min-height: auto; /* Allow header to be flexible */
  }

  .site-title {
    margin-bottom: 15px;
    font-size: 22px; /* Smaller on mobile */
  }

  .site-logo {
    height: 32px; /* Smaller logo on mobile */
  }

  .navbar ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Reduced gap for mobile */
    margin: 0;
    padding: 0;
  }

  .navbar li {
    flex: 0 0 auto; /* Prevent stretching */
  }

  .navbar a {
    font-size: 14px; /* Smaller text */
    padding: 8px 12px;
    white-space: nowrap;
    display: block;
  }

  /* Mobile section styling for consistency */
  h2 {
    font-size: 24px; /* Smaller headings on mobile */
    margin: 30px 15px 20px 15px;
    text-align: center;
    padding: 0 10px; /* Extra padding for very narrow screens */
  }

  h3 {
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
    padding: 0 15px;
  }

  p {
    padding: 0 15px; /* Consistent padding */
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
  }

  /* MOBILE TEAM SECTIONS - Stack vertically */
  .team-section,
  .team-section.right, 
  .team-section.left {
    flex-direction: column !important; /* Force column on mobile */
    text-align: center;
    gap: 25px;
    margin: 30px 15px;
    padding: 20px 0;
    max-width: none; /* Remove max-width restriction */
  }

  .team-photo {
    width: 250px; /* Consistent mobile size */
    height: 250px;
    margin: 0 auto;
    border-radius: 15px;
    align-self: center;
  }

  .team-text {
    padding: 0 15px;
    text-align: left;
    width: 100%;
  }

  .team-text h3 {
    text-align: center;
    margin-bottom: 15px;
    color: #2d3748;
    padding: 0;
  }

  .team-text p {
    padding: 0; /* Remove padding since parent has it */
    margin-bottom: 15px;
    font-size: 15px;
    line-height: 1.6;
  }

  .team-text ul {
    padding: 0 15px;
    margin: 0;
  }

  .team-text li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    padding: 10px 15px;
  }

  /* MOBILE LANGUAGE SECTIONS */
  .language-section,
  .language-section.right,
  .language-section.left {
    flex-direction: column !important;
    text-align: center;
    gap: 20px;
    margin: 30px 15px;
    padding: 20px 0;
  }

  .language-photo {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    border-radius: 15px;
  }

  .language-text {
    padding: 0 15px;
    text-align: center;
  }

  .language-text h3 {
    margin-bottom: 10px;
    font-size: 22px;
  }

  .language-text p {
    padding: 0;
    margin-bottom: 15px;
  }

  /* MOBILE COURSES SECTION */
  #Courses {
    margin: 30px 0;
    padding: 40px 15px;
  }

  #Courses h2 {
    margin: 0 0 20px 0;
  }

  #Courses p {
    padding: 0 15px;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
  }

  /* Services grid - single column with better spacing */
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 0 15px;
    margin-top: 30px;
  }

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

  .service-card h3 {
    font-size: 18px;
    padding: 0;
    margin-bottom: 10px;
  }

  .service-card p {
    font-size: 14px;
    padding: 0;
    margin-bottom: 15px;
    text-align: left;
  }

  .service-pricing {
    padding: 15px 10px;
    margin-bottom: 15px;
  }

  .service-pricing p {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .service-includes ul {
    padding-left: 0;
  }

  .service-includes li {
    font-size: 13px;
    padding: 3px 0;
    padding-left: 15px;
  }

  /* Hero sections mobile */
  #hero-section {
    padding: 80px 15px 50px;
    margin-top: 0;
  }

  .hero-content h1 {
    font-size: 2.2em !important;
    margin-bottom: 15px;
    padding: 0 10px;
  }

  .hero-content p {
    font-size: 1.1em !important;
    margin-bottom: 20px;
    padding: 0 15px;
  }

  /* English/Spanish/French specific sections */
  #why-english,
  #why-spanish,
  #why-french {
    padding: 50px 15px;
  }

  #why-english::before,
  #why-spanish::before,
  #why-french::before {
    font-size: 2.5em;
    top: 10px;
    right: 15px;
  }

  .english-section.left,
  .teaching-section.left,
  .french-section.left {
    flex-direction: column !important;
    text-align: center;
    gap: 25px;
    margin: 0;
    padding: 0;
  }

  .english-photo,
  .teaching-photo,
  .french-photo {
    width: 100%;
    max-width: 300px;
    height: 200px;
    margin: 0 auto;
  }

  .english-text,
  .teaching-text,
  .french-text {
    padding: 0 15px;
    text-align: left;
  }

  .english-text h2,
  .teaching-text h2,
  .french-text h2 {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 20px;
    padding: 0;
  }

  .english-text ul,
  .teaching-text ul,
  .french-text ul {
    padding: 0;
  }

  .english-text li,
  .teaching-text li,
  .french-text li {
    margin-bottom: 12px;
    padding: 15px;
    font-size: 14px;
    border-left-width: 3px;
  }

  /* Training style sections */
  #training-style {
    padding: 50px 15px;
  }

  #training-style h2 {
    font-size: 2em;
    margin-bottom: 15px;
  }

  #training-style p {
    font-size: 1.1em;
    margin-bottom: 30px;
    padding: 0 15px;
  }

  #training-style ul {
    grid-template-columns: 1fr !important;
    gap: 15px;
    padding: 0 15px;
  }

  #training-style li {
    padding: 20px 15px;
    font-size: 14px;
    text-align: left;
  }

  /* Testimonials mobile */
  .testimonials-section {
    padding: 40px 15px;
    margin: 40px 0;
  }

  .testimonial,
  .testimonial:nth-child(odd),
  .testimonial:nth-child(even) {
    margin: 20px 15px;
    padding: 20px 15px;
    max-width: none;
  }

  .testimonial-quote {
    font-size: 15px;
    margin-bottom: 15px;
  }

  .testimonial-author {
    font-size: 14px;
  }

  /* Footer mobile */
  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 25px;
    padding: 0 15px;
  }

  .contact-section h3,
  .social-section h3 {
    font-size: 22px;
    text-align: center;
    margin-bottom: 15px;
  }

  .contact-section p,
  .social-section p {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 15px;
    font-size: 15px;
  }

  .contact-info {
    gap: 15px;
  }

  .contact-item {
    font-size: 14px;
    justify-content: center;
    text-align: center;
  }

  .social-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }

  .social-link {
    padding: 10px 12px;
    font-size: 14px;
  }

  /* Modal mobile adjustments */
  .modal-content {
    width: 95%;
    padding: 25px 20px;
    margin: 10px;
    max-height: 95vh;
  }

  .modal-title {
    font-size: 22px;
    padding: 0 10px;
  }

  .modal-subtitle {
    font-size: 14px;
    padding: 0 10px;
  }

  .phone-group {
    flex-direction: column;
    gap: 10px;
  }

  .country-code {
    width: 100%;
  }

  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px 14px;
  }

  .submit-btn {
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Book now buttons */
  .book-now-btn {
    font-size: 14px;
    padding: 10px 20px;
    margin-top: 15px;
  }
}

/* Additional breakpoint for very small screens */
@media (max-width: 480px) {
  body {
    padding-top: 110px;
  }

  .site-title {
    font-size: 20px;
    gap: 6px;
  }

  .site-logo {
    height: 28px;
  }

  .navbar a {
    font-size: 13px;
    padding: 6px 10px;
  }

  h2 {
    font-size: 20px;
    margin: 25px 10px 15px 10px;
  }

  p {
    padding: 0 10px;
    font-size: 14px;
  }

  .team-section,
  .language-section {
    margin: 25px 10px;
    gap: 20px;
  }

  .team-photo,
  .language-photo {
    width: 200px;
    height: 200px;
  }

  .services-grid {
    padding: 0 10px;
  }

  .service-card {
    padding: 15px 10px;
  }

  .testimonials-section {
    padding: 30px 10px;
  }

  .testimonial {
    margin: 15px 10px;
    padding: 15px 10px;
  }

  .hero-content h1 {
    font-size: 1.8em !important;
    padding: 0 5px;
  }

  .hero-content p {
    font-size: 1em !important;
    padding: 0 10px;
  }

  #hero-section {
    padding: 70px 10px 40px;
  }

  #training-style,
  #why-english,
  #why-spanish,
  #why-french {
    padding: 40px 10px;
  }
}

/* Landscape mobile phones */
@media (max-width: 768px) and (orientation: landscape) {
  body {
    padding-top: 90px;
  }

  .site-header {
    padding: 10px 15px;
  }

  .site-title {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .navbar ul {
    gap: 8px;
  }

  .navbar a {
    padding: 6px 10px;
    font-size: 13px;
  }

  #hero-section {
    padding: 60px 15px 40px;
  }

  .hero-content h1 {
    font-size: 2em !important;
  }

  .hero-content p {
    font-size: 1em !important;
  }
}

/*  TABLE FORMATTING  */
/* Animation and Responsive Styles for Spanish Lesson Options */

/* ================================
   ANIMATIONS & TRANSITIONS
   ================================ */

/* Fade-in animation for sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations to elements */
.lesson-options-section {
    animation: fadeInUp 0.8s ease-out;
}


/* Large screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
  
}

/* Medium screens (768px - 1199px) */
@media (max-width: 1199px) {
    .lesson-options-section {
        padding: 40px 30px;
    }
    
    .process-steps {
        gap: 25px;
    }
}

/* Small screens (768px and below) */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .lesson-options-section {
        padding: 30px 20px;
        border-radius: 15px;
        margin-bottom: 30px;
    }
    
    .lesson-options-section::before {
        font-size: 2em;
        top: 15px;
        right: 20px;
    }
    
    .lesson-options-section h2 {
        font-size: 2em;
        margin-bottom: 15px;
    }
    
    .intro-text {
        font-size: 1.1em;
        margin-bottom: 30px;
    }
 /* Table responsive */
    .table-container {
        border-radius: 10px;
    }
    
    .lesson-options-table {
        border-radius: 10px;
    }
    
    .lesson-options-table th,
    .lesson-options-table td {
        padding: 15px 10px;
        font-size: 0.9em;
    }
    
    .category-cell {
        font-size: 0.9em;
    }
    
    .content-cell li {
        font-size: 0.85em;
        margin-bottom: 6px;
    }
}

/* Extra small screens (480px and below) */
@media (max-width: 480px) {
    .lesson-options-section {
        padding: 25px 15px;
        border-radius: 12px;
    }
    
    .lesson-options-section h2 {
        font-size: 1.8em;
    }
    
    .intro-text {
        font-size: 1em;
        padding: 0 10px;
    }
     .lesson-options-table th,
    .lesson-options-table td {
        padding: 12px 8px;
        font-size: 0.8em;
    }
}

/* ================================
   ACCESSIBILITY & PERFORMANCE
   ================================ */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .step-number {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .lesson-options-section {
        border: 2px solid #000;
    }
    
    .pricing-note {
        border: 1px solid #000;
    }
}


/* Print styles */
@media print {
    .lesson-options-section {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
        margin-bottom: 20px;
    }
}