/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    section {
        padding: 50px 0;
    }
    
    .hero {
        height: auto;
        padding: 120px 0 50px;
    }
    
    .hero-content {
        text-align: center;
    }
    
    .hero-content img {
        margin-top: 30px;
    }
    
    .about-feature,
    .service-item,
    .feature-item,
    .price-item,
    .team-member,
    .blog-item,
    .coreinfo-item {
        margin-bottom: 30px;
    }
    
    .review-item {
        padding: 20px;
    }
    
    .review-author {
        flex-direction: column;
        text-align: center;
    }
    
    .review-author-img {
        margin: 0 auto 15px;
    }
    
    .contact-form {
        padding: 25px;
    }
    
    footer {
        padding: 50px 0 20px;
        text-align: center;
    }
    
    footer h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links {
        margin-bottom: 30px;
    }
}

/* Small Devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    section {
        padding: 60px 0;
    }
    
    .hero {
        height: auto;
        padding: 120px 0 60px;
    }
    
    .about-feature,
    .service-item,
    .feature-item,
    .price-item,
    .team-member,
    .blog-item,
    .coreinfo-item {
        margin-bottom: 30px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero {
        height: auto;
        padding: 150px 0 80px;
    }
    
    .service-item,
    .team-member,
    .price-item {
        margin-bottom: 30px;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero {
        height: 80vh;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    
    .swiper-container {
        --swiper-autoplay-delay: 0 !important;
    }
    
    .service-item:hover,
    .about-feature:hover,
    .feature-item:hover,
    .price-item:hover,
    .team-member:hover,
    .blog-item:hover,
    .coreinfo-item:hover {
        transform: none !important;
    }
} 