/* --- Desktop | 1200px and up ---- */

@media screen and (min-width: 1200px) {

    .container {
        max-width: 214rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

}


/* --- Laptop Landscope | 992px to 1199px ---- */

@media screen and (min-width: 992px) and (max-width: 1199px) {

    html {
        font-size: 0.45vw;
    }

    .container {
        max-width: 214rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

}


/* --- Tablet | 991px and down ---- */

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

    html {
        font-size: 0.6vw;
    }

    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .container-fluid {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .header_section {
        padding: 6rem 0rem;
    }

    .hero_text h2 {
        font-size: 11.2rem;
    }

    .scrolldown_btn img {
        width: 5rem;
    }

    .section2_wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 7rem;
    }

    .sec3_right {
        max-width: 100%;
    }

    .navbar {
        padding-left: 0!important;
    }

}


/* --- Mobile | 767px and down ---- */

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

    html {
        font-size: 0.65vw;
    }

    .container {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .hero_text h4 {
        font-size: 5rem;
    }

    .hero_text h2 {
        font-size: 9.6rem;
    }

    .scrolltop_btn {
        right: 3rem;
        bottom: 3rem;
    }

    .container-fluid {
        max-width: 540px;
        width: 100%;
        margin: 0 auto;
        padding: 0 2rem;
    }

    .header_section {
        padding: 6rem 0rem;
    }

    .scrolldown_btn img {
        width: 5rem;
    }

    .section2_wrapper {
        grid-template-columns: 1fr;
        grid-gap: 10rem;
    }

    .sec3_right {
        max-width: 100%;
    }

    .sec2_card p {
        font-size: 3.2rem;
    }

    .sec3_right ul li {
        font-size: 3rem;
    }

    .contact_text p {
        max-width: 100%;
        font-size: 2.8rem;
    }

    .contact_box {
        margin-top: 6rem;
    }

    .footer_text p {
        font-size: 2.5rem;
    }

    .contact_item label {
        font-size: 3rem;
    }

    .contact_item input {
        font-size: 3rem;
        height: 8rem;
    }

    .contact_item textarea {
        font-size: 3rem;
        height: 20rem;
    }

    .contact_btn button {
        font-size: 3rem;
    }

    .contact_text h3 {
        line-height: 1.1;
    }

    .contact_text h3 br {
        display: none;
    }

    .contact_text p::after {
        height: 2px;
    }

    .section-2_title h3 {
        font-size: 7rem;
    }

    .sec2_card {
        padding: 0rem 5rem 13rem;
    }

    .contact_text h3 {
        font-size: 6rem;
    }

}


/*----- xs devices 575px and down -----*/
@media screen and (max-width: 575px) {

    html {
        font-size: 1.2vw;
    }

    .sec3_right {
        padding: 10rem 6rem;
    }


}