/* ================= VARIABLES ================= */
:root {
    --font-primary: 'Lexend Deca', sans-serif;
    --font-secondary: 'Outfit', sans-serif;

    --color-primary: #E8363C;
    --color-secondary: #FDEEEE;
    --color-text: #808285;
    --color-black: #000000;
    --color-white: #ffffff;
}

@media screen and (max-width: 991px) {
    header {
        position: static;
    }

    header .container {
        border-radius: 0;
        margin-top: 0;
        box-shadow: none;
        background: transparent;
    }

    header .navbar {
        box-shadow: inset 0 0 clamp(10px, 1vw, 15px) rgba(0, 0, 0, 0.2);
    }

    header .modal-backdrop.show {
        opacity: 0;
        z-index: -1;
    }

    header .offcanvas {
        width: 100% !important;
        background: var(--color-secondary);
    }

    header .navbar-toggler {
        transition: none;
        border: 0;
        padding: 0;
    }

    header .offcanvas .header-num {
        margin-top: 20px;
    }

    header .offcanvas .nav-link.active {
        color: var(--color-primary);
        font-weight: 500;
    }

    .why-choose-us {
        padding: clamp(30px, 6vw, 50px) 0;
        padding-top: clamp(30px, 12vw, 100px);
        padding-bottom: clamp(30px, 2vw, 10px);
    }

    .why-choose-box {
        min-height: unset;
    }

    .why-choose-box.box-1,
    .why-choose-box.box-4 {
        transform: unset;
        margin-top: unset;
    }

    .solutions .head-wrapper {
        text-align: center;
    }

    .solutions .solution-boxes-row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .solutions .solution-boxes-row .solution-box {
        padding-top: clamp(30px, 4vw, 50px);
        height: unset;
        padding-bottom: 30px;
    }

    .solutions .solution-boxes-row .box-1,
    .solutions .solution-boxes-row .box-2,
    .solutions .solution-boxes-row .box-3 {
        width: 90%;
    }

    .process-box .number-box h6 {
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .center-line {
        display: none !important;
    }

    .process-box .content-box {
        padding: 50px;
        padding-top: 10px;
    }

    .feature-box .item {
        justify-content: center;
        align-items: center;
    }

    .feature-box.left .item-2 {
        margin-left: 0;
    }

    .features .center-box {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0;
    }

    .feature-box.right .item-2 {
        margin-left: 0;
    }

    .footer-content .link-widget ul {
        margin-bottom: 15px;
    }

    .sec-copyright .content {
        flex-direction: column;
        text-align: center;
    }

    .about .right {
        padding-left: 0;
        padding-top: 30px;
    }

    .countries .countries-row .images-box {
        height: clamp(180px, 40vw, 250px);
    }

    .country-img {
        width: clamp(25px, 6vw, 35px);
    }

    .country-img.country-center {
        width: clamp(60px, 15vw, 80px);
    }

    .timeline {
        margin-top: 20px;
    }

    .timeline::before,
    .timeline-item::before {
        display: none !important;
    }

    .timeline .content {
        text-align: center;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .timeline-item {
        margin-bottom: 50px;
    }

    .timeline .image-card .cta-timeline {
        padding: 20px;
    }

    .payment-processing .head-wrapper {
        text-align: center;
        margin-bottom: 20px;
    }

    .payment-processing .head-wrapper .title {
        text-align: center;
    }

    .payment-processing .head-wrapper .btn-red {
        text-align: center;
        float: unset !important;
    }

    .payment-processing .row-container {
        margin: 5px;
        margin-top: clamp(30px, 5vw, 50px);
    }

    .payment-processing .row-container .content-box.center::before,
    .payment-processing .row-container .content-box.center::after {
        display: none !important;
    }

    .cta .head-wrapper {
        padding-right: 0;
        text-align: center;
        margin-bottom: 50px;
    }

    .contact-section {
        margin-top: -150px;
        padding: 10px;
    }

    .contact-section .head-wrapper {
        text-align: center;
    }

    .contact-section .contact-details {
        display: flex;
        flex-direction: column;
        float: unset;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    .contact-section .contact-details img {
        width: 20px;
    }

    .custom-checkbox {
        padding: 5px 0px;
    }

    .opt-text-contact {
        text-align: center;
    }
}