/* ==========================================================================
   Iron Core Filtration - Custom Responsive & Styling Overrides
   ========================================================================== */

/* --- Prevent Horizontal Scrolling & Overflow Bugs --- */
html, 
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#page, 
#main, 
.wf-wrap, 
.wf-container {
    max-width: 100% !important;
    overflow-x: visible !important;
}

/* --- Global Responsive Safeguards --- */

/* Ensure all images scale down on smaller viewports */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure embedded media scales with the container */
iframe, object, embed, video {
    max-width: 100%;
}

/* Prevent tables from breaking layouts by making them scrollable on mobile */
table {
    width: 100% !important;
    margin-bottom: 20px;
    border-collapse: collapse;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Wrap long pre-formatted text to prevent viewport stretching */
pre, code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Prevent text overflow in standard containers */
p, h1, h2, h3, h4, h5, h6, li, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Mobile Header & Navigation Constraints --- */
.masthead-mobile, 
.masthead-mobile-header, 
.dt-mobile-header {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- Fix Transparent Header Visibility on Inner Pages Only --- */
body:not(.home) .masthead {
    background-color: #ffffff !important;
}
/* Ensure the mobile hamburger icon is always visible (dark blue) on inner pages */
body:not(.home) .dt-mobile-menu-icon .lines,
body:not(.home) .dt-mobile-menu-icon .lines::before,
body:not(.home) .dt-mobile-menu-icon .lines::after {
    background-color: #104364 !important;
}
/* Ensure the logo renders properly without transparent inversion on inner pages */
body:not(.home) .branding img {
    filter: none !important;
    opacity: 1 !important;
}
/* Ensure desktop menu text is always visible on inner pages */
body:not(.home) .main-nav > li > a {
    color: #104364 !important;
}

/* Constrain mobile logo to prevent layout stretch */
.masthead-mobile .mobile-branding img, 
.masthead-mobile-header .mobile-branding img,
.same-logo img {
    max-width: 150px !important;
    height: auto !important;
}

/* ==========================================================================
   Mobile Menu Contact Section Redesign & Hardening
   ========================================================================== */

/* Target the mobile menu contact widget containers and force spacing */
.mobile-mini-widgets-in-menu,
.dt-mobile-header .mini-widgets,
.dt-mobile-header .header-widgets,
.dt-mobile-header .mobile-navigation .contact-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 25px 15px !important;
    box-sizing: border-box !important;
    gap: 15px !important;
}

/* Force each contact item (Email, Phone, Phone 2) to stack vertically and align left */
.dt-mobile-header .mini-widgets a:not([class*="button"]):not([class*="btn"]),
.dt-mobile-header .mini-widgets span,
.dt-mobile-header .header-widgets a:not([class*="button"]):not([class*="btn"]),
.dt-mobile-header .header-widgets span,
.mobile-mini-widgets-in-menu a:not([class*="button"]):not([class*="btn"]),
.mobile-mini-widgets-in-menu span,
.mobile-mini-widgets-in-menu .item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 8px auto !important;
    padding-left: 20px !important;
    float: none !important;
    clear: both !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 500 !important;
    color: #484848 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Add elegant spacing and styling for icons in mobile menu contacts */
.mobile-mini-widgets-in-menu i,
.dt-mobile-header .mini-widgets i,
.dt-mobile-header .header-widgets i {
    margin-right: 12px !important;
    font-size: 16px !important;
    color: #0b3c5d !important;
    width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
}

/* --- Request Quote Button Premium Redesign --- */
.mobile-mini-widgets-in-menu a[class*="button"],
.mobile-mini-widgets-in-menu a[class*="btn"],
.mobile-mini-widgets-in-menu .dt-btn,
.dt-mobile-header a[class*="button"],
.dt-mobile-header a[class*="btn"],
.dt-mobile-header .dt-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: 90% !important;
    height: 48px !important;
    padding: 0 30px !important;
    background-color: #0b3c5d !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    border-radius: 25px !important;
    margin: 25px auto 5px auto !important;
    box-shadow: 0 4px 10px rgba(11, 60, 93, 0.25) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: none !important;
    white-space: nowrap !important;
    clear: both !important;
    float: none !important;
}

