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

body,
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    /* Modern font choice */
}

/* --- Top Bar Marquee --- */
.top-bar-marquee {
    background-color: #00995D;
    /* FECAF Green */
    color: #fff;
    width: 100%;
    height: 35px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    /* Ensure on top */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.marquee-content {
    display: flex;
    width: max-content;
    /* Allow width to grow based on content */
    animation: marqueeScroll 60s linear infinite;
    /* Slower for better readability */
}

.marquee-content span {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 50px;
    /* Gap between repetitions */
    display: block;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- Premium Top Banner (New) --- */
.premium-top-banner {
    width: 100%;
    background: linear-gradient(135deg, #031F4B 0%, #00995D 100%);
    color: white;
    text-align: center;
    padding: 15px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
}

.premium-top-banner h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: neonPulse 3s infinite alternate;
}

.light-sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: sweepLight 4s infinite cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

@keyframes neonPulse {
    0% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(0, 153, 93, 0.2);
        opacity: 0.9;
    }
    100% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 153, 93, 0.5);
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes sweepLight {
    0% {
        left: -100%;
    }
    10%, 100% {
        left: 200%;
    }
}

@media (max-width: 768px) {
    .premium-top-banner h1 {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
}

/* Video Section (Fold 1) */
.video-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 35px);
    /* Top Bar Adjustment */
    overflow: hidden;
    background-color: #000;
    /* Fallback color */
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* Ensures video covers the area without distortion */
    z-index: 1;
}

/* Overlay (Optional - for text readability later) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    /* Slight dark overlay */
    z-index: 2;
}

/* Wave Divider */
.custom-shape-divider-bottom-1689966835 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    z-index: 4;
    /* Above banner/overlay */
}

.custom-shape-divider-bottom-1689966835 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1689966835 .shape-fill {
    fill: #031F4B;
    /* Matches solid background */
}

.custom-shape-divider-bottom-1689966835 .shape-fill-white {
    fill: #ffffff;
}

/* Banner Wrapper */
.banner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Center perfectly */
    width: 90%;
    max-width: 1040px;
    /* Reduced by 10% (was 1155px) */
    z-index: 3;
    overflow: visible;
    /* Modified to allow floating elements if needed, but usually hidden for internal overflow */
    overflow: hidden;
    /* Clean cut */
}

.hero-banner-img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

/* CTA Button */
.cta-button {
    position: absolute;
    /* Positioning relative to the image container */
    bottom: 20%;
    /* Adjusted based on visual estimation */
    left: 17%;
    /* Adjusted based on layout */
    transform: translateX(-50%);

    background-color: #25D366;
    /* Bright Green (similar to WhatsApp) */
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    /* Responsive base size */
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
    white-space: nowrap;
    animation: pulse 2s infinite;
}

.cta-button:hover {
    transform: translateX(-50%) scale(1.05);
    background-color: #20bd5a;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- Fold 2: VIP Future Pass Section --- */
.vip-section {
    position: relative;
    padding: 60px 20px 100px;
    background-color: #031F4B;
    /* UnIFECAF Dark Blue */
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: auto;
    flex-direction: column;
    /* Allow stacking */
}

.vip-section .container {
    width: 100%;
    max-width: 600px;
    /* Focused Card Width */
    position: relative;
    z-index: 2;
    perspective: 1000px;
}

/* Official Badge - Static (Fixed) */
.official-badge-static {
    display: table;
    /* Centers behave better */
    margin: 0 auto 20px;
    /* Centered with bottom margin */
    background: #00995D;
    /* UniFECAF Green */
    color: #fff;
    font-weight: 900;
    font-size: 1.1rem;
    padding: 12px 30px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 153, 93, 0.4);
    letter-spacing: 1px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

/* The VIP Card Container */
.vip-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    backdrop-filter: blur(20px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vip-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 153, 93, 0.3);
    border-color: rgba(0, 153, 93, 0.4);
}

/* Hologram Shine Effect */
.hologram-shine {
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: skewX(-20deg);
    animation: hologram-swipe 6s infinite;
    pointer-events: none;
}

