/* Contact Us page styles - scoped to .bootstrp-iso wrapper.
   Extracted from C:\Users\lenovo\Downloads\custom mhs 2\custom mhs\assets\style.css
   Image paths re-pointed to catalog/view/theme/custommhs/image/about-us/.
   The contact FORM functionality (field names, action, recaptcha) is NOT styled
   here in any way that changes behaviour - only visual.
*/

.bootstrp-iso {
    --primary-color: #183861;
    --line-color: #d8e3ed;
    --dark-text: #1d2733;
    --muted-text: #1C1C1E;
    --brand: #1d75bb;
    --brand-deep: #155f9a;
    --soft-blue: #e3effa;
    --font-xs: 13px;
    --font-sm: 15px;
    --font-base: 14px;
    --font-md: 16px;
    --section-heading-size: 32px;
    --section-py: 56px;
    --section-py-sm: 40px;
    --container-max: 1190px;
    --card-px: 24px;
    --card-py: 24px;
    color: var(--dark-text);
    font-size: var(--font-base);
    font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
}

.bootstrp-iso img,
.bootstrp-iso svg {
    max-width: 100%;
}

.bootstrp-iso .page-title {
    font-size: var(--section-heading-size);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    margin-bottom: 40px;
}

.bootstrp-iso .page-section {
    padding: var(--section-py) 0;
}

.bootstrp-iso .container {
    max-width: var(--container-max);
}

.bootstrp-iso p {
    color: var(--muted-text);
    font-size: var(--font-base);
    line-height: 1.6;
    margin-bottom: 16px;
}

.bootstrp-iso p:last-child {
    margin-bottom: 0;
}

/* ===== CONTACT INFO CARDS ===== */
.bootstrp-iso .contact-card-box {
    border: 1px solid #e2e8f0;
    padding: 48px 16px 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.bootstrp-iso .contact-icon-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border: 1px solid #1D74B7;
    background-color: #F3F3F3;
    color: var(--brand);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.bootstrp-iso .contact-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}


.bootstrp-iso .contact-card-title {
    font-size: 18px;
    color: #1a1a1a;
}

.bootstrp-iso .contact-card-text {
    font-size: 14px;
    color: var(--muted-text);
    line-height: 1.6;
}

/* !important to beat the site's global anchor color (theme stylesheet.css)
   that was leaving the phone/email links unstyled. */
