/*
 * responsive.css — supplemental responsive fixes
 * Preserves all original styles; only adds mobile/tablet overrides.
 */

/* -------------------------------------------------------
   Responsive iframe (Google Maps)
------------------------------------------------------- */
.map-responsive {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* -------------------------------------------------------
   contact-info-map-section
------------------------------------------------------- */
.contact-info-map-section .content {
    display: flex;
    flex-wrap: wrap;
}
.contact-info-map-section .left-col {
    flex: 1 1 55%;
    min-width: 280px;
}
.contact-info-map-section .left-col iframe {
    width: 100% !important;
    min-height: 350px;
}
.contact-info-map-section .right-col {
    flex: 1 1 40%;
    min-width: 280px;
}

/* -------------------------------------------------------
   about-section (left-col / right-col split)
------------------------------------------------------- */
.about-section .content {
    display: flex;
    flex-wrap: wrap;
}
.about-section .content .left-col {
    flex: 1 1 50%;
    min-width: 280px;
}

/* -------------------------------------------------------
   Industries-served images
------------------------------------------------------- */
.industries-served img,
.completed-projects img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* -------------------------------------------------------
   Footer — upper-footer row wrap properly
------------------------------------------------------- */
.upper-footer .row {
    display: flex;
    flex-wrap: wrap;
}
.upper-footer .entry-media {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.upper-footer .entry-media img {
    width: calc(33.33% - 4px);
    height: 60px;
    object-fit: cover;
}

/* -------------------------------------------------------
   Page title breadcrumb
------------------------------------------------------- */
.page-title .title-breadcrumb {
    word-break: break-word;
}

/* -------------------------------------------------------
   Topbar — hide on very small screens
------------------------------------------------------- */
@media (max-width: 575px) {
    .topbar {
        display: none;
    }
    .contact-info-map-section .left-col,
    .contact-info-map-section .right-col {
        flex: 1 1 100%;
    }
    .contact-info-map-section .left-col iframe {
        min-height: 260px;
    }
    .upper-footer .entry-media img {
        width: calc(50% - 4px);
    }
}

/* -------------------------------------------------------
   Team section
------------------------------------------------------- */
.team .img-box img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .team .col-lg-6.profile {
        margin-bottom: 30px;
    }
}

/* -------------------------------------------------------
   Service single page sidebar — stack on mobile
------------------------------------------------------- */
@media (max-width: 767px) {
    .col-md-8.col-md-push-4,
    .col-md-4.col-md-pull-8 {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* -------------------------------------------------------
   Gallery projects filter on small screens
------------------------------------------------------- */
@media (max-width: 575px) {
    .gallery-filters ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .gallery-filters ul li {
        flex: 0 0 auto;
    }
}

/* -------------------------------------------------------
   Hero slider text
------------------------------------------------------- */
@media (max-width: 575px) {
    .slide-caption h2 {
        font-size: 1.6rem;
    }
    .slide-caption p {
        font-size: 0.9rem;
    }
}

/* -------------------------------------------------------
   Navbar brand — prevent overflow on very small screens
------------------------------------------------------- */
@media (max-width: 420px) {
    .navbar-brand h3 { font-size: 1rem; }
    .navbar-brand h5 { font-size: 0.7rem; }
    .navbar-brand img { max-height: 36px; }
}