/* Laptop and Desktop Layout Enhancement CSS */
/* Fixes for website cutoff and responsive design issues */

/* ========== BASE CONTAINER FIXES ========== */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ========== CONTAINER OPTIMIZATION ========== */
.container {
    width: 95% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* ========== DESKTOP SPECIFIC FIXES (1024px - 1440px) ========== */
@media (min-width: 1024px) and (max-width: 1440px) {
    .container {
        width: 96% !important;
        max-width: 1200px !important;
        padding: 0 15px !important;
    }
    
    /* Navigation adjustments */
    .main-nav .container {
        padding: 0 10px !important;
    }
    
    .nav-links li {
        margin: 0 8px !important;
    }
    
    .nav-links li a {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
}

/* ========== LARGE DESKTOP FIXES (1441px+) ========== */
@media (min-width: 1441px) {
    .container {
        width: 90% !important;
        max-width: 1600px !important;
    }
}

/* ========== TABLET FIXES (768px - 1023px) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        width: 98% !important;
        max-width: 1000px !important;
        padding: 0 15px !important;
    }
    
    /* Product tabs adjustments */
    .product-detail-tabs {
        padding: 0 15px !important;
    }
    
    .tab-btn {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
}

/* ========== MOBILE OPTIMIZATION (320px - 767px) ========== */
@media (max-width: 767px) {
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }
    
    /* Full width elements */
    section, .product-detail-tabs, .tab-header, .tab-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Navigation mobile fixes */
    .main-nav {
        position: sticky !important;
        top: 0 !important;
        z-index: 2000 !important;
    }
    
    .nav-links {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Tab mobile fixes */
    .tab-header {
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .tab-btn {
        flex-shrink: 0 !important;
        min-width: 120px !important;
    }
}

/* ========== SMALL MOBILE FIXES (320px - 480px) ========== */
@media (max-width: 480px) {
    .container {
        padding: 0 8px !important;
    }
    
    .logo-circle {
        width: 50px !important;
        height: 50px !important;
    }
    
    .logo-circle img {
        width: 40px !important;
        height: 40px !important;
    }
    
    .company-name .varadom {
        font-size: 1.5rem !important;
    }
    
    .company-name .technologies {
        font-size: 0.7rem !important;
    }
}

/* ========== IMAGE RESPONSIVENESS ========== */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ========== FLEXBOX GRID FIXES ========== */
.row, .flex-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px !important;
    max-width: 100% !important;
}

.col, .flex-col {
    flex: 1 !important;
    padding: 0 10px !important;
    min-width: 0 !important;
}

/* ========== PRODUCT CARDS FIXES ========== */
.product-card, .service-card, .component-card {
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    overflow: hidden !important;
}

/* ========== VIDEO AND IFRAME RESPONSIVENESS ========== */
iframe, video, embed {
    max-width: 100% !important;
    height: auto !important;
}

.video-container {
    position: relative !important;
    padding-bottom: 56.25% !important;
    height: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
}

.video-container iframe,
.video-container video,
.video-container embed {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* ========== TABLE RESPONSIVENESS ========== */
table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {
    table {
        font-size: 14px !important;
    }
    
    th, td {
        padding: 8px 5px !important;
    }
}

/* ========== PRINT STYLES ========== */
@media print {
    .container {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .nav-links, .mobile-menu-toggle {
        display: none !important;
    }
}