/* =====================================================================
   responsive.css — loaded LAST on every page.
   Fixes layout issues on mobile / iPhone / tablet / laptop / desktop.
   ===================================================================== */

/* ---------- 1. HOME HERO ----------
   .top-home used hard-coded `top:` pixel values per width range, which left
   gaps (e.g. 1281–1399px laptops) where the headline overlapped the logo.
   Use flexbox centring instead so it works at every width. */
.banner-section {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 100vh;
    padding: 120px 0 80px;
}
.banner-section > .container-fluid {
    width: 100%;
}
.banner-section .top-home {
    position: relative !important;
    top: auto !important;
}
.banner-section .header-content h1 {
    font-size: clamp(24px, 3.6vw, 48px);
    line-height: 1.2;
    margin: 8px 0 12px;
}
.banner-section .header-content h4 {
    font-size: clamp(16px, 1.7vw, 24px);
    line-height: 1.4;
}
@media (max-width: 991px) {
    .banner-section {
        min-height: 640px;
        padding: 110px 0 60px;
    }
}
@media (max-width: 767px) {
    .banner-section {
        min-height: 520px;
        padding: 100px 0 50px;
    }
    .banner-section .header-content {
        padding: 0 !important;
    }
    .banner-section .header-content br {
        display: none;
    }
}

/* ---------- 2. ABOUT / "WHY US" ----------
   Two big top paddings stacked (pt-130 + pt-115) left a large empty gap. */
@media (max-width: 991px) {
    .feature-boxes {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .abt-ht-box-1 .section {
        padding-top: 30px !important;
    }
    .feature-boxes img {
        max-width: 100%;
        height: auto;
    }
}

/* ---------- 3. TEAM CARDS ----------
   Below 900px cards were forced into one long column (~3,500px of scrolling).
   Use a wrapping grid: 2 per row on phones, 3 on tablets. */
@media (max-width: 900px) {
    .team-container {
        flex-direction: row !important;
        align-items: stretch !important;
        gap: 24px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .team-card,
    .team-card-1 {
        width: calc(33.333% - 16px);
        max-width: 260px;
    }
}
@media (max-width: 767px) {
    .team-card,
    .team-card-1 {
        width: calc(50% - 12px);
    }
}
@media (max-width: 575px) {
    .team-container {
        gap: 14px;
    }
    .team-card,
    .team-card-1 {
        width: calc(50% - 7px);
        padding: 14px 10px;
        border-radius: 14px;
    }
    .team-card img,
    .team-card-1 img {
        width: 100% !important;
        max-width: 160px;
    }
    .team-card h3,
    .team-card-1 h3 {
        font-size: 15px;
        margin-top: 10px;
    }
    .team-card p,
    .team-card-1 p {
        font-size: 12px;
        line-height: 1.4;
    }
}
/* hover "lift" is a desktop effect – avoid sticky hover on touch screens */
@media (hover: none) {
    .team-card:hover,
    .team-card-1:hover {
        transform: none;
    }
}

/* ---------- 4. GLOBAL OFFICES ----------
   The flag icon is absolutely positioned, but the text offset
   (.conbox margin-left:95px) was only defined for some width ranges, so on
   iPad (768–799px) and laptops (1281–1399px) the flag covered the text. */
.business-block .inner-box .content {
    width: 100%;
    max-width: 100%;
}
@media (min-width: 768px) {
    .business-block .inner-box .content .conbox {
        margin-left: 95px;
        padding-top: 5px;
    }
}
@media (max-width: 767px) {
    .business-block .inner-box .content .conbox {
        margin-left: 0;
    }
    .business-block .inner-box .content img {
        margin-top: 0;
    }
}
/* the ±50px "staggered" middle card touches the screen edge below 1500px */
@media (max-width: 1499px) {
    .business-section .left-column .business-block:nth-child(2),
    .business-section .right-column .business-block:nth-child(2) {
        transform: none;
    }
}
.business-section .image-column .image img {
    max-width: 100%;
    height: auto;
}
@media (max-width: 991px) {
    .business-section {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }
}
@media (max-width: 767px) {
    .business-section .image-column .circle-layer,
    .business-section .image-column .circle-layer-two,
    .business-section .image-column .pattern-layer {
        display: none;
    }
    .business-section .image-column .image {
        border-radius: 40px 0 40px 0;
    }
}

/* ---------- 5. FOOTER ---------- */
@media (max-width: 991px) {
    .footer-widgets {
        padding-top: 50px !important;
    }
    footer .newsletter-widget {
        width: 100% !important;
    }
}
@media (max-width: 767px) {
    footer .contact-info li {
        word-break: break-word;
    }
}

/* ---------- 6. INNER PAGE BANNERS (Media / Investor Relations) ----------
   min-height:100vh overrode the intended 300px/250px heights, so phones and
   tablets saw a full screen of empty gradient before any content. */
.banner-section-inner {
    position: relative;
}
/* content panel overlaps the banner – keep it on top */
#media,
.media-section {
    position: relative;
    z-index: 1;
}
@media (max-width: 991px) {
    .banner-section-inner {
        min-height: 380px;
        height: auto !important;
    }
}
@media (max-width: 767px) {
    .banner-section-inner {
        min-height: 300px;
    }
}

/* ---------- 7. INVESTOR RELATIONS ----------
   A .container sat directly inside a .row (no column), so the row's negative
   margins pushed the panel 3px off-screen on every width up to 1399px. */
#media > .container > .row {
    margin-left: 0;
    margin-right: 0;
}
/* This page loads Bootstrap 4 + 5 together; their row margin / container
   padding don't match, so header & footer rows stuck out by 3px. */
body:has(#pills-tab) header .row,
body:has(#pills-tab) footer .row {
    margin-left: 0;
    margin-right: 0;
}
/* iPad portrait: the vertical tab sidebar squeezed content into a narrow
   column. Use the horizontal (wrapped) tab layout up to 991px. */
@media (max-width: 991px) {
    #media > .container > .row > .container.d-md-flex {
        display: block !important;
    }
    #pills-tab {
        flex-direction: row !important;
        flex-wrap: wrap;
        border-right: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    #pills-tab .nav-link {
        width: auto !important;
        text-align: left !important;
        padding: 6px 12px;
        margin: 0 6px 6px 0;
    }
    #pills-tab .nav-link.active::after {
        right: 0;
    }
}
@media (max-width: 767px) {
    /* justified text creates large word gaps on narrow screens */
    #pills-tabContent [style*="justify"] {
        text-align: left !important;
    }
    .tabcondec h1 {
        font-size: 24px !important;
    }
    #pills-tabContent {
        padding: 12px !important;
    }
    #pills-tabContent table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ---------- 8. GLOBAL SAFETY NETS ---------- */
html, body {
    overflow-x: hidden;
}
img {
    max-width: 100%;
}