/* ==================================================
   RESPONSIVE OVERRIDES
   ================================================== */
/* --- Max Width: 1399px (Small Laptops) --- */
@media screen and (max-width: 1399px) {
    html {
        font-size: 86.8%;
    }

    .hm_banner .banner-img-fm {
        width: 48%;
        height: 600px;
    }

    .hm_banner .banner-content {
        max-width: 50%;
    }
}


/* --- Max Width: 1199px (Tablets Landscape) --- */
@media screen and (max-width: 1199px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    header.header_main .stellarnav>ul>li+li {
        margin-left: 1rem;
    }

    header.header_main .gp-rig {
        gap: 2rem;
    }

    section.hm_sec5 .focus-grid {
        /* Step down from 5 columns to 3 columns, cards wrap automatically */
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

/* --- Max Width: 992px (Tablets Portrait) --- */
@media screen and (max-width: 992px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: normal;
    }

    section.defaultPadding,
    section.defaultPadding80 {
        padding: 3.75rem 0;
    }

    header.header_main .stellarnav>ul>li+li {
        margin-left: 0;
    }

    header.header_main .stellarnav>ul>li>a {
        padding: 12px;
    }

    .hm_banner .container {
        position: relative;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        transform: none;
    }

    .hm_banner .banner-content {
        max-width: 100%;
        padding: 30px 0;
        text-align: center;
    }

    .hm_banner .banner-content ul {
        justify-content: center;
    }

    .hm_banner .banner-content .banner-buttons {
        margin: 0 auto 1.875rem;
        justify-content: center;
    }

    .hm_banner .banner-content ul li .each-info {
        text-align: left;
    }

    .hm_banner .banner-img-fm {
        width: 100%;
        height: 600px;
    }

    header.header_main .rig_btn {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        flex-direction: column;
        padding: 0.9375rem;
    }

    header.header_main .rig_btn a.link {
        border: none;
    }

    header.header_main .rig_btn .btn {
        position: relative;
        display: inline-flex;
        padding: 0.25rem 0.25rem 0.25rem 1.5rem;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
        font-family: "Lato", sans-serif;
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.5rem;
        border-radius: 0.25rem;
        border: 1px solid var(--Coral, #ff6b6b);
        background: var(--Coral, #ff6b6b);
        box-shadow: none;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
        z-index: 1;
    }

    section.hm_sec5 .focus-card {
        width: calc(50% - 12px);
    }

    .dont-do-section .dont-do-grid {
        /* Let the browser auto-fit the columns so it flows naturally */
        /* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */
        gap: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .dont-do-section .dd-item {
        position: relative;
        padding: 10px;
        width: calc(100% / 3 - 20px);
    }

    .dont-do-section .dd-item:not(:last-child)::after {
        /* Hide the white vertical divider lines when the layout wraps */
        display: none;
    }

    section.hm_sec7 .each-box {
        text-align: left;
        height: auto;
    }

    section.hm_sec8 .ht-each {
        padding: 20px;
    }

    section.hm_sec8 .ht-each .ht-conten h6 {
        font-size: 1rem;
    }

    section.hm_sec10 .consultation-form-card {
        padding: 40px 30px;
    }

    .site-footer {
        padding: 60px 0 30px;
    }

    .site-footer .footer-col {
        margin-bottom: 30px;
    }

    .site-footer .footer-brand {
        margin-bottom: 30px;
    }

    .site-footer .adjust_space {
        align-items: center;
    }
}

/* --- Max Width: 767px (Mobile Phones Landscape) --- */
@media screen and (max-width: 767px) {
    h1 {
        font-size: 1.625rem;
    }

    h2 {
        font-size: 1.5rem;
        line-height: normal;
    }

    h3 {
        font-size: 1.25rem;
        line-height: normal;
    }

    h4 {
        font-size: 1.125rem;
        line-height: normal;
    }

    h5 {
        font-size: 1rem;
        line-height: normal;
    }

    h6 {
        font-size: 0.875rem;
        line-height: normal;
    }

    section.defaultPadding,
    section.defaultPadding70 {
        padding: 30px 0;
    }

    header.header_main {
        position: relative;
        background: #fff;
    }

    header.header_main .logo {
        margin: 0;
    }

    header.header_main .top_header ul.info-ft li {
        margin: 0 12px;
    }

    header.header_main .top_header ul.info-ft li+li::before {
        left: -0.95rem;
    }

    header.header_main .stellarnav>ul>li.rig-btn-item .rig_btn {
        margin-top: 0;
        padding: 15px;
    }

    header.header_main .stellarnav>ul>li.rig-btn-item .rig_btn .btn {
        display: inline-flex;
        border: 1px solid #b8860b;
    }

    header.header_main .top_header ul.info-ft {
        display: flex;
        justify-content: center;
        border-bottom: 1px solid #818181;
        padding-bottom: 8px;
    }

    header.header_main .top_header ul.info-ft li .social-links ul {
        display: flex;
        gap: 1rem;
    }

    header.header_main .gp-rig {
        padding: 0;
    }

    .hm_banner .banner-content ul {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .hm_banner .banner-content ul li+li::before {
        display: none;
    }

    .each-box {
        display: flex;
        height: auto;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
    }

    .each-box h6 {
        text-align: center;
    }

    section.hm_sec2 .build_fm,
    section.hm_sec3 .build_fm {
        margin: 0 0 1.25rem;
    }

    /* .proof-section .proof-header {
    position: absolute;
    padding: 15px 40px;
    width: 100%;
  } */

    .proof-section .proof-grid {
        gap: 1rem;
    }

    section.hm_sec5 .focus-card {
        width: 100%;
    }

    section.hm_sec5 {
        padding: 50px 0;
        /* Reduce padding on mobile so it doesn't feel empty */
    }

    section.hm_sec5 .focus_intro_txt h2 {
        font-size: 1.8rem;
        /* Scale down the main heading */
    }

    section.hm_sec5 .focus-grid {
        /* Stack the blue cards into a single column */
        grid-template-columns: 1fr;
    }


    section.hm_sec5 .dont-do-section .dont-do-header {
        /* padding: 10px 40px;
    width: 100%; */
        /* Make the trapezoid a bit smaller */
        top: -30px;
    }

    section.hm_sec6 .fm-img {
        margin: 0 0 1.25rem;
    }

    section.hm_sec7 .each-box {
        text-align: center;
        height: auto;
        align-items: center;
    }

    /* .dont-do-section.blueBg .dont-do-header {
    padding: 18px 28px;
    width: 100%;
  } */

    .dont-do-section .dd-item {
        position: relative;
        padding: 10px;
        width: calc(100% / 2 - 20px);
    }

    section.hm_sec8 {
        padding: 50px 0;
    }

    section.hm_sec8 .content_txt {
        margin-bottom: 2.5rem;
    }


    section.hm_sec8 .ht-each {
        /* On mobile, remove the height calculation since columns stack vertically */
        height: auto;
        margin-bottom: 20px;
    }

    section.hm_sec8 .txt-content {
        margin-top: 10px;
    }

    section.hm_sec10 .form-title-wrapper h2 {
        font-size: 1.8rem;
    }

    section.hm_sec10 .consultation-form-card {
        padding: 30px 20px;
    }

    section.hm_sec10 .consultation-form-card .checkbox-grid {
        flex-direction: column;
        gap: 12px;
    }

    section.hm_sec_faq {
        padding: 50px 0;
    }

    section.hm_sec_faq h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem !important;
    }

    section.hm_sec_faq .faq_box .faq_item .faq_hd {
        padding: 15px 45px 15px 15px;
    }

    section.hm_sec_faq .faq_box .faq_item .faq_hd h5 {
        font-size: 1rem;
    }

    section.hm_sec_faq .faq_box .faq_item .faq_cont {
        padding: 0 15px 15px 15px;
    }

    section.hm_sec11 .consultation-form-card {
        padding: 20px;
    }

    .site-footer {
        padding: 1.875rem 0 20px;
    }

    .site-footer .footer-col {
        text-align: center;
    }

    .site-footer .social-icons ul {
        justify-content: center;
    }

    .site-footer .footer-contact ul li {
        justify-content: center;
    }

    .site-footer .footer-contact ul li i {
        margin-right: 8px;
    }

    .site-footer .footer-bottom .bottom-content .disclaimer {
        font-size: 0.8rem;
    }

    .hm_banner .banner-img-fm {
        width: 100%;
        height: 400px;
    }


    .dont-do-section::after {
        bottom: -40px;
        height: 40px;
    }

    .dont-do-section {
        position: relative;
        background: #ff6b6b;
        padding: 60px 20px 0px;
        margin-top: 30px;
        margin-bottom: 4.25rem;
        text-align: center;
        z-index: 1;
    }

    .proof-section {

        padding: 48px 20px 15px;
        margin: 2.975rem 0 40px;
        z-index: 1;
    }

    .proof-section::after {
        bottom: -1.8375rem;
        height: 2rem;
    }

    .dont-do-section.blueBg {
        margin-bottom: 80px;
    }
}