@keyframes hologram-swipe {

    0%,
    40% {
        left: -150%;
    }

    50% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* Header */
.card-header {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    /* Reduced margin */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.vip-status {
    color: #fff;
    /* Changed to White */
    background: rgba(0, 153, 93, 0.2);
    /* Subtle Green bg */
    padding: 5px 10px;
    border-radius: 4px;
    animation: fadePulse 2s infinite;
}

/* Body & Typography */
.vip-card h2 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
    background: linear-gradient(90deg, #fff, #a2a2a2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.discount-display {
    text-align: center;
    margin: 10px 0 15px;
    /* Tighter spacing */
    line-height: 1;
}

.discount-display .small {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #00995D;
    /* UniFECAF Green */
    letter-spacing: 2px;
}

.discount-display .big {
    display: block;
    font-size: 6rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 30px rgba(0, 153, 93, 0.4);
}

.modality-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.modality-text strong {
    color: #00995D;
    font-weight: 800;
}

/* Scarcity Meter */
.scarcity-meter {
    margin-bottom: 30px;
}

.meter-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #ccc;
    font-weight: 600;
}

.blink-text {
    color: #00995D;
    /* UniFECAF Green */
    animation: rapidBlink 1s infinite;
}

.progress-track {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    width: 0%;
    transition: width 1.5s ease-out;
    height: 100%;
    background: linear-gradient(90deg, #00995D, #00C853);
    /* Green Gradient */
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 153, 93, 0.6);
    position: relative;
    overflow: hidden;
}

/* Striped animation on progress bar */
.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
    z-index: 1;
    background-size: 20px 20px;
    animation: moveStripes 1s linear infinite;
}

@keyframes moveStripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 20px;
    }
}

.scarcity-detail {
    font-size: 1.1rem;
    /* Increased size */
    text-align: center;
    color: #fff;
    /* Increased contrast */
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* VIP Button */
.vip-btn {
    display: block;
    width: 100%;
    padding: 18px;
    text-align: center;
    background: #00995D;
    /* UniFECAF Green */
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(0, 153, 93, 0.3);
    letter-spacing: 1px;
}

.vip-btn:hover {
    background: #00b36e;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 153, 93, 0.6);
}

.vip-btn .flare {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: 0.5s;
}

.vip-btn:hover .flare {
    left: 200%;
    transition: 0.5s;
}

.secure-lock {
    text-align: center;
    margin-top: 15px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes fadePulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes rapidBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .discount-display .big {
        font-size: 5rem;
    }
}

/* --- Fold 3: ENEM Section --- */
.enem-section {
    width: 100%;
    display: block;
    line-height: 0;
    /* Remove gap */
}

.responsive-banner {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Fold 3: Diferenciais (Animated) --- */
.diferenciais-section {
    padding: 80px 20px;
    background-color: #fff;
    font-family: 'Inter', sans-serif;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #031F4B;
    margin-bottom: 20px;
}

.section-title span {
    color: #00995D;
    /* UniFECAF Green */
}

.highlight-blue {
    color: #00995D !important;
    /* Force green to match theme or user request? Actually Blue might be better for Stories. But theme is Green. Sticking to Green for consistency or maybe Blue as "Inspiring". Let's stick to Green for now. */
    text-decoration: underline;
    text-decoration-color: rgba(0, 153, 93, 0.3);
}

/* Grid Layout */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Animated Card */
.feature-card {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 153, 93, 0.15);
    border-color: rgba(0, 153, 93, 0.3);
}

.icon-box {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(0, 153, 93, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00995D;
    transition: transform 0.3s ease, background 0.3s;
}

.feature-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
    background: #00995D;
    color: #fff;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #031F4B;
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 0.95rem;
    color: #031F4B;
    line-height: 1.5;
}

/* Staggered Animation on Load (Simple Fade Up CSS) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-card {
    animation: fadeInUp 0.8s ease-out backwards;
}

.feature-card:nth-child(1) {
    animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
    animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
    animation-delay: 0.3s;
}

.feature-card:nth-child(4) {
    animation-delay: 0.4s;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
}

/* --- WhatsApp Floating Button --- */
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 40px;
    /* Moved slightly left */
    background-color: #25D366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: waPulse 2s infinite;
    font-size: 35px;
    /* Size for FontAwesome Icon */
    text-decoration: none;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #128c7e;
}

