/* ==== Small Desktop ==== */



/* ==== TABLET ==== */

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

    /* Adjusted for tablet devices */

    /* Styles for potraits */

    @media screen and (min-height: 740px) {

        .pri-cta {
            height: 48px;
        }

        .sec-cta {
            height: 48px;
        }

    }

    /* Styles for landscapes */

    @media screen and (max-height: 740px) {

        h1 {
            font-size: 2.5em; 
            margin: 24px 0 12px;
        }
        
        h2 {
            font-size: 2rem;
            margin: 20px 0;
        }
        
        h3 {
            font-size: 1.8rem;
            margin: 18px 0;
        }
        
        h4 {
            font-size: 1.6rem;
            margin: 16px 0;
        }
        
        h5 {
            font-size: 1.4rem;
            margin: 14px 0;
        }
        
        h6 {
            font-size: 1.2rem;
            font-weight: 100;
            margin: 12px 0;
        }
        
        p {
            font-size: 1.2rem;
            line-height: 1.6;
            margin: 12px 0;
        }

        /* CTAs */

        .pri-cta {
            width: 120px;
            height: 40px;
            margin: 10px 0;
            font-size: 0.9rem;
        }

        .sec-cta {
            width: 120px;
            height: 40px;
            margin: 10px 0;
            font-size: 0.9rem;
        }

    }

    /* LANDSCAPE ON MOBILE */

    @media screen and (max-height: 480px) {

        /* ==== HEADER ==== */
    
        .header {
            height: 20vh;
            padding: 0 5.5%;
        }
    
        .scroll-header {
            height: 18vh !important;
        }
    
        .scroll-header .logo img {
            width: 82%;
        }
    
        /* ==== HERO ==== */
        
        .hero .wrapper {
            min-height: 150vh;
        }
    
        .hero .content {
            width: 95.7%;
            padding-right: 1rem;
        }
    
        .hero p {
            width: 98%;
        }
    
        /* ==== ABOUT US ==== */
    
        .sect.about-us .image-box {
            height: 250px !important;
            background-position: top;
        }

        /* ==== COMPANIES ==== */

        .sect.comppanies .headline {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }

        .sect.comppanies img {
            width: 80% !important;
        }

        .sect.comppanies .row-1 {
            width: 90%;
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }

        /* ==== CONTACT US ==== */

        .sect.contact-us .wrapper {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        
        .sect.contact-us .text-box {
            padding-left: 5.65%;
            padding-right: 5.65%;
        }

        .contact-form {
            border-radius: 10px;
            padding: 0.8rem 2rem 1.5rem !important;
        }

        .contact-form .input-group textarea {
            width: 100%;
            height: 100px;
        }

        /* ==== VIDEO BOX ==== */

        .video-box {
            width: 100%;
            height: 38vh !important;
            position: relative;
        }

        .play-button {
            width: 40px;
            height: 40px;
        }

        .play-button svg {
            width: 20px;
            height: 20px;
        }

        /* ==== FOOTER ==== */

        footer .logo img {
            width: 54px !important;
        }
    
    }
    
    /* ==== HEADER ==== */
    
    header .nav-list .nav-item {
        display: none;
    }

    .header {
        padding: 0 5.5%;
    }

    .header .logo img {
        width: 100%;
        margin-left: -4px;
    }

    .scroll-header {
        height: 10vh;
    }

    .scroll-header .logo img {
        width: 84%;
    }

    /* ==== SIDE MENU ==== */

    .side-menu {
        width: 100%;
        min-height: 100vh;
        max-height: 110vh;
    }

    .side-menu .wrapper {
        width: 460px;
        height: 100%;
        padding: 4rem 4rem 3rem;
        justify-content: space-between;
    }

    .mobile-nav {
        width: 100%;
        display: block;
    }

    .mobile-nav .nav-list .nav-item {
        width: 100%;
        height: 50px;
        margin: 22px 0;
    }

    .mobile-nav .nav-list .nav-item a {
        font-size: 1.6rem;
        padding: 30px 0 !important;
        color: #000 !important;
    }

    .side-menu .row-1 {
        order: 2;
        opacity: 0.8;
        width: 100%;
        height: 200px;
        padding-top: 20px;
    }

    .side-menu .row-1 img {
        width: 100%;
        height: 100%;
    }

    .side-menu .row-2 {
        padding-top: 3.5rem;
    }

    /* ==== HERO ==== */
    
    .hero .wrapper {
        height: 100vh;
    }

    .hero .content {
        width: 94.7%;
    }

    .hero p {
        width: 88%;
        margin-bottom: 2.2rem;
    }

    /* ==== ABOUT US ==== */

    .sect.about-us .wrapper {
        width: 92.7%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .sect.about-us .image-box {
        margin-top: 1rem;
        height: 30vh;
    }

    .sect.about-us .text-box  {
        width: 100%;
    }

    /* ==== COMPANIES ==== */

    .sect.comppanies {
        padding-bottom: 2.85rem;
    }

    .sect.comppanies .headline {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .sect.comppanies .row-1 {
        width: 100%;
        margin: 3.52rem auto 3.5rem;
    }

    /* ==== CONTACT US ==== */

    .sect.contact-us .wrapper {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .sect.contact-us .text-box {
        padding-left: 2.65%;
        padding-right: 2.65%;
    }

    .contact-form {
        border-radius: 10px;
        padding: 1rem 2rem 2rem !important;
    }

    .contact-form .input-group textarea {
        width: 100%;
        height: 100px;
    }

    .contact-form .submit-btn,
    .contact-form .cancel-btn {
        height: 48px;
    }

    /* ==== VIDEO BOX ==== */

    .video-box {
        width: 100%;
        height: 20vh;
        position: relative;
    }

    /* ==== Footer ==== */

    footer .logo img {
        width: 64px !important;
    }

    footer .logo {
        margin-bottom: 0.8rem;
    }

    footer .row-1 {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    footer .ext-link-box {
        margin-top: 0.8rem;
    }

}


/* ============ MOBILE ============ */

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

    /* Adjusted for mobile devices */

    html {
        font-size: 16px; 
    }
    
    h1 {
        /* font-size: 2.448em; */
        font-size: 2.5em;
        margin: 20px 0 10px;
    }
    
    h2 {
        font-size: 1.953rem;
    }
    
    h3 {
        font-size: 1.629rem;
    }
    
    h4 {
        font-size: 1.35rem;
    }
    
    h5 {
        font-size: 1.125rem;
    }
    
    h6 {
        font-size: 1rem;
        font-weight: 300;
    }
    
    p {
        font-size: 1rem;
        line-height: 1.5;
        margin: 10px 0; 
    }
    
    .small-text {
        font-size: 0.833rem;
    }

    /* ==== HEADER ==== */

    .header {
        padding: 0 5.5%;
    }

    .scroll-header {
        height: 10vh;
    }

    .scroll-header .logo img {
        width: 84%;
    }

    /* ==== SIDE MENU ==== */

    .side-menu {
        width: 100%;
        min-height: 100vh;
        max-height: 110vh;
    }

    .side-menu .wrapper {
        width: 100%;
        height: 100%;
        padding: 3rem 2.5rem 3rem;
        justify-content: space-between;
    }

    .mobile-nav .nav-list .nav-item {
        width: 100%;
        height: 40px;
        margin: 22px 0;
    }

    .mobile-nav .nav-list .nav-item a {
        font-size: 1.35rem;
        padding: 20px 0 !important;
    }

    .side-menu .row-1 {
        width: 100%;
        height: 40px;
        padding-top: 20px;
    }

    .side-menu .row-1 img {
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .side-menu .row-2 {
        padding-top: 1.5rem;
    }

    .side-menu .row-2 h4 {
        font-size: 1.125rem !important;
    }

    .side-menu .social .icon {
        width: 24px !important;
    }

    /* for smaller screen heights */

    @media screen and (max-height: 740px) {

        .mobile-nav .nav-list .nav-item {
            width: 100%;
            height: 30px;
            margin: 18px 0;
        }

        .side-menu .row-1 {
            height: 10px;
            padding-top: 20px;
        }

    }

    /* ==== HERO ==== */
    
    .hero .wrapper {
        height: 96vh;
        background-color: #00000096;
    }

    .hero .content {
        width: 95.7%;
        padding-right: 1rem;
    }

    .hero h1 {
        font-size: 2.468em;
    }

    .hero p {
        width: 98%;
    }

    /* ==== ABOUT US ==== */

    .sect.about-us .wrapper {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .sect.about-us .image-box {
        margin-top: 0rem;
        /* margin-top: -0.88rem; */
        height: 30vh;
    }

    .sect.about-us .text-box  {
        width: 100%;
    }

    /* ==== COMPANIES ==== */

    .sect.comppanies .headline {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .sect.comppanies img {
        width: 80% !important;
    }

    .sect.comppanies .row-1 {
        width: 90%;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    /* ==== CONTACT US ==== */

    .sect.contact-us .wrapper {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    
    .sect.contact-us .text-box {
        padding-left: 5.65%;
        padding-right: 5.65%;
    }

    .contact-form {
        border-radius: 10px;
        padding: 0.8rem 2rem 1.5rem !important;
    }

    .contact-form .input-group textarea {
        width: 100%;
        height: 100px;
    }

    .contact-form .submit-btn,
    .contact-form .cancel-btn {
        height: 40px;
        width: 120px;
        border-radius: 20px;
    }

    /* ==== VIDEO BOX ==== */

    .video-box {
        width: 100%;
        height: 26vh;
        position: relative;
    }

    .play-button {
        width: 40px;
        height: 40px;
    }

    .play-button svg {
        width: 20px;
        height: 20px;
    }

    /* ==== FOOTER ==== */

    footer .logo img {
        width: 54px !important;
    }

    footer .logo {
        margin-bottom: 0.8rem;
    }

    footer h4 {
        font-size: 1.15rem;
    }

    footer .row-1 {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    footer .ext-link-box {
        margin-top: 0.8rem;
    }

    footer .about p {
        width: 80%;
    }

    footer .submit-btn {
        font-size: 1rem;
    }

    footer input {
        font-size: 1rem;
    }

    footer .email-field {
        padding-left: 18px;
        padding-right: 5rem;
        width: 90%;
        margin: 0 !important;
        outline: none;
        border-radius: 6px;
        margin-right: 1px !important;
    }

    footer .copy {
        font-size: 0.8rem;
        margin-bottom: 0rem;
        letter-spacing: 0.01em;
    }

    /* GENERAL STYLES */

    .pri-cta {
        height: 40px;
        margin: 10px 0;
        font-size: 1rem;
        border-radius: 20px;
    }

    .sec-cta {
        height: 40px;
        border-radius: 20px;
        margin: 10px 0;
        font-size: 1rem;
    }
    
}

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

    html {
        font-size: 94.7%; 
    }

    header img {
        padding: 4px 0;
        margin-top: 2px;
    }

    .header .logo img {
        width: 94%;
    }

    .scroll-header .logo img {
        width: 80%;
    }

    /*  */

    /* ==== VIDEO BOX ==== */

    .play-button {
        width: 30px;
        height: 30px;
    }

    .play-button svg {
        width: 10px;
        height: 10px;
    }

    /* ==== FOOTER ==== */

    footer .logo img {
        width: 44px !important;
    }

    @media screen and (max-width: 320px) {
        html {
            font-size: 74.7%; 
        }
    }

}