/* ==========================================================================
   responsive.css — cross-device layout fixes
   --------------------------------------------------------------------------
   Loaded LAST on every page so it wins over the page-level <style> blocks.

   RULE OF THIS FILE: every layout override lives inside a max-width media
   query, so the desktop design (>= 1200px) renders exactly as before.
   Only the small "global safety" block at the top applies at all widths.

   Breakpoints
     <= 1199px  small desktop / landscape tablet
     <=  991px  tablet  (theme switches to the mobile header here)
     <=  767px  large phone
     <=  575px  phone
   ========================================================================== */


/* ==========================================================================
   1. GLOBAL SAFETY (all widths)
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

/* Media never pushes the page wider than the viewport.
   The revolution slider sizes its own images, so it is excluded. */
img,
video,
iframe,
table {
    max-width: 100%;
}

img {
    height: auto;
}

/* ---- home: founder / agent section (all widths) ----------------------- */
#section-agent {
    overflow: hidden;
    padding-top: 48px !important;
    padding-bottom: 48px;
    /* Crop baked-in badge (left) + signature (bottom-right) from bg.jpeg */
    background-position: 72% 14% !important;
    background-size: 145% !important;
}

#section-agent .container {
    padding-top: 8px;
}

#section-agent .founder-photo-wrap {
    max-width: 100%;
    margin: 0 auto;
    padding-top: 24px;
    overflow: visible;
}

#section-agent .founder-photo-wrap img.founder-photo {
    max-width: min(460px, 100%);
    margin: 0 auto;
    object-position: center 18%;
}

/* ---- home: stats panel (all widths) ----------------------------------- */
#section-facilities {
    overflow: visible;
}

.stats-panel {
    overflow: visible;
    padding-top: 48px !important;
}

.de_count.stat {
    overflow: visible;
}

.de_count.stat h3 {
    line-height: 1.15;
    padding-top: 8px;
    overflow: visible;
}

.founder-signature {
    display: block;
    position: relative;
    z-index: 1;
    padding-right: 56px;
    padding-bottom: 8px;
}

.founder-signature img {
    width: 210px;
    max-width: 65%;
    height: auto;
    display: block;
}

#revolution-slider img,
.tp-bgimg,
.tp-simpleresponsive img,
.rev_slider img {
    max-width: none;
}

/* Font Awesome 4 is what ships with this theme, but some markup uses the
   Font Awesome 5 style prefixes (fab / fas / far). Map them onto FA4 so
   every icon renders — including the mobile menu button. */
.fab,
.fas,
.far {
    font-family: "FontAwesome" !important;
    font-weight: normal;
    font-style: normal;
}

/* The testimonial names inherit white from the section's .text-light while
   the card sits on a pale background — they were invisible at every width,
   desktop included. */
#section-testimonial .text-container h5 {
    color: #1c1c1c;
}

/* Long words / URLs must not force horizontal scroll on narrow screens. */
p,
h1, h2, h3, h4, h5, h6,
li, a, span, td {
    overflow-wrap: break-word;
}


/* ==========================================================================
   2. <= 1199px — small desktop & landscape tablet
   ========================================================================== */

@media only screen and (max-width: 1199px) {

    /* home: "What we offer" row was nudged 158px to the right */
    [style*="margin-left: 158px"],
    [style*="margin-left:158px"] {
        margin-left: 0 !important;
    }

    /* home: services CTA was pushed with a hard 444px left margin */
    .service-btn {
        margin-left: 0 !important;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin-right: auto;
        margin-top: 24px;
        text-align: center;
    }

    /* home: hero watermark headline */
    .ultra-big-white {
        margin-left: 2rem;
        font-size: 46px;
    }

    /* home hero: orphan caption with no data-x/data-y. The revolution
       slider never positions or scales it, so it renders ~1400px wide
       behind the slide image (invisible, but it blows the layout out).
       Its text is a duplicate of the paragraph in the title caption. */
    #revolution-slider .tp-caption.big-white.sft:not([data-x]) {
        display: none !important;
    }

    /* home: process steps — let the dotted connectors shrink with the row */
    .step:not(:last-child)::after {
        right: -70px;
        width: 60px;
    }
}


/* ==========================================================================
   3. <= 991px — tablet (theme's mobile header kicks in here)
   ========================================================================== */

