body {
    margin: 0px;
    padding: 0px;
  }
  a{
    text-decoration: none;
  }

  #navbar {
    background-color: rgba(255, 255, 255, 255);
    /* background-color: gray; */
    height: 80px;
    width: 100%;
    margin: 0px;
    display: flex;
    justify-content: center;
    /* border: 4px solid gray; */
    /* border: 1px solid gray; */
    position: fixed;
    top: 0;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  #navbar > div {
    margin-left: 3vh;
    margin-left: 3vh;
    /* background-color:gray; */
    width: 30%;
  }
  .logo>img {
    width: 60%;
    height: 90%;
    margin-left: 27%;
  }
  .subscribe h3{
    color: #eea13d;
    font-family: "Open Sans", sans-serif;
  }
  .search_cart {
    display: flex;
    flex-direction: row-reverse;
    /* background-color: aquamarine; */
  }
  .search_cart > div {
    margin-left: 2vh;
    margin-right: 2vh;
    margin-top:3vh;
    height: 90%;
    /* border:1px solid black; */
    padding:1vh;
    /* background-color: teal; */
  }
  .search_cart i{
    color:rgb(235, 150, 22);
  }
  
  #search_pop_up {
    display: none;
    height: 260px;
    width: 100%;
    z-index: 10;
    background-color: white;
    /* transition: height 500ms; */
    /* border: 1px solid gray; */
    padding: 4vh;
    position: fixed;
    top: 0;
  }
  #search_input {
    margin-left: 2vh;
    width: 91%;
    height: 100px;
    font-size: 5vh;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: "Open Sans", sans-serif;
    color: black;
    margin-right: 6vh;
  }
  .cancle {
    height: 30px;
    /* border: 1px solid salmon; */
    display: flex;
    flex-direction: row-reverse;
    font-family: "Open Sans", sans-serif;
    margin-right: 7vh;
    font-size: 6vh;
    margin-right:19vh;
    /* font-weight: bold; */
  }
  .cancle + p {
    font-family: "Open Sans", sans-serif;
    font-size: 1.5vh;
  }
  .options {
    /* border: 1px solid gray; */
    height: fit-content;
    width: 190px;
    position: absolute;
    z-index: 5;
    top: 80px;
    margin-left: 82%;
    text-align: center;
    display: none;
    /* visibility:hidden; */
    background-color:white;
    /* display:flex;;
      flex-direction: row-reverse; */
  }
  .options > ul {
    list-style-type: none;
    /* display:; */
  }

   /* navbar end */



  #slideshow{
    position:relative;
    height:450px;
    width:100%;
    background-color:#cecece;
  }
  .slides{
    width:100%;
    height:100%;
    display:none;
  }
  .slides>img{
    height:100%;
    width:100%;
  }

 .gap{
   height:11.8vh;
 }
 .arrow{
   position:absolute;
   top:20px;
   font-weight:bold;
   font-size: 4vh;
   background-color:rgba(255, 255, 255, 0.521);
   padding:3vh;
 }
 .next{
   left:10px;
   top:40%;
 }
 .prev{
   right:10px;
   top:40%;
 }
 .heading{
   margin-top:4vh;
   /* background-color: aliceblue; */
   height:80px;
   font-size:5vh;
   /* padding:5vh; */
   /* text-decoration: underline;  
   text-decoration-color: rgb(219, 177, 129);   */
   /* text-decoration-margin: 1vh; */
   text-align:center;
   font-family: 'Open Sans', sans-serif;
 }
 .heading>hr,.testimonials_heading>hr{
   width:30%;
    border-top: 2px solid #eea13d;
 }
 .products{
   display:flex;
   /* flex-wrap: wrap; */
 }
 .product_boxes{
   width:50vh;
   /* height:50vh; */
   height:60vh;
   /* border:1px solid black; */
   margin:2vh;
   display:flex;
   flex-direction:column;
 }
.product_boxes_images{
  height:90%;
  border-radius: 7vh;
  border:3px solid rgb(192, 114, 25);
  /* overflow:hidden; */
  /* background-color:rgb(24, 45, 65); */
}
.product_boxes_images img{
  height:100%;
  max-width:100%;
  border-radius: 7vh;
}
.products_box_title{
  height:10%;
  text-align:center;
  padding:2vh;
  /* background-color:pink; */
}
.plans{
  display:flex;
  padding-left:10vh;
  justify-content: center;
}
.plans>div{
  width:300px;
  height:500px;
  margin:3vh;
  /* border:2px solid black; */
}
.box_of_plans>div{
  border:1px solid #e7eaec;
  height:22%;
  text-align:center;
}
.box_of_plans>div:nth-child(3){
  height:42.2%;
}
.box_of_plans>div:nth-child(4){
  /* padding:1vh; */

  background-color:#e5b95f;
  height:11%;
}
.box_of_plans button{
  color: white;
  width:90%;
  margin:auto;
  margin-top:1vh;
  height:5vh;
  background-color: #e5b95f;
  border:1px solid white;
}