/* Remove manual SVG style inheritance if any */
.whatsapp-float svg {
    display: none;
}

@keyframes waPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* --- Promo Popup --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease;
    padding: 20px;
}

.popup-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.popup-content {
    background: transparent;
    padding: 0;
    border-radius: 10px;
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    animation: popupIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.popup-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.close-btn {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #FF4757;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    line-height: 35px;
    text-align: center;
    padding: 0;
}

.close-btn:hover {
    transform: scale(1.1);
    background: #ff6b81;
}

@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Course Grid (Fold 2) --- */
.courses-container {
    width: 100%;
    max-width: 1300px;
    /* Wider container */
    margin: 80px auto 0;
    /* More spacing */
    position: relative;
    z-index: 5;
    padding: 0 40px;
    /* Side padding */
}

.courses-title {
    text-align: center;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 153, 93, 0.6);
}

.search-wrapper {
    margin: 0 auto 40px;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

#course-search {
    width: 100%;
    padding: 15px 25px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s;
    text-align: center;
}

#course-search::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#course-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: #00995D;
    box-shadow: 0 0 15px rgba(0, 153, 93, 0.3);
}

.course-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    /* Tighter padding */
    padding: 20px 20px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers content block vertically */
    align-items: center;
    min-height: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    gap: 6px;
    /* Tighter spacing */
}

/* ... existing badge styles ... */

.course-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 2px;
    /* Very tight */
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.course-degree {
    font-size: 0.65rem;
    color: #00995D;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
    margin-bottom: 2px;
}

.course-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    margin: 0;
    max-width: 95%;
    /* Allow more text per line */
    margin-bottom: 2px;
}

.labels {
    margin-bottom: 0px;
    transform: scale(0.9);
    /* Make tags slightly smaller visually */
}

.start-rating {
    margin-bottom: 0px;
    color: #FFD700;
    font-size: 0.75rem;
    margin-top: 2px;
}

.course-btn {
    /* ... existing styles ... */
    margin-top: 5px;
}

/* Best Seller Badge */
.badge-best {
    position: absolute;
    top: 0;
    right: 0;
    background: #FFD700;
    /* Gold */
    color: #031F4B;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 6px 15px;
    border-radius: 0 0 0 15px;
    z-index: 5;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Premium Hover Effect */
.course-card:hover {
    transform: translateY(-10px) scale(1.02);
    background: linear-gradient(145deg, rgba(3, 31, 75, 0.6) 0%, rgba(0, 153, 93, 0.1) 100%);
    /* Blue to Green tint */
    border-color: rgba(0, 153, 93, 0.5);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 153, 93, 0.2);
    /* Glow ring */
}

/* Add a subtle sheen */
.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: 0.5s;
    pointer-events: none;
}

.course-card:hover::before {
    left: 100%;
}

.course-card h3 {
    font-size: 1.3rem;
    /* Larger title */
    color: #fff;
    /* White Text */
    margin-bottom: 5px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
    /* Powerful look */
}

/* Modality Tags */
.labels {
    margin-bottom: 10px;
}

.tag-ead,
.tag-semi {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tag-ead,
.tag-semi {
    background: rgba(0, 153, 93, 0.2);
    color: #00995D;
    border: 1px solid rgba(0, 153, 93, 0.3);
}

/* Stars */
.start-rating {
    margin-bottom: 20px;
    color: #FFD700;
    /* Gold */
    font-size: 0.9rem;
}

.start-rating i {
    margin: 0 2px;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

/* Button inside card */
.course-btn {
    display: inline-block;
    padding: 12px 30px;
    background: #00995D;
    /* Filled Green */
    border: none;
    color: #fff;
    /* White Text */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 153, 93, 0.4);
}

.course-btn:hover {
    background: #00b36e;
    /* Lighter Green */
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 153, 93, 0.6);
    transform: scale(1.05);
}

/* Mobile Load More Logic */
.load-more-btn {
    display: none;
    /* Hidden on desktop */
}

@media (max-width: 1024px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols on tablet */
    }
}

