/* 
 * CPA Connections - Responsive CSS Fixes
 * This file contains responsive fixes for the entire website
 */

/* ==================== General Responsive Fixes ==================== */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 480px) { 
    .header1-logo-block img {
        max-width: 50%;
        height: auto;
        margin-left: 10px;
    }
}

/* ==================== Home Page Specific Fixes ==================== */

/* Fix service boxes */
@media (max-width: 767px) {
    /* Structure */
    .row {
        margin-right: -10px;
        margin-left: -10px;
    }
    
    [class*="col-"] {
        padding-right: 10px;
        padding-left: 10px;
    }
    
    /* Hero section */
    .hero3 .main-heading {
        text-align: center;
        padding: 30px 0;
    }
    
    .hero3 .button {
        display: flex;
        justify-content: center;
    }
    
    /* Service boxes */
    .service3-box {
        margin-top: 30px !important;
    }
    
    .service3-box + .service3-box {
        margin-top: 30px !important;
    }
    
    /* Images */
    .image-area img {
        width: 100%;
        height: auto;
    }
    
    .hero3-images {
        margin-top: 40px;
        text-align: center;
    }
    
    /* Headings */
    .heading3.ml-60 {
        margin-left: 0 !important;
    }
    
    .heading3.mr-60 {
        margin-right: 0 !important;
    }
    
    /* Spacing */
    .mt-60 {
        margin-top: 30px !important;
    }
    
    /* Testimonials */
    .testimonial-horizental-slider2 {
        margin-bottom: 30px;
    }
    
    .slider-area {
        margin-top: 20px;
        text-align: center;
    }
    
    /* Buttons */
    .buttons .theme-btn4 {
        margin-left: 0;
        margin-top: 15px;
    }
    
    /* Images */
    .images, .images2 {
        margin-top: 30px;
        text-align: center;
    }
    
    /* Typography */
    .text-44, .text-56 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    .text-18 {
        font-size: 16px !important;
    }
}

/* ==================== Tablet Specific Fixes ==================== */
@media (min-width: 768px) and (max-width: 991px) {
    /* Images */
    .images, .images2 {
        margin-top: 30px;
    }
    
    /* Headings */
    .heading3.ml-60 {
        margin-left: 0 !important;
    }
    
    .heading3.mr-60 {
        margin-right: 0 !important;
    }
    
    /* Typography */
    .text-44 {
        font-size: 36px !important;
    }
    
    /* Hero section */
    .hero3-images {
        margin-top: 40px;
    }
    
    /* Spacing */
    .mt-60 {
        margin-top: 40px !important;
    }
}

/* ==================== All Mobile & Tablet Fixes ==================== */
@media (max-width: 991px) {
    /* Spacing */
    .sp {
        padding: 60px 0 !important;
    }
    
    /* Work boxes */
    .work-bxs-sec {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .work-bxs-sec [class*="col-"] {
        max-width: 280px;
    }
    
    /* Force width on all images */
    .main-image img, .image img, .image1 img, .image2 img {
        max-width: 100%;
        height: auto;
    }
    
    /* CTA section */
    .cta3 .buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cta3 .buttons a {
        margin: 10px 0;
    }
    
    /* About counter section */
    .about-counter-boxs .row {
        text-align: center;
    }
}

/* ==================== Small Device Fixes ==================== */
@media (max-width: 767px) {
    /* Hide decorative elements on small screens */
    .shape, .shape1, .shape2, .shape3, .shape4, .main-image-bg {
        display: none;
    }
    
    /* Testimonial section */
    .tes3 .col-lg-3 {
        display: none; /* Hide testimonial navigation on mobile */
    }
}

/* ==================== Extra Small Device Fixes ==================== */
@media (max-width: 575px) {
    /* Typography */
    .text-44, .text-56 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    /* Service boxes */
    .mt-60 {
        margin-top: 20px !important;
    }
    
    /* Spacing */
    .sp {
        padding: 40px 0 !important;
    }
    
    /* Progress bars */
    .porgress-line-all {
        margin-top: 20px;
    }
    
    /* Counter boxes */
    .counter-box, .counter-box.add-after, .counter-box.add-after2 {
        margin-bottom: 20px;
    }
    
    /* Work boxes */
    .work3-box {
        max-width: 100%;
        margin-bottom: 20px;
    }
}