*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;

    font-family: "montserrat";
}


html,body{
    width: 100%;
    height: 100%;
   
}

#main{
    width: 100%;
    height: 100%;
    
}



#page1{
    max-width: 100%;
    height: 20vh;
    background-color: #3b3442;
    
}

#nav{
    max-width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    justify-content: space-evenly;
   
}
#nav h1{
   font-size: 3vw; 
   color: white;
}

#nav a{
    font-size: 1.5vw;
   color: white;

}




#page2{
    width: 100%;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#page2 h1{
   font-size: 3vw;
}

    
#page3{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10vw;
    flex-wrap: wrap;
}

#page3 .box {
    width: 300px;
    height: 300px;
    border-radius: 7px;
    box-shadow: 0 7px 7px rgba(158, 157, 157, 0.312);
}

.box #img1{
    border-radius: 7px;

    width: 100%;
    height: 80%;
} 


.box #img1 img{
    border-radius: 7px;

    width: 100%;
    height: 100%;
    background-color: #3b3442;
} 

.box #text1{
   
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20%;
    background-color: #fff9f9e3;
    box-shadow: 0 4px 2px rgb(222, 217, 217);
    border-radius: 7px;
    padding: 1vw;
 
}


.box #text1 h2{
 font-size: 20px;
 font-weight: 530;
 line-height: 25px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



@media (max-width: 320px) {
    html,body{
        width: 100%;
        height: 100%;
        z-index: hidden;
    }

    #page1{
        max-width: 100%;
        height: 15vh;
        background-color: #3b3442;
        
    }
    
    #nav{
        max-width:100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
       
    }
    #nav h1{
       font-size: 4.5vw; 
    }
    
    #nav a{
        font-size: 3.5vw;
    }
    #page2 h1{
        font-size: 4vw;
     }
}

@media (max-width: 376px){

    
}

@media (max-width: 720px){
    html,body{
        width: 100%;
        height: 100%;
        z-index: hidden;
    }

    #page1{
        max-width: 100%;
        height: 15vh;
        background-color: #3b3442;
        
    }
    
    #nav{
        max-width:100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
       
    }
    #nav h1{
       font-size: 4.5vw; 
    }
    
    #nav a{
        font-size: 3vw;
    }
    #page2 h1{
        font-size: 4.5vw;
     }
}