/* ===================================
   1280px Layout Fixes - Universal
   ===================================
   
   This file contains comprehensive layout fixes for all col-xxl-* classes
   to ensure proper display at 1280px screen size across the entire website.
   
   Target: Screens between 1200px and 1399px (includes 1280px)
   Problem: Bootstrap col-xxl-* classes only apply at 1400px+
   Solution: Force proper column widths using flexbox properties
*/

/* ===================================
   Universal 1280px Layout Fixes
   =================================== */

@media (min-width: 1200px) and (max-width: 1399px) {
    /* Force proper column widths for all col-xxl classes */
    .row .col-xxl-1 {
        flex: 0 0 8.333333% !important;
        max-width: 8.333333% !important;
    }
    
    .row .col-xxl-2 {
        flex: 0 0 16.666667% !important;
        max-width: 16.666667% !important;
    }
    
    .row .col-xxl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    .row .col-xxl-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    .row .col-xxl-5 {
        margin-top: 350px;
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
    }
    
    .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .row .col-xxl-7 {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
    }
    
    .row .col-xxl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    
    .row .col-xxl-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    
    .row .col-xxl-10 {
        flex: 0 0 83.333333% !important;
        max-width: 83.333333% !important;
    }
    
    .row .col-xxl-11 {
        flex: 0 0 91.666667% !important;
        max-width: 91.666667% !important;
    }
    
    .row .col-xxl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure proper grid behavior */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .row > * {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ===================================
   1280px Specific Optimizations
   =================================== */

@media (min-width: 1280px) and (max-width: 1299px) {
    /* Typography optimization */
    .sec-title {
        font-size: 28px !important;
        line-height: 1.4 !important;
    }
    
    .sec-text {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Card optimization */
    .service-card,
    .course-card,
    .team-card,
    .blog-card,
    .testi-card,
    .project-card {
        padding: 20px !important;
    }
    
    .service-card .box-title,
    .course-card .box-title,
    .team-card .box-title,
    .blog-card .box-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    
    /* Image optimization */
    .img-box1 img,
    .img-box2 img,
    .img-box3 img,
    .img-box4 img {
        max-width: 95% !important;
        height: auto !important;
    }
    
    /* Shadow text optimization */
    .shadow-text {
        font-size: 260px !important;
        transform: translate(-40px, 0) !important;
    }
}

/* ===================================
   Section-Specific Fixes
   =================================== */

@media (min-width: 1200px) and (max-width: 1399px) {
    /* About Section */
    .about-wrap1 .row .col-xxl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    
    .about-wrap1 .row .col-xxl-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    /* Service Section */
    #service-sec .row .col-xxl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    
    #service-sec .row .col-xxl-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
    
    #service-sec .row .col-xxl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    #service-sec .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Course Section */
    #course-sec .row .col-xxl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    
    #course-sec .row .col-xxl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    #course-sec .row .col-xxl-7 {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
    }
    
    #course-sec .row .col-xxl-5 {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
    }
    
    /* Testimonial Section */
    #testimonial-sec .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    #testimonial-sec .row .col-xxl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
    
    /* Why Choose Us Section */
    #why-sec .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Team Section */
    #team-sec .row .col-xxl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    #team-sec .row .col-xxl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    #team-sec .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Blog Section */
    #blog-sec .row .col-xxl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Contact Section */
    #contact-sec .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Process Section */
    .process-area .row .col-xxl-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Home page variations */
    .home-1-op .row .col-xxl-8,
    .home-2 .row .col-xxl-6,
    .home-2-op .row .col-xxl-6,
    .home-3 .row .col-xxl-12,
    .home-3-op .row .col-xxl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .home-2 .row .col-xxl-7,
    .home-2-op .row .col-xxl-7 {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
    }
    
    .home-2 .row .col-xxl-8,
    .home-2-op .row .col-xxl-8 {
        flex: 0 0 66.666667% !important;
        max-width: 66.666667% !important;
    }
}

/* ===================================
   Mobile and Tablet Adjustments
   =================================== */

@media (max-width: 1199px) {
    /* Stack all col-xxl columns on mobile/tablet */
    .row .col-xxl-1,
    .row .col-xxl-2,
    .row .col-xxl-3,
    .row .col-xxl-4,
    .row .col-xxl-5,
    .row .col-xxl-6,
    .row .col-xxl-7,
    .row .col-xxl-8,
    .row .col-xxl-9,
    .row .col-xxl-10,
    .row .col-xxl-11,
    .row .col-xxl-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    /* Center content on mobile */
    .title-area {
        text-align: center !important;
    }
    
    .img-box1,
    .img-box2,
    .img-box3,
    .img-box4 {
        text-align: center !important;
    }
    
    /* Optimize shadow text for mobile */
    .shadow-text {
        font-size: 200px !important;
        transform: translate(-50%, 0) !important;
        left: 50% !important;
    }
}

/* ===================================
   Additional Optimizations
   =================================== */

@media (min-width: 1200px) and (max-width: 1399px) {
    /* Ensure proper spacing */
    .row.gy-40 {
        --bs-gutter-y: 30px !important;
    }
    
    .row.gy-60 {
        --bs-gutter-y: 40px !important;
    }
    
    .row.gx-80 {
        --bs-gutter-x: 50px !important;
    }
    
    .row.gx-100 {
        --bs-gutter-x: 60px !important;
    }
    
    /* Optimize animations */
    .animate-element {
        transform: scale(0.95) !important;
    }
    
    /* Ensure proper card heights */
    .row .card,
    .row .service-card,
    .row .team-card,
    .row .blog-card,
    .row .testi-card,
    .row .project-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .row .card .card-body,
    .row .service-card .card-body,
    .row .team-card .team-card-content,
    .row .blog-card .card-body,
    .row .testi-card,
    .row .project-card .box-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}