@media (max-width: 768px) {
    .courses-container {
        padding: 0 20px;
    }

    .courses-grid {
        grid-template-columns: 1fr;
        /* Full width on mobile */
    }


    /* Hide items on mobile initially */
    .course-card.mobile-hidden {
        display: none;
    }

    /* Show Load More button */
    .load-more-btn {
        display: block;
        margin: 40px auto 0;
        background: transparent;
        border: 2px solid #fff;
        color: #fff;
        padding: 12px 30px;
        border-radius: 30px;
        font-weight: 700;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 0.9rem;
        transition: all 0.3s;
    }

    .load-more-btn:active {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Mobile CTA Button Fix */
    .cta-button {
        position: relative;
        font-size: 1rem;
        padding: 15px 0;
        margin: 15px auto 0;
        width: 90%;
        left: auto;
        transform: none;
        top: auto;
        bottom: auto;
        display: block;
        text-align: center;
        z-index: 10;
        box-shadow: 0 4px 15px rgba(0, 153, 93, 0.5);
    }

}

/* --- Fold 4A: Estrutura do Polo (Premium 3D Gallery) --- */
.structure-section {
    padding: 100px 20px;
    background: #f8f9fa;
    /* Light clean background */
    text-align: center;
    overflow: hidden;
}

.section-subtitle {
    color: #031F4B;
    margin-bottom: 50px;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-3d-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    height: 500px;
    /* Fixed height for 3D space */
    perspective: 1000px;
    /* The 3D magic */
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery-wrapper {
    position: relative;
    width: 600px;
    /* Card width */
    height: 400px;
    /* Card height */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.gallery-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    z-index: 0;
    /* Default Hidden State */
    transform: translateX(0) scale(0.8);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s;
    font-weight: 700;
    font-size: 1.2rem;
}

.gallery-item:hover .caption,
.gallery-item.active .caption {
    transform: translateY(0);
}

/* States */
.gallery-item.active {
    opacity: 1;
    z-index: 3;
    transform: translateX(0) scale(1);
    box-shadow: 0 20px 60px rgba(0, 153, 93, 0.3);
    /* Green glow focus */
    border: 2px solid #00995D;
}

.gallery-item.prev {
    opacity: 0.6;
    z-index: 1;
    transform: translateX(-60%) scale(0.85) perspective(100px) rotateY(5deg);
    filter: blur(2px) grayscale(50%);
    cursor: pointer;
}

.gallery-item.next {
    opacity: 0.6;
    z-index: 1;
    transform: translateX(60%) scale(0.85) perspective(100px) rotateY(-5deg);
    filter: blur(2px) grayscale(50%);
    cursor: pointer;
}

/* Navigation Buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #00995D;
    color: #fff;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 153, 93, 0.4);
    transition: all 0.3s;
    z-index: 10;
}

.nav-btn:hover {
    background: #00b36e;
    transform: translateY(-50%) scale(1.1);
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

/* Dots */
.gallery-dots {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #00995D;
    width: 30px;
    /* Stretch active dot */
    border-radius: 12px;
}

/* Mobile Responsiveness for Gallery */
@media (max-width: 768px) {
    .gallery-3d-container {
        height: 350px;
    }

    .gallery-wrapper {
        width: 100%;
        max-width: 320px;
        height: 250px;
    }

    .gallery-item.prev {
        transform: translateX(-15%) scale(0.8);
        opacity: 0;
        pointer-events: none;
    }

    .gallery-item.next {
        transform: translateX(15%) scale(0.8);
        opacity: 0;
        pointer-events: none;
    }

    /* On mobile, simpler stack */
    .nav-btn {
        width: 40px;
        height: 40px;
    }

    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }
}

/* --- Histórias que Inspiram (Stories Section) --- */
.stories-section {
    padding: 100px 20px;
    background-color: #031F4B;
    /* UnIFECAF Dark Blue (Approximated based on usage) */
    /* Replaced #080f1d with a branded dark blue */
    color: #fff;
    position: relative;
    text-align: center;
    /* Centralize content */
}

.stories-section .section-title {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.stories-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, #fff 0%, transparent 100%);
    opacity: 0.05;
    /* Fade from white section above */
    pointer-events: none;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.story-card {
    background: #0f1729;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.story-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 153, 93, 0.3);
}

.video-container-card {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    background: #000;
}

.video-container-card iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.story-info {
    padding: 25px;
    text-align: center;
}

.story-info h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-weight: 800;
    color: #fff;
}

.story-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
}