@media only screen and (max-width: 991px) {

    /* ---- generic spacing resets for hard-coded desktop offsets ---------- */
    [style*="margin-top: 20vh"]   { margin-top: 40px !important; }
    [style*="margin-top: 20rem"]  { margin-top: 60px !important; }
    [style*="margin-top: 15vh"]   { margin-top: 40px !important; }
    [style*="margin-top: 9rem"]   { margin-top: 40px !important; }
    [style*="margin-top: 5rem"]   { margin-top: 24px !important; }
    [style*="margin-top: -10rem"] { margin-top: 0 !important; }
    [style*="margin-top: -250px"] { margin-top: 0 !important; }
    [style*="margin-left: 80px"]  { margin-left: 0 !important; }
    [style*="padding-top: 8rem"]  { padding-top: 48px !important; }
    [style*="padding: 50px"]      { padding: 32px 16px !important; }

    .container,
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* ---- header --------------------------------------------------------- */

    /* The logo is capped at 100px tall inside an 80px mobile bar, so it
       hung out of the header and over the section beneath it. */
    header.header-mobile #logo img,
    header #logo img.logo-small {
        max-height: 52px !important;
        width: auto !important;
    }

    header.header-mobile {
        height: auto;
    }

    /* ---- hero / revolution slider -------------------------------------- */

    /* Orphan caption with no data-x/data-y: it is a duplicate of the
       paragraph inside the title caption and sits unscaled at 0,0,
       blowing the page out by ~550px. It is not visible on desktop. */
    #revolution-slider .tp-caption.big-white.sft:not([data-x]) {
        display: none !important;
    }

    /* The slider positions and scales captions from a 1170px design grid,
       which leaves them off-screen on a phone. Re-anchor them to the
       viewport and let the text wrap. !important is required because the
       slider rewrites these as inline styles on every resize/animation. */
    #revolution-slider .tp-caption {
        left: 6vw !important;
        right: auto !important;
        width: 88vw !important;
        max-width: 88vw !important;
        white-space: normal !important;
        transform: none !important;
        text-align: left !important;
    }

    /* Decorative slide labels duplicate the headline underneath them and
       collide with it once the headline wraps. */
    #revolution-slider .tp-caption.big-white {
        display: none !important;
    }

    #revolution-slider .tp-caption.tp-title {
        top: 26% !important;
        font-size: 28px !important;
        line-height: 1.2em !important;
    }

    #revolution-slider .tp-caption.sfb {
        top: auto !important;
        bottom: 14% !important;
    }

    #revolution-slider .tp-caption br {
        display: none;
    }

    #revolution-slider .tp-caption p {
        font-size: .9rem !important;
        line-height: 1.35 !important;
        margin-top: 12px !important;
    }

    #revolution-slider .btn-custom {
        padding: 10px 18px;
        font-size: 13px;
        margin-bottom: 8px;
    }

    /* Decorative bird overlay: scale it down and keep it clear of the text */
    .moving-gif {
        width: 30vw;
        top: 22%;
        left: 2%;
    }

    /* ---- home: process steps ------------------------------------------- */
    .steps-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
        margin: 32px 0;
    }

    .step {
        width: 45%;
        max-width: 220px;
    }

    /* the dotted connectors only make sense on a single row */
    .step:not(:last-child)::after {
        display: none;
    }

    /* ---- home: "what we offer" cards ------------------------------------ */

    /* The cover image sits in an unsized absolute .wrapper that is 125%
       wide — on desktop it bleeds behind the neighbouring cards, but once
       the cards stack it spills over the section heading instead. */
    .ccard .wrapper {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .ccard .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ccard h4 {
        z-index: 2;
    }

    /* the card sits in an inline <a>, whose baseline gap makes the card
       19px taller than its column */
    #section-intro .col-md-4 > a {
        display: block;
    }

    #section-intro .col-md-4 {
        margin-bottom: 24px;
    }

    /* ---- home: "why choose us" ----------------------------------------- */
    .why-choose-us {
        padding: 48px 20px;
    }

    .why-choose-us-left,
    .why-choose-us-left p {
        max-width: 100%;
    }

    /* the page switches this grid to 3 columns from 768px up, which is
       ~140px per card on a portrait tablet */
    .why-choose-us-right {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- home: founder signature ---------------------------------------
       Signature is always shown via markup (signature.png + @Founder).
       #section-agent background-position crops the duplicate in bg.jpeg. */
    .founder-signature {
        display: block;
        text-align: left;
        padding-right: 48px;
    }

    .founder-signature img {
        max-width: 55%;
    }

    /* ---- home: experience badge over the agent photo -------------------- */
    .experience-box {
        position: static;
        transform: none;
        width: auto;
        max-width: 260px;
        margin: 12px auto 24px;
        border-radius: 12px;
        text-align: center;
        padding: 20px;
    }

    /* taller stacked layout — pan further to keep bg.jpeg badge/signature cropped */
    #section-agent {
        background-position: 68% 6% !important;
        background-size: 165% !important;
        padding-top: 56px !important;
    }

    #section-agent .founder-photo-wrap {
        padding-top: 28px;
    }

    /* ---- home: counter strip -------------------------------------------- */

    /* The redesigned stats panel styles are loaded in home.html,
       tighten the column layout for smaller screens here. */
    #section-facilities {
        height: auto;
        padding: 32px 0 !important;
        overflow: visible;
    }

    .stats-panel {
        padding: 40px 10px 32px !important;
    }

    .de_count.stat h3 {
        line-height: 1.2;
        padding-top: 10px;
    }

    #section-facilities .col-6 {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* ---- home: awards row ---------------------------------------------- */
    .awards-section {
        gap: 40px;
        padding: 40px 20px;
    }

    /* ---- about: intro text floated over the banner photo ---------------- */

    /* .banner-text is absolutely positioned at right:10% with max-width:40%,
       which collapses to an unreadable column once the page narrows. */
    .banner-section {
        padding: 0 20px 32px;
    }

    /* Once it stops floating over the photo it sits on a pale section
       background, so the white overlay colour has to go with it.
       (contact.html also sets 57px here — far too big unanchored.) */
    .banner-text {
        position: static;
        transform: none;
        max-width: 100%;
        padding: 24px 0 0;
        color: #1c1c1c;
        font-size: 28px;
        line-height: 1.3;
    }

    .banner-text p {
        color: #444;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 10px;
    }

    .banner-image img {
        height: auto;
    }

    /* height:100% squashes the banner photo to a sliver and the -4rem
       pulls what is left up under the header */
    .about-banner {
        display: block;
        padding: 0;
    }

    .about-banner img {
        height: auto;
        margin-top: 0;
    }

    /* ---- contact hero ---------------------------------------------------
       contact (3).png is a wide desktop composition — teal field on the
       left, arched kitchen on the right. On mobile, layer the heading over
       the photo instead of stacking text above a cropped sliver.           */
    .contact-hero {
        position: relative;
        background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images-home/contact/hero.png') no-repeat center center !important;
        background-size: cover !important;
        padding: 0;
        min-height: 270px;
        overflow: hidden;
    }

    /* Pull the image container behind the heading as a full-bleed layer */
    .contact-hero .container {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    .contact-hero .position-relative {
        height: 100%;
    }

    .contact-hero .banner-content {
        position: relative;
        min-height: 270px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .contact-hero img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        object-position: 72% center;
        margin: 0 !important;
    }

    /* scrim so the white heading stays legible over the photo */
    .contact-hero .banner-content::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
    }

    /* Center heading over the hero — overrides the page-level absolute offsets */
    .contact-hero .banner-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: calc(100% - 44px);
        max-width: 100%;
        color: #fff;
        text-align: center;
        padding: 0 22px;
        font-size: 32px;
        line-height: 1.25;
        margin: 0;
    }

    .contact-hero .banner-text p {
        color: rgba(255, 255, 255, .9);
        font-size: 15px;
        margin-top: 12px;
    }

    /* contact (2).jpeg is the same kitchen as the hero shot and is another
       3.37:1 desktop banner — on a phone it just reads as a duplicate. */
    .contact-overlay-section .full-img {
        display: none;
    }


    .banner-feature {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
    }

    /* ---- about: team circles ------------------------------------------- */
    .mainteam {
        flex-wrap: wrap;
        gap: 24px;
    }

    /* The card is a fixed 220px circle whose name/role/social block only
       appears on :hover — which never fires on a touch screen, leaving
       four anonymous portraits. Show the caption permanently instead. */
    .profile-card {
        margin: 0;
        width: 260px;
        height: auto;
        border-radius: 14px;
        padding: 20px;
    }

    .profile-card .img,
    .profile-card:hover .img {
        transform: none;
    }

    .profile-card .caption,
    .profile-card:hover .caption {
        opacity: 1;
        transform: none;
        margin-top: 14px;
    }

    .profile-card img,
    .profile-card:hover img {
        border-radius: 12px;
    }

    /* Each card also carries a static name label for the non-hover state.
       With the caption now always visible it would print a second name
       under every portrait — and in the markup all four read "Tom Cruise". */
    .profile-card > p[style*="margin-top: -50px"] {
        display: none;
    }

    /* ---- about: certificate timeline ------------------------------------ */
    [style*="justify-content: space-between"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px;
    }

    [style*="width: 24%"] {
        width: 45% !important;
    }

    [style*="width: 20vw"] {
        width: 60% !important;
        height: auto !important;
    }

    [style*="width: 15vw"] {
        width: 40% !important;
        height: auto !important;
    }

    .foot-btn[style*="width: 25%"] {
        width: 80% !important;
    }

    /* ---- blog: alternating listing rows -------------------------------- */
    .blog-row,
    .blog-row--reverse {
        flex-direction: column;
    }

    .blog-row__media {
        order: -1;
        flex: none;
        width: 100%;
        min-height: 260px;
    }

    .blog-row__content {
        flex: none;
        width: 100%;
        padding: 28px 24px;
    }

    /* legacy blog card styles (kept for older markup) */
    .image-box {
        height: auto !important;
        overflow: visible;
        margin-bottom: 32px;
    }

    .image-box img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px;
    }

    .image-text1,
    .image-text2 {
        position: static;
        transform: none;
        width: 100%;
        font-size: 22px;
        padding: 16px 0 0;
        text-align: left;
    }

    .image-text1 p,
    .image-text2 p {
        padding: 8px 0 !important;
        font-size: 15px !important;
    }

    .image-text1 a,
    .image-text2 a {
        font-size: 18px !important;
    }

    /* ---- services: text overlaid on the banner photos -------------------- */

    /* Each banner is an image with two absolutely positioned overlays sized
       at ~45-49% of the image. Below tablet they collapse into unreadable
       slivers, so stack image → text instead. */
    .banner-image {
        display: block;
        overflow: visible;
    }

    .banner-image img {
        width: 100%;
        height: auto !important;
        display: block;
    }

    .banner-title-text,
    .banner-text-overlay,
    .banner-text-overlay.left {
        position: static;
        transform: none;
        width: 100%;
        left: auto;
        top: auto;
        padding: 20px 0;
        text-align: left;
    }

    .banner-title-text {
        text-align: center;
    }

    .banner-feature {
        align-items: center;
    }

    /* ---- contact: info block overlaid on the banner photo ---------------- */
    .contact-overlay-section {
        overflow-x: hidden;
    }

    .overlay-content {
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 24px 0 0;
        box-sizing: border-box;
    }

    /* ---- contact: framed-kitchen banner ---------------------------------
       Bleeds 95px off the left edge, and it is the same 3.37:1 shape as
       the hero — 102px tall on a phone, so the framed photo inside it
       shrinks to a thumbnail. Crop it to a usable band instead.           */
    .full-img {
        margin-left: 0 !important;
        max-width: 100% !important;
        width: 100%;
        height: 210px;
        object-fit: cover;
        object-position: 72% center;
    }

    /* ---- contact: message form section (layout lives in contact-form.css) */
    [style*="padding: 90px"] {
        padding: 32px 16px !important;
    }

    /* ---- footer --------------------------------------------------------- */

    /* f.png is a 2.19:1 skyline that ends in a flat cyan. background-size:
       cover on a tall narrow footer scales it by height and crops the
       sides, dropping the busy skyline right behind the address text.
       Pin it to the top at a sane scale and continue with its end colour. */
    footer.light {
        background-size: 200% auto;
        background-position: top center;
        background-repeat: no-repeat;
        background-color: #0ebae0;
    }

    footer .col-lg-3 {
        margin-bottom: 28px;
    }

    /* social icons were one per row, eating half a screen of footer */
    .footer-social {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .footer-social li {
        margin-bottom: 0 !important;
    }

    .footer-social a {
        margin: 0 4px !important;
    }

    /* embedded maps */
    .map-container {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    iframe {
        width: 100%;
        max-width: 100%;
    }

    /* keep scroll-to-top inside the visible viewport when overflow is fixed */
    #back-to-top {
        right: 16px;
        bottom: 20px;
    }
}


