@media (max-width: 1024px) {
    .hero-panel-title {
        font-size: 4rem;
    }
}

@media (max-width: 767px) {
    .hero-panels-wrapper {
        flex-direction: column;
        padding-top: 80px; /* Header height */
    }

    .hero-panel {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0;
    }

    .hero-panel-title {
        font-size: 2.5rem;
        transform: scale(1);
    }

    .hero-panel-btn {
        transform: translateY(0);
        padding: 0.75rem 2rem;
        font-size: 10px;
    }

    .hero-panel-overlay {
        opacity: 0.4;
    }

    .hero-panel-content {
        padding: 2rem;
    }
    
    .hero-panel-btn-wrapper {
        margin-top: 1rem;
    }
}