/* Responsive Styles */

@media (max-width: 991px) {
    .hero-title {
        font-size: 36px;
    }
    
    .hero-text {
        font-size: 16px;
    }
    
    .section-card {
        padding: 25px;
    }
    
    .section-title {
        font-size: 26px;
    }
    
    .param-name {
        width: 45%;
    }
}

@media (max-width: 767px) {
    .hero-section {
        height: 450px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-text {
        font-size: 14px;
    }
    
    .btn-hero {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .section-card {
        padding: 20px;
    }
    
    .section-title {
        font-size: 22px;
    }
    
    .casino-info-table td {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .param-name {
        width: 50%;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    .screenshots-slider {
        overflow-x: auto;
        display: flex;
        gap: 15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .screenshot-slide {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }
    
    .tournaments-slider {
        overflow-x: auto;
        display: flex;
        gap: 15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .video-wrapper iframe {
        height: 250px;
    }
    
    .slot-reels {
        gap: 10px;
    }
    
    .slot-reel {
        width: 80px;
        height: 80px;
    }
    
    .slot-symbol {
        font-size: 45px;
    }
    
    .btn-spin {
        padding: 12px 40px;
        font-size: 16px;
    }
    
    .faq-question {
        font-size: 16px;
        padding: 15px 20px;
    }
    
    .widget-content {
        flex-direction: column;
        text-align: center;
    }
    
    .widget-text strong {
        display: block;
        margin-bottom: 5px;
    }
    
    .providers-grid, .payments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-controls {
        padding: 0 10px;
    }
    
    .hero-prev, .hero-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .btn-login-mob, .btn-signup-mob {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .hero-section {
        height: 400px;
    }
    
    .hero-title {
        font-size: 24px;
    }
    
    .section-title {
        font-size: 20px;
    }
    
    .author-avatar {
        width: 100px;
        height: 100px;
    }
    
    .timer-value {
        font-size: 22px;
    }
    
    .timer-label {
        font-size: 10px;
    }
}