/* Responsive CSS for Retail Compliance Audit Service Website */

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #hero-title-1 {
        font-size: 2.5rem;
    }
    
    .hero-section {
        padding: 6rem 0;
    }
    
    .team-img-container {
        height: 250px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    section {
        padding: 4rem 0;
    }
    
    #hero-title-1 {
        font-size: 2.2rem;
    }
    
    #hero-subtitle-1 {
        font-size: 1.3rem;
    }
    
    .hero-section {
        padding: 5rem 0;
    }
    
    .hero-image {
        margin-top: 2rem;
    }
    
    .service-img {
        height: 180px;
    }
    
    .team-img-container {
        height: 220px;
    }
    
    .pricing-card.featured {
        transform: scale(1.03);
    }
    
    .pricing-card.featured:hover {
        transform: scale(1.03) translateY(-5px);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    section {
        padding: 3rem 0;
    }
    
    #hero-title-1 {
        font-size: 2rem;
        text-align: center;
    }
    
    #hero-subtitle-1 {
        font-size: 1.2rem;
        text-align: center;
    }
    
    #hero-desc-1 {
        text-align: center;
    }
    
    .hero-section {
        padding: 4rem 0;
        text-align: center;
    }
    
    .hero-image {
        margin-top: 2.5rem;
        transform: none;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    h4 {
        font-size: 1.3rem;
    }
    
    .service-img {
        height: 200px;
    }
    
    .pricing-card {
        padding: 2rem 1.5rem;
    }
    
    .pricing-card.featured {
        transform: none;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-5px);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-info {
        margin-top: 2rem;
    }
}

/* Extra Small Devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    section {
        padding: 2.5rem 0;
    }
    
    #hero-title-1 {
        font-size: 1.8rem;
        text-align: center;
    }
    
    #hero-subtitle-1 {
        font-size: 1.1rem;
        text-align: center;
    }
    
    #hero-desc-1 {
        text-align: center;
    }
    
    .hero-section {
        padding: 3rem 0;
        text-align: center;
    }
    
    .hero-image {
        margin-top: 2rem;
        transform: none;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h4 {
        font-size: 1.2rem;
    }
    
    .about-feature-card, 
    .feature-card, 
    .core-info-card {
        padding: 1.5rem 1rem;
    }
    
    .service-img {
        height: 180px;
    }
    
    .pricing-card {
        padding: 2rem 1rem;
    }
    
    .pricing-card.featured {
        transform: none;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-5px);
    }
    
    .team-swiper,
    .reviews-swiper {
        padding-bottom: 2.5rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }
    
    .gallery-item {
        height: 200px;
    }
    
    .contact-form,
    .contact-info {
        padding: 1.5rem;
    }
    
    .contact-info {
        margin-top: 2rem;
    }
    
    .accordion-button {
        padding: 1rem;
    }
    
    .accordion-body {
        padding: 1rem;
    }
    
    footer {
        padding: 3rem 0 1rem;
    }
    
    /* Team section */
    .team-img-container {
        height: 250px;
    }
    
    /* Add page sections */
    .add-page-element-card,
    .tech-card,
    .benefit-card,
    .resource-card,
    .process-card,
    .update-card {
        padding: 1.5rem 1rem;
    }
}

/* Landscape orientation for devices with limited height */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 2rem 0;
    }
    
    #hero-title-1 {
        font-size: 2rem;
    }
    
    #hero-subtitle-1 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .team-img-container {
        height: 180px;
    }
}

/* Prefers-reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
    .hero-image,
    .service-card,
    .feature-card,
    .pricing-card,
    .core-info-card,
    .blog-card,
    .team-img,
    .blog-img img,
    .gallery-item img,
    .add-page-element-card,
    .tech-card,
    .benefit-card,
    .resource-card,
    .process-card {
        transition: none;
    }
    
    .service-card:hover,
    .feature-card:hover,
    .pricing-card:hover,
    .pricing-card.featured:hover,
    .core-info-card:hover,
    .blog-card:hover,
    .team-img:hover,
    .blog-img:hover img,
    .gallery-item:hover img,
    .add-page-element-card:hover,
    .tech-card:hover,
    .benefit-card:hover,
    .resource-card:hover,
    .process-card:hover {
        transform: none;
    }
} 