/* ------------------------------------------------------------
   Kill the phantom horizontal scrollbar on phones/tablets.
   Swiper wrappers/slides and a few flex children (e.g. the
   industries-icons <li>s) leak a few px past the viewport with
   overflow:visible, producing a ~16px horizontal overflow (most
   visible at 430px). Clip it at the root — the real horizontal
   scrollers here (tables, swipers) clip inside their own
   containers, so they are unaffected. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

.reg-section {
    .nav-tabs {
        flex-direction: row;
        max-width: unset;
        justify-content: center;
        gap: 22px;
        border: none;
    }

    .tab-content {
        margin-top: 48px;
    }
}

.reg-toggle-btn {
    padding: 12px 20.5px;
    border-radius: 8px;
    border: 1px solid #202020 !important;
}

.reg-toggle-btn.active {
    background-color: #202020 !important;
    color: #f9f5ed !important;
}

.ticket_form {
    .form-label {
        margin-bottom: 0.5rem;
        font-size: 16px;
    }

    input {
        width: 100%;
        height: 62px;
        border: none;
        border-radius: 999px;
        padding: 0 50px;
        font-size: 16px;
        color: #202020;
        outline: none;
        /* background: #fff; */
        /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.015); */
        margin-bottom: 5px;
    }

    .form-select {
        width: 100%;
        height: 62px;
        border: none;
        border-radius: 999px;
        padding: 0 50px;
        font-size: 16px;
        color: #202020;
        outline: none;
        background: #fff;
    }

    .form-check-input[type="checkbox"] {
        height: 20px;
        width: 20px;
        padding: 2px;
        /* background: unset; */
    }
}

.input_box {
    margin-bottom: 25px;
}

.input_box {
    textarea {
        resize: none;
        height: 115px;
        border-radius: 30px;
    }
}

.btn.btn-outline-secondary {
    color: #202020;
}

.btn.btn-green {
}

/* Sticky footer — kill the body-bg sliver above/below the footer.
   Body becomes a flex column so content stretches and footer pins to bottom. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > footer.footer {
    margin-top: auto;
}

/* ------------------------------------------------------------
   FIX: Tickets list + Create Ticket page content shifted to the left
   (reported at 768-991px, whole page off-centre = a horizontal overflow
   widening the page). Scoped to ONLY the two ticket pages via
   :has(.btn-submit-service) (register uses .reg-submit-btn, so excluded).
   1) Clip any accidental horizontal overflow from the form / ticket list.
   2) Re-assert a normal centered Bootstrap container + full-width column. */
.reg-section:has(.btn-submit-service) {
    overflow-x: clip;
}
.reg-section:has(.btn-submit-service) .container {
    margin-left: auto !important;
    margin-right: auto !important;
}
.reg-section:has(.btn-submit-service) .row {
    margin-left: auto;
    margin-right: auto;
}
.reg-section:has(.btn-submit-service) .row > .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}
/* Long <select> options (e.g. "Non Aquaflame Machine / Damaged Machine /
   Rapid Repair") can force the control wider than its column and overflow
   the row — keep every field strictly inside its column. */
.ticket_form .form-control,
.ticket_form .form-select,
.ticket_form input,
.ticket_form textarea {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 2560px) {
    .hero-swiper {
        width: 100%;

        &.swiper-rtl .swiper-button-prev,
        &.swiper-rtl ~ .swiper-button-prev,
        & ~ .swiper-button-next,
        .swiper-button-next {
            left: auto;
            right: var(--swiper-navigation-sides-offset, 11%);
        }

        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 11%);
            right: auto;
        }
    }
}

@media (max-width: 1920px) {
}

@media (max-width: 1660px) {
    .hero-swiper {
        width: 100%;

        &.swiper-rtl .swiper-button-prev,
        &.swiper-rtl ~ .swiper-button-prev,
        & ~ .swiper-button-next,
        .swiper-button-next {
            left: auto;
            right: var(--swiper-navigation-sides-offset, 6%);
        }

        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 6%);
            right: auto;
        }
    }
}

@media (max-width: 1530px) {
    .option-label,
    .option-select {
        font-size: 14px;
    }

    .hero-swiper {
        width: 100%;

        &.swiper-rtl .swiper-button-prev,
        &.swiper-rtl ~ .swiper-button-prev,
        & ~ .swiper-button-next,
        .swiper-button-next {
            left: auto;
            right: var(--swiper-navigation-sides-offset, 3%);
        }

        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 3%);
            right: auto;
        }
    }

    #machines {
        .swiper-button-prev {
            left: 3.5%;
        }

        .swiper-button-next {
            right: 3.5%;
        }
    }
}

@media (max-width: 1440.99px) {
    #main-nav > ul > li > a {
        font-size: 14px;
        padding: 0 10px;
    }

    .nav-search input {
        font-size: 14px;
    }

    .hero-section {
        font-size: 16px;
    }

    .hero-section {
        .banner-ply {
            height: 600px;
        }
    }

    .hero-section {
        .circles {
            position: absolute;
            top: 14%;
            right: 0px;
            margin: 0 auto;
            height: 247px;
            width: 220px;
            z-index: -1;
            object-fit: contain;
        }
    }

    .stats-cream {
        max-width: 325px;
    }

    .stats-cream p {
        font-size: 16px;
    }

    .stat-num {
        font-size: 40px;
    }

    .stats-band {
        padding-top: 0 !important;
    }

    .hero-swiper {
        width: 100%;

        &.swiper-rtl .swiper-button-prev,
        &.swiper-rtl ~ .swiper-button-prev,
        & ~ .swiper-button-next,
        .swiper-button-next {
            left: auto;
            right: var(--swiper-navigation-sides-offset, 1%);
        }

        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 1%);
            right: auto;
        }
    }

    #machines {
        .swiper-button-prev {
            left: 0.9%;
        }

        .swiper-button-next {
            right: 0.9%;
        }
    }

    .model-badge {
        padding: 0px 20px;
        font-size: 12px;
        line-height: 30px;
    }
}

@media (max-width: 1366.99px) {
    .hero-swiper {
        width: 100%;

        &.swiper-rtl .swiper-button-prev,
        &.swiper-rtl ~ .swiper-button-prev,
        & ~ .swiper-button-next,
        .swiper-button-next {
            left: auto;
            right: var(--swiper-navigation-sides-offset, 4%);
        }

        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: var(--swiper-navigation-sides-offset, 4%);
            right: auto;
        }
    }

    .right_border {
        &::after {
            min-height: 500px;
        }
    }

    .machine-card .machine-img-wrap {
        padding: 0 30px;
        min-height: 260px;
    }

    .machine-card .machine-img-wrap img {
        height: 435px;
    }

    .flame-labels {
        & .label {
            max-width: 94.5%;

            &:first-child {
                max-width: 40%;
            }

            &:nth-child(2) {
                max-width: 74.5%;
            }
        }
    }

    /* Keep the slider arrows in the gutter, clear of the slide content,
       so the next arrow never overlaps the machine description text. */
    #machines {
        .swiper-button-prev {
            left: 1%;
        }

        .swiper-button-next {
            right: 1%;
        }
    }

    .product-details-main {
        .select-box {
            padding: 20px 25px;
        }
    }
}

@media (max-width: 1280.99px) {
    .client_logos ul {
        justify-content: start;
        flex-direction: column;
        align-items: self-start;
    }

    .gas_output {
        & .sec_title {
            h2 {
                margin-bottom: 12px;
                padding-right: 0;
            }
        }
    }

    .product-details-main {
        .select-box {
            padding: 20px 15px;
            font-size: 16px;
        }
    }

    .prod-img-box {
        padding: 30px 30px;
        height: 240px;
        text-align: center;
    }
    .inner_banner {
        &.contents {
            padding-top: 245px;
            padding-bottom: 40px;
        }
    }
    .stellarnav {
        text-align: end;
    }
}

/* ========================================================
   MOBILE HEADER & HERO CLEANUP
   ======================================================== */
/* ========================================================
   MOBILE NAV (StellarNav) — slide-in panel polish
   Applies whenever the mobile menu is active.
   ======================================================== */
