/* Enhanced Mobile Fixes for Homepage and Department Pages */
/* Additional fixes for specific elements that may cause horizontal scroll */

/* ========================================
   ADDITIONAL MOBILE FIXES
   ======================================== */

/* Ensure all images are responsive */
img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
}

/* Fix specific width declarations */
img[width] {
    width: auto !important;
    max-width: 100% !important;
}

/* Fix picture elements */
picture img {
    max-width: 100% !important;
    height: auto !important;
}

/* ========================================
   HOMEPAGE SPECIFIC FIXES
   ======================================== */

/* Hero section mobile optimization */
@media (max-width: 767px) {
    #subtitle-wrapper {
        padding: 2rem 0 !important;
        min-height: auto !important;
    }
    
    .subtitle__title {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    .redcarpet {
        padding: 1rem !important;
        text-align: center !important;
    }
}

/* Step boxes mobile optimization */
@media (max-width: 767px) {
    .stepbox_wrapper {
        overflow: visible !important;
        margin: 0 !important;
    }
    
    .stepbox__layout {
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    .tt-arrow {
        display: none !important; /* Hide decorative arrows on mobile */
    }
    
    .stepbox {
        padding: 1.5rem !important;
        margin: 0 auto !important;
        max-width: 100% !important;
    }
}

/* Box01 mobile optimization */
@media (max-width: 767px) {
    .box01 {
        margin: 0 !important;
        padding: 1rem !important;
        overflow: visible !important;
    }
    
    .box01 .row {
        margin: 0 !important;
        overflow: visible !important;
    }
}

/* Promo section mobile */
@media (max-width: 767px) {
    .tt-promo {
        padding: 2rem 0 !important;
        text-align: center !important;
    }
    
    .tt-promo__descriptions {
        margin-bottom: 1.5rem !important;
    }
    
    .tt-position-relative {
        overflow: visible !important;
    }
    
    .tt-overflow-hidden {
        overflow: visible !important;
    }
}

/* Added info section mobile */
@media (max-width: 767px) {
    .added-info {
        display: block !important;
        margin: 0 !important;
    }
    
    .added-info__item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 1rem !important;
        padding: 1rem !important;
        text-align: center !important;
    }
    
    .no-gutters-row {
        margin: 0 !important;
    }
}

/* ========================================
   DEPARTMENT PAGE SPECIFIC FIXES  
   ======================================== */

/* Department page navigation menu mobile */
@media (max-width: 767px) {
    #tt-nav ul li ul {
        position: static !important;
        display: none !important;
        width: 100% !important;
        box-shadow: none !important;
        background: #f8f9fa !important;
        margin-top: 0.5rem !important;
        border-radius: 8px !important;
    }
    
    #tt-nav ul li:hover ul,
    #tt-nav ul li:focus ul {
        display: block !important;
    }
    
    #tt-nav ul li ul li {
        width: 100% !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    #tt-nav ul li ul li a {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        display: block !important;
        white-space: normal !important;
    }
}

/* ========================================
   CAROUSEL AND SLIDER FIXES
   ======================================== */

/* Slick carousel mobile fixes */
@media (max-width: 767px) {
    .slick-slider {
        overflow: hidden !important;
    }
    
    .slick-list {
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .slick-track {
        display: flex !important;
        width: auto !important;
    }
    
    .slick-slide {
        float: none !important;
        height: auto !important;
        min-height: 1px !important;
    }
    
    .js-init-carusel-tablet {
        overflow: hidden !important;
    }
}

/* ========================================
   TABLE RESPONSIVE FIXES
   ======================================== */

/* Make any tables responsive */
@media (max-width: 767px) {
    table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 0.875rem !important;
    }
    
    table, thead, tbody, th, td, tr {
        display: block !important;
        overflow: hidden !important;
    }
    
    thead tr {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    tr {
        border: 1px solid #ccc !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
        background: #f8f9fa !important;
        padding: 1rem !important;
    }
    
    td {
        border: none !important;
        padding: 0.5rem 0 !important;
        position: relative !important;
    }
}

/* ========================================
   IFRAME AND VIDEO RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    iframe,
    video,
    object,
    embed {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .embed-responsive {
        overflow: hidden !important;
    }
}

/* ========================================
   BACKGROUND IMAGE MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 767px) {
    .lazyload[data-bg] {
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    
    .tt-obj03-bg {
        display: none !important; /* Hide decorative backgrounds on mobile */
    }
    
    .subtitle-wrapper-img {
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ========================================
   FORCE HORIZONTAL SCROLL PREVENTION
   ======================================== */

/* Emergency horizontal scroll prevention */
@media (max-width: 767px) {
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .container,
    .container-fluid,
    .container-xl,
    .container-fluid-xl {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
    }
    
    /* Force any element that might overflow */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Specific elements that commonly cause overflow */
    pre,
    code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
    
    /* Force text to wrap */
    h1, h2, h3, h4, h5, h6, p, div, span, a {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}

/* ========================================
   FOOTER MOBILE ENHANCEMENT
   ======================================== */

@media (max-width: 767px) {
    .footer-wrapper01 {
        padding: 2rem 0 !important;
    }
    
    .f-col-wrapper {
        text-align: center !important;
    }
    
    .f-col-wrapper [class*="col-"] {
        margin-bottom: 2rem !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .f-col-wrapper img {
        max-width: 150px !important;
        height: auto !important;
        margin-bottom: 1rem !important;
    }
}

/* ========================================
   DEBUG MODE (Remove after testing)
   ======================================== */

/* Uncomment to debug overflow issues */
/*
@media (max-width: 767px) {
    * {
        border: 1px solid red !important;
        background: rgba(255,0,0,0.1) !important;
    }
    
    body::after {
        content: "Mobile Debug Mode Active";
        position: fixed;
        top: 0;
        right: 0;
        background: red;
        color: white;
        padding: 5px;
        z-index: 9999;
    }
}
*/