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


/* nav1 */
.nav1 {
    background: purple;
    font-size: 22px;
    text-align: center;
    height: 50px;
    color: white;
    text-decoration: underline;
    padding-top: 15px;
}

.nav1 ul a{
    /* text-decoration: none; */
    color: white;
}

/* nav2 */
#nav2 {
    width: 100%;
    height: 15vh;
    background: white;
    top: 0px;
    position: sticky;

}

.navrap2 {
    width: 80%;
    margin: auto;
    /* height: 90vh; */
}

.logo img{
    margin-left:-3%;
}

.menu {
    text-align: center;
}

.menu ul {
    margin-top: -60px;
}

.menu ul li {
    display: inline
}

.menu ul li a {
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
    padding: 22px;
    color: purple;
}


.menu ul li a i {
    font-size: 25px;
    color: purple;
}

.menu ul li a:hover {
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    border-radius: 20px;
}



/* banner */
.ban {
    width: 100%;
    background-image: url(ban22222.webp);
    height: 90vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.banrap {
    width: 100%;
    height: 50%;
    /* background-color: rgba(0, 0, 0, 0.2); */
}



/* bestseller */
.bestseller h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 3%;
    font-size: 42px;
}


.best {
    width: 100%;
    padding-left: 30px;
}

.bestrap {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
    height: 80vh;
}

.bestimg img {
    margin-top: 15px;
}

.bestimg img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.bestimg h2 {
    text-align: center;
    padding-left: -15%;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.bestimg h3 {
    /* border: 2px solid black; */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 28px;
    background-color: purple;
    color: white;
    width: 400px;
    height: 6%;
    border-radius: 10px;
    text-align: center;
    
}
.bestimg a{
    text-decoration: none;
}





/* exploring */
.exploring h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 3%;
    font-size: 42px;
}


.explore {
    width: 100%;
    padding-left: 30px;
}

.explorerap {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
    height: 160vh;
}

.exploreimg img {
    margin-top: 15px;
}

.exploreimg img:hover {

    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.exploreimg h2 {
    text-align: center;
    padding-left: 1%;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.exploreimg h3 {
    /* border: 2px solid black; */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 27px;
    background-color: purple;
    color: white;
    width: 400px;
    height: 6%;
    border-radius: 10px;
    text-align: center;
}

.exploreimg a{
    text-decoration: none;
}




/* eggless */
.eggless h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 3%;
    font-size: 42px;

}


.egg {
    width: 100%;
    padding-left: 30px;
}

.eggrap {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
    height: 80vh;
}

.eggimg img {
    margin-top: 15px;
}

.eggimg img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.eggimg h2 {
    text-align: center;
    padding-left: 5%;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.eggimg h3 {
    /* border: 2px solid black; */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 27px;
    background-color: purple;
    color: white;
    width: 400px;
    height: 6%;
    border-radius: 10px;
    text-align: center;
}

.eggimg a{
    text-decoration: none;
}





/* occasion */
.occasion h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 3%;
    font-size: 42px;
}

.occasion h2 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    color: grey;
}




.some {
    width: 100%;
    padding-left: 30px;
}



.somerap {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
    height: 56vh;
}


.someimg img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


.someimg img {
    margin-top: 30px;
    border-radius: 20px;
}

.someimg h4 {
    padding-left: 95px;
}




/* sweet */
.sweet h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 3%;
    font-size: 42px;
}

.sweet h2 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    color: grey;
}




.indul {
    width: 100%;
    padding-left: 30px;
}



.indulrap {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
    height: 38vh;
}


.indulimg img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


.indulimg img {
    margin-top: 30px;
    border-radius: 20px;
}

.indulimg h4 {
    padding-left: 85px;
}

.hamper {
    margin-top: 3%;
}

.hamper img {
    border-radius: 20vh;
    width: 100%;
}






/* unbox */
.unbox h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 3%;
    font-size: 42px;
}

.unbox h2 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    color: grey;
}


.sweetn {
    /* width: 100%; */
    padding-left: 50px;
    margin-top: 4%;
}



.sweetnrap {
    display: grid;
    grid-template-columns: auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
}


.sweetnimg video {
    margin-top: 100px;
    border-radius: 20px;
}







/* types */
.types h1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    margin-top: 4%;
    font-size: 42px;
    margin-right: 80px;
}







.varcake {
    width: 100%;
    padding-right: 30px;
}



.varcakerap {
    display: grid;
    grid-template-columns: auto auto auto auto;
    overflow: auto;
    grid-column-gap: 10px;
    height: 35vh;
    padding-left: 20px;
}


.varcakeimg img:hover {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


.varcakeimg img {
    margin-top: 30px;
    border-radius: 20px;
}

.varcakeimg h4 {
    padding-left: 140px;
}


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


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


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














/* width */
::-webkit-scrollbar{
    width: 20px;
  }
  
  /* track */
  ::-webkit-scrollbar-track{
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }
  /* handle */
  ::-webkit-scrollbar-thumb{
    background: purple;
    border-radius: 10px;
    }
  
  /* handle on hover */
  ::-webkit-scrollbar-thumb:hover{
    background:purple;
  }
















/* footer */
.footer {
    width: 100%;
    height: 50vh;
    background: black;
    /* border-bottom: 1px solid white; */
    margin-top: 4%;
  }
  
  .footrap {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto ;
    grid-column-gap: 20px;
    padding-top: 10px;
  }
  
  .boxx {
    /* background-color: rgba(0, 0, 0, 0.2); */
    padding: 10px;
  }
  
  .boxx h1 {
    text-align: center;
    color: white;
    font-size: 30px;
  }
  
  
  
  .boxx ul li{
    list-style: none;
    color: white;
    padding-left: 25%;
    font-size: 20px;
  }
  
  
  .boxx2 {
    /* background-color: rgba(0, 0, 0, 0.2); */
    padding: 10px;
  }
  
  .boxx2 h1 {
    text-align: center;
    color: white;
    font-size: 30px;
  
  }
  
  
  .boxx2 ul li{
    list-style: none;
    color: white;
    padding-left: 30%;
    font-size: 20px;
  }
  
  
  .boxx3 {
    /* background-color: rgba(0, 0, 0, 0.2); */
    padding: 10px;
  }
  
  .boxx3 h1 {
    text-align: center;
    color: white;
    font-size: 30px;
  }
  
  .boxx3 ul li{
    list-style: none;
    color: white;
    padding-left: 25%;
    font-size: 20px;
    
  }
  
  
  
  .boxx4 {
    /* background-color: rgba(0, 0, 0, 0.2); */
    padding: 10px;
  }
  
  .boxx4 h1 {
    text-align: center;
    color: white;
    text-decoration: none;
    font-size: 30px;
  }
  
  
  .boxx4 ul li{
    list-style: none;
    color: white;
  font-size: 20px;
  padding-left: 30%;
  }
  .boxx4 ul li a{
    font-size: 40px;
    border: 2px solid white;
  } 

  .boxx5 img{
    margin-top: 8%;

  }