@media (max-width: 1199.99px) {
    /* Inset the machine slide so its content never sits under the edge arrows
       when the container gutter gets narrow (down to ~1024px). */
    #machines .machine-card {
        padding-inline: 44px;
    }

    header .right_content {
        margin-top: 20px;
    }
    .expert-section {
        .form-control {
            padding: 15px 20px !important;
            margin-bottom: 32px;
        }
    }
    .tabs-nav-wrapper {
        background: #ececec;
        border-radius: 12px;
        height: 56px;
    }

    /* Topbar: keep on a single tidy row (phone left, mail right) */
    header .topbar {
        padding: 10px 0;
        margin-bottom: 0;
    }
    header .topbar .row {
        flex-wrap: nowrap;
        align-items: center;
    }
    header .topbar .col-md-10,
    header .topbar .col-md-2 {
        width: auto;
        flex: 1 1 auto;
    }
    header .topbar .col-md-2.right_content {
        flex: 0 0 auto;
        margin-top: 0 !important;
        text-align: right;
        justify-content: flex-end !important;
    }
    header .topbar .britain img {
        max-width: 70px;
        width: auto;
        height: auto;
        vertical-align: middle;
        margin-right: 6px;
    }
    header .topbar .contact-icons {
        font-size: 12px;
        letter-spacing: 0;
    }
    header .topbar a b {
        font-size: 12px;
        white-space: nowrap;
    }

    /* Kill the absolute-positioned mail icon hack; render inline */
    header .contact-icons.mail_ico {
        position: static !important;
        left: auto !important;
        height: 34px;
        width: 34px;
        flex: 0 0 34px;
        margin-right: 0;
    }
    header .contact-icons.mail_ico svg {
        width: 16px;
        height: 16px;
    }

    /* Bottom header row: logo | nav-right | hamburger fits without overflow */
    .bottom_header {
        padding: 12px 0;
    }
    .bottom_header .col-12.d-flex {
        gap: 8px;
        flex-wrap: nowrap;
    }
    .logo-wrap {
        max-width: 140px;
        flex: 0 0 auto;
    }
    .logo-wrap img {
        max-width: 100%;
        height: auto;
    }

    /* Right-side icons (search, cart, auth) */
    .nav-right {
        gap: 6px;
        flex-shrink: 0;
    }
    .logged_in {
        gap: 12px;
        align-items: center;
        flex-wrap: nowrap;
        margin: 0;
        padding: 0;
    }
    .logged_in svg {
        width: 22px;
        height: 22px;
    }
    .logged_in li.position-relative .badge {
        font-size: 9px !important;
    }
    /* Shift the cart icon left so it isn't crammed against the user avatar */
    .logged_in li.position-relative {
        margin-right: 12px;
    }

    /* Compact Login/Register on mobile */
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 11px !important;
        padding: 4px 8px !important;
        height: 28px !important;
        border-width: 1px !important;
    }
    .logged_in li[style*="display: flex"] {
        gap: 6px !important;
        margin-left: 4px !important;
    }

    /* Search box must not overflow viewport */
    .search-box {
        width: 92vw !important;
        max-width: 92vw !important;
        right: 0 !important;
        top: 38px !important;
        padding: 8px 14px !important;
        border-radius: 24px !important;
    }
    .search-box input {
        font-size: 13px;
        min-width: 0;
    }

    /* Hamburger trigger spacing */
    .stellarnav .menu-toggle {
        padding: 0 6px;
    }

    /* Hamburger trigger — make it visible & on-brand */
    .stellarnav .menu-toggle {
        color: #fff;
        background: transparent;
        border-radius: 6px;
        transition: background 0.2s ease;
    }
    .stellarnav .menu-toggle:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    .stellarnav .menu-toggle span.bars span {
        background: #fff;
        width: 20px;
        height: 2px;
        margin: 0 0 4px;
        border-radius: 2px;
    }
    .stellarnav .menu-toggle span.bars span:last-child {
        margin-bottom: 0;
    }

    /* Slide-in panel */
    .stellarnav.mobile.right > ul,
    .stellarnav.mobile.left > ul {
        max-width: 320px;
        width: 86vw;
        background: #000 !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
        padding: 8px 0 24px;
        border-top: 0;
        z-index: 9999;
    }

    /* Backdrop dim behind the panel — must sit BELOW the panel, not above */
    .stellarnav.mobile.active::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9990;
        animation: navFade 0.25s ease;
        pointer-events: none;
    }
    @keyframes navFade {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Close (X) button at top of panel */
    .stellarnav.mobile .close-menu {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        padding: 14px 18px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
        font-size: 0;
    }
    .stellarnav.mobile .close-menu .icon-close {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        right: 11px;
    }
    .stellarnav.mobile .close-menu .icon-close::before,
    .stellarnav.mobile .close-menu .icon-close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 0;
        border-bottom: 2px solid #fff;
        border-radius: 2px;
    }
    .stellarnav.mobile .close-menu .icon-close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .stellarnav.mobile .close-menu .icon-close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Top-level items */
    .stellarnav.mobile > ul {
        border-top: 0 !important;
    }
    .stellarnav.mobile li a {
        color: #fff !important;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.3px;
        padding: 14px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        transition:
            background 0.2s ease,
            color 0.2s ease,
            padding-left 0.2s ease;
    }
    .stellarnav.mobile li a:hover,
    .stellarnav.mobile li.active > a {
        background: rgba(255, 255, 255, 0.08);
        color: #fff !important;
        padding-left: 24px !important;
    }

    /* Submenu — visually nested */
    .stellarnav.mobile ul ul {
        background: rgba(255, 255, 255, 0.03) !important;
        border-left: 2px solid rgba(255, 255, 255, 0.25);
        margin-left: 0;
    }
    .stellarnav.mobile ul ul li a {
        font-size: 13px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.78) !important;
        padding: 12px 20px 12px 32px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }
    .stellarnav.mobile ul ul ul li a {
        padding-left: 44px !important;
        font-size: 12.5px;
        color: rgba(255, 255, 255, 0.65) !important;
    }
    .stellarnav.mobile ul ul li a:hover {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.06);
    }

    /* Submenu toggle (+/-) — clearer & bigger tap target */
    .stellarnav.mobile .dd-toggle {
        position: absolute;
        width: 44px;
        height: 48px;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-right: 6px;
        background: transparent;
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        right: 15px;
    }
    .stellarnav.mobile .dd-toggle .icon-plus {
        position: relative;
        display: inline-block;
        width: 16px;
        height: 16px;
        transform: none !important;
        -webkit-transform: none !important;
    }
    /* Two centered bars: + when closed, × when open */
    .stellarnav.mobile .dd-toggle .icon-plus::before,
    .stellarnav.mobile .dd-toggle .icon-plus::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 0;
        border-bottom: 2px solid #fff;
        border-radius: 2px;
        transition: transform 0.2s ease;
    }
    .stellarnav.mobile .dd-toggle .icon-plus::before {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    .stellarnav.mobile .dd-toggle .icon-plus::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
    /* Open → rotate both bars into an X (close icon) */
    .stellarnav.mobile li.open > .dd-toggle .icon-plus::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .stellarnav.mobile li.open > .dd-toggle .icon-plus::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Hide stray empty <li> spacers */
    .stellarnav.mobile li:empty {
        display: none;
    }
}

/* Below 1025px the decorative footer-side gradient stretches full-width
   (.footer::after { max-width: unset }) and its light/white half washes out the white
   copyright text, making it disappear on responsive screens.

   Auth/register footer (no .footer-card) is just the centered copyright line, so the
   simplest fix there is to drop the decorative gradient entirely. */
@media (max-width: 1024.99px) {
    .stellarnav > ul > li.has-mega-menu {
        position: relative;
    }

    .profile-tabs-container {
        padding-inline: 10rem;
    }

    .info-item {
        padding: 7px 25px;
        min-height: 50px;
        height: 50px;
    }

    .order-details h4 {
        font-size: 18px;
    }

    .order-details h5 {
        font-size: 16px;
    }

    .order-bottom {
        padding: 18px 25px;
    }

    .order-img-box {
        width: 95px;
        height: 90px;
        margin-right: 10px;
        padding: 12px;
    }

    .inner_banner {
        &.contents {
            padding-top: 230px;
            padding-bottom: 40px;
        }
    }

    .prod-info {
        padding: 15px 10px;
    }

    #productsTabContent .prod-img-box {
        padding: 20px;
        height: 250px;
    }

    .inst-list-section {
        padding: 30px 0 30px;
    }

    .inst-block {
        padding: 40px 55px;
        margin-top: -30px;
    }

    .odc-header .odc-col {
        font-size: 15px;
    }

    .odc-header {
        padding: 25.5px 15px;
    }

    .odc-body {
        padding: 24px 17px;
    }

    .odc-body .odc-col {
        font-size: 16px;
    }

    .btn-download {
        padding: 0 3px;
        font-size: 14px;
    }

    .odc-action {
        width: 160px;
        right: 23px;
        height: 57px;
    }

    #main-nav > ul > li > a {
        font-size: 14px;
        padding: 12px 10px;
    }

    header {
        .topbar {
            .col-xl-6 {
                display: flex;
                justify-content: center;
                align-items: center;

                &.right_content {
                    margin-top: 20px;
                }
            }
        }
    }

    .stellarnav {
        text-align: end;
    }

    .hero-content {
        padding-left: 50px;
    }

    .hero-swiper {
        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: 1%;
            right: auto;
        }
    }

    #machines {
        .swiper-button-prev {
            left: 0.9%;
        }

        .swiper-button-next {
            right: 1%;
        }
    }

    .machine-top-wrap {
        margin-left: 2rem;
    }

    .machine-info {
        justify-content: center;
        height: 100%;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .machine-info .d-flex {
        justify-content: center !important;
        align-items: center;
    }

    .px-64 {
        padding: 0 26px;
        padding-bottom: 50px !important;
    }

    .contentSwiper {
        & .content {
            h6 {
                font-size: 22px;
            }
        }
    }

    .flame_technology {
        & .sec_title {
            p {
                br {
                    display: none;
                }
            }
        }
    }

    .about-section {
        padding: 80px 0 30px;
    }

    .contact-icon {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;

        svg {
            width: 28px;
            height: auto;
        }
    }

    .contact-info-card {
        padding: 30px 40px 50px 20px;
    }

    .contact-form-box {
        padding: 45px 40px 40px 60px;
        margin-left: -20px;
    }

    .contact-input,
    .contact-textarea {
        padding: 0 20px;
    }

    .contact-input {
        height: 50px;
    }

    .contact-textarea {
        padding: 24px 20px;
        resize: none;
        min-height: 100px;
        margin-bottom: 20px;
    }

    .contact-form-title {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .contact-info-title {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .contact-value {
        font-size: 14px;
    }

    .contact-info-item:last-child {
        .contact-value {
            br {
                display: none;
            }
        }
    }

    .contact-label {
        font-size: 15px;
    }

    .contact-layout-row {
        margin-top: 10px;
    }

    .contact-map-section {
        padding: 40px 0 80px;
        background: #fff;
    }

    .casting-section {
        h2 {
            margin-bottom: 0px;
        }

        & .content {
            .text-block {
                width: 25%;

                h3 {
                    font-size: 22px;
                    line-height: 1.2;
                    margin-bottom: 10px;
                }
            }

            & .images {
                gap: 15px;

                img {
                    max-width: 200px;
                    height: 200px;
                }
            }
        }
    }

    .gap-5 {
        gap: 4rem !important;
    }

    .ind-vcard-title {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 8px;
    }

    .right_border {
        margin-top: 50px;
        padding: 44px 30px 10px 0;

        &::after {
            min-height: 538px;
        }
    }

    .client_logos ul {
        justify-content: start;
        flex-direction: column;
        align-items: self-start;
    }

    .chem-dl-btn {
        font-size: 13px;
        height: 48px;
        padding: 9px 14px;
    }

    .chem-download-item {
        padding: 15px;
        gap: 10px;
    }

    .chem-dl-label {
        font-size: 15px;
    }

    .chem-download-row {
        gap: 15px;
    }

    .chem-entry-layout {
        display: flex;
        flex-direction: column;
    }

    .chem-entry-img-wrap {
        width: 100%;
        max-width: 75%;
        margin-inline: auto;
    }

    .chem-entry-reverse .chem-entry-card {
        padding: 45px;
        margin-left: 0;
        margin-right: 0;
    }

    .chem-entry-layout.chem-entry-reverse {
        flex-direction: column-reverse;
    }

    .chem-entry-card {
        padding: 45px;
        margin-top: 35px;
        margin-left: 0;
    }

    .form-pill {
        height: 50px;
        padding: 0 25px;
    }

    .form-pill.textarea-pill {
        height: 115px;
        padding: 20px 25px;
    }

    .service-form-section {
        & .service_form {
            .form-block {
                margin-bottom: 30px;
                padding: 35px;
            }
        }
    }

    .checkbox-wrap input[type="checkbox"] {
        width: 20px;
        height: 20px;
        border-radius: 4px;
    }

    .reg-box {
        padding: 45px 35px;
        margin-bottom: 30px;
        margin-top: -17px;
    }

    .reg-input {
        height: 50px;
        padding: 0 25px;
    }
    /* Keep the register password eye centered as the 62px field drops to 50px */
    .reg-section .position-relative .password-toggle {
        top: 25px;
    }

    .footer:not(:has(.footer-card))::after {
        display: none;
    }

    /* Main site footer keeps the gradient over its cards, but the bottom copyright row
     gets its own solid dark backing (above the gradient) so the text stays legible. */
    .footer .footer-bottom {
        position: relative;
        z-index: 2;
    }
}

@media (max-width: 999px) {
    .secGap {
        padding: 45px 0 90px;
    }

    .profile-tabs-container {
        padding-inline: 0rem;
        justify-content: center;
    }

    #personal .profile-content-box {
        padding: 30px 35px;
        margin-bottom: 30px;
    }

    .profile-tab {
        font-size: 16px;
        width: 100%;
        max-width: 190px;
    }

    .custom-tabs .nav-item {
        flex: 0 0 22%;
    }

    .filter-icons-section {
        padding: 60px 0 55px;

        .filter-icon-item {
            width: 20%;
            margin-bottom: 20px;
        }
    }

    .reg-input {
        height: 45px;
        padding: 0 20px;
        font-size: 14px;
    }
    /* Keep the register password eye centered in the 45px field */
    .reg-section .position-relative .password-toggle {
        top: 23px;
        right: 22px;
    }

    .reg-custom-check {
        height: 22px;
        width: 22px;
    }

    .reg-submit-btn {
        font-size: 14px;
        max-width: 65%;
        height: 50px;
    }

    .order-card {
        overflow-x: auto;
    }

    .order-top {
        width: 850px;
    }

    .order-bottom {
        width: 850px;
    }

    .order-details h4 {
        width: 100%;
        max-width: 84%;
    }

    .profile-section {
        padding: 0px 0;
    }

    .payment-table {
        min-width: 800px;
    }

    .custom-tabs .nav-link {
        font-size: 17px;
    }

    .tabs-nav-wrapper {
        height: 45px;
    }

    .recommended-section.sec_padding {
        padding: 60px 0 50px;
    }

    .product-tabs-section .tab-pane {
        padding-inline: 25px;
    }

    .tab-paragraph {
        font-size: 14px;
    }

    .odc-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        .odc-main {
            width: 980px;
        }
    }

    .status-card {
        padding: 30px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        .stepper-wrapper {
            width: 782px;
        }
    }

    .step-title {
        font-size: 18px;
    }

    .step-date {
        font-size: 13px;
    }

    .inner_banner {
        &.contents {
            padding-top: 180px;
            padding-bottom: 40px;
        }
    }

    .inner_banner {
        h1 {
            font-size: 40px;
        }
    }

    .inst_title {
        & .inst-video-wrap {
            padding-top: 50px;

            &::after {
                height: 250px;
                z-index: -1;
            }

            img {
                border-radius: 12px;
                width: 100%;
                height: auto;
            }
        }
    }

    .inst-list-section .inst-main-sub br {
        display: none;
    }

    .inst-block-title {
        font-size: 26px;
    }

    .login-section.forgot_pass {
        .login-box {
            padding: 60px 40px;

            .login-btn {
                margin-top: 15px;
                margin-bottom: 0;
                width: 100%;
                max-width: 50%;
            }
        }
    }

    .login-input {
        width: 100%;
        height: 50px;
        padding: 0 35px;
    }

    .login-section {
        padding: 70px 0 50px;
    }

    .cp-form {
        .cp-input {
            height: 50px;
            padding: 0 50px 0 25px;
        }

        .cp-btn {
            margin-top: 40px;
            width: 100%;
            max-width: 50%;
            height: 50px;
        }
    }

    .contact-form-box {
        margin-left: 0;
    }

    .chem-download-section {
        padding: 10px 0 50px;
    }

    .about-company-img {
        min-height: unset;
        height: auto;
        margin-bottom: 25px;
    }

    .about-company-text-box {
        p {
            font-size: 14px;
        }
    }

    .product-card {
        margin-bottom: 35px;
    }

    .machine-card {
        padding-inline: 4rem;
    }

    #machines {
        .swiper-button-next,
        .swiper-button-prev {
            width: 36px !important;
            height: 36px !important;
            top: auto !important;
            bottom: 45px !important;
        }
        .swiper-button-prev {
            left: auto !important;
            right: calc(50% + 8px) !important;
        }
        .swiper-button-next {
            right: calc(50% - 44px) !important;
        }
        .swiper-button-prev svg,
        .swiper-button-next svg {
            width: 12px !important;
        }
    }

    .flame_technology {
        .flame_card {
            padding: 25px 15px;

            h5 {
                font-size: 16px;
                line-height: 1.4;
                margin-bottom: 12px;
            }
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 50px !important;
        height: 50px !important;
    }

    .hero-content {
        padding-left: 40px;
        margin-bottom: -75px;
    }

    .ind_text {
        p {
            font-size: 14px;
            line-height: 22px;
        }
    }

    .ind-tasks-title {
        font-size: 25px;
        line-height: 30px;
        margin-bottom: 25px;
    }

    .ind-science-section {
        padding: 30px 0;

        p {
            font-size: 14px;
            margin-bottom: 20px;
        }
    }

    .ind-tasks-list {
        gap: 20px 10px;

        li {
            font-size: 15px;
            line-height: 20px;

            svg {
                margin-right: 5px;
                width: 20px;
            }
        }
    }

    h2 {
        font-size: 29px;
        font-weight: 600;
    }

    .client_logos ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 22px 24px;

        li {
            width: calc(50% - 12px);
            margin: 0 !important;
            text-align: center;

            img {
                min-width: 0 !important;
                max-width: 100%;
                max-height: 42px;
                object-fit: contain;
            }
        }
    }

    .footer {
        &::after {
            max-width: unset;
        }
    }

    .machine-card .machine-img-wrap img {
        height: 300px;
    }

    .ind-vcard-title {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 0;
    }

    .ind-vcard-desc {
        font-size: 13px;
        line-height: 22px;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 17px;
    }

    .ind-vcard-btn {
        padding: 0 15px;
        font-size: 13px;
        max-width: 175px;
        height: 48px;
    }

    .right_border {
        &::after {
            min-height: 593px;
            width: 460px;
        }
    }

    .casting-section {
        & .content {
            .text-block {
                width: 30%;

                h3 {
                    font-size: 20px;
                }

                .cast_btn {
                    padding: 10px 18px;
                    max-width: 150px;
                    height: 50px;
                    line-height: 62px;
                    font-size: 16px;
                }
            }

            & .images {
                gap: 10px;

                img {
                    max-width: 130px;
                    height: 130px;
                }
            }
        }
    }

    .ind-machines-section {
        padding: 80px 0 30px;

        .ind-machine-card {
            height: auto;
            margin-bottom: 50px;

            .top_img {
                max-width: 170px;
                margin-top: -80px;
            }
        }
    }

    .resend-text {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 15px;
    }

    .custom-tabs .nav-link.active {
        height: 54px;
        line-height: 21px;
        font-size: 14px;
    }

    .py-4,
    .flame_technology,
    #products,
    .expert-section,
    .flame-section,
    .about-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    #machines {
        padding-bottom: 110px !important;
    }
    #products {
        padding-top: 0px !important;
    }
    h1 {
        font-size: 35px;
    }
    .about-section {
        .image-row {
            margin-top: 0px;
        }
    }
}

