*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.social{
    width: 100%;
    height: 5vh;
    background: linear-gradient(to left, rgb(227, 142, 142), rgb(245, 249, 160));
}
.socialrap{
    width: 80%;
    margin: auto;
}
.name{
    position: absolute;
}
.name h3{
    color: antiquewhite;
}
.app{
    float: right;
}
.app ul li{
    display: inline;
}
#youtube{
    font-size: 30px;
    color: rgba(146, 7, 7, 0.933);
}
#facebook{
    font-size: 30px;
    color: rgb(53, 94, 218);
}
#instagram{
    font-size: 30px;
    color: rgb(232, 30, 202);
}

#whatsapp{
    font-size: 35px;
    color: rgb(27, 215, 102);
}
#twitter{
    font-size: 35px;
    color:azure;
}
#google{
    font-size: 35px;
    color:rgb(220, 189, 123);
}

/*nav*/

.topnav {
    overflow: hidden;
    background-color: #f0dfdf;
  }
  
.topnav a {
    float: left;
    display: block;
    color: rgb(248, 5, 18);
    text-align: center;
    text-transform: uppercase;
    padding: 14px 16px;
    font-family: Harrington;
    display: inline;
    text-decoration: none;
    font-size: 17px;
  }
  
.topnav a:hover {
    
    color: rgba(0, 0, 0, 0.973);
  }
  
.topnav button1{
  padding: 4px;
  border-radius: 17px;
}


/*middle1*/

.mid1{
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom right, rgb(207, 216, 207), rgb(207, 159, 163));
}
.midrap1{
    padding-top: 30px;
    width:80%;
   margin: auto;
    display: grid;
    grid-template-columns: auto auto ;
    grid-column-gap: 30px;
}
.box img{
    width: 120%;
    height: 90%;
    

}

.container1{
    
    margin: 10px 20px;
    padding-bottom: 100px;
  
}
.container1 h1{
    color: rgb(12, 16, 12);
    font-size: 60px;
}

.container1 p{
    color: rgb(245, 25, 25);
    font-family: Patua One;
    font-size: 40px;
}
.combos1{
    display:grid;
    grid-template-columns:auto auto   ;
    align-items: center;
    grid-column-gap: 100px;
    justify-content:space-around;
    margin-top: 10px;
   


}

.combo4 h5{
    color: #180303;
   
font-family: 'Lugrasimo', cursive;
}

.combo5 h5{
    color: #180303;
   
    font-family: 'Lugrasimo', cursive;
}


button{
    color: rgb(196, 233, 233);
    border-radius: 60%;
    padding: 10px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 22px;
    background-color: rgb(0, 0, 0);
    
    

}



/*mid*/
.mid{
    width: 100%;
    height: 500vh;
    background-color: rgb(237, 86, 146) ;
    background-size: cover;
    background-repeat:no-repeat;
}
.midrap{
    width: 100%;
    height: 500vh;
    background-color: rgba(239, 177, 177, 0.4);
}
.pro-container{
    margin-top: 10px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    
}

.pro p{
    color: #000000;
    font-family: 'Caveat', cursive;
    font-size: 20px;
font-family: 'Edu SA Beginner', cursive;
}

.pro{
    width: 10%;
    
    min-width: 250px;
    padding: 10px 12px;
    border: 1px solid #060606;
    border-radius: 10px;
    cursor: pointer;
    margin: 6px 0;


}

.pro:hover{
    box-shadow: 20px 20px 30px #121512;


}
.pro img{
    width: 100%;
    border-radius: 3vh;
   
}
.logo2{
    text-align: center;
}
.logo2 h1{
    color: rgb(218, 206, 242);
    
}

.logo2 p{
    color: rgb(203, 251, 70);
    font-family: 'Brush Script MT';
    font-size: 30px;
}



/*mid*/
.mid3{
    width: 100%;
    height: 280vh;
    background-color: rgb(239, 239, 143) ;
    background-size: cover;
    background-repeat:no-repeat;
}
.midrap3{
    width: 100%;
    height: 280vh;
    background-color: rgba(234, 249, 96, 0.4);
}
.desc h2{
    color: #ff0e0e;
    font-family: 'Arvo', serif;
    font-size: 30px;
}

.desc p{
    color: #000000;
    font-family: 'Caveat', cursive;
font-family: 'Parisienne', cursive;
font-size: 23px;
}


div.gallery {
    border: 1px solid #ccc;
  }
  
  div.gallery:hover {
    border: 1px solid #777;
  }
  
  div.gallery img {
    width: 100%;
    height: auto;
  
  }
  
  div.desc {
    padding: 25px;
    text-align: center;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .responsive {
    padding: 0 6px;
    float: left;
    width: 33%;
  }
  
  @media only screen and (max-width: 700px) {
    .responsive {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  
  @media only screen and (max-width: 500px) {
    .responsive {
      width: 100%;
    }
  }
  
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }