* {
    box-sizing: border-box;
     padding:0;
      margin: 0;

}
 
nav {
    background-color: black;
     box-shadow: 0 0 5px lightgrey;
      font-size: 20px;
      color:white;
       padding: 20px 14px;
        height: auto;
        z-index: 10;
      
}
 nav p {
  float: left;
   text-align: center;
    font-size: large;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
      margin: 0 3px;
 }
  nav ul {
   display: -webkit-box;
   display: -webkit-flex;
     display: flex;
      justify-content: end;
      align-items: center;
      list-style: none;
  }
   nav li {
      padding: 10px 14px;
      margin: auto 8px;
       text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   }
    nav li a {
       text-decoration: none;
       color: white;
    }
   nav li a:hover {
       color:blue;
       border-bottom: 1px solid black;
    }
     .container {
         width:100%;
          display:grid;
          grid-template-columns:  repeat(auto-fit, minmax(300px, 1fr));
          background-color:black;
          height: 70vh;
          padding: 10px;
     }
       .container .text {
         color:white;
          padding:20px;
           display: grid;
           place-content: center;
       }
       .container .text h1 {
         font-size: 45px;
         padding: 10px;
         font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
       }
       .container .text p {
         font-size: 20px;
         padding: 10px;
         font-family: Arial, Helvetica, sans-serif;
       }
       .container .text button {
         width:200px;
         padding: 20px;
         background:lightgreen;
         font-size:15px;
       }
       .container .text button:hover {
          background-color: white;
          color:black;
       }
        .container img {
             width:400px;
            
            
        }
        .imgcon { 
        display: grid;
           place-content: center;
        }
        
         #about {
             text-align: center;
              padding:20px;
              height: auto;
         }
          #about h1 {
             font-size: 35px;
             padding: 10px;
             font-family: cursive;
          }

          .agrid {
             display:grid;
             grid-template-columns:  repeat(auto-fit, minmax(150px, 1fr));
          }
           .agrid img {
            display: flex;
            
            width:80%;
             height:400px;
              object-fit: cover;
              display: block;
              margin: auto;
           }
             .atext {
                
                 display: flex;
                 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                 font-size: 20px;
             flex-direction: column;
                padding: 10px;
                gap: 10px;
                justify-content: space-evenly;
             }
             .atext h2 {
                 font-size: 25px;
             }
                
        .slide {
            
            height:auto;
    background-color: white;
    padding: 20px;
      }
        .slide h1 {
         padding: 10px;
         font-size: 25px;
          margin:0 0 1px 0;
           text-align: center;
           color: black;
           margin-bottom: 1px;
           
        }
      
     .boxslide {
        
        box-shadow: 0 0 5px lightgrey; 
        display: flex;
          border:2px solid white;
          border-radius: 20px;
          width:96%;
          background-color:white;
          overflow-x: scroll;
          margin: auto 10px; 
          padding: 10px; 
        }
       .boxslide img {
              width:30%;
               object-fit:cover;
                height:200px;
                
                
         }
         
         
         #contacts {
            background-color:white;
            padding: 10px;
            transition: 0.5s linear;
            text-align: center;
            color: black;
            height: auto;
           }
           .des1 {
            
            font-size: 35px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
           }
           .contactgrid {
            color: black;
            display: grid;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 1px;
      row-gap: 20px;
           column-gap: 1.5rem; 
          width:90vw;
          padding: 10px;
          margin: 4px auto;
          font-size: larger;
          font-family:Georgia, 'Times New Roman', Times, serif;
          text-align: center;
          background-color:white;
           }
            .contactgrid h1 {
               margin: 14px;
               text-align: center;
               font-size:22px;
            }
           
             .form h1 {
               text-align: center;
               font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serifs;
               padding: 10px;
                font-size: 25px;
         margin-top: 5px 0;
         color:black;
             }
                 
             .inputcontainer {
               display: flex;
               justify-content: center;
               margin:10px;
              padding: 10px;
               
             }
              .inputbox {
                box-shadow: 0 0 5px lightgrey;
                width:450px;
                height: auto;
                margin: 5px;
                text-align: center;
                background-color:white;
                padding: 20px;
              }
                       textarea {
                         width:95%;
                         height:150px ;
                         padding: 20px;
                         margin: 5px;
                        font-size: 20px;
                        background-color: white;
                        color: black;
                       }
               label {
                     display:flex;
                     justify-content: start;
                      font-size: 18px;
                      font-family: Arial, Helvetica, sans-serif;
                      margin: 5px 8px;
                      color: black;
               }
                 .inputbox input {
                   width:95%;
                    margin: 0 auto 14px auto;
                    font-size: 20px;
                    outline: none;
                    border: none;
                    background-color:inherit;
                    border-bottom: 2px solid black;
                    color:black;
                 }
                  input[type=submit] {
                   
                     display: flex;
                     justify-content: center;
                     width:fit-content;
                     color:white;
                     border-radius: 10px;
                     padding: 15px 12px;
                     margin: 5px auto;
                     background-color:black;
                  }
                  input[type=submit]:hover {
                     background-color: white;
                     color: black;
                     border-radius: 18px;
                  }
                  .newsletter {
                    background-color:rgb(0,0,0);
                   color: white;
                    padding: 20px 4px;
                    box-sizing: border-box;
                  }
                    .newsletter h1 {
                      text-align: center;
                      font-family: cursive;
                      font-size: 20px;
                      color:white;
                    }
                     .newsletter input {
                        width:60%;
                 padding: 2px;
                 margin: 10px;
              font-size: 20px;
                     }
                     .newsletter button {
                       font-size: 17px;
                        width:40%;
                         padding:18px 8px;
                         text-align: center;
                         background-color:black;
                         color:white;
                         border-radius: 20px;
                     }
                     .newsletter button:hover {
                      background-color: white;
                      color: red;
                     }
                 .space {
                   display: flex;

                    width:100%;
                 }
                 .display {
                  transform: translateX(100%);
                  display: none;
           
        
                  }
                   #bars {
                    display: none;
                   }
                   
               @media(max-width:700px) {
                  .container {
                  
                     height: auto;
                    
                    
                }
                .container img {
                  width: 270px;
                }
                      .newsletter button {
                          font-size:13px; 
                      }
                      input[type=submit] {
                          font-size:13px;
                      }
                nav {
                  margin: 0;
                  padding: auto;
                  height: 12vh;
                }
                    nav ul {
                      display:none;
                    }
                    .display {
                     display: block;
                      transform: translateX(100%);
                      text-align: center;
                            
                      width:70%;
                      position: fixed;
                       background-color:white;
                        padding: 20px;
                        right: 0;
                        top:0;
                        z-index: 20;
                   height: 100%;
                    overflow-y: hidden;
                    overflow-x: hidden;
                    
                   
                     transition: 0.5s linear;
 
                    }
                      .display li  {
                         
                          text-align: center;
                           margin: 22px 0;
                             color:black;
                             font-size: 20px;
                              padding: 10px 12px;
                              list-style: none; 
                      }
                      .display li a{
                         text-decoration: none;
                          color: black;
                       }
 
                       .display li a:hover {
                           border-bottom: 2px solid  blue;
                           color: blue;
                       }
                  
                   
 
                            
                          #bars {
                            display: block;
                             position: absolute;
                             top:0;
                             right: 0;
                     
                             margin:10px;
                             color:white;
                               font-size: 30px;
                               font-weight: bold;
                          }
                            .closecart {
                             position:fixed;
                             top:0;
                              right: 0;
                              font-size: 30px;
                              font-weight: bold;
                              margin: 4px;
                             
                           }
                           .closecart:hover {
                             background-color: red;
                             width: 40px;
                             text-align: center;
                           }
                .agrid { 
                   height: auto;
                }
                .boxslide img {
                  width: 50%;
                  object-fit: fill;
                  height: 150px;
              }
               }

                 @media(max-width:550px) {
                  .container {
                    padding: 0;
                    grid-template-columns: auto;
                    
                  }
                         .container img {
                            width:70%;
                         }
                         .container .text h1 {
                          font-size: 30px;
                          padding: 5px;
                         }
                         .boxslide img {
                          width: 80%;
                         }
                         .container .text button {
                          width: 90%;
                         }
                 }

                   @media   (orientation:landscape ) and ( max-width:1500px) {
                     .container  {
                  
                      height: auto;  
                       
                   }

                   .agrid  { 
                     height: auto;
                  }
                 

                  }