/* ========================================================
   SLIDER ARROWS — shrink on all responsive screens
   (scoped so the .application_tab industry-tab arrows keep
   their own sizing and stay visible.)
   ======================================================== */
@media (max-width: 991.99px) {
    .swiper-button-next:not(.tab-next):not(.application_tab *),
    .swiper-button-prev:not(.tab-prev):not(.application_tab *) {
        width: 40px !important;
        height: 40px !important;
    }
    .flame_technology {
        .sec_title {
            text-align: center;
            margin-bottom: 25px;
        }
    }
    .swiper-button-next:not(.tab-next):not(.application_tab *)::after,
    .swiper-button-prev:not(.tab-prev):not(.application_tab *)::after {
        font-size: 12px !important;
    }
    /* Keep industry-tab arrows reasonably sized & inside the viewport */
    .application_tab .swiper-button-prev,
    .application_tab .swiper-button-next {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
    }
    .application_tab .tab-prev {
        left: 4px !important;
    }
    .application_tab .tab-next {
        right: 4px !important;
    }
}

/* Checkout "Order Notes" textarea: fix it from 991px down — no manual resize
   and pinned to the card width so it can't be dragged out or overflow the
   layout on tablet. Scoped to .cart-section so other textareas are untouched. */
/* ============================================================
   LOGIN PAGE — decrease font sizes & button size 991px -> 320px.
   Scoped under .login-section; !important used because some existing
   login rules (e.g. .login-forgot-link at 390px) are !important.
   ============================================================ */
/* ============================================================
   REGISTER PAGE — decrease font sizes & button size 991px -> 320px.
   Scoped under .reg-section; !important keeps it above the global
   320px h1 rule and the existing reg ladder.
   ============================================================ */