.story-info strong {
    color: #00995D;
    /* Highlight color */
}

/* --- 3D Course Carousel --- */
.courses-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    perspective: 1500px;
    /* Deep perspective */
    height: 500px;
    /* Fixed height for carousel */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

.courses-wrapper {
    position: relative;
    width: 320px;
    /* Card Width */
    height: 450px;
    /* Card Height approx */
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

/* Modify Course Card for Carousel Mode */
.courses-wrapper .course-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Override grid styles */
    min-height: auto;
    margin: 0;
    opacity: 0;
    z-index: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateX(0) scale(0.8);
    display: flex;
    /* Ensure flex layout is kept */
}

/* Active State */
.courses-wrapper .course-card.course-active {
    opacity: 1;
    z-index: 5;
    transform: translateX(0) scale(1.1);
    /* Zoom center */
    box-shadow: 0 25px 60px rgba(0, 153, 93, 0.4);
    border: 2px solid #00995D;
}

/* Prev/Next States */
.courses-wrapper .course-card.course-prev {
    opacity: 0.5;
    z-index: 2;
    transform: translateX(-120%) scale(0.85) rotateY(15deg) translateZ(-100px);
    pointer-events: none;
    /* Prevent clicking hidden items */
}

.courses-wrapper .course-card.course-next {
    opacity: 0.5;
    z-index: 2;
    transform: translateX(120%) scale(0.85) rotateY(-15deg) translateZ(-100px);
    pointer-events: none;
}

/* Hidden States (for stack effect) */
.courses-wrapper .course-card.course-hidden-left {
    transform: translateX(-200%) scale(0.5);
    opacity: 0;
    z-index: 0;
}

.courses-wrapper .course-card.course-hidden-right {
    transform: translateX(200%) scale(0.5);
    opacity: 0;
    z-index: 0;
}

/* Navigation Buttons */
.course-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: #00995D;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: all 0.3s;
}

.course-nav:hover {
    background: #00b36e;
    transform: translateY(-50%) scale(1.1);
}

.course-nav.prev {
    left: -60px;
}

.course-nav.next {
    right: -60px;
}

/* --- Search Mode (Grid View restoration) --- */
.courses-carousel-container.search-active {
    height: auto;
    /* Allow auto expansion */
    perspective: none;
    max-width: 1300px;
    /* Full width */
}

.courses-carousel-container.search-active .courses-wrapper {
    width: 100%;
    height: auto;
    transform-style: flat;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Cols */
    gap: 30px;
}

/* When searching, reset card styles to default grid look */
.courses-carousel-container.search-active .course-card {
    position: relative;
    opacity: 1;
    transform: none !important;
    z-index: 1;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    /* Respect filtered display state */
}

.courses-carousel-container.search-active .course-nav {
    display: none;
    /* Hide arrows when searching */
}

/* Mobile Responsiveness for Carousel */
@media (max-width: 768px) {
    .courses-carousel-container {
        height: 480px;
        perspective: 800px;
    }

    .courses-wrapper {
        width: 280px;
        /* Smaller cards */
        height: 400px;
    }

    .course-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .course-nav.prev {
        left: 0px;
    }

    .course-nav.next {
        right: 0px;
    }

    .courses-carousel-container.search-active {
        height: auto !important;
    }

    .courses-carousel-container.search-active .courses-wrapper {
        grid-template-columns: 1fr;
        /* 1 Col on mobile search */
        height: auto !important;
    }
}

/* --- Main Banner Slider --- */
.banner-wrapper {
    overflow-y: hidden;
    /* Clean cut vertical */
    overflow-x: visible;
    /* But we may want overflow-x hidden? Actually keep it hidden to be safe */
    overflow: hidden;
    position: absolute;
    /* Keep existing pos */
}

.banner-slide {
    display: none;
    /* Hidden by default */
    width: 100%;
    transition: opacity 0.4s ease-out;
    /* Snappier transition */
    position: relative;
    /* Ensure child CTA positioning references this slide */
}

