/* =========================================================================
   BASE & GLOBAL STYLES
   ========================================================================= */
body {
    font-family: Arial, sans-serif;
    background-color: #2C2C54; /* Dark Purple/Indigo base background */
    color: #E0E0E0;
}
.container { max-width: 1140px; }

/* --- 1. Top Fixed Header (Green Bar) --- */
.top-header {
    background-color: #4CAF50;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1030;
    border-bottom: 2px solid #388E3C;
}
.header-text-main { font-size: 14px; font-weight: 600; }
.counter-number-top { font-size: 20px; font-weight: 900; line-height: 1; }
.counter-title-top { font-size: 10px; line-height: 1; }

/* --- Fixed Footer (Challenge Details & Timer) --- */
.challenge-details {
    background-color: #2C2C54;
    color: white;
    z-index: 1020;
    border-top: 3px solid #FF5722;
    padding: 5px 0;
}
.spots-fast { font-size: 1.2rem; font-weight: 600; }
#joining-name { color: #FFEB3B; font-weight: bold; }
.countdown-timer { background-color: rgba(0, 0, 0, 0.2); padding: 5px; border-radius: 5px; }
.timer-item { text-align: center; line-height: 1; }
.timer-digits { font-size: 1.5rem; font-weight: bold; color: white; }
.timer-label { font-size: 0.6rem; text-transform: uppercase; color: #D3D3D3; }

/* --- Final Urgency Button (Used in Fixed Footer, Top Bar) --- */
.btn-join-now {
    background-color: #FF5722;
    color: white !important;
    font-weight: 800;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    padding: 10px 15px;
    line-height: 1;
}
.btn-join-now:hover { background-color: #E64A19; }
.button-content { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.btn-join-now .main-text { font-size: 0.9rem; font-weight: 800; }
.btn-join-now .urgency-text { font-size: 0.7rem; font-weight: 400; margin-top: 2px; }
.btn-join-now .urgency-text .only-text { color: #FFEB3B; font-weight: 900; font-size: 1rem; }

/* --- MAIN ORANGE OFFER BUTTON (Shake Effect - Used in Assessment CTA) --- */
.btn-offer-main {
    background: linear-gradient(180deg, #FF9800 0%, #F47B00 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 800;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    border: none;
}
.btn-offer-main::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 100%);
    transform: skewX(-45deg); pointer-events: none; z-index: 2;
    animation: sheen-movement 3s infinite linear;
}
@keyframes sheen-movement { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes smooth-shake {
    0%, 100% { transform: translateX(0); box-shadow: 0 0 0 2px #2196F3, inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.4); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-1.5px); box-shadow: -1px 0 0 2px #2196F3, inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.4); }
    20%, 40%, 60%, 80% { transform: translateX(1.5px); box-shadow: 1px 0 0 2px #2196F3, inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.4); }
}
.shake-effect { animation: smooth-shake 1.5s ease-in-out infinite; border: none; }

/* =========================================================================
   II. DYNAMIC SECTIONS
   ========================================================================= */

/* --- A. ATTENTION HEADER (Scrolling Text) --- */
.elementor-heading-title b { color: #FFEB3B; }
.elementor-heading-title {
    color: white; font-size: 1.2rem; font-weight: 500; line-height: 1.3;
    background-image: linear-gradient(rgb(181, 8, 114) 0%, rgb(91, 4, 57) 100%);
    border-radius: 0px; position: relative; overflow: hidden; white-space: nowrap; height: 45px;
}
.elementor-heading-title span.scroll-wrapper {
    display: inline-block; position: absolute; left: 0; top: 20%; transform: translateY(-50%);
    animation: scrollText 15s linear infinite;
}
@keyframes scrollText {
    0% { transform: translateX(100%) translateY(-50%); opacity: 0; }
    10% { opacity: 1; }
    90% { transform: translateX(-100%) translateY(-50%); opacity: 1; }
    100% { opacity: 0; }
}

/* --- B. HERO SECTION (Vasantha Kumari Profile) --- */
.hero-section-main { background-color: #0d1a32; color: white; padding-top: 50px; padding-bottom: 0; }
.certification-tag { font-size: 1rem; font-weight: 500; color: #FFEB3B; background-color: #1a2a47; padding: 5px 15px; border-radius: 50px; display: inline-block; margin-bottom: 20px; }
.hero-main-title { font-size: 2.8rem; font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.hero-main-title .title-highlight-span { color: #FF9800; display: inline-block; } /* Orange highlight */
.hero-subtitle { font-size: 1.1rem; font-weight: 400; max-width: 800px; margin-left: auto; margin-right: auto; }

/* Mentor Image and Wrapper */
.mentor-image-wrapper { position: relative; width: 280px; height: 280px; margin: 0 auto 20px; border-radius: 50%; border: 15px solid #FFC107; overflow: hidden; box-shadow: 0 0 0 10px rgba(255, 193, 7, 0.2); }
.mentor-image-main { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; transform: scale(0.95); transition: transform 0.3s ease; }
.mentor-name-box { background-color: #172a44; border-radius: 8px; padding: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
.mentor-name-main { font-size: 1.4rem; font-weight: 700; color: white; margin-bottom: 5px; }
.mentor-title-main { font-size: 0.85rem; font-weight: 300; color: #b0c4de; margin-bottom: 0; }

/* Event Masterclass Details */
.event-masterclass-details { background-color: #172a44; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); padding: 25px; }
.masterclass-title { font-size: 1.5rem; font-weight: 700; color: white; }
.info-icon { font-size: 1.5rem; color: #FFC107; margin-right: 10px; flex-shrink: 0; }
.info-label { font-size: 0.8rem; color: #b0c4de; margin-bottom: 2px; margin-right: 10px; }
.info-value { font-size: 1rem; font-weight: 600; color: white; }
.btn-hero-register { background-color: #FFC107; color: #333 !important; text-decoration: none; font-weight: 700; padding: 15px 40px; border-radius: 5px; font-size: 1.2rem; display: block; width: 100%; transition: background-color 0.3s; }
.btn-hero-register:hover { background-color: #FFB300; }

/* --- C. MAIN STATS SECTION (Dynamic Counters) --- */
#main-stats-output { background-color: #0c1a32; padding: 30px 0; }
.stat-card-main { background-color: #172a44; border-radius: 8px; height: 100%; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); min-height: 120px; }
.stat-number-main { font-size: 2.5rem; font-weight: 900; color: white; line-height: 1.1; margin-bottom: 5px; }
.stat-title-main { font-size: 0.95rem; font-weight: 400; color: rgba(245, 166, 35, 1); margin-top: 5px; }
#stat-success { color: #FFC107; } /* Yellow/Gold highlight for success rate */
.mission-telugu-main { font-size: 0.8rem; font-weight: 300; color: #b0c4de; line-height: 1.3; }

/* --- D. ABOUT YOUR MENTOR (Madhura Girish) --- */
.mentor-section-unique { background-color: #FBF4F7; color: #333; }
.mentor-heading-unique { font-size: 2.2rem; font-weight: 700; color: #4C0833; }
.mentor-card-unique {
    max-width: 850px; color: white; border-radius: 15px; position: relative; border: 3px solid #7D265A;
    background-image: linear-gradient(180deg, #240217 0%, #79054C 100%);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.mentor-header-info { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.mentor-icon-circle-temp { /* Adjust this if using a direct image for the icon */ } 
.mentor-photo { width: 100%; height: auto;  object-fit: cover; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
.mentor-details-box { border-radius: 40px; background-color: rgba(122, 122, 122, 0.2); padding: 15px; } /* Semi-transparent box for text */
.mentor-main-title { font-size: 24px; font-weight: 600; line-height: 1.35em; color: #FFF; text-shadow: 0 0 10px rgba(250, 239, 246, .66); }
.mentor-highlight-mission { background-color: #B50872; padding: 2px 5px; border-radius: 3px; font-weight: bold; color: white; white-space: nowrap; display: inline-block; }
.mentor-strategy-text { font-size: 0.95rem; font-style: italic; color: #e23aa1; padding-bottom: 10px; border-bottom: 1px solid #7D265A; }
.mentor-achievement-item { font-size: 0.9rem; margin-bottom: 8px; color: #E0E0E0; display: flex; align-items: flex-start; }
.achievement-dot { color: #B50872; font-size: 0.6rem; margin-top: 5px; flex-shrink: 0; }

/* --- E. MENTOR SMALL STATS SECTION (People Impacted, Webinars) --- */
.mentor-stats-section-unique { background-color: #FBF4F7; padding: 20px 0; }
.stat-card-unique { background-color: white; border: 1px solid #E0E0E0; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); height: 100%; padding: 15px; }
.stat-icon-unique { width: 60px; height: 60px; object-fit: contain; background-color: #FFC0CB; border-radius: 50%; padding: 10px; }
.stat-number-unique { font-size: 2rem; font-weight: 900; color: #B50872; line-height: 1.2; margin-top: 5px; }
.stat-title-unique { font-size: 0.95rem; font-weight: 600; color: #444; margin-top: 5px; }

/* --- F. WHO THIS IS BEST FOR (Target Audience) --- */
.audience-section { background-color: #FDF9FF; color: #333; position: relative; overflow: hidden; }
.audience-main-heading { font-size: 2.2rem; font-weight: 700; color: #333; }
.audience-main-heading .accent-word { color: #B50872; }
.audience-card { background-color: white; border: 1px solid #E0E0E0; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); min-height: 100px; transition: transform 0.3s; height: 100%; }
.audience-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.audience-image { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.audience-role { font-size: 1.15rem; font-weight: 700; color: #333; }
.audience-description { font-size: 0.9rem; color: #555; }

/* --- G. LEARNING OUTCOMES --- */
.outcomes-section { background-color: #2C2C54; color: white; }
.outcomes-main-heading { font-size: 2.5rem; font-weight: 700; color: rgb(245, 166, 35); margin-bottom: 40px; }
.outcome-item { display: flex; align-items: flex-start; }
.outcome-icon { font-size: 1.5rem; color: #4CAF50; margin-top: 5px; flex-shrink: 0; }
.outcome-title { font-size: 1.2rem; font-weight: 700; color: rgb(245, 166, 35); margin-bottom: 5px; line-height: 1.3; }
.outcome-benefit { font-size: 0.95rem; color: #cccccc; margin-bottom: 20px; }
.outcomes-image { max-width: 90%; border-radius: 8px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); }
.btn-outcome-cta { background-color: #FFC107; color: #333 !important; padding: 12px 25px; border-radius: 5px; font-size: 1.1rem; transition: background-color 0.3s; }

/* --- H. TRANSFORMATION JOURNEY --- */
.journey-section { background-color: white; color: #333; }
.journey-main-heading { font-size: 2.5rem; font-weight: 700; color: #333; }
.journey-card { background-color: #F8F8F8; border: 1px solid #eee; border-radius: 12px; text-align: left; height: 100%; position: relative; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); }
.journey-number-circle { position: absolute; top: -15px; left: 20px; width: 30px; height: 30px; background-color: #5899ff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1rem; box-shadow: 0 0 0 5px white; z-index: 10; }
.journey-card-title { font-size: 1.0rem; font-weight: 700; color: #333; margin-top: 10px; margin-bottom: 15px; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; }
.journey-items-ul { padding-left: 0; margin-bottom: 0; }
.journey-item-list { font-size: 0.8rem; margin-bottom: 10px; line-height: 1.4; }
.journey-item-list i { color: #4CAF50; }

/* --- I. SELF-ASSESSMENT QUIZ --- */
.assessment-quiz-section { background-color: #FFF8F0; color: #333; }
.assessment-item { background-color: white; padding: 15px; border-radius: 8px; border: 1px solid #C8E6C9; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; align-items: center; min-height: 80px; }
.assessment-item input[type="checkbox"] { width: 20px; height: 20px; margin-right: 15px; flex-shrink: 0; accent-color: #4CAF50; }
.assessment-item label { font-size: 1rem; line-height: 1.4; font-weight: 500; cursor: pointer; margin-bottom: 0; }
.cta-rewire-box { background-color: #FFF8F0; border: 2px solid #FFC107; border-radius: 8px; text-align: center; font-size: 1.2rem; font-weight: 500; line-height: 1.5; }
.cta-rewire-box .rewire-text { color: #FF5722; font-weight: 700; text-transform: uppercase; }
.assessment-quiz-section .btn-offer-main .price-note { font-size: 0.75rem; font-weight: 300; margin-top: 5px !important; }

/* --- J. COMPARISON SECTION --- */
.comparison-section { background-color: #f8f8f8; color: #333; }
.comparison-heading { color: #B50872; font-size: 2.2rem; font-weight: 700; }
.comparison-card { border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); min-height: 350px; height: 100%; border: 1px solid #ddd; }
.before-workshop-card { background-color: #FEEEEE; }
.after-workshop-card { background-color: #E8F5E9; }
.card-title-before { color: #D0021B; font-size: 1.5rem; font-weight: 700; }
.card-title-after { color: #4CAF50; font-size: 1.5rem; font-weight: 700; }
.comparison-list { list-style: none; padding-left: 0; font-size: 1.1rem; }
.comparison-list li { margin-bottom: 15px; }

/* --- K. BONUS SECTION --- */
.bonuses-section { background-color: #1a1a1a; color: white; }
.bonus-heading { color: rgb(255, 255, 255); font-size: 2rem; } /* Needs adjustment */
.bonus-heading .heading2 { color: #B50872; }
.bonus-card { background-color: #ffffff; border-radius: 15px; border: 2px solid #B50872; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); min-height: 450px; }
.gift-icon { font-size: 1.2rem; font-weight: bold; color: #000000; }
.bonus-title { font-size: 1.4rem; font-weight: 700; color: rgb(0, 0, 0); }
.bonus-description { color: #000000; font-size: 0.95rem; }
.img-fluid.book-frame { border: 3px solid #000000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 12px; width: 220px; height: 350px; }

/* --- L. TESTIMONIALS SECTION --- */
.testimonial-section { background-color: #f8f8f8; color: #333; border-radius: 15px; }
.heading-transformed { color: #333; font-size: 2rem; font-weight: 700; }
.heading2 { color: #B50872; }
.review-card { background-color: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid #eee; height: 100%; }
.review-initials { width: 40px; height: 40px; background-color: #B50872; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; }
.review-name { font-weight: bold; font-size: 1rem; line-height: 1.2; }
.review-rating-stars { display: flex; align-items: center; margin-top: 3px; color: goldenrod;}
.review-date { color: #999; font-size: 0.8rem; }
.review-text { font-size: 0.95rem; line-height: 1.5; color: #555; }
.video-iframe-container { position: relative; width: 100%; padding-bottom: 177.77%; height: 0; overflow: hidden; max-width: 100%; }
.responsive-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; }

/* --- M. FAQ SECTION --- */
.faq-section { background: linear-gradient(to bottom, #2C2C54 20%, #151515 100%); color: white; }
.faq-heading { color: white; font-size: 2.5rem; font-weight: 700; }
.accordion-item { background-color: #2c2c54; border: 1px solid #44446C; margin-bottom: 10px; border-radius: 8px !important; overflow: hidden; }
.accordion-button { background-color: transparent !important; color: white !important; font-size: 1.15rem; font-weight: 600; padding: 20px 25px; box-shadow: none !important; border: none !important; display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; text-align: left; }
.accordion-button:not(.collapsed) { background-color: #ffffff !important; color: #000000 !important; }
.accordion-button::after { display: none; }
.accordion-button .plus-icon { font-size: 1.5rem; transition: transform 0.3s ease; }
.accordion-button:not(.collapsed) .plus-icon { content: "−"; transform: rotate(180deg); }
.accordion-body { background-color: #2C2C54; color: #d3d3d3; padding: 20px 25px; font-size: 1rem; border-top: 1px solid #44446C; }

/* --- N. DISCLAIMER SECTION --- */
.disclaimer-section { background-color: #111111; color: #aaaaaa; border-top: 1px solid #333333; padding-bottom: 80px; }
.disclaimer-text { font-size: 0.75rem; line-height: 1.4; color: #dddddd; }
.transparency-note { font-size: 0.8rem; line-height: 1.5; color: #aaaaaa; }
.disclaimer-link { color: #FFEB3B; font-size: 0.8rem; text-decoration: underline; transition: color 0.3s; }
.disclaimer-link:hover { color: #B50872; }
.payment-icons {
    /* 1. Ensure the image is the primary element being displayed */
    display: inline-block; 
    
    /* 2. Remove any default borders or padding that might be visually interfering */
    border: none !important;
    padding: 0 !important;
    
    /* 3. Ensure the image is rendered with its intended resolution and quality */
    /* This is generally handled by the src and decoding attributes, but good to ensure: */
    max-width: 75%; 
    height: auto;
    
    /* 4. Reset any unwanted vertical alignment issues if it's inline with text */
    vertical-align: middle; 
}

/* =========================================================================
   III. RESPONSIVE & MOBILE ADJUSTMENTS
   ========================================================================= */
@media (max-width: 767px) {
    .header-text-main { font-size: 12px; }
    .elementor-heading-title { font-size: 1.1rem; padding: 0 10px; height: 40px; }
    .hero-main-title { font-size: 2rem; }
    .mentor-image-wrapper { width: 200px; height: 200px; }
    .stat-number-main { font-size: 2rem; }
    .btn-hero-register { font-size: 1rem; padding: 12px 20px; }
    .mentor-name-box { margin-top: 15px; }
    .challenge-details .spots-fast { font-size: 1rem; }
    .timer-digits { font-size: 1.2rem; }
    .timer-label { font-size: 0.5rem; }
    .btn-join-now { padding: 8px 10px; }
    .btn-join-now .main-text { font-size: 0.8rem; }
    .btn-join-now .urgency-text { font-size: 0.6rem; }
}




/* --- CSS: Mobile Fixes for Header --- */
@media (max-width: 767px) {
    /* 1. Shrink main text size dramatically */
    .top-header .header-text-main {
        font-size: 9px; /* Reduced to ensure it fits without breaking */
        line-height: 1.1;
        max-width: 65%; /* Constrain width to leave room for the button */
        text-align: left; /* Ensure text starts cleanly */
    }

    /* 2. Shrink the Join Now button to fit smaller space */
    .top-header .btn-join-now {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* 3. Hide the 'Success Stories' counter completely on small screens */
    .top-header .d-sm-block {
        display: none !important;
    }

    /* 4. Ensure the header itself is compact */
    .top-header {
        padding: 8px 10px !important; /* Reduce overall padding */
    }
}
/* --- CSS: Mobile Fixes for Footer --- */
@media (max-width: 767px) {
    .challenge-details {
        padding: 5px; /* Reduce padding */
    }

    /* 1. Simplify the 'Spots going fast' text */
    .challenge-details .spots-fast {
        font-size: 0.8rem;
        line-height: 1;
        margin-bottom: 2px !important; /* Reduce space below the line */
    }

    /* 2. Shrink Timer Digits and Labels */
    .challenge-details .timer-digits {
        font-size: 1rem; /* Smaller number */
    }
    .challenge-details .timer-label {
        font-size: 0.45rem; /* Tiny labels */
    }
    .challenge-details .timer-item {
        margin-right: 8px !important; /* Reduce spacing between timer boxes */
    }

    /* 3. Adjust the Fixed CTA button size */
    .challenge-details .btn-join-now {
        padding: 5px 8px;
    }
    .challenge-details .main-text {
        font-size: 0.7rem; /* Shrink main text */
    }
    .challenge-details .urgency-text {
        font-size: 0.5rem; /* Shrink urgency text */
        line-height: 1;
    }
}

 /* --- CRITICAL MOBILE OPTIMIZATION --- */
@media (max-width: 767px) {
    /* 1. Ensure all elements can flex and contain content */
    .row {
        /* Prevents horizontal overflow from columns */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100%;
    }
    
    /* 2. Overriding padding on sections to maximize horizontal space */
    .hero-section-main, 
    .mentor-section-unique,
    .audience-section,
    .outcomes-section,
    .journey-section,
    .comparison-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* 3. Attention Header Fix (The scrolling bar) */
    /* Ensure the padding doesn't push the internal scrolling element out */
    .elementor-heading-title {
        padding: 0 5px; 
    }
    
    /* 4. Mentor Section Fixes (Ensure circular elements don't cause overflow) */
    .mentor-image-wrapper {
        width: 180px; /* Further reduce size */
        height: 180px;
        border-width: 8px; /* Reduce border thickness */
    }
    
    /* 5. Journey Section Fixes */
    /* Ensure list items wrap correctly without extending card width */
    .journey-card {
        padding: 15px; 
        overflow-wrap: break-word; /* Allows long words to break */
    }

    /* 6. Comparison Section Fixes */
    /* Ensure the comparison card borders/shadows don't push out */
    .comparison-card {
        /* Remove explicit min-height or large padding if they cause issues */
        min-height: auto; 
    }
}

.info-card { background-color: #0d1a32; border-radius: 5px; padding: 15px; display: flex; align-items: center; text-align: left; }
.info-card {
    /* Existing flex properties that keep Icon, Label, and Value all in one row */
    display: flex;
    align-items: center;
    /* ... other styles ... */
}

/* Container for Label and Value (Currently implicit/not defined) */
.info-card > div {
    /* Allows the two divs inside the flex container to grow/shrink */
    flex-grow: 1; 
    display: flex; /* Keeps label and value side-by-side by default */
    align-items: center;
}

/* --- Responsive State: Mobile (Screen size less than 600px) --- */
@media (max-width: 600px) {
    
    /* 1. Target the container holding info-label and info-value */
    /* We must make the inner container stack its children vertically */
    .info-card > div {
        /* Change the flex direction to stack items */
        flex-direction: column;
        align-items: flex-start; /* Align text to the left after stacking */
    }

    /* 2. Ensure the label/value divs are set to fill the space */
    .info-label,
    .info-value {
        width: 100%; /* Ensure they take full available width after stacking */
        text-align: left; /* Align text within its new full width */
    }
    
    /* 3. Adjust spacing for the label, which originally had right margin */
    .info-label {
        /* Remove or reduce any existing right margin to prevent spacing issues */
        margin-right: 0 !important; 
        margin-bottom: 2px; /* Add small space below the label */
        font-weight: 600; /* Optional: Make label bold when stacked */
    }
    
    /* Optional: Center the whole card content if desired */
    .info-card {
        align-items: flex-start; /* Adjust the card alignment */
    }
}