/* ============================================
CSS Variables - Darker Otomi Color Palette
============================================ */
:root {
    /* Primary Colors - Darker & Richer Tones */
    --color-teal: #159B8E;
    --color-teal-deep: #0A7A73;
    --color-teal-light: #1CA89F;
    --color-coral: #D83B3B;
    --color-coral-deep: #B82E2E;
    --color-magenta: #B31F5F;
    --color-pink-light: #D94F7E;
    --color-green: #228A38;
    --color-green-mid: #2E8B44;
    --color-yellow: #D69D00;
    --color-yellow-accent: #E69A0F;
    --color-navy: #162033;

    /* Secondary Colors - Darker */
    --color-orange: #D66315;
    --color-orange2: #C75203;
    --color-purple: #663399;

    /* Neutrals */
    --color-text: #2A3240;
    --color-bg: #FFFFFF;
    --color-bg-warm: #F5F5F2;
    --color-bg-teal: #F0F8F7;

    /* Darker Tints for sections */
    --color-teal-tint: #D9F0ED;
    --color-coral-tint: #F7DCDC;
    --color-yellow-tint: #FFF0CC;
    --color-magenta-tint: #F5D6E6;
    --color-green-tint: #D9EFE0;
}

/* ============================================
Global Reset & Base Styles
============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%; /* Respect user's default font size */
}

body {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem; /* Relative unit - scales with user preferences */
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-bg);
    overflow-x: hidden;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* ============================================
Typography - Using relative units
============================================ */
h1, h2 {
    font-family: 'Fraunces', serif;
    color: var(--color-navy);
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem); /* Fluid sizing with min/max */
    margin-bottom: 0.5rem;
    letter-spacing: 0.125rem;
    font-weight: 800;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 3rem); /* Fluid sizing */
    margin-bottom: 2.5rem;
    text-align: center;
    position: relative;
    font-weight: 800;
}

h2::after {
    content: '';
    display: block;
    width: clamp(60px, 10vw, 80px); /* Fluid width */
    height: 4px;
    background: linear-gradient(to right, var(--color-coral), var(--color-magenta), var(--color-purple));
    margin: 1rem auto 0;
    border-radius: 2px;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* Fluid sizing */
    margin-bottom: 1rem;
    font-weight: 700;
}

p {
    margin-bottom: 1.5rem;
}

strong {
    font-weight: 700;
}

a {
    color: var(--color-teal);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 600;
}

a:hover {
    color: var(--color-coral);
}

/* ============================================
Container - Fluid with relative padding
============================================ */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem; /* Relative unit */
}

/* ============================================
Header with Image
============================================ */
.header-image-container {
    width: 100%;
    background-color: var(--color-bg);
    text-align: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.page-header-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.banner-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;    
}

/* ============================================
Decorative Border Elements
============================================ */
.otomi-border {
    height: 1rem;
    background: linear-gradient(to right,
    var(--color-teal) 0%,
    var(--color-coral) 20%,
    var(--color-yellow) 40%,
    var(--color-magenta) 60%,
    var(--color-green) 80%,
    var(--color-purple) 100%);
}

.dot-pattern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    flex-wrap: wrap;
}

