/* Big tablets to 1200px (width smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
    .row { padding: 0 2%; }
}


/* Small tablets to big tablets from 768 to 1023px */
@media only screen and (max-width: 1023px) {
    body { font-size: 16px; }
    
    header {
        height: 75vh;
    }

    .hero-section img {
        width: 95%;
        height: auto;
    }

    .about-img {
        position: absolute;
        top: 650px;
        width: 45%;
    }
}


/* Small phones to small tablets from 481 to 767px */
@media only screen and (max-width: 767px) {
    .row { padding: 0 4%; }

    .col {
        margin: 1% 0 1% 0;
        width: 100%;
    }

    section { padding: 30px 0; }

    h1 { font-size: 270%; }

    h3 { font-size: 130%; }

    h4, h5, h6 { font-size: 100%; }

    .btn {
        padding: 8px 15px;
        font-size: 16px;
    }

    .section-career input[type=submit] {
        padding: 8px 15px;
        font-size: 16px;
    }

    /*  Header  */
    .main-nav { display: none; }

    .mobile-nav-icon { display: inline-block; }

    .main-nav {
        float: left;
        margin-top: 30px;
        margin-left: 25px;
    }

    .main-nav li { display: block; }

    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }

    .sticky .main-nav { margin-top: 10px; }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 10px 0;
    }

    .sticky .mobile-nav-icon { margin-top: 17px; }

    .sticky .mobile-nav-icon i { color: var(--black); }

    .hero-section {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .hero-img {
        height: 100%;
        width: auto;
    }

    .hero-text-box { margin-top: 10px; }

    header { height: 80vh; }

    header nav { margin-bottom: 40px; }

    /*  About  */
    .about-img { display: none; }
    .section-about { text-align: center; }
    


    .box {
        height: auto;
        margin-bottom: 20px;
    }

    /*  Clients  */
    .last-img {
        width: 24%;
        margin: 0 auto;
    }

    .client-logos img {
        padding: 30px;
        width: 24%;
    }

    /*  Career  */
    .section-career { text-align: center; }

    .section-career img { display: none; }

    .career-heading { margin-bottom: 20px; }

    .career-text { margin-top: 0; }

    /*  Footer  */
    footer img { margin-bottom: 40px; }

}


/* Small phones from 0 to 480px */
@media only screen and (max-width: 480px) {
    section { padding: 25px 0; }
    
    h1 { font-size: 200%; }
    
    .pc-tab nav ul {
        flex-wrap: wrap;
    }
    
    .pc-tab nav ul li {
        justify-content: center;
        width: 100%;
        margin-bottom: 30px;
    }
    
    /*  Clients  */
    .client-logos img {
        padding: 30px;
        width: 49%;
    }
    
    div.coyright {
        height: 60px;
    }
    
}