/* International Snacks Subscription Box - Responsive Styles */

/* Tablet Styles */
@media (max-width: 992px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }
    
    .hero-section {
        text-align: center;
        padding: 2rem 0;
    }
    
    .navbar-brand {
        font-size: 1.3rem;
    }
    
    .service-card img {
        height: 180px;
    }
    
    .team-member img {
        width: 150px;
        height: 150px;
    }
    
    .process-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .section {
        padding: 3rem 0;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.1rem; }
    
    p {
        font-size: 0.95rem;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .hero-section {
        min-height: 80vh;
        padding: 1rem 0;
    }
    
    .hero-section::before,
    .hero-section::after {
        display: none;
    }
    
    .feature-card,
    .service-card,
    .price-card,
    .review-card,
    .case-card,
    .timeline-item,
    .career-card,
    .info-card,
    .faq-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }
    
    .contact-form {
        padding: 2rem;
    }
    
    .service-card img {
        height: 160px;
    }
    
    .service-price {
        font-size: 1.5rem;
    }
    
    .team-member img {
        width: 120px;
        height: 120px;
    }
    
    .process-number {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .gallery-item img {
        height: 200px;
    }
    
    .section {
        padding: 2.5rem 0;
    }
    
    .section-title {
        margin-bottom: 2rem;
    }
    
    .section-desc {
        margin-bottom: 3rem;
    }
    
    .footer {
        padding: 2rem 0 1rem;
        text-align: center;
    }
    
    .blog-card img {
        height: 160px;
    }
    
    /* Remove hover effects on mobile for better performance */
    .feature-card:hover,
    .service-card:hover,
    .price-card:hover,
    .blog-card:hover,
    .gallery-item:hover img {
        transform: none;
    }
    
    /* No animations on mobile when prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .feature-card,
        .service-card,
        .price-card,
        .blog-card,
        .gallery-item img {
            transition: none;
        }
    }
}

/* Small Mobile Styles */
@media (max-width: 576px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }
    
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-section {
        min-height: 70vh;
    }
    
    .feature-card,
    .service-card,
    .price-card,
    .review-card,
    .case-card,
    .timeline-item,
    .career-card,
    .info-card,
    .faq-card {
        padding: 1.2rem;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    .service-card img {
        height: 140px;
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .gallery-item img {
        height: 150px;
    }
    
    .blog-card img {
        height: 140px;
    }
    
    .btn-primary {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0;
    }
    
    .price-card.featured {
        transform: none;
        border-width: 2px;
    }
    
    .timeline-item::before {
        display: none;
    }
}

/* Large Desktop Styles */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
    
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2.2rem; }
    
    .hero-section {
        min-height: 100vh;
    }
    
    .section {
        padding: 6rem 0;
    }
    
    .service-card img {
        height: 220px;
    }
    
    .team-member img {
        width: 220px;
        height: 220px;
    }
    
    .contact-form {
        padding: 4rem;
    }
} 

.hero-section h1 {
    padding-top: 225px;
}