/* Responsive Styles */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* Large devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-section, .hero-slide {
        height: 80vh;
    }
    
    .service-item {
        padding: 25px;
    }
    
    .team-info {
        padding: 15px;
    }
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1rem;
    }
    
    section {
        padding: 60px 0;
    }
    
    .hero-section, .hero-slide {
        height: 70vh;
        min-height: 500px;
    }
    
    .service-item, .price-item, .about-feature, .coreinfo-item {
        padding: 20px;
    }
    
    .service-icon, .feature-icon, .about-feature-icon, .coreinfo-icon {
        font-size: 2rem;
    }
    
    .team-info {
        padding: 10px;
    }
    
    .price-value {
        font-size: 2rem;
    }
    
    .contact-form, .contact-info {
        padding: 30px;
    }
}

/* Small devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    section {
        padding: 50px 0;
    }
    
    .section-title {
        margin-bottom: 30px;
    }
    
    .hero-section, .hero-slide {
        height: 60vh;
        min-height: 400px;
    }
    
    .price-value {
        font-size: 1rem;
    }
    
    .contact-info {
        margin-top: 30px;
    }
    
    .footer-col {
        margin-bottom: 30px;
    }
    
    /* Disable animations on mobile */
    .swiper-container-autoplay {
        autoplay: false;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    h1 {
        font-size: 1rem;
    }
    
    h2 {
        font-size: 1rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    section {
        padding: 40px 0;
    }
    
    .section-title {
        margin-bottom: 25px;
    }
    
    .hero-section, .hero-slide {
        height: 50vh;
        min-height: 350px;
    }
    
    .about-feature, .service-item, .price-item, .coreinfo-item {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .team-member {
        margin-bottom: 20px;
    }
    
    .contact-form, .contact-info {
        padding: 20px;
    }
    
    .contact-info {
        margin-top: 20px;
    }
    
    .footer-col {
        margin-bottom: 20px;
    }
    
    /* Smaller font sizes on mobile */
    body {
        font-size: 0.9rem;
    }
    
    /* Disable animations on mobile for performance and respecting user preferences */
    @media (prefers-reduced-motion) {
        .fade-up, .service-item:hover, .price-item:hover, .about-feature:hover, .blog-item:hover {
            transition: none;
            transform: none;
        }
    }
    
    /* Stack elements on mobile */
    .row {
        margin-right: -10px;
        margin-left: -10px;
    }
    
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5,
    .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10,
    .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10,
    .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10,
    .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10,
    .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
    .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-right: 10px;
        padding-left: 10px;
    }
} 