.decorative-shape {
    width: 3.75rem;
    height: 3.75rem;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

.shape-flower {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.shape-circle {
    border-radius: 50%;
}

.shape-petal {
    border-radius: 50% 0 50% 0;
    transform: rotate(45deg);
}

.shape-leaf {
    border-radius: 0 100% 0 100%;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.bg-teal { background-color: var(--color-teal); }
.bg-coral { background-color: var(--color-coral); }
.bg-magenta { background-color: var(--color-magenta); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-green { background-color: var(--color-green); }
.bg-purple { background-color: var(--color-purple); }
.bg-orange { background-color: var(--color-orange); }

/* ============================================
Section Styling with Organic Borders - Fluid padding
============================================ */
section {
    padding: 6rem 2rem; /* Relative units */
    position: relative;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    opacity: 0.4;
}

.section-about {
    background: linear-gradient(135deg, var(--color-teal-tint) 0%, var(--color-bg) 100%);
    color: var(--color-navy);
}

.section-teacher {
    background: linear-gradient(135deg, var(--color-coral-tint) 0%, var(--color-bg) 100%);
    color: var(--color-coral);
}

.section-courses {
    background: linear-gradient(135deg, var(--color-yellow-tint) 0%, var(--color-bg) 100%);
}

.section-contact {
    background: linear-gradient(135deg, var(--color-magenta-tint) 0%, var(--color-bg) 100%);
    color: var(--color-magenta);
}

/* ============================================
Content Boxes with Organic Styling
============================================ */
.content-box {
    max-width: 56.25rem;
    margin: 0 auto;
    position: relative;
}

.content-box p:first-of-type::first-letter {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Fluid sizing */
    font-weight: 800;
    float: left;
    line-height: 0.8;
    margin: 0.5rem 0.75rem 0 0;
    color: var(--color-coral);
    font-family: 'Fraunces', serif;
}

/* ============================================
Locations Section Styling - Fluid layout
============================================ */
.locations-section {
    background: var(--color-bg);
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin-top: 2.5rem;
    border: 0.25rem solid var(--color-green);
    box-shadow:
        0.5rem 0.5rem 0 var(--color-green-tint),
        -0.5rem -0.5rem 0 var(--color-yellow-tint);
    position: relative;
    overflow: visible; /* Allow content to expand */
}

.locations-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background: linear-gradient(to right,
        var(--color-green),
        var(--color-teal),
        var(--color-yellow));
}

.locations-section::after {
    content: '📍';
    position: absolute;
    font-size: 2.5rem;
    color: var(--color-yellow);
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0.125rem 0.125rem 0 var(--color-orange);
}

.locations-section h3 {
    text-align: center;
    color: var(--color-navy);
    font-size: clamp(1.25rem, 3vw, 1.8rem); /* Fluid sizing */
    margin-bottom: 2rem;
    font-weight: 800;
}

/* Grid layout for 3 columns - Fluid */
.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.location-item {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-green-tint) 0%, var(--color-teal-tint) 100%);
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: 0.125rem solid transparent;
    margin: 0;
    min-height: auto; /* Remove fixed height, let content determine */
    height: auto; /* Allow height to grow with text */
}

.location-item:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.5rem 1.5rem rgba(34, 138, 56, 0.2);
    border-color: var(--color-green);
}

.location-item h4 {
    color: var(--color-green);
    font-size: clamp(1rem, 2.5vw, 1.4rem); /* Fluid sizing */
    font-weight: 800;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.location-item h4::before {
    content: '📍';
    font-size: 1.2rem;
    flex-shrink: 0;
}

.location-item.online h4::before {
    content: '💻';
}

.location-address {
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    list-style: none;
}

.location-address li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(34, 138, 56, 0.1);
}

.location-address li:last-child {
    border-bottom: none;
}

.location-address a {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: block;
    padding: 0.25rem 0;
}

.location-address a:hover {
    color: var(--color-coral);
    transform: translateX(0.5rem);
    text-decoration: underline;
    text-decoration-color: var(--color-coral);
    text-decoration-thickness: 0.125rem;
}

/* ============================================
Teacher Section with Enhanced Design - Fluid
============================================ */
.teacher-intro {
    background: var(--color-bg);
    padding: 3rem;
    border-radius: 1.5rem;
    border-left: 0.5rem solid var(--color-coral);
    border-right: 0.5rem solid var(--color-teal);
    box-shadow:
    0.75rem 0.75rem 0 var(--color-yellow-tint),
    -0.75rem -0.75rem 0 var(--color-teal-tint);
    position: relative;
    margin-top: 2rem;
}

.teacher-intro::before,
.teacher-intro::after {
    content: '✦';
    position: absolute;
    font-size: 2rem;
    color: var(--color-magenta);
    animation: sparkle 2s ease-in-out infinite;
}