/* previos bags */


.products_in_prev_bags{
  display:flex;
  width:80%;
  height:300px;
  margin:auto;
  /* border:1px solid black; */
}
.products_in_prev_bags>div{
  width:250px;
  height:150px;
  margin:4vh;
}
.gifs_products>img{
  height:100%;
  width:100%;
}


.products_in_prev_bags_about{
    margin-top:3vh;
}







/* testimonials */

.testimonials_heading{
  text-align:center;
  margin-bottom:9vh;
  font-size:5vh;
   text-align:center;
   font-family: 'Open Sans', sans-serif;
}
.testimonials{
  height:500px;
  background-color:#efe4ca;
  padding:3vh;
}
.testimonials_text{
  /* border:1px solid black; */
  margin:auto;
  width:80%;
  padding:4vh;
  line-height: 2.3;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
}

/* trending now */
  .trending_heading{
    text-align:center;
    font-family: 'Open Sans', sans-serif;
    font-size:3vh;
  }
.trending_now{
  height:200px;
  display:flex;
}
.trending_now_pictures{
  width:12.5%;
}
.trending_now_pictures>img{
  width:100%;
  height:100%;
}


/* gap */

 .after_trending_gap{
  height:10vh;
 }

  /* brand slideshow */

  .brand_slideshow_wrapper{
    height:30vh;
    background-color: #e5b95f;
    padding-top:7vh;
  }
  .brand_pictures{
    width:70%;
    height:90%;
    /* background-color: gray; */
    margin:auto;
    display:flex;
  }
  .logo_brands{
    /* border:1px solid yellow; */
    width:20%;
    height:100%;
    border:2px solid black;
    margin-left:3vh;
    border-radius:2vh;
  }
  
  .logo_brands img{
    width: 100%;
    height:100%;
    border-radius:2vh;
  }

  #slide1 {
    width: 100%;
    height:500px;
    position: relative;

}

#slide1 img {
    width: 100%;
    /* padding-top: 1%; */
    height:100%;
}

/* Next & previous buttons */
.prev {
	position: absolute;
	top: 50%;
    right:95%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
	color: black;
    background-color:rgba(255, 255, 255, 0.836);
	/* font-weight: bold; */
	font-size: 25px;
}

.next{
	position: absolute;
	top: 50%;
    left:  95%;
	width: auto;
	padding: 16px;
	margin-top: -22px;
    color: black;
    background-color:rgba(255, 255, 255, 0.836);
	/* font-weight: bold; */
	font-size: 25px;
}



/*-------------------------------------- footer css */
.footer {
  background-color: rgb(240, 238, 238);
  display: flex;
  flex-direction: column;
  /* position: fixed; */
  bottom: 0;
  width: 100%;
  height: 515px;
  margin-left: -8px;
}

#bigbox {
  display: grid;
  grid-gap: 4%;
  width: 100%;
  height: 400px;
  margin: auto;
  padding: 20px 100px 20px;
  grid-template: "a a b b c c"
                  "a a b b c c";
}

#box1 {
  grid-area: a;
  /* background-color: red; */
}

#box2 {
  grid-area: b;
  /* background-color: green; */
}

#box3 {
  grid-area: c;
  /* background-color:blue; */
}

.box>p {
  color: rgb(112, 111, 111);
  font-size: medium;
}

#txtbox {
  width: 250px;
  height: 30px;
  border-radius: 5px;
  margin-right: 10px;
  border-color: rgb(201, 199, 199);
  box-shadow: 10px 10px 10px rgb(201, 199, 199);
}

#button {
  /* width: 250px; */
  height: 35px;
  border-radius: 5px;
  background-color: orange;
  border-color: orange;
  color: white;
  text-align: center;
  box-shadow: 10px 10px 10px rgb(201, 199, 199);
}

#box4 {
  margin: auto;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: column;
}

@media screen and (max-width:1024px){
  #bigbox {
  grid-template: "a a b b"
                  "a a c c";
}
#box3{
  /* display:flex; */
  /* flex-direction: column; */
  margin-top: -50px;
}
}

@media screen  and (max-width:760px) {
  #txtbox{
      display:block;
      margin-bottom: 15px;
  }
  p{
      height:auto;
      max-width: 250px;
  }
}

@media screen and (max-width:600px) {
  #bigbox {
      width: fit-content;
      height: fit-content;
      align-items: center;
      grid-template: "a a"
                  "a a"
                  "b b"
                  "b b"
                  "c c"
                  "c c";
}

#box3{
  margin-top: 0px;
}
.footer{
  height: fit-content;
  width: fit-content;
  align-items: center; 
  justify-content: center;
  position: relative;   
}

#box4{
  margin: 60px auto auto 80px;
  box-sizing: border-box;
  text-align: center;
}
}