.darken-page-screen{
        width:100%;
        height:100%;
        background-color:rgba(0, 0, 0, 0.534);
        z-index:1;
        position:fixed;
}

@media(max-width:2000px){

    .darken-page-screen{
        display:none;
    }

    main{
        margin:0;
        padding:0;
    }

    header{
        margin:0;
        padding:0;
    }

        /*NAVIGATION*/

    .desktop-nav-container{
        display:flex;
        flex-direction: column;
        padding:0;
        margin:0;
        background-color: rgba(255, 255, 255, 0.753);
        width:100%;
        height:6rem;
        z-index:20;
    }

    .top-nav{
        background-color:rgb(219, 219, 219);
        height:2.5rem;
        padding:0;
        margin:0;
    }

    .top-nav ul{
        display:flex;
        flex-direction: row;
        gap:1rem;
        margin-right:11%;
        justify-content: end;
        list-style-type: none;
    }

    .logo h1{
        padding:0;
        margin-left:4.5em;
        margin-bottom:0;
        margin-top:0;
        font-size:2rem;
    }

    .total-nav{
        text-align:left;
        border-bottom:solid;
        border-color:rgb(206, 206, 206);
        border-width: 1px;
            
    }

    .total-nav a{
        text-decoration:none;
        color:black;
    }

    .total-nav-ul{
        padding:0;
        margin-top:0;
        margin-bottom:0;
        display:flex;
        flex-direction:row;
        gap:10rem;
        justify-content:center;
        list-style-type:none;
    }

    .nav-item{
        position:relative;
    }


    .product-dropdown,
    .about-us-dropdown{
        display:none;
        flex-direction: column;
        justify-content: space-evenly;
        font-size:1rem;
        text-align:left;
        position:absolute;
        width:10em;
        height:10em;

        background-color:rgb(255, 255, 255);
    }



    .product-dropdown li,
    .about-us-dropdown li{
        list-style-type:none;
    }

    .nav-item:hover .product-dropdown,
    .nav-item:hover .about-us-dropdown{
        display: flex;
    }

    .product-dropdown li:hover,
    .about-us-dropdown li:hover{
        text-decoration: underline;
        text-underline-offset: 5px;
        text-decoration-color:burlywood;
        text-decoration-thickness:2px;
    }


    .mobile-nav-container{
            display:none;
        }


    body{
        padding:0;
        margin:0;
    }

    .hero{
        display:flex;
        justify-content: center;
        align-items:center;
        text-align:center;
        color:black;
        position:relative;
        overflow:hidden;
        min-height: 50vh;
        z-index:-1;
        margin:0;
        padding:0;
    }

    .hero h1{
        z-index:10;
    }
    .hero h2{
        z-index:20;
    }

    .mobile-logo-link{
        display:none;
    }

    .video-bg{
        position:absolute;
        
        top:20%;
        left:50%;
        transform: translate(-50%, -50%);
        min-width:100%;
        min-height:50%;
    }


    .product-list-home-page-container{
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        width:100%;
        height:auto;
        border-bottom:solid;
        border-color:black;
        border-width:1px;

    }

    .product-header{
        background-color: rgb(255, 255, 255);
        text-align:center;
        width:100%;
        height:5em;
    }

    .product-gallary-container{
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items:center;
        gap:2em;
        height: auto;
    }

    figure:hover figcaption{
        text-decoration:underline;
        text-decoration-color:orange;
        text-underline-offset: 7px;
        text-decoration-thickness:2px;
    
    }

    .laptop-image-gallery img{
        width: 16rem;
        height:11rem;
        transition:0.15s;
    }

    .laptop-image-gallery img:hover{
        width:17rem;
        height:11rem;
    }

    .monitors-image-gallery img{
        width:10rem;
        height:10rem;
        transition:0.15s;
    }
    .monitors-image-gallery img:hover,
    .keyboard-image-gallery img:hover{
        width:11rem;
        height:11rem;
    }

    .keyboard-image-gallery img{
        width:10rem;
        height:10rem;
        transition:0.15s;
    }

    .support-image-gallery img{
        width:10rem;
        height:10rem;
        transition:0.15s;
    }

    .support-image-gallery img:hover{
        width:11rem;
        height:11rem;
    }

    .advertise-company-container{
        display:flex;
        flex-direction:column;
        background-color:rgb(255, 255, 255);
        margin:0;
        padding:0;
        width:100%;
        height:auto;

    }

    .ai-bg-announcement{
        background-image: url(../gallery-images/picture-for-ai-announcement.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        width: 100%;
        height: 30em;
    }

    .ai-bg-text{
        text-align:center;
        width:20em;
        height:10em;
        background-color:blanchedalmond;
    }

    .ai-bg-text h2,
    .ai-bg-text h1{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .spacer{
        width:100%;
        height:5em;
        background-color:white;
    }

    .sustain-announce{
        padding:0;
        margin:0;
        background-color:rgb(231, 231, 231);
        overflow:hidden;
        text-align:center;
        display:flex;
        flex-direction:column;
        justify-items:center;
        align-items:center;
        width:100%;
        height:40em;
    }

    .sustain-announce-text{
        padding:0;
        margin:0;
    }

    .sustain-announce-text h1{
        font-size:4rem;
    }

    .sustain-announce-text h3{
        font-size:1.5rem;
    }

    .sustain-image{
        width:auto;
        height:auto;
        border-radius: 10%;
        overflow:hidden;
    }

    .sustain-image img{
        width: 35em;
        height:25em;
    }

    #sustain-button{
        background-color:rgb(134, 187, 53);
        width:12em;
        height:2em;
        border-radius:10px;
        border:none;
    }
    #sustain-button:hover{
        background-color:rgb(112, 160, 39);
    }

    #sustain-button:active{
        background-color:rgb(92, 132, 32);
    }

    footer{
        margin:0;
        padding:0;
        width:100%;
        height:5em;
        background-color:grey;
    }

    .footer-info{
        width:100%;
        text-align:center;
        
    }

    .footer-message{
        margin:0;
        padding:0;
    }

    .footer-message h5{
        margin:0;
        padding:0;
        font-weight:lighter;
    }

    /*
    .ai-image-introduction img{
        width:100%;
        height:40em;
        border-radius: 10%;
    }

    */
}