.mobile-mini-widgets-in-menu a[class*="button"]:hover,
.mobile-mini-widgets-in-menu a[class*="btn"]:hover,
.mobile-mini-widgets-in-menu .dt-btn:hover,
.dt-mobile-header a[class*="button"]:hover,
.dt-mobile-header a[class*="btn"]:hover,
.dt-mobile-header .dt-btn:hover {
    background-color: #07253a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(7, 37, 58, 0.35) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   💎 PREMIUM DESIGN UPGRADES: Slider, Badges, & Product Cards
   ========================================================================== */

/* --- Modernize the "Our Products" Badge --- */
h2.vc_custom_heading,
h3.vc_custom_heading,
.vc_custom_heading {
    text-shadow: none !important;
}

/* Specific styling for pill-shaped subheadings/badges */
.vc_custom_heading[style*="border-radius"], 
.vc_custom_heading[style*="background-color"] {
    background: linear-gradient(135deg, #0b3c5d, #1d5f8a) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(11, 60, 93, 0.2) !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.vc_custom_heading[style*="border-radius"]:hover, 
.vc_custom_heading[style*="background-color"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(11, 60, 93, 0.3) !important;
}

/* --- Beautify Main Section Headings --- */
h2.vc_custom_heading,
h3.vc_custom_heading {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    font-size: 28px !important;
    line-height: 36px !important;
}

/* --- Modernize the Slider Images (Desktop Default) --- */
#main-slideshow,
.wpb_images_carousel,
.wpb_single_image,
.slider-wrapper {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.4s ease !important;
}

#main-slideshow img,
.wpb_single_image img,
.vc_single_image-img {
    border-radius: 16px !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.wpb_single_image:hover img,
.vc_single_image-img:hover {
    transform: scale(1.02) !important;
}

/* --- Glassmorphism Slider Navigation Arrows --- */
.owl-prev,
.owl-next,
.tp-leftarrow,
.tp-rightarrow,
.flex-prev,
.flex-next,
.tparrows,
.arrows .arrow-left,
.arrows .arrow-right,
.owl-nav button {
    background: rgba(11, 60, 93, 0.8) !important; /* Premium dark blue glassmorphism background */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #ffffff !important; /* Force core text/icon color to white */
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(11, 60, 93, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Force internal pseudo-elements/icons inside arrows to be white to prevent white-on-white */
.owl-prev:before, .owl-prev:after,
.owl-next:before, .owl-next:after,
.tp-leftarrow:before, .tp-rightarrow:before,
.flex-prev i, .flex-next i,
.tparrows:before,
.owl-nav button:before,
.owl-nav button i {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.owl-prev:hover,
.owl-next:hover,
.tp-leftarrow:hover,
.tp-rightarrow:hover,
.flex-prev:hover,
.flex-next:hover,
.owl-nav button:hover {
    background: #0b3c5d !important;
    color: #ffffff !important;
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(11, 60, 93, 0.45) !important;
}

/* --- Premium Product Column/Card Overrides --- */
.wpb_column.vc_col-sm-4 .vc_column-inner,
.products-grid .vc_column-inner {

}

.wpb_column.vc_col-sm-4 .vc_column-inner:hover,
.products-grid .vc_column-inner:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(11, 60, 93, 0.12) !important;
    border-color: rgba(11, 60, 93, 0.12) !important;
}



/* ==========================================================================
   Viewport Device Width Overrides
   ========================================================================== */

/* --- Tablet & Mobile Device Overrides (< 992px) --- */
@media screen and (max-width: 991px) {
    /* Improve general body padding on small devices */
    .wf-wrap {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* --- Mobile Specific Overrides (< 778px) --- */
@media screen and (max-width: 778px) {
    /* Responsive Logo Scaling */
    .same-logo img, 
    .sticky-mobile-on.masthead .mobile-branding .sticky-mobile-logo-second-switch img {
        width: 140px !important;
        height: auto !important;
    }
    
    /* Ensure columns stack nicely on mobile */
    .vc_column_container {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Optimize heading sizes for mobile viewports */
    h1, .h1 { font-size: 28px !important; line-height: 34px !important; }
    h2, .h2 { font-size: 24px !important; line-height: 30px !important; }
    h3, .h3 { font-size: 20px !important; line-height: 26px !important; }

    /* --- Mobile Slider Arrow Specific Tuning --- */
    .owl-prev,
    .owl-next,
    .tp-leftarrow,
    .tp-rightarrow,
    .flex-prev,
    .flex-next,
    .tparrows,
    .owl-nav button {
        width: 32px !important;
        height: 32px !important;
        background: rgba(11, 60, 93, 0.7) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    .owl-prev:before, .owl-next:before,
    .tp-leftarrow:before, .tp-rightarrow:before,
    .tparrows:before,
    .flex-prev i, .flex-next i {
        font-size: 12px !important;
        color: #ffffff !important;
    }

    .owl-prev, .tp-leftarrow, .flex-prev, .owl-nav .owl-prev {
        left: 4px !important;
    }
    .owl-next, .tp-rightarrow, .flex-next, .owl-nav .owl-next {
        right: 4px !important;
    }

    /* ==========================================================================
       📱 "WHY CHOOSE US" STACKING AND GENERAL MOBILE FIXES
       ========================================================================== */

    /* Ensure Why Choose Us icons show 2 per row and scale down */
    .home-choose .vc_inner .vc_column_container {
        width: 50% !important;
        float: left !important;
        display: block !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        clear: none !important;
    }

    /* Clear every odd item to ensure perfect 2-column rows */
    .home-choose .vc_inner .vc_column_container:nth-child(odd) {
        clear: both !important;
    }

    .home-choose .aio-icon-box {
        width: 145px !important;
        height: 145px !important;
        margin: 0 auto 15px auto !important;
        padding: 5px !important;
        border-width: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    
    .home-choose .img-icon {
        max-width: 35px !important; 
        height: auto !important;
        margin-bottom: 5px !important;
    }

    .home-choose .aio-icon-title {
        font-size: 12px !important;
        line-height: 16px !important;
        margin-top: 0 !important;
        text-align: center !important;
        width: min-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Restore Carousel functionality & Force 2 Items per view */
    .home-products .owl-item, 
    .home-products-m .owl-item {
        width: 46vw !important;
        margin-right: 2vw !important;
        margin-left: 0 !important;
        display: inline-block !important;
        float: left !important;
    }

    .home-choose .aio-icon-header {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Reduce general section padding on mobile */
    .home-contact, .home-testimonial, .home-choose, .home-client, .about-us, .about-value, .brochure, .industry, .product-inner, .home-products, .home-counter {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Adjust heading font sizes and alignment for mobile */
    .head2, .home-testimonial .head2 {
        font-size: 26px !important;
        line-height: 36px !important;
        text-align: left !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    .home-testimonial .head1,
    .head1 {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 15px !important;
        line-height: 25px !important;
        font-weight: 500 !important;
        padding: 5px 15px !important;
        background: linear-gradient(90deg, #104364 -50%, transparent 90%) !important;
        color: #ffffff !important;
        box-shadow: inset 0px 1px 10px -1px #104364 !important;
        border-radius: 5px !important;
        text-transform: capitalize !important;
        letter-spacing: 1px !important;
        margin: 0 0 10px 0 !important;
        text-align: left !important;
    }

    .uvc-sub-heading,
    .uvc-heading h2,
    .uvc-heading h3 {
        font-size: 16px !important;
        line-height: 32px !important;
        text-align: left !important;
    }

    /* Footer Column Fixes */
    #block-7, #block-9 {
        width: 100% !important;
        text-align: center !important;
    }

    .footer #block-7:before {
        display: none !important;
    }

    /* Counter Section Fixes */
    .home-counter .stats-block {
        margin-bottom: 35px !important;
    }
    
    .home-counter .vc_col-sm-5, .home-counter .vc_col-sm-7 {
        padding-top: 20px !important;
    }

}

/* --- Small Mobile Overrides (< 480px) --- */
@media screen and (max-width: 480px) {
    /* Stack form elements vertically */
    input[type="text"], 
    input[type="email"], 
    input[type="tel"], 
    textarea, 
    select {
        width: 100% !important;
    }
}

/* --- Global Desktop & Layout Adjustments --- */
.footer .widget {
    color: #484848;
    padding: 0 15px;
}

/* --- Desktop Why Choose Us Overrides --- */
@media screen and (min-width: 779px) {
    .home-choose .aio-icon-box {
        width: 160px !important;
        height: 160px !important;
        padding: 10px !important;
        border-width: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .home-choose .img-icon {
        max-width: 45px !important; 
        height: auto !important;
        margin-bottom: 10px !important;
    }
    .home-choose .aio-icon-title {
        font-size: 14px !important;
        line-height: 20px !important;
        margin-top: 0 !important;
        text-align: center !important;
        width: min-content !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .home-choose .aio-icon-header {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   Info Box Vertical Alignment Fixes
   ========================================================================== */
.aio-icon-box.left-icon {
    display: flex !important;
    align-items: center !important;
}
.aio-ibd-block {
    margin-top: 0 !important;
}
.aio-icon-description p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix unwanted gaps in Ultimate Headings (e.g. About Us section) */
.uvc-sub-heading p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.uvc-sub-heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tighten spacing between About Us headings */
@media screen and (max-width: 778px) {
    .uvc-heading h2.head1 {
        margin-top: 25px !important; /* Add space between image and About Us */
        margin-bottom: 5px !important;
    }
    .uvc-heading h3.head2 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }
}

.aio-icon-description h4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   Home Features (Product Features) Mobile Redesign
   ========================================================================== */
@media screen and (max-width: 778px) {
    .home-features .aio-icon-box {
        padding: 15px 20px !important;
        margin-bottom: 15px !important;
        background-color: #f8f9fa !important; /* Soft, clean gray */
        border-radius: 10px !important; /* Modern rounded corners */
        box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; /* Subtle depth */
    }
    
    /* Shrink the icon */
    .home-features .aio-icon-img img {
        max-width: 36px !important;
        height: auto !important;
    }
    
    /* Adjust spacing between icon and text */
    .home-features .aio-icon-left {
        margin-right: 15px !important;
    }
    
    /* Shrink the Title */
    .home-features .aio-icon-description h4 {
        font-size: 16px !important;
        line-height: 22px !important;
        margin-bottom: 4px !important;
    }
    
    /* Shrink the Paragraph Text */
    .home-features .aio-icon-description p {
        font-size: 13px !important;
        line-height: 20px !important;
        color: #666666 !important;
    }
}

/* ==========================================================================
   Footer Mobile Padding Fix
   ========================================================================== */
@media screen and (max-width: 778px) {
    #footer, 
    #bottom-bar {
        padding-left: 25px !important;
        padding-right: 25px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   About Us Core Values Mobile & Tablet Redesign
   ========================================================================== */
@media screen and (max-width: 992px) {
    .about-value .vc_column-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .about-value .aio-icon-box {
        padding: 25px 20px !important;
        margin-bottom: 20px !important; /* Create gaps between boxes */
        background-color: #104364 !important; /* Keep brand dark blue */
        border-radius: 12px !important; /* Modern rounded corners */
        box-shadow: 0 8px 20px rgba(16, 67, 100, 0.3) !important; /* Soft shadow matching brand color */
        border: none !important; /* Remove clunky borders or lines */
    }
    
    /* Shrink the icon */
    .about-value .aio-icon-img img {
        max-width: 50px !important;
        height: auto !important;
        margin-bottom: 5px !important;
    }
    
    /* Shrink the Title */
    .about-value .aio-icon-description h4 {
        font-size: 18px !important;
        line-height: 26px !important;
        color: #ffffff !important;
        margin-top: 10px !important;
    }
    
    /* Shrink the Paragraph Text (if present) */
    .about-value .aio-icon-description p {
        font-size: 14px !important;
        line-height: 22px !important;
        color: #e0e0e0 !important; /* Soft white for readability */
    }
}

/* ==========================================================================
   Make About Mission/Vision Section Background Full Width
   ========================================================================== */
.about-m-v {
    background-color: #eee !important;
    box-shadow: 0 0 0 100vmax #eee !important;
    clip-path: inset(0 -100vmax) !important;
    position: relative !important;
    z-index: 1; /* Ensures it stays above general backgrounds */
}

/* ==========================================================================
   Make About Mission/Vision Section Cards Beautiful
   ========================================================================== */
.about-m-v .vc_column-inner {
    background-color: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    padding: 40px 30px !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    border: 1px solid rgba(0,0,0,0.03) !important;
}
.about-m-v .vc_column-inner:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px rgba(16, 67, 100, 0.12) !important;
}

/* ==========================================================================
   Mission/Vision Structural Layout Fix
   ========================================================================== */
@media screen and (min-width: 992px) {
    .about-m-v {
        display: flex !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 30px !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
    
    .about-m-v > .wpb_column {
        width: calc(33.3333% - 20px) !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Ensure internal column wrapper stretches */
    .about-m-v .vc_column-inner,
    .about-m-v .wpb_wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 100% !important;
    }
}
@media screen and (max-width: 991px) {
    .about-m-v > .wpb_column {
        margin-bottom: 30px !important;
    }
}