*{background:;
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
@font-face{
    font-family:'Aachen';
    src: url(fonts/Aachen\ Medium\ Plain.ttf);

}

header{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(170, 76, 76, 0.5)), url(photos/Milk4.jpg) ;
    height: 100vh;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
  }
  header{
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(170, 76, 76, 0.5)), url(photos/Milk4.jpg) ;
    height: 100vh;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center center;
  }


body{
    font-family: century gothic;
}
nav{
    background: #0075ce;
    height: 80px;
    width: 100%;
    position: sticky;
    z-index: 10;
    top: 0;

}

.logo img{
    float:left;
    width: 250px;
    height: auto;
}

nav ul{
    float: right;
    margin-right: 20px;}

    nav ul li{
        display: inline-block;
        line-height: 80px;
        margin: 0 5px;
    }
    
    nav ul li a{
        color: white;
        font-size: 17px;
        padding: 7px 13px;
        text-transform: uppercase;
        border-radius: 3px;
    }

    a.active, a:hover{
        background: #1b9bff;
        transition: 0.4s;
    }
   


.title{
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
 }

 .title h1{
     color: white;
     font-size: 4.7vw;
     font-family: 'Ubuntu', sans-serif;
 }
 
 
 
 .button{ position: absolute;
     top: 63%;
     left:50%;
     transform:translate(-50%,-50%);
 
 }
 
 .btn{display: inline-block;
     font-size: 17px;
     border: 1px solid white;
     padding:10px 30px;
     color: white;
     text-decoration: none;
     
 }

 
 
 .btn:hover{ background-color:white;
    color:black;
    transition: 0.5s ease;}

 
 


 footer{
     color:white;
     background:#0c5bd1;
     padding:30px;
     font-family: century gothic;
  font-size: 20px;
 
 }
 
footer .contact{
    font-family: 'Ubuntu', sans-serif;
     text-align: center;
    
 }
 

@media screen and (max-width: 577px){
   .line{
       width: 30px;
       height: 3px;
       background: white;
       margin: 5px;

   } 

   
   nav{
       position: sticky;
   }
   .menu-button{
       position: absolute;
       cursor: pointer;
       right: 5%;
       top: 50%;
       transform: translate(-5%, -50%);
   }
    
}


#check{
    display: none;
}

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


        
    nav ul li{
        display:block;
        line-height: 55px;
        margin: 0 5px;
    }
    
    nav ul li a{
        color: white;
        font-size: 17px;
        padding: 7px 13px;
        text-transform: uppercase;
        border-radius: 3px;
    }
    ul{
        position:fixed;
        width: 100%;
        height: 100vh;
        top: 80px;
        left: 0px;
        z-index: 10;
        text-align: center;

    }
    ul{
        position: absolute;
        background:#2f3640;
        left: -100%;
        transition: all 0.3s;
    }
    
    #check:checked ~ ul{
        left: 0;
    }

    a.active, a:hover{
        background:none;
        color: #0082e6;
    }
   
       
}
@media screen and (max-width:679px) {
    .btn{
        display: block;
        
    }

    .title h1{
        font-size: 30px
    }

    
}
@media screen and (max-width:360px){
    .title h1{
        font-size: 25px;
    }
}
@media screen and (max-width:312px){
    .title h1{
        display: none;
    }
    
}

/* Style of  Contact */
.location{
    font-family: 'Ubuntu', sans-serif;
  padding-top: 50px;

  background: #0c5bd1;
  color: white;
  text-align: center;
  
}
  
  
   .contacts  {
    font-family: 'Ubuntu', sans-serif;
    text-align: center;
  background-color: #0c5bd1;
padding-top: 20px;}

  .contacts h2{
    color: white;
   font-size: 25px;
   }
   .contacts p{
     margin-top: 10px;
     color: white;
     font-size: 18px;
   }

   @media screen and (max-width:353px){
   .contacts p{
       font-size:15px;
   }
   
    .location h2{
       font-size: 20px;
        
      }

   }


/* Style of About */

.informations{
    font-family: 'Ubuntu', sans-serif;
  text-align:center;
  background:#0c5bd1 ;
  padding-bottom:300px;
  color:white;
}

.informations h2{
    font-family: Georgia, serif;
  padding-top: 50px;
  color: white; 
  font-size: 40px;
}


.informations p{
  font-size: 2.5vw;
  text-align:justify;
  font-family: Garamond, serif;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
}

.founder{
    font-family: Garamond, serif;
font-size: 25px;
padding-right: 65%;
padding-top: 3%;
}

button{
  background:white;
  border: 2px solid transparent;
  font-family: 'Ubuntu', sans-serif;
  font-size: 17px;
  margin-top: 20px;
  padding: 7px 20px;
  border-radius: 30px;
  
  
}

button a{ background:white;
  color: black;
text-decoration: none; }

button a:hover{
  background: transparent;
  color: red;
  transition: 0.3s ease;
}

.ending{
    background: #0c5bd1;
    padding-bottom: 200px;
}
@media screen and (max-width:429px){
    
.informations h2{
      font-size: 25px;
}

.founder{
    font-size: 12px;
padding-right: 63%;
padding-top: 2%;
    }
    
}

/* Style of Product */
.table{
    background:#0c5bd1 ;
}
.table h2{
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    color: white;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 5px;
}
.table p{
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    color: white;
    text-align: center;
    padding-bottom: 20px;
}

table{
    border-collapse: collapse;
    width: 100%;
    border: 3px solid white;
    background: white;
    
}
th, td{
    text-align: left;
    padding: 10px;
}
tr:nth-child(even){
    background: #bee3ff;
}

th{
    background:#4c77b6;
    color: white;
}

.end-table{
    background:#0c5bd1 ;
    padding-bottom: 500px;
}