@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Roboto:wght@400;500&display=swap');

body{
  margin: 0px;
  padding: 0px;
  font-family: 'Playfair Display', serif  !important;

}

header{
  padding: 2px;
  position: sticky;
  top: 0px;
  z-index: 1;
  background-color: #fff;
  box-shadow: 0px 12px 24px rgba(2, 30, 84, 0.1);
}




nav{
    height: 50px;
    margin-top: 13px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

}
 hr{
  width:78%;
  margin: 0px auto;
}
nav ul{
  display: flex;
  list-style: none;
  justify-content: center;
  margin: 20px;

}

.icon-menu{
  display: none;
}

.potli-logo{
  height: 100px;
  width: 100px;
  position:absolute;
  top:-10px;
  left: 80px;
  z-index: 2000;
}

nav ul li{
  
  font-size: 20px;
  margin-right:55px;

}

nav ul li img{
  width: 100px;
  height: 100px;
}

nav ul li a{
  text-decoration: none;
  color: #141414;
  padding: 15px 10px;
}

nav ul li a:hover{
  background: #c9343f;
  color: #fff;
}


section{
  display: flex;
  justify-content: center;
 
  margin: 25px 100px 0px 100px;
  /*border-bottom: 2px solid #14141425;*/
  padding-bottom: 15px;
}

aside{
  flex: 1;
  width: 100%;
  margin: 10px;
  padding: 5px 0px 5px 25px;
  
}

main{
  flex: 0.7;
  padding: 25px 50px;
  background-color: #f6f6f6;
  position: sticky;
  top: 110px;
  height: 500px;
}
.products{
  display: flex;
  justify-content: space-around;
  padding: 25px 25px;
  border-bottom: 1px solid #14141450;
  margin-bottom: 25px;
}

.products img{
  object-position: center;
  object-fit: fill;
}

.products div h2{
  font-size: 26px;
  color: #C9343F;
  font-family: 'Poppins', sans-serif;
  /*text-align: center;*/

}

.products div p{
  margin: 0px;
  /*font-size: 18px;*/
  font-family: 'Poppins', sans-serif;
}

.products div p span{
  /*font-size: 12px;*/
  opacity: 75%;
}

.delivery label{
  /*font-weight: 600;*/
  font-family: 'Poppins',sans-serif;
}

.delivery input{
  border: none;
  background: #fafafa;
  border-radius: 5px;
  padding: 10px 20px;
  border:1px solid #c9343f50;
}
.delivery button{
  padding: 10px 20px ;
  background: #C9343F;
  color: #fff;
  border: none;
  margin-left: 5px;
  font-family: 'Poppins','sans-serif;';
}
.delivery button:hover {
    background-color: #f6f6f6;
    color: #c9343f;
}

.delivery div table{
  width: 100%;
  margin-top: 25px;
}

.delivery div table tr td{
  font-family: "Poppins",'sans-serif;';

}

.delivery div table tr td:first-child{
    font-size: 20px;
    }

    .delivery div table tr:last-child{
      border-top: 1px solid #141414;
    }

    .delivery div a{
      text-decoration: none;
      margin: 5px auto;
      position: relative;
      left: 31%;
      color: #141414;
      font-family: 'Poppins','sans-serif;';
    }

    #Congrats{
      position: absolute;
      bottom:60px;
      left: 40%;
      background-color:#c9343f ;
      color: #fff;
      padding: 10px;
      z-index: 3000;
    }

   main button{
      border-radius: 5px;
      margin-bottom: 10px;
    }
    main textarea{
      border-radius: 5px;
      border: 1px solid #c9345f50;
      background-color: #fafafa;
      outline: none;
      resize: none;
    }
    
    /************ Responsive ************/
/* ************* Screen size 425px *********** */

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

  h1{
    margin-right: 140px;
    
  }
.potli-logo{
    height: 100px;
  width: 100px;
  position:absolute;
  top:-10px;
  left: 20px;
  z-index: 2000;
}
.icon3{
  margin-right: 15px;
  position: relative;
  top: 5px;
}
.icon-menu{
  display: block;
  position: relative;
  top: 25px;
  right: 30px;
  float:right;

}