@media (max-width: 991px) {
    .inner_banner {
        padding-top: 140px !important;
        padding-bottom: 30px !important;
    }

    .sec_padding {
        padding: 30px 0 80px !important;
    }

    .products-grid-section {
        background: #fff;
        padding: 30px 0 30px !important;
    }
    .tabSwiper {
        margin-bottom: 25px;
    }

    .pagination-wrap.pt-3 {
        margin-top: 15px !important;
    }

    .filter-icons-wrap {
        gap: 20px !important; /* change 20px to your desired value */
    }

    .pagination-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 15px !important;
    }

    .pagination-wrap .pagination-info {
        text-align: center !important;
        width: 100% !important;
    }

    .pagination-wrap nav {
        width: auto !important;
    }

    .pagination-wrap .pagination {
        justify-content: center !important;
    }

    .product-details-main {
        background: #fff !important;
        padding: 30px 0 30px !important;
    }

    .prod_img {
        .main-img-wrap {
            margin-top: -20px !important;
        }
    }

    .pi-eyebrow {
        margin-top: -48px !important;
    }

    .product-tabs-section {
        background: #f9f7f1 !important;
        padding: 35px 0 35px !important;
        font-size: 12px;
    }

    .recommended-section {
        h2 {
            margin-bottom: 25px !important;
        }
    }

    .prod-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .prod-actions .btn {
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0px 30px;
    }

    .prod-actions .w-50 {
        width: 100% !important;
        padding: 0px 30px;
    }

    .recommendedSec {
        padding-bottom: 80px !important;
    }

    .inner_banner {
        &.contents {
            h1 {
                margin-bottom: 0 !important;
            }
        }
    }

    .profile-content-box {
        margin-top: 0px !important;
    }

    .cart-summary-title {
        margin-top: -5px !important;
    }

    .btn-buy {
        height: 41px !important;
        max-width: 203px !important;
    }

    .cart-section .profile-content-box textarea.form-control {
        resize: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .inst-video-section {
        padding: 30px 0 0 !important;
        background: #fff !important;
    }

    .inst-video-wrap.mt-5,
    .mt-5 {
        margin-top: 25px !important;
    }

    .login-box {
        margin-bottom: 25px !important;
    }

    /* Tighten the bottom whitespace on both auth pages from 991px down */
    .login-section,
    .reg-section {
        padding-bottom: 5px !important;
    }
    .login-section h1 {
        font-size: 30px !important;
    }
    .login-section .login-box-title {
        font-size: 22px !important;
    }
    .login-section .reg-checkbox-label {
        font-size: 15px !important;
    }
    .login-section .login-register-text {
        font-size: 16px !important;
    }
    .login-section .login-forgot-link {
        font-size: 13px !important;
    }
    .login-section .login-input {
        font-size: 14px !important;
    }
    .login-section .login-btn {
        height: 56px !important;
        font-size: 14px !important;
        margin-top: 40px !important;
    }

    .reg-section h1 {
        font-size: 30px !important;
    }
    .reg-section .reg-section-title {
        font-size: 20px !important;
        margin-left: 6px;
    }
    .reg-section .reg-toggle-btn {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
    .reg-section .reg-login-link {
        font-size: 16px !important;
    }

    .breadcrumb {
        font-size: 14px !important;
        margin-top: 0 !important;
        margin-bottom: 46px !important;
    }

    .expert-title::before {
        right: -7% !important;
    }

    .expert-title::after {
        right: -7% !important;
    }

    .recommended-section {
        padding-bottom: 20px !important;
    }

    .login-section .position-relative .password-toggle {
        position: absolute !important;
        top: 25px !important;
        right: 24px !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        color: #888 !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 830px) {
    .table.fts-table {
        width: 850px;
    }

    .profile-tabs-container {
        flex-direction: row !important;
        height: 45px;
    }
}

/* ========================================================
   HOME PAGE — UNIFIED 768px LAYOUT
   On tablet (<=768px) every home section gets the SAME vertical
   gap, every section <h1>/<h2> heading is the SAME size, and the
   gap between each heading and its content is the SAME.
   Placed last so it wins over the scattered per-section
   767/678/1024 overrides defined earlier in this file.
   (The hero heading .hero-h1 is intentionally excluded.)
   ======================================================== */
/* Product listing (<=768px): the card "View Product" button spans the full
   card width (overrides its .w-50 and the base .btn-buy max-width cap).
   Scoped to .prod-actions so other pages' .btn-buy buttons are untouched. */
/* ============================================================
   CHECKOUT PAGE — full responsive 768px -> 320px
   Columns already stack below lg (bootstrap col-lg-8/4); these rules
   refine spacing, typography and the order-summary card on tablet/phone.
   Scoped under .cart-section / .cart-summary-box so the cart, profile and
   product pages that share .profile-content-box / .btn-buy are unaffected.
   ============================================================ */
/* ============================================================
   ORDER CONFIRMED PAGE — decrease all font sizes 768px -> 320px
   Scoped to the page's unique centered column (.col-lg-6.text-center.py-5
   inside .cart-section) so cart/checkout are unaffected. The page sets most
   sizes as inline styles (no !important), so these !important rules win.
   ============================================================ */
/* ============================================================
   SUPPORT PAGE (Installation & Operating Instructions) —
   decrease all font sizes 768px -> 320px.
   Targets the page-specific .inst-* classes, so nothing else is touched.
   ============================================================ */
/* ============================================================
   PROFILE PAGE — decrease font sizes 768px -> 320px and tidy alignment.
   Scoped under .profile-section so shared classes (.info-section-title,
   .info-item, .btn-buy, .password-toggle) on other pages aren't touched.
   ============================================================ */
/* ============================================================
   TICKETS LIST + CREATE TICKET PAGES — responsive 768px -> 320px.
   Both use .reg-section, so the page <h1> and .reg-section-title
   already shrink via the register ladder above. These rules cover the
   ticket form controls, buttons, and the ticket-list cards/badges,
   plus alignment tidy-ups.
   ============================================================ */
/* ============================================================
   FAQ PAGE — decrease every font size from 768px down to 320px.
   Covers the heading (.sec_title h2), the intro subtitle (.sec_title p),
   the question text (.faq-text) and the answer text (.faq-answer p).
   Scoped under .faq-content-section so shared classes elsewhere are safe.
   ============================================================ */
@media (max-width: 768px) {
    .inner_banner.contents {
        padding-top: 145px !important;
    }
    #products {
        padding-top: 40px !important;
    }

    .ind-intro-section {
        padding: 39px 0 30px !important;
    }

    /* .p2 {
        margin-top: -40px !important;
    } */

    .secGap {
        padding-top: 0px !important;
        padding-bottom: 30px !important;
    }

    /* 1) Equal vertical gap between every section:
        40px top + 40px bottom -> uniform 80px rhythm between sections. */
    .products-section.secGap,
    .machines-section.secGap,
    .application_tab,
    .flame_technology,
    .flame-section,
    .about-section,
    .about-company-section,
    .expert-section {
        padding: 40px 0 !important;
    }

    /* 2) Equal section-heading size. clamp keeps it identical at any given
        width while preventing overflow on the smallest phones. */
    .products-section > .container h1,
    .products-section > .container h2,
    .machines-section h2,
    .application_tab > .container h2,
    .flame_technology .sec_title h2,
    .flame-section > .container h2,
    .about-section h2,
    .about-company-section h2,
    .expert-section h2 {
        font-size: clamp(22px, 5.5vw, 28px) !important;
        line-height: 1.3 !important;
    }

    /* 3) Equal gap (24px) between each heading block and its section content. */
    .products-section .container h1 {
        margin-bottom: 10px !important;
    }
    .products-section .row.mt-2 {
        margin-top: 0 !important;
    }
    .machines-section .row.mb-5 {
        margin-bottom: 24px !important;
    }
    .machines-section .p1 {
        margin-top: 0 !important;
    }
    .application_tab > .container h2 {
        margin-bottom: 24px !important;
    }
    .flame_technology .sec_title {
        margin-bottom: 24px !important;
    }
    .flame-section > .container h2 {
        margin-bottom: 24px !important;
    }
    .about-section .about-text {
        margin-top: 24px !important;
    }
    .expert-section form {
        margin-top: 24px !important;
    }
    /* About-company: same 24px gap heading->content, and a matching 24px gap
     between the stacked image and the text box. */
    .about-company-section h2 {
        margin-bottom: 16px !important;
    }
    .about-company-section .about-company-sub {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .about-company-section .row.mt-5 {
        margin-top: 24px !important;
    }
    .about-company-section .about-company-img {
        min-height: unset !important;
        height: auto !important;
        margin-bottom: 24px !important;
    }
    .about-company-section .about-company-text-box {
        padding: 28px 24px !important;
        height: auto !important;
    }

    .prod-actions .btn-buy,
    .prod-actions .btn-outline {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Breathing room top & bottom (the shared cart rule leaves bottom at 0). */
    .cart-section {
        padding: 28px 0 34px !important;
    }

    /* Undo the profile-page -30px pull so the first card sits below the title. */
    .cart-section .profile-content-box {
        margin-top: 0 !important;
        padding: 20px !important;
        margin-bottom: 18px !important;
    }

    /* Section titles (Shipping / Billing / Payment / Notes). */
    .cart-section .info-section-title {
        font-size: 18px !important;
        margin-bottom: 18px !important;
    }

    /* Order Summary: turn the (otherwise unstyled) box into a clear card and
     separate it from the form once it stacks underneath. */
    .cart-summary-box {
        background: #f0efee;
        border-radius: 12px;
        padding: 20px !important;
        margin-top: -19px;
    }
    .cart-summary-box .cart-summary-title {
        margin-top: 0 !important;
    }

    /* Place Order button: let it actually fill the card (base .btn-buy caps it
     at 148-203px) and be a comfortable primary CTA. */
    .cart-summary-box .btn-buy.w-100 {
        max-width: 100% !important;
        height: 48px !important;
        line-height: 48px !important;
        font-size: 14px !important;
    }

    .py-5 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .cart-section .col-lg-6.text-center.py-5 h1 {
        font-size: 24px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 > p {
        font-size: 15px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 i.bi-check-lg {
        font-size: 34px !important;
    }
    /* Detail rows (Order Number, Date, Subtotal, VAT ...). */
    .cart-section .col-lg-6.text-center.py-5 .profile-content-box .d-flex {
        font-size: 15px !important;
    }
    /* Total row (last row) stays a touch larger. */
    .cart-section
        .col-lg-6.text-center.py-5
        .profile-content-box
        .d-flex:last-child {
        font-size: 16px !important;
    }
    /* Let the action buttons wrap instead of overflowing. */
    .cart-section .col-lg-6.text-center.py-5 .d-flex.gap-3 {
        flex-wrap: wrap;
    }
    .cart-section .col-lg-6.text-center.py-5 .alert {
        font-size: 13px !important;
    }

    /* Section headings (video + instructions list) */
    .inst_title h2,
    .inst-main-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    /* Intro / setup subtitles */
    .inst-main-sub {
        font-size: 14px !important;
    }
    /* Instruction block heading + body */
    .inst-block-title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .inst-block-text,
    .inst-block-text p,
    .inst-block-text strong {
        font-size: 14px !important;
    }

    .login-section h1 {
        font-size: 28px !important;
    }
    .login-section .login-box-title {
        font-size: 20px !important;
    }
    .login-section .reg-checkbox-label {
        font-size: 14px !important;
    }
    .login-section .login-register-text {
        font-size: 15px !important;
    }
    .login-section .login-btn {
        height: 54px !important;
    }

    .reg-section h1 {
        font-size: 26px !important;
    }
    .reg-section .reg-section-title {
        font-size: 17px !important;
    }
    .reg-section .reg-login-link {
        font-size: 15px !important;
    }

    /* Header row (title + Logout) and the Addresses header (title + Add)
     wrap neatly instead of crowding on narrow screens. */
    .profile-section .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Headings */
    .profile-section .profile-title {
        font-size: 24px !important;
    }
    .profile-section .info-section-title {
        font-size: 18px !important;
        margin-bottom: 18px !important;
    }

    /* Form inputs (pill fields) */
    .profile-section .info-item {
        font-size: 14px !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 12px 22px !important;
    }
    /* Keep the password eye centered as the field shrinks. */
    .profile-section .password-toggle {
        height: 50px;
    }

    /* Primary buttons */
    .profile-section .btn-edit-details {
        font-size: 13px !important;
        padding: 13px 30px !important;
        margin-top: 24px !important;
    }

    /* Orders */
    .profile-section .order-details h5,
    .profile-section .order-details h4 {
        font-size: 16px !important;
    }
    .profile-section .order-price {
        font-size: 16px !important;
    }
    .profile-section .detail-col .value {
        font-size: 14px !important;
    }

    /* Invoices table */
    .profile-section .payment-table th,
    .profile-section .payment-table td {
        font-size: 14px !important;
        padding: 12px 8px !important;
    }

    /* Status badges */
    .profile-section .status-badge {
        font-size: 13px !important;
        padding: 5px 18px !important;
    }

    /* ----- Create Ticket: form controls ----- */
    .ticket_form .form-label {
        font-size: 14px !important;
    }
    .ticket_form input:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-control:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-select {
        height: 50px !important;
        font-size: 14px !important;
        padding: 0 22px !important;
    }
    .ticket_form textarea.form-control,
    .input_box textarea {
        height: 110px !important;
        font-size: 14px !important;
        padding: 14px 22px !important;
    }
    .reg-section .form-check-label {
        font-size: 13px !important;

        margin-left: 10px;
    }
    /* Submit / outline buttons */
    .reg-section .btn-submit-service {
        height: 50px !important;
        line-height: 48px !important;
        font-size: 14px !important;
        min-width: auto !important;
        padding: 0 30px !important;
        margin-top: 4px !important;
    }
    .reg-section .btn-outline-secondary {
        font-size: 13px !important;
        padding: 0px 18px !important;
    }

    /* ----- Tickets list ----- */
    .reg-section .text-muted {
        font-size: 13px !important;
    }
    .reg-box h4 {
        font-size: 18px !important;
    }
    .ticket-list-item {
        padding: 14px 16px;
    }
    .ticket-list-item__subject {
        font-size: 0.9rem;
    }
    .ticket-list-item__preview {
        font-size: 0.78rem;
    }
    .tkt-badge,
    .tkt-priority,
    .tkt-tag {
        font-size: 0.62rem;
    }

    .casting-section {
        background: #f5f5f5 !important;
        padding: 25px 0 !important;
    }

    .contact-map-section {
        padding: 10px 0 40px !important;
        background: #fff !important;
    }

    .faq-content-section .sec_title h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    .faq-content-section .sec_title p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .faq-content-section .faq-text {
        font-size: 15px !important;
    }
    .faq-content-section .faq-answer p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 767px) {
    /* Shrink the logged-in user's initial avatar in the header on phones. */
    .user-avatar-initial {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .mb-50 {
    margin-bottom: 20px;
}
    .sec_padding {
        padding: 30px 0 !important;
    }
    .custom-tabs {
        justify-content: center !important;
    }
    /* Coupons table doesn't fit on a phone — stack each row into a labelled
     card instead of a horizontally-clipped table. */
    .coupon-table thead {
        display: none;
    }
    .coupon-table,
    .coupon-table tbody,
    .coupon-table tr,
    .coupon-table td {
        display: block;
        width: 100%;
    }
    .coupon-table tr {
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        padding: 6px 14px;
        margin-bottom: 12px;
    }
    .coupon-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        text-align: right;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .coupon-table tr td:last-child {
        border-bottom: none;
    }
    .coupon-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #020104;
        text-align: left;
        white-space: nowrap;
    }

    /* Register form collapses to a narrow centered column below the md breakpoint:
     its .container is d-flex justify-content-center and the inner .col-md-12 has no
     width under 768px, so it shrinks to content width. Force the container/row/col
     to fill the viewport so the form spans the full phone width. */
    .reg-section .container {
        width: 100%;
        justify-content: stretch;
    }
    .reg-section .row {
        width: 100%;
        flex: 1 1 100%;
    }
    .reg-section .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .foo_logo {
        width: 100%;
        max-width: 250px;
    }

    .reg-submit-btn {
        padding: 12px 12px;
        max-width: 100%;
    }

    .reg-login-link {
        font-size: 16px;
    }

    /* Tab strip can't fit 7 nowrap tabs on a phone — make it a horizontal
     scroller instead of letting tabs overflow and clip off both edges. */
    .profile-tabs-container {
        height: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        padding: 6px;
    }

    .profile-tab {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        font-size: 14px;
        padding: 10px 14px;
        border-radius: 8px;
        white-space: nowrap;
    }

    .order-top {
        flex-direction: row;
    }

    .order-actions {
        flex-direction: row;
        width: auto;
    }

    .order-bottom {
        flex-wrap: unset;
    }

    .order-card {
        padding: 20px 30px 37px 30px;
    }

    .order-bottom,
    .order-top {
        width: 1000px;
    }

    .detail-col .label {
        font-size: 14px;
    }

    .payment-table td {
        padding: 14.25px 8px;
        font-size: 16px;
    }

    #personal .profile-content-box {
        padding: 30px 15px;
    }

    #personal .info-section {
        margin-bottom: 40px;
    }

    .profile-section .profile-tab.active {
        font-size: 14px;
    }

    .mobile_wrap_Sec {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        .filter-icons-wrap {
            width: max-content;
            gap: 24px;
            justify-content: flex-start;
            flex-wrap: nowrap;

            .filter-icon-item {
                flex: 0 0 auto;
                width: 80px;
                margin-bottom: 10px;
            }

            img {
                width: 100%;
                max-width: 100%;
                height: 50px;
                object-fit: contain;
                margin-bottom: 8px;
            }

            span {
                font-size: 15px;
                line-height: 20px;
                margin-top: 6px;
                text-align: center;
                white-space: normal;
                word-break: break-word;
            }
        }
    }

    .products-grid-section {
        padding: 40px 0 50px;
    }

    #productsTabContent .prod-img-box {
        padding: 10px;
        height: 210px;
    }

    .prod-actions {
        flex-wrap: wrap;
        margin: 0 auto;

        .btn {
            width: 100% !important;
        }
    }

    .prod-name {
        font-size: 12px;
        line-height: 20px;
    }

    .prod-price {
        font-size: 15px;
        line-height: 18px;
    }

    .otp-card h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 15px;
    }

    .resend-text {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 20px;
    }

    .btn-verify {
        height: 50px;
        line-height: 48px;
        font-size: 15px;
        width: 100%;
        max-width: 75%;
    }

    .confirmed-text {
        font-size: 14px;

        br {
            display: none;
        }
    }

    .success-icon-wrap {
        font-size: 55px;
    }

    .confirmed-text {
        font-size: 16px;
        margin-bottom: 25px;
    }

    .tracking-badge {
        padding: 11px 15px;
        font-size: 14px;
    }

    .status-header .left h2 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .status-header .left p {
        font-size: 14px;
    }

    .btn-back {
        font-size: 16px;
        max-width: 60%;
        height: 50px;
        line-height: 48px;
    }

    .chem-entry-card {
        padding: 20px;
        margin-top: 20px;

        /* text-align: center; */
        .chem-entry-title {
            margin-bottom: 5px;
        }
    }

    .inst_title {
        & .inst-video-wrap {
            padding-top: 40px;

            &::after {
                height: 190px;
                z-index: -1;
            }

            img {
                max-width: 95%;
            }
        }
    }

    .inst-block {
        padding: 16px 20px;
    }

    .inst-block-text {
        font-size: 14px;
        color: #202020;
        line-height: 1.6;
    }

    .inst-block-title {
        font-size: 22px;
    }

    .inst-main-sub {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
    }

    .gas_output {
        .row {
            flex-direction: column-reverse;
            text-align: center;

            .sec_title {
                margin-top: 25px;
            }
        }
    }

    .flame_ranges {
        h2 {
            margin-bottom: 20px;
        }

        p {
            font-size: 14px;
            line-height: 26px;
        }
    }

    .login-section.forgot_pass {
        p {
            font-size: 16px;
        }

        .login-box {
            .login-btn {
                max-width: 60%;
                height: 50px;
            }
        }
    }

    .chem-entry-reverse .chem-entry-card {
        padding: 20px;
    }

    .chem-info-section {
        padding: 50px 0 20px;
    }

    .chem-entry-img-wrap {
        height: auto;
        border-radius: 10px;
    }

    .chem-entry-text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 5px;
    }

    .social-icons {
        gap: 15px;
    }

    .ind-video-text-col {
        padding: 30px 0;
    }

    .gap-5 {
        gap: 1rem !important;
    }

    .right_border {
        margin-top: -50px;
        padding: 70px 15px 10px 15px;
        text-align: center;

        &::after {
            min-height: 445px;
            width: 100%;
            display: none;
        }

        .ind-vcard-btn {
            margin-inline: auto;
        }
    }

    .casting-section {
        & .content {
            margin-top: 30px;
            flex-direction: column;
            gap: 30px;

            .text-block {
                width: 100%;
                text-align: center !important;

                /* padding-top: 30px !important; */
                &.right {
                    padding-top: 0;
                }

                .cast_btn {
                    margin-inline: auto;
                }
            }

            .images {
                img {
                    max-width: 200px;
                    height: 200px;
                }
            }
        }
    }

    .ind-machines-section {
        padding: 50px 0 0px;
    }

    .ind-brands-section {
        & .ind-video-card {
            .ind-video-thumb {
                position: relative;
                height: auto;
                background: #111;
                width: 100%;
                max-width: unset;
                z-index: 2;
            }
        }
    }

    .footer {
        .footer-card {
            padding: 40px 25px;
        }
    }

    .csd-hero-img-wrap {
        height: auto;
    }

    .share_box {
        .post_date {
            font-size: 15px;
        }
    }

    .csd-share-btn {
        font-size: 14px;
        padding: 7px 22px;
        line-height: 1;
        height: 46px;
        line-height: 44px;
        min-width: 120px;
    }

    .csd-intro-section {
        p {
            font-size: 14px;
        }
    }

    #consent {
        height: 20px;
        width: 20px;
    }

    .expert-section form .form-check {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 12px;
    }

    .expert-title::before,
    .expert-title::after {
        width: 150px;
    }

    .about-section {
        & .image-row {
            margin-top: 10px;

            .img-card {
                height: auto;
            }
        }
    }

    .csd-requirements-list li p {
        font-size: 13px;
        line-height: 22px;
    }

    .csd-what-card {
        padding: 80px 20px 30px 20px;
    }

    .csd-hero-img-section {
        padding-bottom: 40px;
    }

    .csd-what-section {
        padding: 50px 0;
    }

    .csd-what-img-wrap {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-bottom: 50px;
    }

    header {
        & .topbar {
            .contact-icons {
                font-size: 12px;
            }

            a {
                b {
                    font-size: 11px;
                }
            }

            .col-xl-6 {
                display: block;
                text-align: center;

                .britain {
                    img {
                        max-width: 18%;
                        width: 100%;
                    }
                }
            }
        }

        .btn {
            padding: 0 15px;
        }

        .logo-wrap {
            max-width: 160px;
        }
    }

    header .contact-icons.mail_ico {
        position: absolute;
        left: 45px;
    }

    .hero-eyebrow {
        font-size: 14px;
    }

    .hero-h1 {
        font-size: 32px;

        span {
            font-size: 32px;

            span {
                font-size: 32px;
            }
        }
    }

    .hero-content {
        padding-inline: 40px;
        text-align: center;
        padding-top: 275px;
        padding-bottom: 40px;
    }

    .hero-sub {
        margin: 15px 0 20px;
        max-width: 320px;
        font-size: 14px;
        margin-inline: auto;
    }

    .hero-btns {
        gap: 25px;
        justify-content: center;
        margin-bottom: 65px;

        .btn {
            padding: 0 20px;
        }
    }

    h1 {
        font-size: 28px;
    }

    .machine-card {
        padding-inline: 1rem;
    }

    .machine-top-wrap {
        margin-left: 0;
        margin-bottom: 12px;
    }

    /* Kill the tall (503px) decorative card background on phones — it was
     creating a big empty area below the CTAs. */
    .machine-top-wrap:after {
        height: 100% !important;
    }

    /* Tighten the Buy Now / Compare Models row & stop them wrapping mid-word */
    .machine-info .d-flex.gap-4.mt-5 {
        gap: 10px !important;
        margin-top: 18px !important;
    }
    .machine-info .d-flex .btn {
        white-space: nowrap;
        padding-inline: 14px;
    }

    /* Remove trailing empty space below the slider */
    #machines {
        padding-bottom: 60px;
    }
    .machine-swiper {
        padding-bottom: 0 !important;
    }

    .machine-card .machine-img-wrap {
        padding: 0 15px;
        min-height: unset;
    }

    .px-64 {
        padding: 0 15px;
        padding-bottom: 50px !important;
        flex-direction: column;
        align-items: self-start !important;
    }

    .thumb-info {
        p {
            font-size: 14px;

            br {
                display: none;
            }
        }

        h4 {
            font-size: 17px;
            margin-top: 15px;

            br {
                display: none;
            }
        }
    }

    .machine-info {
        margin-right: 0;
    }

    .spec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #machines {
        .swiper-button-next,
        .swiper-button-prev {
            width: 32px !important;
            height: 32px !important;
            top: auto !important;
        }

        .swiper-button-prev {
            left: auto !important;
            right: calc(50% + 8px) !important;
        }

        .swiper-button-next {
            right: calc(50% - 40px) !important;
        }

        .swiper-button-prev svg,
        .swiper-button-next svg {
            width: 10px !important;
        }
    }

    .industries-icons {
        gap: 17px;

        li {
            font-size: 17px;
        }
    }

    .machines-section {
        .btn {
            height: 50px;
            line-height: 50px;
            padding: 0 40px;
        }
    }

    .tab-next {
        right: 0;
    }

    .contentSwiper {
        .sideImg {
            height: auto;
            margin-bottom: 30px;
        }

        .content {
            h6 {
                font-size: 20px;
            }
        }
    }

    .contact-form-box {
        padding: 45px 30px;
        margin-left: 0;
    }

    .inner_banner {
        h1 {
            font-size: 28px;
        }
    }

    .sec_padding {
        padding: 60px 0 50px;
    }

    .table.fts-table {
        width: 700px;
    }

    .fts-table-wrapper {
        padding: 25px 20px;

        tbody {
            & tr {
                td {
                    font-size: 16px;
                }
            }
        }
    }

    .login-box-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .login-register-text {
        font-size: 14px;
    }

    .otp-inputs {
        gap: 15px;
    }

    .product-details-main {
        padding: 30px 0 30px;

        .breadcrumb {
            margin-bottom: 0;
        }
    }

    .pi-title {
        font-size: 20px;
        line-height: 26px;
    }

    .pi-eyebrow {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .pi-desc {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .pi-price {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .pi-divider {
        margin: 25px 0 25px;
    }

    .product-details-main {
        .select-box {
            padding: 12px 15px;
            font-size: 16px;
        }
    }

    .btn-outline-large {
        height: 50px;
        line-height: 48px;
        font-size: 14px;
    }

    .custom-tabs {
        width: 100%;
        padding: 10px;
        gap: 15px;
        flex-wrap: nowrap;
    }
    .tabs-nav-wrapper {
        height: 75px;
        overflow-x: auto;
    }

    .custom-tabs .nav-item {
        flex: 0 0 20%;
    }

    .product-tabs-section {
        padding: 30px 0;
    }
    .custom-tabs .nav-link.active {
        height: auto;
        padding: 14px 10px;
    }
    .custom-tabs .nav-link {
        padding-top: 0;
        padding-bottom: 0;
    }
    .custom-tabs .nav-link.active {
        margin-top: 0;
    }

    .recommendedSec {
        padding-bottom: 77px;
    }

    .form-main-title {
        font-size: 28px;
    }

    .service-form-section {
        h2 {
            margin-bottom: 20px;
        }
    }

    .service-form-section {
        & .service_form {
            .form-block {
                margin-bottom: 30px;
                padding: 25px 15px;
            }
        }
    }

    .form-pill {
        height: 45px;
    }

    .form-pill.textarea-pill {
        height: 100px;
        border-radius: 40px;
    }

    .btn-submit-service {
        height: 50px;
        line-height: 48px;
        font-size: 14px;
        min-width: 70%;
        margin-top: 30px;
    }

    .image-row {
        justify-content: center !important;
        gap: 25px;
    }

    .image-row .col-md-4 {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .image-row .img-card {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .image-row img {
        display: block !important;
        margin: 0 auto !important;
    }

    .flame-section {
        padding: 45px 0 !important;
    }

    .about-section {
        padding: 30px 0 30px !important;
    }

    .submit-btn {
        margin-bottom: 30px !important;
    }

    .flame_technology {
        padding: 20px 0 !important;
    }

    .flame_card {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 678px) {
    .flame_technology {
        padding: 30px 0px !important;
    }
    .recommendedSec {
        padding-bottom: 60px !important;
    }
    .custom-tabs {
    justify-content: flex-start !important;
}
}

@media (max-width: 576px) {
    .login-btn {
        width: 100%;
        max-width: 75%;
        height: 50px;
        font-size: 14px;
        margin-top: 40px;
        margin-bottom: 24px;
    }
}

/* Shrink the copyright line on phones so the full text stays visible.
   Placed outside the 390px block so it applies up to standard phone widths. */
/* Header Login/Register: keep a uniform 11px across all tablet/phone widths.
   (The blade no longer pins font-size inline, so this ladder now applies;
   this rule sits last to override the older 10/9/8px steps below 575px.) */
@media (max-width: 575.99px) {
    .footer {
        padding: 10px 0 !important;
    }
    .footer .footer-bottom {
        margin: 0 !important;
        line-height: 1.4 !important;
        padding: 8px 8px !important;
        font-size: 11px !important;
        white-space: normal !important;
        word-wrap: break-word;
        text-wrap: balance;
    }

    /* Drop the Britain flag and the "Contact Aquaflame Systems:" label on small
     phones — the phone number + mail icon are self-explanatory and the label
     was wrapping to two lines and bunching the row. */
    header .topbar {
        padding: 8px 0;
    }
    /* header .topbar .britain, */
    header .topbar .col-md-10 > .contact-icons:not(.mail_ico) {
        display: none;
    }
    header .topbar .col-md-10 {
        text-align: left;
    }
    header .topbar a b {
        font-size: 12px;
        white-space: nowrap;
    }
    header .contact-icons.mail_ico {
        height: 30px;
        width: 30px;
        flex: 0 0 30px;
    }
    header .contact-icons.mail_ico svg {
        width: 14px;
        height: 14px;
    }

    /* Stack LOGIN above REGISTER vertically so both always fit on phones */
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 10px !important;
        padding: 2px 8px !important;
        height: 22px !important;
        min-width: 64px !important;
        border-width: 1px !important;
        letter-spacing: 0;
        white-space: nowrap !important;
        justify-content: center !important;
    }
    .logged_in li[style*="display: flex"] {
        margin-left: 4px !important;
        flex-shrink: 0 !important;
        align-items: stretch !important;
    }
    /* Auth buttons must never be clipped — drop the search icon on phones to
     make room (search remains accessible from the products page). */
    .logged_in li.search-item {
        display: none !important;
    }
    .logged_in {
        gap: 8px;
    }
    .logged_in svg {
        width: 20px;
        height: 20px;
    }

    /* Tighter logo */
    .logo-wrap {
        max-width: 110px;
    }

    /* Keep the hamburger (.menu-toggle) visible — stellarnav has
     overflow:hidden which was clipping the toggle as the row got tighter. */
    .bottom_header .col-12.d-flex {
        gap: 6px;
    }
    .stellarnav {
        overflow: visible !important;
        flex: 0 0 auto;
        width: auto !important;
        min-width: 40px;
    }
    .stellarnav .menu-toggle {
        display: inline-block !important;
        padding: 4px 6px !important;
        white-space: nowrap;
        margin-right: -50px;
    }
    .stellarnav .menu-toggle span.bars {
        margin-right: 0;
    }
    .nav-right {
        flex-shrink: 1;
        min-width: 0;
    }
    .logged_in {
        gap: 8px;
    }
    .logged_in li a.btn-outline-light {
        font-size: 11px !important;
        padding: 4px 8px !important;
        height: 26px !important;
    }

    /* Hero: stop the giant padding-top pushing content off the slide */
    .hero-content {
        padding-top: 180px !important;
        padding-bottom: 50px !important;
        padding-inline: 20px !important;
    }
    .hero-h1,
    .hero-h1 span,
    .hero-h1 span span {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
    .hero-eyebrow {
        font-size: 12px;
        margin-bottom: 8px;
    }
    .hero-sub {
        font-size: 13px;
        margin: 10px auto 18px;
    }
    .hero-btns {
        gap: 12px;
    }
    .hero-btns .btn {
        height: 42px;
        line-height: 40px;
        font-size: 12px;
        padding: 0 16px;
    }
    .hero-btns .btn svg {
        width: 28px;
        height: 28px;
    }

    .stellarnav.mobile.right > ul,
    .stellarnav.mobile.left > ul {
        max-width: 300px;
        width: 84vw;
    }
    .stellarnav.mobile li a {
        font-size: 13.5px;
        padding: 12px 18px !important;
    }
    .stellarnav.mobile ul ul li a {
        padding: 10px 18px 10px 30px !important;
        font-size: 12.5px;
    }

    .swiper-button-next:not(.tab-next):not(.application_tab *),
    .swiper-button-prev:not(.tab-prev):not(.application_tab *) {
        width: 32px !important;
        height: 32px !important;
    }
    .swiper-button-next:not(.tab-next):not(.application_tab *)::after,
    .swiper-button-prev:not(.tab-prev):not(.application_tab *)::after {
        font-size: 10px !important;
    }
    .application_tab .swiper-button-prev,
    .application_tab .swiper-button-next {
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
    .application_tab .tab-prev {
        left: 2px !important;
    }
    .application_tab .tab-next {
        right: 2px !important;
    }

    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 11px !important;
    }
}

@media (max-width: 575px) {
    .pagination .page-link {
        width: 100px !important;
    }
    .prod-img-box {
        padding: 30px 15px;
        height: 200px;
    }
    .expert-section .form-control {
        margin-bottom: 10px;
    }
    .ind-intro-section {
        padding: 30px 0 30px !important;
    }

    .ind-science-section {
        padding: 30px 0 !important;
    }

    .tabSwiper {
        margin-bottom: 20px !important;
    }

    .btn-buy {
        height: 41px !important;
        max-width: 203px !important;
    }

    .p1 {
        margin-top: 30px !important;
    }

    .products-section.secGap,
    .machines-section.secGap,
    .application_tab,
    .flame_technology,
    .flame-section,
    .about-section,
    .about-company-section,
    .expert-section {
        padding: 30px 0 !important;
    }

    .submit-btn {
        margin-bottom: 0px !important;
    }

    .mobile_wrap_Sec {
        .filter-icons-wrap {
            span {
                font-size: 13px !important;
            }
        }
    }

    .btn-buy-large {
        background: #2b2b2b !important;
        color: #fff !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 0 !important;
        text-transform: uppercase !important;
        height: 40px;
        line-height: 18px;
    }

    /* Address / payment radio cards: tighter padding when full width. */
    .cart-section .form-check.border {
        padding: 12px !important;
    }
    .cart-section .form-check-label {
        font-size: 13px;
    }
    .cart-section .info-section-title {
        font-size: 16px !important;
        margin-bottom: 14px !important;
    }
    .cart-section .profile-content-box {
        padding: 16px !important;
    }
    /* Guest-form field labels (Full Name / Email / Address ...). */
    .cart-section .form-label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
    .cart-summary-box .cart-summary-title {
        font-size: 18px !important;
    }

    .cart-section .col-lg-6.text-center.py-5 h1 {
        font-size: 22px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 > p {
        font-size: 14px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 .profile-content-box .d-flex {
        font-size: 14px !important;
    }
    .cart-section
        .col-lg-6.text-center.py-5
        .profile-content-box
        .d-flex:last-child {
        font-size: 15px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 i.bi-check-lg {
        font-size: 30px !important;
    }

    .inst_title h2,
    .inst-main-title {
        font-size: 22px !important;
    }
    .inst-main-sub {
        font-size: 13px !important;
    }
    .inst-block-title {
        font-size: 17px !important;
    }
    .inst-block-text,
    .inst-block-text p,
    .inst-block-text strong {
        font-size: 13px !important;
    }

    .login-section h1 {
        font-size: 24px !important;
    }
    .login-section .login-box-title {
        font-size: 19px !important;
    }
    .login-section .reg-checkbox-label {
        font-size: 13px !important;
    }
    .login-section .login-forgot-link {
        font-size: 12px !important;
    }
    .login-section .login-register-text {
        font-size: 14px !important;
    }
    .login-section .login-input {
        height: 50px !important;
        font-size: 13px !important;
    }
    .login-section .login-btn {
        height: 50px !important;
        font-size: 13px !important;
        margin-top: 32px !important;
    }

    .reg-section h1 {
        font-size: 24px !important;
    }
    .reg-section .reg-section-title {
        font-size: 16px !important;
    }
    .reg-section .reg-toggle-btn {
        font-size: 11px !important;
        padding: 7px 12px !important;
    }
    .reg-section .reg-login-link {
        font-size: 14px !important;
    }
    .reg-section .reg-input {
        height: 46px !important;
        font-size: 13px !important;
        border: 1px solid;
    }
    /* Keep the register password eye centered in the 46px field */
    .reg-section .position-relative .password-toggle {
        top: 23px;
        right: 20px;
    }
    .reg-section .reg-submit-btn {
        height: 48px !important;
        font-size: 13px !important;
    }

    .profile-section .profile-title {
        font-size: 22px !important;
    }
    .profile-section .info-section-title {
        font-size: 16px !important;
    }
    .profile-section .info-item {
        font-size: 13px !important;
    }
    .profile-section .order-details h5,
    .profile-section .order-details h4 {
        font-size: 15px !important;
    }
    .profile-section .order-price {
        font-size: 15px !important;
    }
    .profile-section .detail-col .label,
    .profile-section .detail-col .value {
        font-size: 13px !important;
    }
    .profile-section .payment-table th,
    .profile-section .payment-table td {
        font-size: 13px !important;
    }
    .profile-section .status-badge {
        font-size: 12px !important;
    }

    .coupon-table td {
        font-size: 12px;
    }

    .ticket_form .form-label {
        font-size: 13px !important;
    }
    .ticket_form input:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-control:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-select {
        height: 48px !important;
        font-size: 13px !important;
    }
    /* Make the primary submit button fill the width on phones. */
    .reg-section .btn-submit-service {
        width: 100% !important;
        min-width: 0 !important;
    }
    .reg-section .btn-outline-secondary {
        font-size: 12px !important;
    }
    .ticket-list-item__subject {
        font-size: 0.85rem;
    }
    .ticket-list-item__preview {
        font-size: 0.74rem;
    }

    .d-flex.align-items-center.justify-content-between.flex-wrap.gap-3 {
        justify-content: center !important;
        text-align: center !important;
    }

    .contact-submit-btn {
        background: #202020 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 17px 48px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: background 0.25s !important;
        margin-top: 10px !important;
        height: 48px !important;
        line-height: 1 !important;
    }

    .contact-form-title {
        font-size: 21px !important;
        margin-bottom: 15px !important;
        margin-left: 3px !important;
    }

    .flame-section {
        margin-top: -14px !important;
    }

    .prod-cat,
    .prod-name h4 {
        font-size: 12px !important;
    }

    .faq-content-section .sec_title h2 {
        font-size: 22px !important;
    }
    .faq-content-section .sec_title p {
        font-size: 13px !important;
    }
    .faq-content-section .faq-text {
        font-size: 14px !important;
    }
    .faq-content-section .faq-answer p {
        font-size: 13px !important;
    }
    .hero-swiper {
        width: 100%;

        &.swiper-rtl .swiper-button-prev,
        &.swiper-rtl ~ .swiper-button-prev,
        & ~ .swiper-button-next,
        .swiper-button-next {
            left: auto;
            right: var(--swiper-navigation-sides-offset, 2%);
        }
        &.swiper-rtl .swiper-button-next,
        &.swiper-rtl ~ .swiper-button-next,
        & ~ .swiper-button-prev,
        .swiper-button-prev {
            left: 2%;
            right: auto;
        }
    }
    .machine-card .machine-img-wrap img {
        height: 200px;
    }
}

/* ========================================================
   HEADER + HERO — SMALL-PHONE BREAKPOINTS 480 / 420 / 390 / 375 / 320
   Only the shared header (topbar, logo, auth, hamburger, search)
   and the home hero. Placed last so they win over 576/575.99.
   ======================================================== */
/* Phones (<=480px): pin every home section heading to a uniform 20px. */
/* Phones (<=480px): make every home-page CTA button the SAME size & tidy.
   (Sections otherwise vary: products/flame 64px, machines 50px, others 43px.)
   The hero banner buttons keep their own stacked treatment and are excluded. */
@media (max-width: 480px) {
    .p2 {
        margin-top: -7px !important;
    }

    .btn-buy {
        height: 41px !important;
        max-width: 150px !important;
    }

    .stellarnav .menu-toggle {
        margin-right: 0px !important;
    }

    /* Header */
    .logo-wrap {
        max-width: 100px;
    }
    header .topbar a b {
        font-size: 11px;
    }
    header .contact-icons.mail_ico {
        height: 30px;
        width: 30px;
        flex: 0 0 30px;
    }
    .logged_in {
        gap: 6px;
    }
    .logged_in svg {
        width: 19px;
        height: 19px;
    }
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 9px !important;
        padding: 2px 7px !important;
        min-width: 60px !important;
    }

    /* Hero */
    .hero-content {
        padding-top: 160px !important;
        padding-inline: 18px !important;
    }
    .hero-eyebrow {
        font-size: 11px;
    }
    .hero-h1,
    .hero-h1 span,
    .hero-h1 span span {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
    .hero-sub {
        font-size: 13px;
    }
    .hero-btns {
        gap: 12px;
    }
    .hero-btns .btn {
        font-size: 12px;
        padding: 0 16px;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    .products-section > .container h1,
    .products-section > .container h2,
    .machines-section h2,
    .application_tab > .container h2,
    .flame_technology .sec_title h2,
    .flame-section > .container h2,
    .about-section h2,
    .about-company-section h2,
    .expert-section h2 {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    .products-section .btn,
    .machines-section .btn,
    .application_tab .btn,
    .flame-section .btn,
    .expert-section .submit-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 46px !important;
        line-height: normal !important;
        padding: 0 24px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Scale the inline circular arrow icon down to match the smaller button. */
    .products-section .btn svg,
    .application_tab .btn svg,
    .flame-section .btn svg {
        width: 26px;
        height: 26px;
        margin-left: 0 !important;
    }

    /* Buy Now / Compare Models share their row equally so the pair is balanced. */
    .machine-info .d-flex .btn {
        flex: 1 1 0;
        padding-inline: 12px !important;
    }

    .inner_banner {
        &.contents {
            .banner_title_top {
                font-size: 14px !important;
                margin-bottom: 0px !important;
            }
        }
    }

    .inst_title h2,
    .inst-main-title {
        font-size: 20px !important;
    }
    .inst-block-title {
        font-size: 16px !important;
    }

    .login-section h1 {
        font-size: 22px !important;
    }
    .login-section .login-box-title {
        font-size: 18px !important;
    }
    .login-section .login-input {
        height: 48px !important;
        border: 1px solid;
    }
    .login-section .login-btn {
        height: 48px !important;
    }

    .reg-section h1 {
        font-size: 18px !important;
    }
    .reg-section .reg-section-title {
        font-size: 15px !important;
        margin-left: 6px;
    }
    .reg-section .reg-submit-btn {
        height: 46px !important;
    }

    .profile-section .profile-title {
        font-size: 20px !important;
    }
    .profile-section .info-section-title {
        font-size: 15px !important;
    }

    /* Stack the ticket card's right meta (date + arrow) under the content
     so nothing is cramped against the truncated subject. */
    .ticket-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .ticket-list-item__right {
        align-self: flex-end;
    }
    .ticket_form input:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-control:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-select {
        height: 46px !important;
        padding: 0 18px !important;
        border: 1px solid;
    }

    .tab-item span {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    .filter-tag {
        font-size: 13px !important;
    }
    .clear-all-btn {
        font-size: 13px !important;
    }
    /* "Active Filters:" label */
    .active-filters-bar .text-muted.small {
        font-size: 12px !important;
    }

    .contentSwiper {
        & .content {
            h6 {
                font-size: 14px;
            }
        }
    }

    .breadcrumb {
        font-size: 12px !important;
    }

    .btn {
        text-align: center !important;
        padding: 0 16px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
        display: block !important;
        line-height: 38px !important;
        height: 39px !important;
        font-weight: 500 !important;
        border-width: 1px !important;
        text-transform: uppercase !important;

        -webkit-border-radius: 8px !important;
        -moz-border-radius: 8px !important;
        -ms-border-radius: 8px !important;
        -o-border-radius: 8px !important;
    }

    .product-card h5 {
        font-size: 16px !important;
    }

    .logged_in {
        & li {
            &:last-child {
                a {
                    width: 40px !important;
                    height: 40px !important;
                    border: 2.5px solid #ffffff !important;
                    border-radius: 50% !important;
                    display: flex !important;
                    justify-content: center !important;
                    align-items: center !important;
                }
            }
        }
    }

    .hero-sub {
        margin: 15px 0 20px !important;
        max-width: 219px !important;
        font-size: 14px !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 430px) {
    .expert-title::before {
        left: 2%;
    }

    .inner_banner {
        h1 {
            font-size: 24px;
        }
    }

    .expert-title::after {
        right: 2%;
    }

    .login-section {
        h1 {
            font-size: 26px;
        }
    }
}

/* Product listing (<=420px): shrink the card "Buy Now" / "View Product"
   buttons and the pagination prev/next arrows. Scoped to .prod-actions /
   .icon-link so other pages' .btn-buy buttons are untouched. */
@media (max-width: 420px) {
    .logo-wrap img {
        width: 114px !important;
    }

    /* Header */
    .logo-wrap {
        max-width: 92px;
    }
    header .topbar a b {
        font-size: 10px;
    }
    .logged_in {
        gap: 5px;
    }
    .logged_in svg {
        width: 18px;
        height: 18px;
    }
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 9px !important;
        padding: 2px 6px !important;
        min-width: 56px !important;
    }
    /* Keep the hamburger comfortably tappable */
    .stellarnav .menu-toggle {
        padding: 4px 6px !important;
    }

    /* Hero */
    .hero-content {
        padding-top: 150px !important;
        padding-inline: 16px !important;
    }
    .hero-h1,
    .hero-h1 span,
    .hero-h1 span span {
        font-size: 22px !important;
    }
    .hero-sub {
        font-size: 12px;
    }
    .hero-btns {
        gap: 10px;
    }
    .hero-btns .btn {
        font-size: 11px;
        padding: 0 14px;
    }

    .prod-actions .btn-buy,
    .prod-actions .btn-outline {
        height: 34px !important;
        line-height: 34px !important;
        font-size: 9px !important;
        max-width: 100% !important;
    }

    /* Pagination previous / next arrows */
    .pagination .page-link.icon-link {
        height: 32px !important;
        width: 32px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 390.99px) {
    header .contact-icons.mail_ico {
        position: absolute;
        left: 20px;
    }

    .profile-section .profile-tab.active {
        font-size: 12px;
    }

    .footer {
        .footer-card {
            padding: 30px 25px;
        }
        padding: 30px 0 20px;
    }
}

@media (max-width: 390px) {
    .btn-buy {
        height: 50px !important;
        max-width: 125px !important;
    }

    .info-section-title {
        font-size: 16px !important;
    }

    .logged_in svg {
        width: 17px;
        height: 17px;
        margin-left: -17px !important;
    }

    .logged_in li[style*="display: flex"] {
        margin-left: -10px !important;
    }

    .login-forgot-link {
        font-size: 10px !important;
    }

    /* Header */
    .logo-wrap {
        max-width: 88px;
    }
    header .contact-icons.mail_ico {
        height: 28px;
        width: 28px;
        flex: 0 0 28px;
    }
    .logged_in {
        gap: 4px;
    }
    .logged_in svg {
        width: 17px;
        height: 17px;
    }
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 8px !important;
        padding: 2px 5px !important;
        min-width: 52px !important;
    }

    /* Hero */
    .hero-content {
        padding-top: 140px !important;
    }
    .hero-eyebrow {
        font-size: 10px;
    }
    .hero-h1,
    .hero-h1 span,
    .hero-h1 span span {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    .hero-sub {
        font-size: 12px;
    }

    .btn-buy {
        height: 40px !important;
        max-width: 122px !important;
    }

    .reg-section h1 {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 380px) {
    .logged_in {
        gap: 6px;
    }
    .logged_in svg {
        width: 18px;
        height: 18px;
    }
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 9px !important;
        padding: 2px 6px !important;
        height: 20px !important;
        min-width: 58px !important;
    }
    .logged_in li[style*="display: flex"] {
        gap: 3px !important;
    }
    .logo-wrap {
        max-width: 95px;
    }
    header .topbar .contact-icons {
        max-width: 110px;
        font-size: 10px;
    }
    header .topbar a b {
        font-size: 10px;
    }
}

@media (max-width: 375px) {
    .stellarnav .menu-toggle {
        margin-right: 17px !important;
    }

    /* Header */
    .logo-wrap {
        max-width: 84px;
    }
    .search-box {
        width: 94vw !important;
        max-width: 94vw !important;
    }

    /* Hero */
    .hero-content {
        padding-top: 135px !important;
        padding-inline: 14px !important;
    }
    .hero-h1,
    .hero-h1 span,
    .hero-h1 span span {
        font-size: 19px !important;
    }
    .hero-sub {
        max-width: 280px;
    }

    .expert-title::before,
    .expert-title::after {
        display: none !important;
    }

    .reg-section h1 {
        font-size: 14px !important;
    }

    .filter-tag {
        font-size: 12px !important;
    }
}

@media (max-width: 360px) {
    .footer .footer-bottom {
        font-size: 10px !important;
        padding: 14px 4px !important;
    }

    .profile-tab {
        font-size: 12px;
        width: auto;
        max-width: none;
        padding: 10px 10px;
    }

    .otp-card h3 {
        font-size: 19px;
    }

    .resend-text {
        font-size: 16px;
    }

    .otp-inputs {
        gap: 10px;
    }

    .otp-box {
        width: 40px;
        height: 42px;
        font-size: 16px;
    }
}

@media (max-width: 330px) {
    .profile-section .profile-tab.active {
        font-size: 11px;
    }

    .profile-tab {
        font-size: 11px;
    }
}

/* Small phones (<=320px): shrink home headings and CTA buttons further. */
@media (max-width: 320px) {
    .logged_in .register-btn {
        font-size: 11px !important;
        padding: 2px 5px !important;
        height: 28px !important;
        line-height: normal !important;
        margin: 0 !important;
    }

    /* Header */
    .logo-wrap {
        max-width: 78px;
    }
    header .topbar a b {
        font-size: 9px;
    }
    .logged_in {
        gap: 3px;
    }
    .logged_in svg {
        width: 16px;
        height: 16px;
    }
    .logged_in li a.btn-outline-light,
    .logged_in li a.btn-light {
        font-size: 8px !important;
        padding: 2px 4px !important;
        height: 20px !important;
        min-width: 48px !important;
    }

    /* Hero — stack the CTA buttons so they never clip */
    .hero-content {
        padding-top: 120px !important;
        padding-bottom: 35px !important;
        padding-inline: 12px !important;
    }
    .hero-eyebrow {
        font-size: 10px;
    }
    .hero-h1,
    .hero-h1 span,
    .hero-h1 span span {
        font-size: 18px !important;
        line-height: 1.2 !important;
    }
    .hero-sub {
        font-size: 11px;
    }
    .hero-btns {
        gap: 8px;
        flex-direction: column;
    }
    .hero-btns .btn {
        width: 100%;
        max-width: 218px;
        margin-inline: auto;
    }

    .logo-wrap img {
        width: 90px !important;
    }

    .swiper-button-next:not(.tab-next):not(.application_tab *),
    .swiper-button-prev:not(.tab-prev):not(.application_tab *) {
        width: 28px !important;
        height: 28px !important;
        margin-top: 5px !important;
    }

    .reg-checkbox-label {
        font-size: 11px !important;
    }

    .reg-checkbox-label {
        font-size: 9px !important;
    }

    .info-section-title {
        font-size: 13px !important;
    }

    .order-details h5 {
        font-size: 12px;
    }

    .btn {
        font-size: 9px !important;
    }

    /* All home-page section headings -> 14px */
    .products-section > .container h1,
    .products-section > .container h2,
    .machines-section h2,
    .application_tab > .container h2,
    .flame_technology .sec_title h2,
    .flame-section > .container h2,
    .about-section h2,
    .about-company-section h2,
    .expert-section h2 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* Inner-page banner heading keeps shrinking at the smallest width. */
    .inner_banner h1 {
        font-size: 22px !important;
    }

    /* Every home-page CTA button -> smaller box + font */
    .products-section .btn,
    .machines-section .btn,
    .application_tab .btn,
    .flame-section .btn,
    .expert-section .submit-btn {
        height: 38px !important;
        padding: 0 16px !important;
        font-size: 11px !important;
        gap: 6px;
    }
    .products-section .btn svg,
    .application_tab .btn svg,
    .flame-section .btn svg {
        width: 20px;
        height: 20px;
    }

    .p2 {
        margin-top: -35px !important; /* adjust as needed */
    }

    .cart-section .cart-heading {
        font-size: 16px !important;
    }
    .cart-section .info-section-title {
        font-size: 15px !important;
    }
    .cart-section .profile-content-box {
        padding: 14px !important;
    }
    .cart-section .form-label {
        font-size: 12px !important;
    }
    .cart-summary-box {
        padding: 16px !important;
    }
    /* Summary line items + rows stay readable but compact. */
    .cart-summary-box .cart-summary-row,
    .cart-summary-box .d-flex {
        font-size: 13px !important;
    }
    .cart-summary-box .btn-buy.w-100 {
        height: 44px !important;
        line-height: 44px !important;
        font-size: 13px !important;
    }

    .cart-section .col-lg-6.text-center.py-5 h1 {
        font-size: 18px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 > p {
        font-size: 13px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 .profile-content-box .d-flex {
        font-size: 13px !important;
    }
    .cart-section
        .col-lg-6.text-center.py-5
        .profile-content-box
        .d-flex:last-child {
        font-size: 14px !important;
    }
    .cart-section .col-lg-6.text-center.py-5 i.bi-check-lg {
        font-size: 26px !important;
    }

    .inst_title h2,
    .inst-main-title {
        font-size: 18px !important;
        margin-top: 25px;
    }
    .inst-main-sub {
        font-size: 12px !important;
    }
    .inst-block-title {
        font-size: 15px !important;
    }
    .inst-block-text,
    .inst-block-text p,
    .inst-block-text strong {
        font-size: 12px !important;
    }

    .inst-video-section {
        padding: 0px 0 0 !important;
        background: #fff !important;
    }

    h1 {
        font-size: 19px !important;
    }

    .login-section h1 {
        font-size: 18px !important;
    }
    .login-section .login-box-title {
        font-size: 16px !important;
    }
    .login-section .reg-checkbox-label {
        font-size: 12px !important;
    }
    .login-section .login-forgot-link {
        font-size: 9px !important;
    }
    .login-section .login-register-text {
        font-size: 13px !important;
    }
    .login-section .login-input {
        height: 44px !important;
        font-size: 12px !important;
        padding: 0 24px !important;
    }
    .login-section .login-btn {
        height: 44px !important;
        font-size: 12px !important;
    }

    .reg-section h1 {
        font-size: 18px !important;
    }
    .reg-section .reg-section-title {
        font-size: 14px !important;
    }
    .reg-section .reg-toggle-btn {
        font-size: 10px !important;
        padding: 6px 8px !important;
    }
    .reg-section .reg-login-link {
        font-size: 13px !important;
    }
    .reg-section .reg-input {
        height: 42px !important;
        font-size: 12px !important;
        padding: 0 18px !important;
    }
    /* Keep the register password eye centered in the 42px field */
    .reg-section .position-relative .password-toggle {
        top: 21px;
        right: 18px;
    }
    .reg-section .reg-submit-btn {
        height: 42px !important;
        font-size: 12px !important;
    }

    .profile-section .profile-title {
        font-size: 18px !important;
        margin: auto;
    }
    .profile-section .profile-tab {
        font-size: 12px !important;
    }
    .profile-section .info-section-title {
        font-size: 14px !important;
    }
    .profile-section .info-item {
        font-size: 12px !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 10px 18px !important;
    }
    .profile-section .password-toggle {
        height: 46px;
    }
    .profile-section .btn-edit-details {
        font-size: 12px !important;
    }
    .profile-section .order-details h5,
    .profile-section .order-details h4 {
        font-size: 14px !important;
    }
    .profile-section .order-price {
        font-size: 14px !important;
    }
    .profile-section .detail-col .label,
    .profile-section .detail-col .value {
        font-size: 12px !important;
    }
    .profile-section .payment-table th,
    .profile-section .payment-table td {
        font-size: 12px !important;
    }
    .profile-section .status-badge {
        font-size: 11px !important;
        padding: 4px 12px !important;
    }

    .ticket_form .form-label {
        font-size: 12px !important;
    }
    .ticket_form input:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-control:not([type="checkbox"]):not([type="radio"]),
    .ticket_form .form-select {
        height: 44px !important;
        font-size: 12px !important;
        padding: 0 16px !important;
    }
    .ticket_form textarea.form-control,
    .input_box textarea {
        font-size: 12px !important;
        padding: 12px 16px !important;
    }
    .reg-section .form-check-label {
        font-size: 10px !important;
    }
    .reg-section .btn-submit-service {
        height: 46px !important;
        line-height: 44px !important;
        font-size: 12px !important;
    }
    .reg-section .btn-outline-secondary {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
    .ticket-list-item {
        padding: 12px 14px;
    }
    .ticket-list-item__subject {
        font-size: 0.8rem;
    }
    .ticket-list-item__preview {
        font-size: 0.7rem;
    }
    .ticket-id {
        font-size: 0.68rem;
    }
    .tkt-badge,
    .tkt-priority,
    .tkt-tag {
        font-size: 0.58rem;
        padding: 2px 7px;
    }

    .faq-content-section .sec_title h2 {
        font-size: 18px !important;
    }
    .faq-content-section .sec_title p {
        font-size: 12px !important;
    }
    .faq-content-section .faq-text {
        font-size: 13px !important;
    }
    .faq-content-section .faq-answer p {
        font-size: 12px !important;
    }
}