/* =====================================
    MEDIA QUERIES.
===================================== */

@media (max-width:1200px) {
    .container {
        max-width: 95%;
    }
    .image-badge {
        background-color: #FFF;
        position: absolute;
        bottom: 15px;
        left: 15px;
        margin-left: 0px;
    }
}

@media (max-width:1199px) {
    .hb-banner .spacing-lg {
        margin-top: 25px;
    }
}

@media (max-width:991px) {
    .pages-hero {
        height: 350px;
    }
    .top-header {
        display: none;
    }
    .experience-badge {
        width: 60%;
        left: 0px;
    }
    .why-us-content-layer {
        padding: 30px;
    }
    .why-us-content {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }
    hr.footer-divider {
        border-top: 1px solid rgba(18, 50, 84, 0.6);
        margin: 30px 0px 40px;
    }
    .top-footer {
        margin-bottom: 60px;
    }
    .home-about-alt .hb-banner {
        background-color: #FFF;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 0px;
        margin-top: 30px;
        border-right: none;
    }
    .fooler-left-col {
        padding-right: 0px;
    }
    .front-box {
        padding: 40px 60px;
    }
    .wi-left-layer {
        margin: 0px;
        position: relative;
        top: auto;
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        padding-right: 0%;
    }
    .wi-left-layer {
        padding: 0%;
    }
    .wide-info-section {
        background-color: #FFF!important;
        background-image: none;
        padding: 50px 0px 80px;
        background-color: var(--background-color)!important;
        margin: 0!important;
        padding: 0!important;
    }
    .upper-footer {
        margin: 0;
    }
    .wi-left-layer {
        margin-top: 40px;
    }
    .reverse-bg-serv {
        background-color: #FFF;
        background-image: none;
        padding: 50px 0px 80px;
        background-color: var(--background-color);
    }
    .front-box-layer {
        margin-top: 5rem;
    }
    .wsa-left {
        height: 550px!important;
    }
    .wsa-center,
    .wsa-right {
        height: unset!important;
    }
    .wsa-center-content {
        position: static!important;
        top: unset!important;
        left: unset!important;
        transform: none!important;
        text-align: center;
        padding: 0px;
    }
    .wsa-content {
        position: static!important;
        top: unset!important;
        -ms-transform: none!important;
        transform: none!important;
        padding: 34px 50px!important;
    }
    .mile-stone_container {
        display: block;
    }
    .mile-stone_container .testimonial-text {
        margin: 10px 0px;
    }
}

@media (max-width:767px) {
    .section-title {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .home-slider {
        width: 100%;
        height: 56vh;
    }
    .pages-title h1 {
        font-size: 30px;
        line-height: 35px;
    }
    .experience-badge {
        width: 70%;
    }
    .left-badge {
        width: 30%;
    }
    .right-badge {
        width: 70%;
    }
    .ws-why-us {
        padding: 40px 0px;
    }
    .front-box {
        padding: 40px 60px 45px;
    }
    .contact-right-layer {
        padding: 30px;
    }
    .service-box {
        margin: 10px 0px;
    }
}

@media (max-width:576px) {
    .section-title {
        width: 90%;
    }
    .error-page-content {
        position: absolute;
        padding: 0rem 3rem;
    }
    .error-page-content h1 {
        font-size: 6rem;
    }
    .experience-badge {
        width: 100%;
        bottom: 30px;
    }
    .left-badge .counter {
        font-size: 40px;
    }
    .left-badge {
        background-color: var(--secundary-color);
        float: left;
        width: 25%;
        height: 118px;
        position: relative;
        text-align: center;
        padding: 40px 20px;
    }
    .right-badge {
        background-color: #FFF;
        float: right;
        width: 75%;
        padding: 20px;
    }
    .about-logistic .ha-span-section {
        display: block !important;
    }
    .about-logistic .ha-span-section .ha-inner-bottom {
        margin-top: 15px;
    }
    .image-badge {
        background-color: #FFF;
        position: relative;
        bottom: auto;
        left: auto;
        margin-left: 0px;
        max-width: 100%;
        margin-top: 50px;
    }
    .sb-caption {
        bottom: 65px;
    }
    .main-text {
        position: absolute!important;
        white-space: initial!important;
        width: 314px!important;
        top: -47px!important;
        font-size: 29px!important;
        line-height: 44px!important;
        left: -2px!important;
    }
    .subtext {
        position: absolute!important;
        left: 12px!important;
    }
}

@media (max-width:480px) {
    .section-title {
        width: 95%;
    }
    .front-box {
        padding: 40px;
    }
}

@media (max-width:380px) {
    .experience-badge {
        background-color: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        position: absolute;
        bottom: 0px;
    }
    .left-badge {
        float: none;
        padding: 20px;
        height: auto;
    }
    .right-badge {
        float: none;
        padding: 15px;
    }
}

@media (min-width:768px) {
    .service-flex {
        display: flex!important;
    }
}