/* ========================================= */
/* === CONSOLIDATED RESPONSIVE STYLES === */
/* ========================================= */

/* For Tablet Screens */
@media (max-width: 992px) {
    /* --- General Grids --- */
    #new-offerings-overview .feature-grid,
    #features-overview .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-grid, .investors-grid {
        grid-template-columns: 1fr;
    }
    .team-teaser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .onboarding-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Offerings Section --- */
    .new-offerings .offering-item {
        min-height: 170px;
        min-width: 220px;
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    /* --- Header --- */
    .logo-area {
        padding: 0 10px;
    }
    nav {
        margin-right: 10px;
    }

    /* --- Footer --- */
    .footer-content-wrapper {
        flex-direction: column;
        gap: 18px;
        padding: 0 10px;
    }
    .footer-section {
        min-width: 0;
    }
}

/* For Larger Phones and Tablets */
@media (max-width: 768px) {
    /* --- General Spacing & Layout --- */
    .page-section {
        padding: 25px 15px;
        width: 95%;
    }

    /* --- Hero Section --- */
    .unified-hero-card {
        padding: 20px;
    }
    .unified-hero-card h2 {
        font-size: 1.8em;
        line-height: 1.3;
    }
    .features-widget {
        padding: 15px 10px;
    }
    .hero-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .unified-hero-card .info-strip {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 15px;
    }
    html[dir="rtl"] .unified-hero-card .info-strip .text-part,
    html[dir="ltr"] .unified-hero-card .info-strip .text-part {
        text-align: center;
    }

    /* --- Onboarding Section --- */
    .onboarding-header p {
        font-size: 1.3em;
    }

    /* --- About Teaser --- */
    .about-teaser {
        padding: 16px 8px 14px 8px;
    }
    .about-teaser h3 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }
    .about-teaser p {
        font-size: 0.98em;
        margin-bottom: 10px;
    }
    .about-teaser .cta-button-secondary {
        font-size: 0.98em;
        padding: 8px 14px;
    }

    /* --- Stats Bar --- */
    .stats-bar-container {
        flex-direction: column;
        align-items: center; /* Centered for better look */
        gap: 20px;
        padding: 25px;
    }
    .stat-item {
        width: 100%;
        justify-content: flex-start;
    }
}

/* For Mobile Screens */
@media (max-width: 600px) {
    /* --- Header --- */
    header .container {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    header nav {
        display: none; /* Hiding nav. Ideal solution is a JS hamburger menu. */
    }
    header .logo-area img {
        height: 40px;
    }

    /* --- Grids (1-column layout) --- */
    #new-offerings-overview .feature-grid,
    #features-overview .feature-grid,
    .onboarding-grid,
    .team-teaser-grid,
    .new-offerings .offering-grid {
        grid-template-columns: 1fr;
    }
    .hero-features-grid {
        grid-template-columns: 1fr;
    }
    
    /* --- Hero Section --- */
    .hero {
        padding: 6px 2px 18px 2px;
    }
    .unified-hero-card h2 {
        font-size: 1.5em;
    }
    .feature-card {
        padding: 15px;
    }
    .hero-cta-buttons {
        gap: 8px;
        margin-top: 14px;
    }
    .glassy-community-cta {
        padding: 8px 4px;
        font-size: 0.98em;
    }

    /* --- Onboarding Section --- */
    .onboarding-header {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }
    .onboarding-cta-container {
        margin-top: 20px;
    }
    .onboarding-step {
        flex-direction: column;
        text-align: center;
    }
    .step-content,
    html[dir="rtl"] .step-content {
        text-align: center;
    }

    /* --- Offerings Section --- */
    .new-offerings .offering-item {
        min-height: 120px;
        min-width: 0;
        max-width: 100%;
    }

    /* --- Stats Bar --- */
    .stat-item {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    .stat-content,
    html[dir="rtl"] .stat-content {
        text-align: center;
    }
    .stat-number {
        font-size: 1.5em;
    }
    .stat-label {
        font-size: 0.8em;
    }
}