@keyframes panBg {
    0%{
        background-position-x: 0%;
    }

    50%{
        background-position-x: 100%;
    }

    100%{
        background-position-x: 0%;
    }
}

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

    /* Home Page */

    .splash {
        width: 90%;
    }

    /* Instructions Page */

    .container{
        width: 70%;
    }

    #instruction-section{
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    #downloads-section{
        grid-template-columns: 1fr !important;
        
    }

    #downloads-section section{
        border-right: none;
        border-bottom: 1px solid green;
        margin: 20px auto;
    }

    /* Projects Page */



    /* Footer */

    .footer-top{
        grid-template-columns: 1fr 1fr;
    }

    .footer-top section{
        margin: 20px 0;
    }

    .contact-container{
        align-items: center !important;
    }

    .social-icons-container{
        width: 80%;
    }
}

/* Large devices (small laptops, 992px and up, but less than desktop) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Home Page */

    .splash {
        width: 90%;
    }


    /* Instructions Page */

    #instruction-section{
        grid-template-columns: 1fr 1fr !important;
    }

    #downloads-section{
        grid-template-columns: 1fr !important;
        
    }

    #downloads-section section{
        border-right: none;
        border-bottom: 1px solid green;
        margin: 20px auto;
    }

    /* Projects Page */

    .full-container{
        flex-direction: column;
        align-items: center;
    }

    .section-container{
        width: 60%;
    }

    .bg-large, .bg-small{
        height: 100%;
    }

    /* Videos page styles */

    .container{
        width: 90%;
    }

    #videos-section{
        grid-template-columns: 1fr !important;
    }

    #videos-section section{
        border-bottom: 1px solid green;
        margin-bottom: 10px;
        align-items: center;
        justify-content: center;
    }

    #videos-section iframe{
        margin: auto;
        width: 90% !important;
        aspect-ratio: 16/9;
        margin-bottom: 30px;        
    }

    #videos-section h4{
        width: 100%;
    }

    /* Footer */
    
    .footer-top{
        grid-template-columns: 1fr;
    }

    .footer-top section{
        margin: 20px 0;
    }

    .contact-container{
        align-items: center !important;
    }

    .social-icons-container{
        width: 40%;
    }

    .footer-top section{
        margin: 20px 0;
    }

    .contact-container{
        align-items: center !important;
    }

    .social-icons-container{
        width: 40%;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* Home Page */

    /* Instructions Page */

    #instruction-section{
        grid-template-columns: 1fr 1fr !important;
    }

    #downloads-section{
        grid-template-columns: 1fr !important;
        
    }

    #downloads-section section{
        border-right: none;
        border-bottom: 1px solid green;
        margin: 20px auto;
    }

    /* Projects Page */

    .full-container{
        flex-direction: column;
        align-items: center;
    }

    .section-container{
        width: 60%;
    }

    .bg-large, .bg-small{
        height: 100%;
    }

    /* Videos page styles */

    .container{
        width: 90%;
    }

    #videos-section{
        grid-template-columns: 1fr !important;
    }

    #videos-section section{
        border-bottom: 1px solid green;
        margin-bottom: 10px;
        align-items: center;
        justify-content: center;
    }

    #videos-section iframe{
        margin: auto;
        width: 90% !important;
        aspect-ratio: 16/9;
        margin-bottom: 30px;        
    }

    #videos-section h4{
        width: 100%;
    }

    /* Footer */

    .footer-top{
        grid-template-columns: 1fr;
    }

    .footer-top section{
        margin: 20px 0;
    }

    .contact-container{
        align-items: center !important;
    }

    .social-icons-container{
        width: 40%;
    }
    
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* Home Page */

    .splash{
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: left;
    }

    .splash section{
        border-bottom: 1px solid green;
        margin-bottom: 20px;
        width: 100%;
    }

    .splash-products{
        width: 100%;
        grid-template-columns: 1fr;
        margin: 40px 0;
        padding: 0;

    }

    .section-center{
        border-left: none !important;
        border-right: none !important;
    }

    .splash-gallery{
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .grid-3 section{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;    
    }

    /* Instructions Page */

    #instruction-section{
        grid-template-columns: 1fr !important;
    }

    #downloads-section{
        grid-template-columns: 1fr !important;
        
    }

    #downloads-section section{
        border-right: none;
        border-bottom: 1px solid green;
        margin: 20px auto;
    }

    /* Projects Page */

    .full-container{
        flex-direction: column;
        align-items: center;
    }

    .section-container{
        width: 60%;
    }

    .bg-large, .bg-small{
        height: 100%;
    }

    /* Videos page styles */

    .container{
        width: 90%;
    }

    #videos-section{
        grid-template-columns: 1fr !important;
    }

    #videos-section section{
        border-bottom: 1px solid green;
        margin-bottom: 10px;
        align-items: center;
        justify-content: center;
    }

    #videos-section iframe{
        margin: auto;
        width: 90% !important;
        aspect-ratio: 16/9;
        margin-bottom: 30px;        
    }

    #videos-section h4{
        width: 100%;
    }

    /* Footer */

    .footer-top{
        grid-template-columns: 1fr;
    }

    .footer-top section{
        margin: 20px 0;
    }

    .contact-container{
        align-items: center !important;
    }

    .social-icons-container{
        width: 40%;
    }
    
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {

    /* Main styles */

    .title{
        width: 90%;
        text-wrap: wrap;
        margin: 0 auto;
    }



    /* Nav styles */

    nav{
        height: 10vh;
    }

    .nav-left img{
        width: 100px;
    }

    .nav-desktop{
        display: none;
    }

    .burger{
        display: flex !important;
        flex-direction: column;
    }

    .burger .line{
        width: 40px;
        height: 4px;
        background-color: var(--primary-color-hover);
        border-radius: 2px;
        margin: 2px 0;
    }

    .nav-mobile-menu{
        background-color: var(--primary-color);
        padding: 30px;
    }

    .nav-mobile-menu ul{
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
        font-weight: bold;
        
        
    }

    .nav-mobile-menu ul li{
        list-style: none;
    }

    .nav-mobile-menu ul li a{
        font-family: 'montserrat', sans-serif;
        color: white;
        text-decoration: none;
        
    }

    footer{
        height: 100%;
    }

    .footer-top{
        width: 90%;
        grid-template-columns: 1fr;
    }

    .footer-top section{
        border-bottom: 1px solid white;
        margin-bottom: 20px;
        padding: 20px 0;
    }

    #footer-nav-links{
        align-items: flex-start;
    }

    /* Homepage styles */

    #video-bg{
        display: none;
    }

    .hero{
        height: 50vh;
        background-size: cover;
        animation: panBg linear 16s infinite;
    }


    .banner{
        flex-direction: column;
        text-align: center;
    }

    #play-video-main{
        transform: translateY(600px);
    }

    .splash{
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .splash section{
        border-bottom: 1px solid green;
        margin-bottom: 20px;
        width: 100%;
    }

    .splash-products{
        width: 100%;
        grid-template-columns: 1fr;
        margin: 40px 0;
        padding: 0;

    }

    .section-center{
        border-left: none !important;
        border-right: none !important;
    }

    .splash-gallery{
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Instrucitons page styles */

    #instruction-section{
        grid-template-columns: 1fr !important;
    }

    #downloads-section{
        grid-template-columns: 1fr !important;
        
    }

    #downloads-section section{
        border-right: none;
        border-bottom: 1px solid green;
        margin: 20px auto;
    }

    /* Projects page styles */

    .full-container{
        flex-direction: column !important;
    }

    .section-container{
        width: 100%;
    }

    /* Videos page styles */

    .container{
        width: 90%;
    }

    #videos-section{
        grid-template-columns: 1fr !important;
    }

    #videos-section section{
        border-bottom: 1px solid green;
        margin-bottom: 10px;
        align-items: center;
        justify-content: center;
    }

    #videos-section iframe{
        margin: auto;
        width: 90% !important;
        aspect-ratio: 16/9;
        margin-bottom: 30px;        
    }

    #videos-section h4{
        width: 100%;
    }

    /* Faqs page styles */

    .faq-top p{
        width: 80%;
    }

    /* Contact page styles */

    .flex-row{
        flex-direction: column;
    }

    .contact-details{
        grid-template-columns: 1fr !important;
        width: 90%;
    }

    #google-map-main{
        display: none;
    }


    .google-map-small{
        display: none;
    }

    .google-map-small-mobile{
        display: block !important;
        width: 100%;
        min-height: 250px;
        margin-bottom: 40px;
    }


    .google-map-small-mobile iframe{
        width: 100%;
        height: 100%
    }


}