.teacher-intro::before {
    top: -0.75rem;
    left: 1.5rem;
}

.teacher-intro::after {
    bottom: -0.75rem;
    right: 1.5rem;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* ============================================
Courses Grid with Vibrant Cards - Fluid
============================================ */
.courses-intro {
    text-align: left;
    margin-bottom: 4rem;
    color: var(--color-navy);
    background: var(--color-bg);
    padding: 1.5rem 2rem;
    border-radius: 3.125rem;
    display: inline-block;
    margin-left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.1);
    border: 0.1875rem solid var(--color-yellow);
    max-width: 90%; /* Prevent overflow on small screens */
}

.courses-intro-levels {
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* Fluid with minimum width */
    gap: 3rem;
    margin: 0 auto;
    justify-content: center;
}

/* ============================================
Contact Section with Bold Design
============================================ */
.contact-content {
    max-width: 43.75rem;
    margin: 0 auto;
    text-align: center;
}

/* ============================================
Contact Form Styling - Fluid
============================================ */
.contact-form {
    background: var(--color-bg);
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin-top: 2.5rem;
    border: 0.25rem solid var(--color-teal);
    box-shadow:
        0.5rem 0.5rem 0 var(--color-teal-tint),
        -0.5rem -0.5rem 0 var(--color-coral-tint);
    position: relative;
    overflow: visible;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background: linear-gradient(to right,
        var(--color-teal),
        var(--color-coral),
        var(--color-yellow));
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-teal-tint) 0%, #ffffff 100%);
    border: 0.125rem solid var(--color-teal);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-coral);
    background: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(216, 59, 59, 0.1);
}

.contact-form textarea {
    min-height: 9.375rem;
    resize: vertical;
}

.contact-form button[type="submit"] {
    padding: 1.125rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: var(--color-bg);
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-magenta) 100%);
    border: none;
    border-radius: 3.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.25rem 1rem rgba(216, 59, 59, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
}

.contact-form button[type="submit"]:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.5rem rgba(216, 59, 59, 0.5);
}

.contact-form button[type="submit"]:active {
    transform: translateY(0);
}

/* Form labels styling */
.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder,
.contact-form textarea::placeholder {
    color: var(--color-text);
    opacity: 0.6;
    font-weight: 600;
}

.contact-info {
    background: var(--color-bg);
    padding: 3.5rem 3rem;
    border-radius: 2rem;
    margin-top: 3rem;
    border: 0.375rem solid var(--color-magenta);
    box-shadow:
    0 0 0 0.75rem var(--color-magenta-tint),
    0 0.5rem 2rem rgba(179, 31, 95, 0.25);
    position: relative;
}

.contact-info::before {
    content: '●';
    position: absolute;
    font-size: 4rem;
    color: var(--color-yellow);
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0.125rem 0.125rem 0 var(--color-orange);
}

.contact-item {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-teal-tint) 0%, var(--color-coral-tint) 100%);
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: 0.125rem solid transparent;
}

.contact-item:hover {
    transform: scale(1.02);
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.12);
    border-color: var(--color-teal);
}

.contact-label {
    font-weight: 800;
    color: var(--color-navy);
    display: block;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
}

.contact-value {
    font-size: 1.6rem;
    color: var(--color-teal);
    font-weight: 800;
}

.contact-value a {
    color: var(--color-teal);
    text-decoration: none;
    position: relative;
}

.contact-value a::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 100%;
    height: 0.1875rem;
    background: var(--color-coral);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.contact-value a:hover {
    color: var(--color-coral);
}

.contact-value a:hover::after {
    transform: scaleX(1);
}

.courses-notice {
    background: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-yellow-accent) 100%);
    color: var(--color-navy);
    padding: 1.5rem 2.5rem;
    border-radius: 3.125rem;
    margin-top: 3rem;
    font-weight: 800;
    font-size: clamp(1rem, 2vw, 1.4rem); /* Fluid sizing */
    box-shadow: 0 0.5rem 1.5rem rgba(214, 157, 0, 0.4);
    border: 0.25rem solid var(--color-orange);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* ============================================