/* ==========================================================================
   4. <= 767px — large phone
   ========================================================================== */

@media only screen and (max-width: 767px) {

    .founder-signature img {
        max-width: 70%;
    }

    #section-agent .founder-photo-wrap img.founder-photo {
        max-width: min(340px, 92%);
        object-position: center 15%;
    }

    #section-agent .founder-photo-wrap {
        padding-top: 32px;
    }

    /* ---- typography ----------------------------------------------------- */
    h1 { font-size: 30px; letter-spacing: -1px; }
    h2 { font-size: 24px; letter-spacing: -.25px; }
    h3 { font-size: 20px; }
    h4 { font-size: 17px; }

    h2 span,
    h2 .id-color { font-size: 15px; }

    .section-heading {
        font-size: 24px;
        padding: 2rem 1rem;
    }

    /* watermark / oversized display text used across the pages */
    .wm,
    .wm1,
    [style*="font-size: 125px"] { font-size: 40px !important; }
    [style*="font-size: 6rem"]  { font-size: 2.2rem !important; }
    [style*="font-size: 60px"]  { font-size: 26px !important; }
    [style*="font-size: 46px"]  { font-size: 24px !important; }
    [style*="font-size: 45px"]  { font-size: 24px !important; }
    [style*="font-size: 44px"]  { font-size: 26px !important; }
    [style*="font-size: 32px"]  { font-size: 22px !important; }
    [style*="font-size: 28px"]  { font-size: 19px !important; }
    [style*="font-size: 25px"]  { font-size: 17px !important; }
    [style*="font-size: 18px"]  { font-size: 16px !important; }

    .left-section,
    .left-section h2,
    .left-section p { font-size: 26px !important; }

    .banner-heading { font-size: 24px !important; }

    /* services banner title is 6rem (96px) — three lines of overflow */
    .banner-title-text h3 { font-size: 2.2rem; }
    .banner-title-text p  { font-size: 1rem; }

    .blog-banner h1 { font-size: 2.2rem; }
    .blog-banner p  { font-size: 1rem; }

    .ultra-big-white {
        margin-left: 0;
        font-size: 30px;
        padding: 8px 12px;
    }

    blockquote.testimonial-big .d-testi { font-size: 20px; }

    .de_count.ultra-big h3 { letter-spacing: -4px; font-size: 48px; }

    /* ---- layout --------------------------------------------------------- */
    .step {
        width: 100%;
        max-width: 280px;
    }

    [style*="width: 24%"] {
        width: 100% !important;
        text-align: center !important;
    }

    [style*="width: 20vw"] { width: 80% !important; }
    [style*="width: 15vw"] { width: 60% !important; }

    .awards-section {
        gap: 28px;
        padding: 32px 16px;
    }

    .ccard {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }

    .feature-card { padding: 24px; }

    /* stacked footer reads better centred */
    footer .col-lg-3,
    footer .col-lg-3[style*="text-align: left"] {
        text-align: center !important;
    }

    footer .widget ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* forms and inputs must never be narrower than their container */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select,
    .form-control {
        width: 100% !important;
        max-width: 100%;
        font-size: 16px; /* stops iOS from zooming on focus */
    }

    /* tap targets */
    #mainmenu li a,
    .btn-custom,
    .btn-line {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    #menu-btn {
        width: 44px;
        height: 44px;
        padding: 10px;
    }

    /* Section rhythm. The theme keeps 60px of side padding on every
       section, which on a 375px screen throws away a third of the width
       before .container even starts — drop it and let .container gutter. */
    section {
        padding-top: 48px;
        padding-bottom: 48px;
        padding-left: 0;
        padding-right: 0;
    }

    .container,
    .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* g-5 rows carry a 48px gutter (‑24px side margins) — wider than the
       container padding, so the edge columns hang off the screen */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}