.banner-slide.active {
    display: block;
    /* Show active */
    animation: fadeInSlide 0.6s;
    /* Snappier animation */
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Modern Banner Navigation Arrows */
.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    /* Glass effect */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 20;
    /* Ensure above image */
    transition: all 0.3s ease;
    display: flex;
    /* Centering icon */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.banner-nav:hover {
    background: #00995D;
    /* Brand Green */
    border-color: #00995D;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(0, 153, 93, 0.6);
}

.banner-nav.prev {
    left: 20px;
    /* Inside the banner area */
}

.banner-nav.next {
    right: 20px;
    /* Inside the banner area */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .banner-nav {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        background: rgba(0, 0, 0, 0.4);
        /* Darker for better contrast on mobile */
    }

    .banner-nav.prev {
        left: 10px;
    }

    .banner-nav.next {
        right: 10px;
    }
}

/* --- Main Footer --- */
.main-footer {
    background-color: #031F4B;
    /* Dark Brand Blue */
    width: 100%;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.footer-text {
    margin: 0;
}

.dev-credit {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.85rem;
}

.dev-credit strong {
    color: #00995D;
    /* Brand Green */
    font-weight: 700;
}

.dev-credit:hover {
    color: #00995D;
    transform: translateY(-2px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .main-footer {
        padding-bottom: 90px;
        /* Make space for fixed tracking/Wa button if needed */
    }
}

/* --- Banners Section (Fold 5) --- */
.banners-section {
    background-color: #ffffff;
    padding: 80px 20px;
    position: relative;
    z-index: 5;
}

.banner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

.banner-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    cursor: pointer;
    background: #000;
    /* Placeholder bg */
}

.banner-card img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.banner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 153, 93, 0.2);
    /* Subtle green glow */
}

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

/* Shine Effect */
.shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    z-index: 2;
}

.banner-card:hover .shine-effect {
    animation: shineMove 0.7s;
}

@keyframes shineMove {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

@media (max-width: 768px) {
    .banner-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .banners-section {
        padding: 50px 20px;
    }
}

@media (max-width: 768px) {
    .top-bar-marquee {
        background-color: #00995D !important;
        /* Force Green on Mobile */
        height: 35px;
        width: 100%;
        overflow: hidden;
    }
}

/* --- Mobile Fixes (Appended) --- */
.custom-shape-divider-bottom-1689966835 .shape-fill-white {
    fill: #ffffff !important;
}

.marquee-content {
    flex-wrap: nowrap !important;
}

@media (max-width: 768px) {
    .top-bar-marquee {
        background-color: #00995D !important;
    }
}

/* --- Video Enhancement (Override) --- */
#bg-video {
    filter: contrast(1.1) saturate(1.15) !important;
}