@media(max-width:1100px){



    .desktop-nav-container{
        display:none;
    }

    .mobile-nav-container{
        z-index:10;
        padding:0;
        height:2em;
        width:100%;
        display:flex;
        flex-direction:row;
        justify-content:flex-end;
        position:relative;
        background-color:rgb(255, 255, 255);
    }

    .total-mobile-nav{
        display:none;
        right:0;
        padding:0;
        position:absolute;
        top:100%;
        width:20rem;
        height:30rem;
        background-color:rgba(255, 255, 255, 0.905);
        z-index:10;
    }

    

    .visible-nav{
        bottom:2rem;
        padding:0;
        margin:0;
        text-align:left;
    }

    .visible-nav li{
        font-size:1.5rem;
    }

    .total-mobile-nav a{
        text-decoration:none;
        color:black;
    }

    .total-mobile-nav li{
        list-style-type:none;
    }

    

    .hamburger::before{
        z-index:20;
        content: "☰";
        font-size: 2rem;
        cursor: pointer;

    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        display:none;
    }

    .mobile-nav-item:hover .mobile-product-dropdown,
    .mobile-nav-item:hover .mobile-about-us-dropdown{
        display:block;
    }

    .mobile-product-dropdown,
    .mobile-about-us-dropdown{
        margin-left:3rem;
        height:auto;
        width:auto;
    }

    .mobile-product-dropdown li:hover,
    .mobile-about-us-dropdown li:hover{
        text-decoration: underline;
        text-decoration-color: orange;
        text-decoration-thickness:2px;
        text-underline-offset: 5px;
    }

/* When checkbox is checked: change to X */
    #menu-toggle:checked ~ .hamburger::before{
        content: "✕";
        position:relative;
        z-index:30;
    }

    #menu-toggle:checked ~ .total-mobile-nav{
        display:block;
    }
    #menu-toggle:checked ~ .darken-page-screen{
        display:block;
        z-index:10;
    }
    .darken-page-screen:active + .total-mobile-nav{
        display:none;
    }

    
    
    .mobile-logo{
        display:block;
        padding:0;
        margin:0;
        width:100%;
        text-align:center;
        text-decoration:none;
    }

    .mobile-logo h1{
        color:black;
        padding:0;
        margin:0;

    }




    .hero{
        display:flex;
        flex-direction: column;
        justify-content:space-around;
        align-items:center;
        text-align:center;
        color:black;
        position:relative;
        overflow:hidden;
        min-height: 75vh;
        z-index:1;
        margin:0;
        padding:0;
    }

    .hero h2{
        margin-bottom:7em;
        z-index:10;
    }

    .mobile-logo-link{
        position:relative;
        width:auto;
        height:auto;
        z-index:1;
        margin-bottom:5em;
    }

    .mobile-logo-link h1{
        display:block;
        font-size:3rem;
        position:relative;
        z-index:1;
        font-weight:lighter;
        font-family:sans-serif;
    }

    .mobile-logo-link a{
        color:black;
        text-decoration:none;
        transition:0.15s;
    }

    .mobile-logo-link a:hover{
        color:rgba(156, 80, 28, 0.63);
    }

    .video-bg{
        position:absolute;
        
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        min-width:100%;
        min-height:50%;
    }


    .product-list-home-page-container{
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        width:100%;
        height:auto;
        border-bottom:solid;
        border-color:black;
        border-width:1px;

    }

    .product-header{
        background-color: rgb(255, 255, 255);
        text-align:center;
        width:100%;
        height:5em;
    }

    .product-gallary-container{
        gap:0;
        height:5em;
        background-color:rgb(255, 255, 255);
        display:flex;
        flex-direction: row;
        overflow-x:auto;
        justify-content:flex-start;
        align-items: baseline;
        overscroll-behavior-inline: contain;
        height:auto;
    }

    .product-gallary-container::-webkit-scrollbar{
        display:none;
    }

    .laptop-image-gallery{
        padding:0;
        margin-left:2em;
    }

    .laptop-image-gallery img{
        width: 12rem;
        height:7rem;
    }

    .laptop-image-gallery img:hover{
        width:13rem;
        height:8rem;
    }

    .monitors-image-gallery img,
    .keyboard-image-gallery img{
        width:10rem;
        height:10rem;
    }

  

    .support-image-gallery img,
    .support-image-gallery figcaption{
        width:8rem;
        height:8rem;
    }

    .support-image-gallery img:hover{
        width:9rem;
        height:9rem;
    }

    .advertise-company-container{
        display:flex;
        flex-direction:column;
        background-color:rgb(255, 255, 255);
        margin:0;
        padding:0;
        width:100%;
        height:auto;

    }

    .ai-bg-announcement{
        background-image: url(../gallery-images/picture-for-ai-announcement.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
        width: 100%;
        height: 30em;
    }

    .ai-bg-text{
        text-align:center;
        width:20em;
        height:10em;
        background-color:blanchedalmond;
    }

    .ai-bg-text h2,
    .ai-bg-text h1{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .spacer{
        width:100%;
        height:5em;
        background-color:white;
    }

    .sustain-announce{
        background-color:rgb(231, 231, 231);
        overflow:hidden;
        text-align:center;
        display:flex;
        flex-direction:column;
        justify-items:center;
        align-items:center;
        width:100%;
        height:50em;
    }

    .sustain-announce-text{
        padding:0;
        margin:0;
    }

    .sustain-announce-text h1{
        font-size:4rem;
    }

    .sustain-announce-text h3{
        font-size:1.5rem;
    }

    .sustain-image{
        width:auto;
        height:auto;
        border-radius: 10px;
        overflow:hidden;
    }

    .sustain-image img{
        width:30em;
        height:20em;
    }

    .footer-info{
        width:100%;
        height: 5em;
        background-color:grey;
    }

    /*
    .ai-image-introduction img{
        width:100%;
        height:40em;
        border-radius: 10%;
    }

    */
    

}