/* ==========================================================
   responsive-fix.css
   Layout-only fixes so every page fits phones, tablets and desktops.
   No text or image is changed here - only sizing, spacing and wrapping.
   Load this file LAST (after responsive.css).
   ========================================================== */

/* ---------- 1. Base ---------- */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
.site-branding img { height: auto; }
table { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p, li, a, span { overflow-wrap: break-word; word-wrap: break-word; }
.page { overflow-x: hidden; }

/* ---------- 2. Header (tablet + phone) ---------- */
@media (max-width: 1199px) {
    /* empty dark block that was left behind when the Get-a-Quote button was hidden */
    .ttm-header-style-infostack .ttm-rt-contact { display: none; }
    .site-branding { float: none; height: auto; line-height: normal; text-align: center; padding: 10px 0; }
    .site-branding .home-link { display: inline-block; }
    .site-branding img { max-height: 70px; width: auto; }
    .ttm-header-style-infostack .ttm-header-top-wrapper { padding: 0 15px; }
    #site-header-menu #site-navigation .menu { max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    #site-header-menu #site-navigation .menu ul[style] { max-height: none !important; overflow: visible !important; }
}
@media (max-width: 575px) {
    .site-branding img { max-height: 56px; }
}

/* ---------- 3. Home page hero slider ---------- */
@media (max-width: 991px) {
    .carousel-inner { display: block; }
    .carousel-item.cariteam { height: auto; min-height: 0; padding: 30px 0 50px; background-position: center; background-size: cover; }
    .carousel-item.cariteam .row { display: flex; flex-direction: column; align-items: center; margin: 0; }
    .carousel-item.cariteam .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .carousel-caption { position: static; transform: none; width: 100%; padding: 0 25px; text-align: center; }
    .carousel-caption h6 { font-size: 22px; line-height: 30px; margin-bottom: 12px; }
    .carousel-caption p { font-size: 16px; line-height: 24px; }
    .imagebox { position: static; width: 100%; max-width: 420px; margin: 20px auto 0; padding: 0 25px; float: none; }
    .imagebox img { float: none; display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 260px; }
}
@media (max-width: 575px) {
    .carousel-caption h6 { font-size: 18px; line-height: 26px; }
    .carousel-caption p { font-size: 14px; line-height: 22px; }
    .imagebox img { max-height: 200px; }
}

/* ---------- 4. Space between slider and first section ---------- */
@media (max-width: 991px) {
    .page:has(#carouselExampleIndicators) .site-main { padding-top: 0; }
}

/* ---------- 5. Text blocks on small screens ---------- */
@media (max-width: 767px) {
    .text-justify, .ttm-bg-layer p, p[style*="justify"] { text-align: left !important; }
    .section-title h2.title, h2, h3 { line-height: 1.3; }
}

/* ---------- 6. About page: row inside background column ---------- */
@media (max-width: 991px) {
    .layer-content > .row { margin-left: 0; margin-right: 0; }
}

/* ---------- 7. Enquiry form ---------- */
.form-container form, #enquiryForm { width: 100%; }
#enquiryForm .input-field, #enquiryForm .select-field { box-sizing: border-box; max-width: 100%; min-height: 40px; background-color: #fff; }
#enquiryForm textarea.input-field { min-height: 110px; }
#enquiryForm .input-field::placeholder { color: #666; opacity: 1; }
@media (max-width: 768px) {
    #enquiryForm .input-field, #enquiryForm .select-field { width: 100%; }
    #enquiryForm .button-group { text-align: center; }
    .form-container { padding: 12px; }
}
#enquiryForm .input-field, #enquiryForm .select-field {
    display: block; padding: 10px 14px; margin: 6px 0; border: 1px solid #ddd; border-radius: 5px;
    font-size: 15px; line-height: 1.4; color: #000; height: auto; min-height: 44px; outline: 0;
}
#enquiryForm .input-field:focus, #enquiryForm .select-field:focus { border-color: #2769bf; }
#enquiryForm input[type="file"].input-field { padding: 8px 10px; }
#enquiryForm .submit-button { min-width: 110px; }
#enquiryForm { display: flex; flex-wrap: wrap; justify-content: space-between; }
@media (min-width: 769px) {
    #enquiryForm .input-field:not(.full-width):not([type="file"]):not(.otp-input),
    #enquiryForm .select-field:not(.full-width) { width: 48% !important; }
    #enquiryForm input[name="q"] { width: 100% !important; }
}
#enquiryForm input[name="q"] { width: 100% !important; min-width: 260px; max-width: 100%; }
#enquiryForm .file-captcha-group, #enquiryForm .otp-section, #enquiryForm .file-upload-group { width: 100%; }

/* ---------- 8. Product pages: stack text + gallery cleanly ---------- */
@media (max-width: 991px) {
    .ttm-row .container > .row > .col-md-8, .ttm-row .container > .row > .col-md-4 { flex: 0 0 100% !important; max-width: 100% !important; }
    .ttm-row .pr-50 { padding-right: 15px !important; }
    .ttm-row .res-991-pt-50 { padding-top: 20px !important; }
    .ttm-row ul.contact-widget-wrapper li, .ttm-row .section-title p { text-align: left; }
}

@media (max-width: 767px) {
    .featured-desc, .featured-content p, .layer-content p, .ttm-bg-layer p { text-align: left !important; }
}
@media (max-width: 575px) {
    .featured-box.left-icon .featured-icon, .featured-icon { transform-origin: left top; }
}

/* ---------- 9. Product gallery slider (main image + thumbnails) ---------- */
.ttm-row .carousel.slide { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.ttm-row .carousel.slide .carousel-inner {
    aspect-ratio: 8 / 5; width: 100%; background: #f1f4f8; border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(7, 18, 48, .12);
}
.ttm-row .carousel.slide .carousel-item { height: 100%; }
.ttm-row .carousel.slide .carousel-item img.d-block { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ttm-row .carousel.slide .carousel-indicators {
    position: static; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    margin: 10px 0 0; padding: 0; list-style: none;
}
.ttm-row .carousel.slide .carousel-indicators > div {
    width: 84px; height: 54px; margin: 4px; padding: 0; flex: 0 0 auto; cursor: pointer;
    border-radius: 6px; overflow: hidden; background: #f1f4f8;
}
.ttm-row .carousel.slide .carousel-indicators .thumb { width: 100%; height: 100%; margin: 0; object-fit: cover; display: block; border: 2px solid transparent; border-radius: 6px; box-sizing: border-box; }
.ttm-row .carousel.slide .carousel-indicators .active .thumb { border-color: #2769bf; }

/* prev / next arrows (added by js/main.js) */
.ttm-row .carousel.slide .pg-nav {
    position: absolute; top: calc((100% - var(--thumbs, 70px)) / 2); transform: translateY(-50%); z-index: 20;
    width: 38px; height: 38px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    background: rgba(7, 18, 48, .65); color: #fff; font-size: 22px; line-height: 38px; text-align: center;
    transition: background .2s;
}
.ttm-row .carousel.slide .pg-nav:hover, .ttm-row .carousel.slide .pg-nav:focus { background: #2769bf; outline: 0; }
.ttm-row .carousel.slide .pg-prev { left: 8px; }
.ttm-row .carousel.slide .pg-next { right: 8px; }
@media (max-width: 575px) {
    .ttm-row .carousel.slide .pg-nav { width: 32px; height: 32px; line-height: 32px; font-size: 18px; }
    .ttm-row .carousel.slide .carousel-indicators > div { width: 64px; height: 42px; }
}

/* ---------- 10. Image grids: every card image gets the same shape ---------- */
.ttm-portfolio-view-topimage .featured-thumbnail { overflow: hidden; border-radius: 8px 8px 0 0; background: #f1f4f8; }
.ttm-portfolio-view-topimage .featured-thumbnail a { display: block; }
.ttm-portfolio-view-topimage .featured-thumbnail img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; display: block;
}
.ttm-portfolio-view-topimage .ttm-media-link, .ttm-portfolio-view-topimage .featured-content { text-align: center; }
@media (max-width: 575px) {
    .ttm-portfolio-view-topimage .featured-thumbnail img { aspect-ratio: 4 / 3; }
}
/* owl / client logos keep their own ratio but never stretch */
.clients-logo img, .owl-item img { object-fit: contain; }