.overlay {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* --- FAQ Section --- */
.faq-section {
    background-color: #f9f9f9;
    padding: 80px 20px;
}

.faq-accordion {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.accordion-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.accordion-header {
    width: 100%;
    padding: 20px;
    background: #fff;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    transition: all 0.3s ease;
    text-align: left;
}

.accordion-header:hover {
    color: #00995D;
    /* Brand Green */
}

.accordion-header i {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    color: #00995D;
}

.accordion-header.active i {
    transform: rotate(45deg);
    /* Turn (+) to (x) */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #fff;
}

.accordion-content p {
    padding: 0 20px 20px;
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

/* --- Center Text Utility --- */
.center-text {
    text-align: center;
    width: 100%;
    display: block;
}

/* --- Wave Divider Fix & Card Animation Simplification --- */
.custom-shape-divider-bottom-1689966835 {
    bottom: -1px !important;
    /* Fix potential pixel gap */
    width: 101%;
    /* Ensure full coverage */
    left: -1px;
}

.course-card:hover {
    transform: scale(1.02) !important;
    /* Override any complex tilt */
    transition: transform 0.3s ease-out !important;
}

/* --- Atendimento Banner Section --- */
.atendimento-section {
    width: 100%;
    display: block;
    line-height: 0;
}

.atendimento-section img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Mobile Fixes Round 2 --- */
@media (max-width: 768px) {

    /* Fold 6 (Conquistas/Banners) */
    .banner-grid {
        grid-template-columns: 1fr;
        padding-left: 10px;
        padding-right: 10px;
    }

    .banners-section {
        padding: 40px 10px;
    }

    /* Fold 7 (Atendimento) - Ensure Mobile Image Shows */
    .atendimento-section picture img {
        width: 100% !important;
        display: block !important;
    }
}

/* --- Deep Mobile Optimization (Appended) --- */
@media (max-width: 768px) {

    /* 1. Global Typography & Spacing */
    .section-title {
        font-size: 1.8rem !important;
        /* Prevent huge headers */
        margin-bottom: 30px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 2. VIP Section Refinement */
    .vip-section {
        padding: 40px 15px 60px !important;
        /* Reduced padding */
    }

    .vip-card {
        padding: 25px 20px !important;
        /* Compact card */
    }

    .discount-display .big {
        font-size: 4rem !important;
        /* Scale down 55% */
        line-height: 1.1;
    }

    .meter-label {
        flex-direction: column;
        /* Stack label and percent */
        align-items: center;
        gap: 5px;
    }

    /* 3. Gallery (Structure) Navigation */
    .nav-btn {
        width: 50px !important;
        /* Larger touch target */
        height: 50px !important;
        font-size: 1.2rem !important;
        background: rgba(0, 0, 0, 0.6) !important;
        /* Better contrast */
    }

    .nav-btn.prev-btn {
        left: 10px !important;
    }

    .nav-btn.next-btn {
        right: 10px !important;
    }

    /* 4. FAQ Touch Targets */
    .accordion-header {
        padding: 20px 15px !important;
        /* More tap area */
        min-height: 60px;
        /* Standardize height */
    }

    .accordion-header span {
        font-size: 0.95rem;
        /* Readable text */
        max-width: 90%;
        /* Prevent overlap with icon */
    }

    /* 5. General Buttons */
    .cta-button {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
        width: 85% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 15% !important;
        white-space: normal !important;
        text-align: center !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1.2;
    }
}

/* --- Final Wave Fix --- */
.custom-shape-divider-bottom-1689966835 svg {
    height: 120px !important;
    /* Increase height for better coverage */
    transform: none !important;
    /* Reset internal transforms to predictable state */
}

.custom-shape-divider-bottom-1689966835 {
    transform: none !important;
    /* Ensure flat base is bottom */
    bottom: -1px !important;
}

/* --- Lead Capture Popup (WhatsApp Style) --- */
.phone-frame {
    background: #E5DDD5;
    width: 100%;
    max-width: 400px;
    height: auto;
    max-height: 90vh;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wa-header {
    background: #075E54;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.wa-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid white;
}

.wa-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.wa-info p {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.9;
}

.wa-close {
    margin-left: auto;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.wa-body {
    padding: 20px;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    background-size: cover;
    flex: 1;
    overflow-y: auto;
}

.date-divider {
    text-align: center;
    margin-bottom: 20px;
}

.date-divider span {
    background: #dbe4ebb8;
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: #555;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.chat-bubble {
    background: white;
    padding: 10px 15px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #333;
    width: fit-content;
    max-width: 85%;
    position: relative;
}

.chat-bubble.received {
    border-radius: 0 10px 10px 10px;
}

.chat-bubble.received::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid white;
    border-left: 10px solid transparent;
}

/* User Form Styling */
#lead-form {
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    color: #075E54;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: left;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.95rem;
    outline: none;
    transition: border 0.3s;
}

.input-group input:focus,
.input-group select:focus {
    border-color: #075E54;
}

.error-text {
    color: #c0392b;
    font-size: 0.8rem;
    display: block;
    margin-top: 5px;
}

.wa-submit-btn {
    background: #00995D;
    /* Use Brand Green instead of strict WhatsApp teal for brand connection */
    color: white;
    border: none;
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.wa-submit-btn:hover {
    transform: scale(1.02);
    background: #008752;
}

.secure-norton {
    text-align: center;
    font-size: 0.75rem;
    color: #777;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Wave Separation & Final Fixes --- */
.wave-video,
.wave-vip {
    transform: rotate(180deg) !important;
    bottom: -2px !important;
}

.wave-video svg,
.wave-vip svg {
    transform: rotateY(180deg) !important;
    height: 120px !important;
}

/* Fix Hidden Courses */
@media (max-width: 768px) {
    .course-card.mobile-hidden {
        display: flex !important;
        /* Re-enable visibility */
    }
}