/* ==========================================================================
   5. <= 575px — phone
   ========================================================================== */

@media only screen and (max-width: 575px) {

    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    h1 { font-size: 26px; }
    h2 { font-size: 21px; }

    .ultra-big-white { font-size: 24px; }

    /* the decorative bird crowds the hero copy on a phone */
    .moving-gif { display: none; }

    /* narrower box crops tighter — pull the arch back off the right edge
       (higher % shows more of the image's right, moving content left) */
    .contact-hero {
        min-height: 240px;
    }

    .contact-hero .banner-content {
        min-height: 240px;
    }

    .contact-hero img { object-position: 88% center; }

    .contact-hero .banner-text { font-size: 28px; padding: 0 18px; width: calc(100% - 36px); }

    #revolution-slider .tp-caption,
    #revolution-slider .tp-caption p {
        max-width: 92vw;
    }

    #revolution-slider .btn-custom {
        display: block;
        width: 100%;
        max-width: 220px;
        text-align: center;
        justify-content: center;
    }

    /* two feature cards side by side leaves ~120px each — one per row */
    .why-choose-us-right {
        grid-template-columns: 1fr;
    }

    .awards-section { gap: 20px; }

    .award { flex: 1 1 120px; }

    .image-text1,
    .image-text2 { font-size: 19px; }

    .testimonial-card { padding: 16px; }

    .step-icon { width: 64px; height: 64px; }
}