/* max-width: 320 sm mobail screen

320px — 480px: Mobile devices.

481px — 768px: iPads, Tablets.

769px — 1024px: Small screens, laptops.

1025px — 1200px: Desktops, large screens.

1201px and more — Extra large screens, TV. */

@media (min-width: 1400px) {



    /* .container,

    .container-lg,

    .container-md,

    .container-sm,

    .container-xl,

    .container-xxl {

        max-width: 1600px;

    } */

}



@media screen and (min-width: 1025px) and (max-width:1440px) {



    /* .container,

    .container-lg,

    .container-md,

    .container-sm,

    .container-xl,

    .container-xxl {

        max-width: 1320px;

    } */



}



@media screen and (min-width:769px) and (max-width:1024px) {

    .header_logo {

        width: 155px;

    }



    .top_banner::before {

        width: 70%;

        background: linear-gradient(to right, #ffffffaf, #ffffff00), url(../img/banner.webp) no-repeat;

        background-size: cover;

        background-position: right bottom;

        z-index: -1;

    }



    .top_banner h1 {

        font-size: 45px;

        line-height: 1;

    }



    .top_banner h1 span {

        font-size: 37px;

    }



    .border_box {

        font-size: 14px;

    }



    .left_side_bg::before {

        width: 50%;

    }



    .left_side_bg {

        padding: 35px 0;

    }



    .left_side_cover .title {

        font-size: 45px;

    }



}



@media screen and (min-width:100px) and (max-width:912px) {

    .left_side_bg::before {

        height: 400px;

        width: 90%;

    }



    .left_side_cover_img {

        width: 100%;

        height: 400px;

        border-radius: 0;

    }



    .left_side_bg {

        padding: 420px 0 0;

    }



    .inner_tracking_area {

        padding: 20px;

    }



    .track_title {

        font-size: 25px;

    }



    .track_title::before {

        height: 25px;

        width: 128px;

    }



    .tracking_area {

        margin-top: -43px;

    }



    .top_banner::before {

        height: 545px;

        width: 100%;

        background: url(../img/banner.webp) no-repeat;

        background-size: cover;

        background-position: right bottom;

        z-index: -1;

    }



    .top_banner {

        height: 100%;

        padding: 50px 0 500px;

    }



    .navbar-nav {

        gap: 1.5rem;

        align-items: start;

        padding-top: 2rem;

    }

}



@media screen and (min-width:769px) and (max-width:820px) {}



@media screen and (min-width:577px) and (max-width:768px) {

    .title {

        font-size: 40px;

    }



    .client_logo {

        height: 85px;

    }



    .client_logo_table {

        grid-template-columns: repeat(3, 1fr);

    }



    .pickup_available_table {

        grid-template-columns: repeat(4, 1fr);

    }

}



@media screen and (max-width:576px) {

    .top_banner h1 {

        font-size: 45px;

        line-height: 1;

    }



    .top_banner h1 span {

        font-size: 40px;

    }



    .two_btns {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 1rem;

    }



    .top_banner::before {

        height: 345px;

    }



    .top_banner {

        height: 100%;

        padding: 50px 0 330px;

    }



    .inner_tracking_area {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        text-align: center;

    }



    .title {

        font-size: 30px;

    }



    .left_side_bg::before {

        height: 270px;

        width: 100%;

        border-radius: 0;

    }



    .left_side_cover_img {

        width: 100%;

        height: 270px;

        border-radius: 0;

    }



    .left_side_cover .title {

        font-size: 40px;

    }



    .left_side_bg {

        padding: 300px 0 0;

    }



    .mtb-80 {

        margin-top: 40px;

        margin-bottom: 40px;

    }



    .header_logo {

        width: 150px;

    }



    .service_box_body p {

        font-size: 16px;

    }



    .sub_title {

        font-size: 25px;

    }



    .client_logo {

        height: 85px;

    }



    .client_logo_table {

        grid-template-columns: repeat(2, 1fr);

    }



    .pickup_available_table {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media screen and (max-width:375px) {

    .top_banner p {

        font-size: 16px;

    }



    .two_btns {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    .top_banner h1 {

        font-size: 38px;

        line-height: 1;

    }



    .top_banner h1 span {

        font-size: 30px;

    }

}