Footer with Vibrant Design - Fluid
============================================ */
footer {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-teal-deep) 100%);
    color: var(--color-bg);
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

/* ============================================
Trial Lesson Button Section - Fluid
============================================ */
.section-trial {
    background: linear-gradient(135deg, var(--color-yellow-tint) 0%, var(--color-bg) 100%);
    position: relative;
    overflow: hidden;
}

.trial-button-container {
    margin: 0 auto;
    background: var(--color-bg);
    padding: 2rem 2rem;
    border-radius: 2rem;
    border: 0.25rem solid var(--color-orange);
    box-shadow:
        0.5rem 0.5rem 0 var(--color-yellow-tint),
        -0.5rem -0.5rem 0 var(--color-orange-tint);
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    max-width: 90%; /* Prevent overflow */
}

.trial-button-container:hover {
    transform: translateY(-0.25rem);
    box-shadow:
        0.75rem 0.75rem 0 var(--color-yellow-tint),
        -0.75rem -0.75rem 0 var(--color-orange-tint);
}

.trial-button-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.875rem;
    right: 0.875rem;
    height: 0.25rem;
    background: linear-gradient(to right,
        var(--color-yellow),
        var(--color-orange),
        var(--color-coral));
}

.trial-button-container::after {
    content: '✨';
    position: absolute;
    font-size: 2.5rem;
    color: var(--color-yellow);
    top: -1.25rem;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0.125rem 0.125rem 0 var(--color-orange);
}

.trial-button-container h3 {
    font-size: clamp(1.25rem, 3vw, 1.5rem); /* Fluid sizing */
    color: var(--color-navy);
    margin-bottom: 2rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    font-family: 'Fraunces', serif;
}

.trial-button {
    display: inline-block;
    padding: 1.25rem 3rem;
    font-size: clamp(1rem, 2.5vw, 1.3rem); /* Fluid sizing */
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: var(--color-bg);
    background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-magenta) 100%);
    border: none;
    border-radius: 3.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.375rem 1.25rem rgba(216, 59, 59, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    text-decoration: none;
}

.trial-button:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.625rem 1.875rem rgba(216, 59, 59, 0.5);
    background: linear-gradient(135deg, var(--color-coral-deep) 0%, var(--color-magenta) 100%);
}

.trial-button:active {
    transform: translateY(-0.0625rem);
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: linear-gradient(to right,
    var(--color-teal),
    var(--color-coral),
    var(--color-yellow),
    var(--color-magenta),
    var(--color-green));
}

footer p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.footer-decoration {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.footer-shape {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-block;
    animation: bounce 2s ease-in-out infinite;
}

.footer-shape:nth-child(2) { animation-delay: 0.2s; }
.footer-shape:nth-child(3) { animation-delay: 0.4s; }
.footer-shape:nth-child(4) { animation-delay: 0.6s; }
.footer-shape:nth-child(5) { animation-delay: 0.8s; }

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.75rem); }
}

/* ============================================
Floating Shapes Background
============================================ */
.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.floating-shape {
    position: absolute;
    opacity: 0.1;
    animation: float-around 20s ease-in-out infinite;
}

.floating-shape:nth-child(1) {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.floating-shape:nth-child(2) {
    top: 60%;
    right: 10%;
    animation-delay: 5s;
}

.floating-shape:nth-child(3) {
    bottom: 20%;
    left: 15%;
    animation-delay: 10s;
}

@keyframes float-around {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -20px) rotate(90deg); }
    50% { transform: translate(-20px, 20px) rotate(180deg); }
    75% { transform: translate(20px, 20px) rotate(270deg); }
}

section > .container {
    position: relative;
    z-index: 1;
}

/* ============================================
Teacher Photo Styling - Fluid
============================================ */
.teacher-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
}

.teacher-intro {
    flex: 1;
    margin-top: 0;
}

