/* ============================================
   Home Page - Mobile Styles
   ============================================ */

@media (max-width: 768px) {
    /* Home Page Mobile Specific */
    .hero {
        min-height: 500px;
        padding: 20px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    .highlights-grid {
        grid-template-columns: 1fr;
    }
    
    .notice-item {
        flex-direction: column;
        gap: 1rem;
    }
    
    .notice-date {
        width: 100%;
        max-width: 100px;
    }
    
    .gallery-slider {
        grid-template-columns: 1fr;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    /* Image Slider Mobile */
    .slider-container {
        height: 350px;
    }
    
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .prev-btn {
        left: 10px;
    }
    
    .next-btn {
        right: 10px;
    }
    
    .slider-dots {
        bottom: 15px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .highlight-card {
        padding: 1.5rem;
    }
    
    /* Image Slider Small Mobile */
    .slider-container {
        height: 250px;
    }
    
    .slider-btn {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .prev-btn {
        left: 5px;
    }
    
    .next-btn {
        right: 5px;
    }
    
    .dot {
        width: 8px;
        height: 8px;
    }
}