.bootstrp-iso .contact-card-text a {
    color: var(--brand) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.bootstrp-iso .contact-card-text a:hover {
    color: var(--brand-deep) !important;
    text-decoration: underline !important;
}

/* ===== SOCIALS CONNECT ===== */
.bootstrp-iso .socials-connect-panel {
    border: 1px solid #e2e8f0;
    padding: 48px 32px 64px;
    margin-bottom: 64px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}

.bootstrp-iso .socials-connect-panel:hover {
    box-shadow: 0 10px 30px rgba(24, 56, 97, 0.06);
}

.bootstrp-iso .socials-connect-title {
    font-size: var(--section-heading-size);
    color: #1D74B7;
}

.bootstrp-iso .socials-connect-subtitle {
    font-size: 14px;
    color: var(--muted-text);
}

.bootstrp-iso .socials-button-group {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    gap: 85px;
    z-index: 10;
}

.bootstrp-iso .social-icon-btn {
    width: 60px;
    height: 60px;
    background-color: var(--brand);
    color: #fff;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 10px rgba(29, 117, 187, 0.3);
}
.bootstrp-iso .social-icon-btn i{
    font-size: 26px !important;
}

.bootstrp-iso .social-icon-btn:hover {
    background-color: var(--brand-deep);
    transform: translateY(-4px) scale(1.15);
    box-shadow: 0 8px 18px rgba(21, 95, 154, 0.4);
    color: #fff;
}

/* ===== GET IN TOUCH FORM ===== */
.bootstrp-iso .contact-form-section {
    background: url('../image/about-us/contact-us.png') center/cover no-repeat;
    margin-bottom:80px;
}

/* .bootstrp-iso .contact-form-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 45, 80, 0.72);
    z-index: 1;
} */

.bootstrp-iso .contact-form-container {
    z-index: 2;
    max-width: 900px;
}

.bootstrp-iso .contact-form-title {
    font-size: var(--section-heading-size);
}

.bootstrp-iso .contact-form-subtitle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    max-width: 680px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.bootstrp-iso .contact-form label {
    font-size: 13.5px;
    letter-spacing: 0.02em;
}

.bootstrp-iso .contact-form label .required-asterisk {
    color: #ff6b6b;
    margin-left: 2px;
}

.bootstrp-iso .contact-form .form-control,
.bootstrp-iso .contact-form .form-select {
    height: 50px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    font-size: 14px;
    padding: 12px 18.4px;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bootstrp-iso .contact-form .form-control::placeholder {
    color: #a0aec0;
}

.bootstrp-iso .contact-form .form-control:focus,
.bootstrp-iso .contact-form .form-select:focus {
    border-color: #fff;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
    outline: none;
}

.bootstrp-iso .contact-form textarea.form-control {
    height: 160px;
    resize: none;
}

.bootstrp-iso .contact-form .btn-submit {
    color: var(--brand);
    font-size: 14px;
    padding: 14px 80px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.bootstrp-iso .contact-form .btn-submit i {
    transition: transform 0.25s ease;
}

.bootstrp-iso .contact-form .btn-submit:hover {
    background-color: #f8fafd;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    color: var(--brand-deep);
}

.bootstrp-iso .contact-form .btn-submit:hover i {
    transform: translateX(4px);
}

/* ===== ALERTS (success/error flash) ===== */
.bootstrp-iso .contact-flash {
    max-width: 900px;
    margin: 0 auto 24px;
}

/* ===== Override global `.information .container { width:98% !important; padding:0 !important }`
   so the new-design containers stay centered/padded ===== */
.bootstrp-iso .page-section .container {
    width: 100% !important;
    max-width: var(--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.bootstrp-iso .contact-form-section .container {
    width: 100% !important;
    max-width: var(--container-max) !important;
}

/* FAQ + Trusted-by (OUTSIDE .bootstrp-iso) - keep them centered like About Us.
   The content_top/content_bottom modules (incl. hb_faq) are wrapped in
   .contact-modules-wrap so they don't stretch full-width from the global
   `.information .container { width:98% !important }` rule. */
.contact-modules-wrap,
.bootstrp-iso ~ .container,
.bootstrp-iso ~ .clients-section > .container {
    width: 100% !important;
    max-width: 1170px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {

    .bootstrp-iso .social-icon-btn i{
    font-size: 20px !important;
}
    .bootstrp-iso .page-title,
    .bootstrp-iso .socials-connect-title,
    .bootstrp-iso .contact-form-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }
    .bootstrp-iso .socials-connect-panel,
    .bootstrp-iso .contact-card-box {
        padding-left: var(--card-px) !important;
        padding-right: var(--card-px) !important;
    }
    .bootstrp-iso .socials-connect-panel {
        padding-top: 40px !important;
        padding-bottom: 56px !important;
        margin-bottom: 40px;
    }
    .bootstrp-iso .contact-card-box {
        padding-top: 48px !important;
        padding-bottom: 32px !important;
    }
    .bootstrp-iso .contact-icon-circle {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 575px) {
    .bootstrp-iso .contact-form-title {
        font-size: 22px;
        line-height: 1.18;
    }
    .bootstrp-iso .page-title {
        font-size: 22px !important;
    }
    .bootstrp-iso .contact-form .form-control,
    .bootstrp-iso .contact-form .form-select {
        height: 46px;
        font-size: 13.5px;
    }
    .bootstrp-iso .contact-form textarea.form-control {
        height: 140px;
    }
    .bootstrp-iso .socials-button-group {
        position: static;
        transform: none;
        justify-content: center;
        margin-top: 16px;
        gap: 12.8px;
        flex-wrap: wrap;
    }
    .bootstrp-iso .social-icon-btn {
        width: 42px;
        height: 42px;
        font-size: 17.6px;
    }
    .contact-form-section{

        margin-top: auto;

    }
}

/* ==================================================================
   Heading hierarchy - mobile responsive audit fix.

   QA: "h2 appears larger than h1 on desktop and mobile with different
   text transformations."

   Before, at <=575px:
     h1 .page-title             22px !important  (line 335)
     h2 .socials-connect-title  24px !important  (no <=575 override,
                                inherited from the <=767 group)
     h2 .contact-form-title     24px !important  (its <=575 rule is
                                22px WITHOUT !important, so it never
                                applies - dead code)
   On desktop all three resolve to var(--section-heading-size) = 32px,
   so the h1 merely tied its h2s rather than leading them.

   Scale below is IDENTICAL to home.twig, homecategories.twig,
   footer.twig and about-us.css:

       breakpoint    h1      h2
       >=768px       32px    28px
       <=767px       28px    22px
       <=480px       24px    19px

   !important is required throughout: the rules being overridden above
   already carry it, and !important beats source order.

   Breakpoints are 767/480 to match the other pages, deliberately not
   this file's original 575px step.

   APPEND-ONLY, and this must stay last in the file. Nothing above is
   edited or deleted, because bootstrap-iso.css gives .bootstrp-iso
   h1/h2 FLUID sizes (calc(1.375rem + 1.5vw) / calc(1.325rem + 0.9vw));
   removing a font-size would drop that heading onto a viewport-
   dependent BS5 value. Deleting this block restores prior behaviour.
   ================================================================== */

.bootstrp-iso .page-title {
    font-size: 32px;
}

/* ==================================================================
   FAQ MODULE HEADING - "Frequently Asked Questions (FAQs)".

   Rendered by the hb_faq module (content_bottom), not by this template,
   so it arrived as a bare <h3> with no class: blue, left-aligned and on
   the global h3 scale, while every other section heading on the page is
   a centred h2. Markup fixed in
   catalog/view/theme/default/template/extension/module/hb_faq.twig.

   .faq-title is listed alongside the page's own section headings in each
   size rule below rather than given its own values, so it tracks them at
   every breakpoint - the same approach used in about-us.css. Sizes
   therefore resolve to 28 / 22 / 19, identical to About Us.

   NOT scoped to .bootstrp-iso: the module renders in
   .contact-modules-wrap, which sits OUTSIDE that wrapper (see the note
   in contact_us.twig). contact-us.css is linked by contact_us.twig
   alone, so the unscoped selector cannot leak to another page.
   ================================================================== */
.faq-title {
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 16px;
}

.bootstrp-iso .socials-connect-title,
.bootstrp-iso .contact-form-title,
.faq-title {
    font-size: 28px;
}

/* QA flagged h1 and h2 using different text transformations. Nothing
   in the CSS that loads on this page applies uppercase, and the markup
   is title case ("Connect With Our Socials"), so this is declared
   defensively: it guarantees the h2s match the h1 regardless of any
   rule present in another environment. */
.bootstrp-iso .page-title,
.bootstrp-iso .socials-connect-title,
.bootstrp-iso .contact-form-title {
    text-transform: none;
}

@media (max-width: 767px) {
    .bootstrp-iso .page-title {
        font-size: 28px !important;
    }

    .bootstrp-iso .socials-connect-title,
    .bootstrp-iso .contact-form-title,
    .faq-title {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .bootstrp-iso .page-title {
        font-size: 24px !important;
    }

    .bootstrp-iso .socials-connect-title,
    .bootstrp-iso .contact-form-title,
    .faq-title {
        font-size: 19px !important;
    }

    /* h3 was a flat 18px at every width. With h2 at 19px here it would
       sit 1px below its own parent heading, so it steps down too. */
    .bootstrp-iso .contact-card-title {
        font-size: 16px;
    }
}

/* ==================================================================
   Section spacing - mobile responsive audit fix.

   --section-py was 56px at EVERY width on this page: unlike
   about-us.css it is never stepped down in a media query, so mobile
   carried the full desktop padding. Custom margins then stacked on
   top of BS5 utilities already in the markup:

       .page-section.mb-5                     56px padding + 48px
       .contact-form-section.page-section.mb-5  56 + 80 + 48 = 184px

   Only this page's OWN classes are touched. BS5 utility classes
   (.mb-5, .mt-4, .mt-5, .pt-5, .g-4, .g-5, .row, .col-*) are
   deliberately NOT redefined - they are used throughout the markup,
   so redefining one would move elements that were never audited.
   bootstrap-iso.css itself is not modified.

   Values match home.twig and about-us.css: 32px (<=767) / 24px (<=480).
   ================================================================== */
/* Desktop: these two custom margins (64px and 80px) sat above the page's
   own 56px --section-py, and stacked further with .mb-5 in the markup.
   Both brought onto the 56px rhythm. .clients-section comes from
   footer.twig with `10px 0 60px 0`, so it is aligned here too - reached
   with a sibling combinator because it sits outside .bootstrp-iso. */
.bootstrp-iso .socials-connect-panel,
.bootstrp-iso .contact-form-section {
    margin-bottom: 56px;
}

.bootstrp-iso ~ .clients-section {
    padding: 56px 0;
}

.bootstrp-iso ~ .clients-section .section-header {
    margin-bottom: 32px;
}

@media (max-width: 767px) {
    .bootstrp-iso {
        --section-py: 32px;
        --section-py-sm: 24px;
    }

    .bootstrp-iso .socials-connect-panel {
        margin-bottom: 32px;
    }

    .bootstrp-iso .contact-form-section {
        margin-bottom: 32px;
    }

    .bootstrp-iso ~ .clients-section .section-header {
        margin-bottom: 24px;
    }
}

@media (max-width: 480px) {
    .bootstrp-iso {
        --section-py: 24px;
        --section-py-sm: 20px;
    }

    .bootstrp-iso .socials-connect-panel {
        margin-bottom: 24px;
    }

    .bootstrp-iso .contact-form-section {
        margin-bottom: 24px;
    }

    .bootstrp-iso ~ .clients-section .section-header {
        margin-bottom: 20px;
    }
}

/* ==================================================================
   CONTACT CARDS - spacing between the cards once they stack.

   .contact-icon-circle is `position: absolute; top: 0` with
   `translate(-50%, -50%)`, so half the circle hangs ABOVE its card:
   26px at this width (52px tall). The gap between stacked cards was
   the 24px column gutter plus the card's own .mt-4 (24px) = 48px, so
   only 22px of clear space sat under each icon and it read as
   colliding with the card above it.

   BOUND TO THE STACKING POINT ON PURPOSE. The cards are
   `col-12 col-md-4`, so they sit side by side from 768px up, where a
   vertical gap does nothing except push the 2nd and 3rd cards down
   out of line with the 1st. Everything below is therefore inside
   `max-width: 767px` and there is no base-level declaration.

   :not(:first-child) rather than a margin on every column - the row
   carries `margin-top: calc(-1 * var(--bs-gutter-y))` to cancel the
   first column's gutter, and that cancellation is sized for 24px. Give
   the first column 45px and 21px of it survives as an unwanted gap
   above the whole section.

   The middle card (Send Orders To) is `d-none`. It still counts for
   :not(:first-child) but display:none means it contributes no layout,
   so the visible 3rd card gets the margin and nothing is left behind.
   ================================================================== */
@media (max-width: 767px) {
    .bootstrp-iso .contact-cards-row > [class*="col-"]:not(:first-child) {
        margin-top: 45px;
    }
}