.teacher-photo {
    width: 100%;
    max-width: 18.75rem; /* 300px converted to rem */
    min-width: auto; /* Remove fixed min-width */
    height: auto;
    object-fit: contain;
    border-radius: 1.5rem;
    box-shadow: 0.5rem 0.5rem 0 var(--color-coral-tint), -0.5rem -0.5rem 0 var(--color-teal-tint);
    border: 0.25rem solid var(--color-coral);
}

/* ============================================
Testimonial Boxes Styling - Fluid
============================================ */
.testimonial-box {
    background: var(--color-bg);
    padding: 2.5rem;
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    border-left: 0.375rem solid var(--color-magenta);
    box-shadow:
    0.375rem 0.375rem 0 rgba(179, 31, 95, 0.15),
    0.75rem 0.75rem 0 rgba(21, 155, 142, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

.testimonial-box:hover {
    transform: translateY(-0.25rem);
    box-shadow:
    0.5rem 0.5rem 0 rgba(179, 31, 95, 0.2),
    1rem 1rem 0 rgba(21, 155, 142, 0.15);
}

.testimonial-box::before {
    content: '"';
    font-family: 'Fraunces', serif;
    font-size: clamp(3rem, 8vw, 6rem); /* Fluid sizing */
    color: var(--color-magenta);
    opacity: 0.15;
    position: absolute;
    top: -1.25rem;
    left: 1.25rem;
    line-height: 1;
}

.testimonial-box p {
    margin-bottom: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.testimonial-author {
    font-weight: 700;
    color: var(--color-navy);
    font-size: 1.1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 0.125rem solid var(--color-magenta-tint);
}

/* ============================================
Responsive Design - Enhanced for text scaling
============================================ */

@media (max-width: 768px) {
    section {
        padding: 4rem 1rem;
    }

    .courses-grid {
        grid-column: auto;
        gap: 2rem;
    }

    .locations-grid {
        grid-template-columns: 1fr;
    }

    .contact-info {
        padding: 2rem 1.5rem;
    }

    .contact-value {
        font-size: 1.2rem;
    }

    .decorative-shape {
        width: 2.5rem;
        height: 2.5rem;
    }

    .teacher-intro {
        padding: 2rem 1.5rem;
        box-shadow:
        0.5rem 0.5rem 0 var(--color-yellow-tint),
        -0.5rem -0.5rem 0 var(--color-teal-tint);
    }

    .courses-intro {
        font-size: 1rem;
        padding: 1rem 1.5rem;
        max-width: 95%;
    }

    .main-container {
        width: 100%;
        grid-column: 1 / -1;
        max-width: none; /* Remove fixed max-width */
    }

    .dot-pattern {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .courses-notice {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }

    .teacher-content-wrapper {
        flex-direction: column; /* Stacked vertically on mobile */
    }

    .teacher-photo {
        width: 100%;
        min-width: unset;
        max-width: 25rem;
        margin: 0 auto;
    }

    .testimonial-box {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }

    .trial-button-container h3 {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }
}

@media (max-width: 480px) {
    body {
        /* Keep at 1rem to respect user preferences */
        font-size: 1rem;
    }

    h1 {
        /* Already using clamp() - no change needed */
    }

    h2 {
        /* Already using clamp() - no change needed */
    }

    h3 {
        /* Already using clamp() - no change needed */
    }

    .container {
        padding: 0 1rem;
    }
}

/* ============================================
Accessibility - Enhanced focus states
============================================ */
a:focus, button:focus {
    outline: 0.1875rem solid var(--color-coral);
    outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
Print Styles
============================================ */
@media print {
    .floating-shapes,
    .decorative-shape,
    .otomi-border,
    .dot-pattern {
        display: none;
    }

    section {
        padding: 2rem 0;
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }

    .course-card,
    .contact-info,
    .teacher-intro {
        box-shadow: none;
        border: 0.0625rem solid #ccc;
    }
}

/* ============================================
Course Card Styles - Fluid and text-friendly
============================================ */

/* Main Container - Centered and Fluid */
.main-container {
    width: 100%;
    max-width: 26rem;
}

/* Border Box Container - Fluid */
.border-box {
    background-color: #ffffff;
    border: 0.125rem solid #20B2AA;
    border-radius: 2rem;
    padding: 0.9375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible; /* Allow content to expand */
}

/* Decorative corner accent */
.border-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.1875rem;
    background: linear-gradient(90deg, #20B2AA 0%, #32CD32 50%, #FF8C00 100%);
}

/* Headline - Fluid */
.headline {
    text-align: center;
    font-size: clamp(1.25rem, 4vw, 1.8rem); /* Fluid sizing */
    font-weight: 800;
    color: #20B2AA;
    margin-bottom: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    position: relative;
    padding-bottom: 0.625rem;
    line-height: 1.2;
}

.headline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(2rem, 8vw, 3.75rem);
    height: 0.125rem;
    background: linear-gradient(90deg, #20B2AA, #32CD32, #FF8C00);
    border-radius: 0.125rem;
}

/* Two-Column Grid Layout - Fluid */
.courses-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    align-items: start;
    margin-bottom: 0.9375rem;
}

/* Individual Course Card - Fluid */
.course-card {
    background-color: #f8f8f8;
    border: 0.0625rem solid #e0e0e0;
    max-width: 12em;
    border-radius: 1rem;
}

/* Header Banner - Fluid height */
.minutes-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4em; /* Use min-height instead of fixed height */
    height: auto; /* Allow to grow with content */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.minutes-60 {
    background-image: url('blue_min_t.png');
}

.minutes-90 {
    background-image: url('red_min_t.png');
}

/* Header Image - Fluid */
.minutes-image {
    max-width: 100%;
    height: 3.1em;
    display: block;
    margin: 0 auto;
    width: 100%;
    filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.1));
}

.course-minutes {
    font-family: Varela Round, sans-serif;
    font-size: clamp(1rem, 3vw, 1.7rem); /* Fluid sizing */
    color: white;
    font-weight: bold;
    white-space: normal; /* Allow wrapping instead of nowrap */
    text-align: center;
    margin-left: 0;
    margin-top: -0.4em;
}

/* Pricing Section */
.pricing-section {
    padding: 0;
    margin-bottom: 0.5rem;
}

/* Arrow-shaped Pricing Banner - Fluid */
.pricing-banner {
    color: #ffffff;
    text-align: center;
    padding: 0.5rem 0.625rem;
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* Fluid sizing */
    font-weight: bold;
    position: relative;
    line-height: 1.3;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4em; /* Use min-height instead of fixed height */
    height: auto; /* Allow to grow with content */
    background-image: url('arrow_orange2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.625rem auto;
}

.pricing-image {
    max-width: 10em;
    display: block;
}

.pricing-text {
    font-size: clamp(0.7rem, 2vw, 0.8rem); /* Fluid sizing */
    text-align: center;
    padding: 0.625rem;
    margin-left: 0;
    margin-top: -0.4em;
    color: white;
    font-weight: bold;
    white-space: normal; /* Allow wrapping instead of nowrap */
}

/* Package Banner - Fluid */
.package-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 4em; /* Use min-height instead of fixed height */
    height: auto; /* Allow to grow with content */
    background-image: url('price_group_t.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0.625rem auto;
}

.package-price-text {
    font-size: clamp(0.65rem, 2vw, 0.78rem); /* Fluid sizing */
    color: darkslategray;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    padding: 0.625rem;
    margin-left: -2em;
    margin-top: -0.4em;
}

/* Features Section */
.features-section {
    padding: 0;
    background-color: #ffffff;
    border: 0.0625rem solid #e0e0e0;
    border-radius: 0.3125rem;
    overflow: visible; /* Allow content to expand */
}

/* Feature Items - Unified block with fluid layout */
.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 0.375rem 0.5rem;
    background-color: #ffffff;
    border-bottom: 0.0625rem solid #f0f0f0;
    font-size: clamp(0.65rem, 2vw, 0.75rem); /* Fluid sizing */
    transition: background-color 0.2s ease;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.feature-item:hover {
    background-color: #f8f8f8;
}

/* Remove bottom border from last item */
.feature-item:last-child {
    border-bottom: none;
}

/* Feature Icon - Fluid */
.feature-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.375rem;
    border-radius: 50%;
    font-size: 0.9em;
    background-color: #e8f4f8;
}

.feature-image {
    max-width: 2.5em;
    margin-right: 1em;
    flex-shrink: 0;
}

.feature-text {
    flex-grow: 1;
    color: #444;
    font-weight: 500;
    line-height: 1.2;
    min-width: 0; /* Allow text to wrap properly */
    word-wrap: break-word;
}

/* Specific Icon Colors */
.icon-speech { color: #20B2AA; }
.icon-group { color: #FF8C00; }
.icon-book { color: #4169E1; }
.icon-person { color: #32CD32; }
.icon-building { color: #9370DB; }
.icon-fun { color: #FF1493; }

/* Description Section - Fluid */
.description-section {
    background-color: #f0fdf9;
    border: 0.0625rem solid #20B2AA;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-top: 0.625rem;
}

.description-title {
    font-size: clamp(0.9rem, 2.5vw, 1em); /* Fluid sizing */
    font-weight: bold;
    color: #20B2AA;
    margin-bottom: 0.5rem;
    text-align: center;
}

.description-text {
    font-size: clamp(0.75rem, 2vw, 0.85rem); /* Fluid sizing */
    color: #444;
    line-height: 1.4;
    margin-bottom: 0.625rem;
    text-align: justify;
}

/* Benefits List - Fluid */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefit-item {
    display: block;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: clamp(0.7rem, 2vw, 0.8rem); /* Fluid sizing */
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.benefit-icon {
    margin-right: 0.1875rem;
    font-size: 1em;
}

/* Footer */
.footer {
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.75rem;
    border-top: 0.0625rem solid #e0e0e0;
}

.footer-text {
    color: #666;
    font-size: clamp(0.6rem, 1.5vw, 0.7rem); /* Fluid sizing */
}

/* Enhanced Responsive Design for Course Cards */
@media (max-width: 500px) {
    .main-container {
        width: 100%;
        grid-column: 1 / -1;
        max-width: none;
    }

    .border-box {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }

    .headline {
        font-size: clamp(1rem, 5vw, 1.5rem); /* Fluid sizing */
        margin-bottom: 0.75rem;
    }

    /* Keep cards side-by-side on mobile with smaller gap */
    .courses-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.375rem;
    }

    .minutes-image {
        max-width: 100%;
    }

    .pricing-banner {
        font-size: 1em;
        padding: 0.375rem 0.625rem;
    }

    .pricing-image {
        max-width: 12.5rem;
    }

    .package-banner {
        font-size: clamp(0.7rem, 3vw, 0.8rem); /* Fluid sizing */
    }

    .feature-item {
        padding: 0.3125rem 0.375rem;
        font-size: clamp(0.6rem, 3vw, 0.7rem); /* Fluid sizing */
    }

    .feature-icon {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.8em;
    }

    .description-section {
        padding: 0.625rem;
    }

    .description-text {
        font-size: clamp(0.7rem, 2.5vw, 0.8rem); /* Fluid sizing */
    }

    .benefit-item {
        display: block;
        margin-bottom: 0.3125rem;
        font-size: clamp(0.7rem, 2.5vw, 0.85rem); /* Fluid sizing */
    }

    .trial-button-container h3 {
        font-size: clamp(1rem, 5vw, 2rem); /* Fluid sizing */
        color: var(--color-navy);
        margin-bottom: 2rem;
        font-weight: 800;
        text-align: center;
        line-height: 1.1;
        font-family: 'Fraunces', serif;
    }
}