.logo-head{
  font-size: 44px;
}

 

    nav ul{
      flex-direction: column;
      background-color: #fafafa;
      position: absolute;
      top: 72px;
      right: -20px;
      z-index: 1000;
      width: 100%;
      padding-top: 35px;
      height: 100vh;
      display: none;
  

}
nav ul li{
  margin-bottom: 30px;
  margin-left: 10px;
  
}



section{
  /* justify-content: unset; */
  flex-wrap: wrap;
  margin: 0px;
}

aside{
  padding: 0px;
  margin: 0px;
}

.products{
  flex-wrap: wrap;
  padding: 25px 15px;
}
.products img{
  width: 140px;
  height: 160px;
}
.products div:nth-child(3){
  margin: 10px 0px 0px 170px;
}
main{
  padding: 25px 45px;
  width: 100%;
  height: 540px;
 
}

.delivery button{
  margin-left: 0px;
}
.delivery div a{
  left: 25%;
}

.delivery input{
  margin-bottom: 10px;
}
}

/* ************** Screen size 375px ************** */

@media only screen and (max-width:375px)
{
.potli-logo{
    height: 100px;
  width: 100px;
  position:absolute;
  top:-10px;
  left: 20px;
  z-index: 2000;
}
.icon3{
  margin-right: 15px;
  position: relative;
  top: 5px;
}
.icon-menu{
  display: block;
  position: relative;
  top: 25px;
  right: 30px;
  float:right;

}


.logo-head{
  font-size: 44px;
}

 

    nav ul{
      flex-direction: column;
      background-color: #fafafa;
      position: absolute;
      top: 72px;
      right: -20px;
      z-index: 1000;
      width: 100%;
      padding-top: 35px;
      height: 100vh;
      display: none;
  

}
nav ul li{
  margin-bottom: 30px;
  margin-left: 10px;
  
}



section{
  /* justify-content: unset; */
  flex-wrap: wrap;
  margin: 0px;
}

aside{
  padding: 0px;
  margin: 0px;
}

.products{
  flex-wrap: wrap;
  padding: 25px 10px;
}
.products img{
  width: 100px;
  height: 120px;
}
.products div:nth-child(3){
  margin: 10px 0px 0px 130px;
}
main{
  padding: 25px 35px;
  width: 100%;
  height: 540px;
 
}

.delivery button{
  margin-left: 0px;
}
.delivery div a{
  left: 25%;
}

.delivery input{
  margin-bottom: 10px;
}
}

@media only screen and (max-width:320px)
{
.potli-logo{
    height: 100px;
  width: 100px;
  position:absolute;
  top:-10px;
  left: 20px;
  z-index: 2000;
}
.icon3{
  margin-right: 15px;
  position: relative;
  top: 5px;
}
.icon-menu{
  display: block;
  position: relative;
  top: 25px;
  right: 30px;
  float:right;

}


.logo-head{
  font-size: 44px;
}

 

    nav ul{
      flex-direction: column;
      background-color: #fafafa;
      position: absolute;
      top: 72px;
      right: -20px;
      z-index: 1000;
      width: 100%;
      padding-top: 35px;
      height: 100vh;
      display: none;
  

}
nav ul li{
  margin-bottom: 30px;
  margin-left: 10px;
  
}



section{
  /* justify-content: unset; */
  flex-wrap: wrap;
  margin: 0px;
}

aside{
  padding: 0px;
  margin: 0px;
}

.products{
  flex-wrap: wrap;
  padding: 25px 10px;
}
.products img{
  width: 90px;
  height: 110px;
}
.products div:nth-child(3){
  margin: 10px 0px 0px 100px;
}
main{
  padding: 25px 25px;
  width: 100%;
  height: 540px;
 
}

.delivery button{
  margin-left: 0px;
}
.delivery div a{
  left: 25%;
}

.delivery input{
  margin-bottom: 10px;
}
}