@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
    --green: #27ae60;
    --black: #192a56;
    --light-color: #666;
    --box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1)
}

*{
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all .2s linear;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 5.5rem;
    scroll-behavior: smooth;
}
section{
    margin-top: -6rem;
    padding: 0rem 9%;
}
section:nth-child(even){
    background: #eee;
}
.btn{
    margin-top: 1rem;
    display: inline-block;
    font-size: 1.7rem;
    color: #fff;
    background: var(--black);
    border-radius: .5rem;
    cursor: pointer;
    padding: .8rem 3rem;
}
.btn:hover{
    background: var(--green);
    letter-spacing: .1rem;
}
.sub-heading{
    text-align: center;
    color: var(--green);
    font-size: 2rem;
    padding-top: 1rem;
}
.heading{
    text-align: center;
    color: var(--black);
    /* text-decoration: underline; */
    font-weight: 1000;
    font-size: 3rem;
    padding-bottom: 2rem;
    text-transform: uppercase;
}
.logo1{
    display: none;
}
header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 1rem 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: var(--box-shadow);
}
header .logo{
    color: var(--black);
    font-size: 2.5rem;
    font-weight: bolder;
}
header .logo i{
    color: var(--green);
}
header .navbar a{
    font-size: 1.7rem;
    border-radius: .5rem;
    padding: .5rem 1.5rem;
    color: var(--light-color);
}
header .navbar a.active,
header .navbar a:hover{
    color: #fff;
    background: var(--green);
}
header .icons i,
header .icons a{
    cursor: pointer;
    margin-left: .5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    width: 4.5rem;
    text-align: center;
    font-size: 1.7rem;
    color: var(--black);
    border-radius: 50%;
    background: #eee;
    right: 0rem;
}
header .icons #menu-bars{
    display: none;
}
#search-form{
    position: fixed;
    top: -110%; left: 0;
    height: 100%; width: 100%;
    z-index: 1004;
    background: rgba(0, 0, 0, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}
#search-form.active{
   top: 0;
}
#search-form #search-box{
    width: 50rem;
    border-bottom: .1rem solid #fff;
    padding: 1rem 0;
    color: #fff;
    font-size: 3rem;
    text-transform: none;
    background: none;
}
#search-form #search-box::placeholder{
 color: #eee;
}
#search-form #search-box::-webkit-search-cancel-button{
    -webkit-appearance: none;
}
#search-form label{
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
}
#search-form label:hover{
    color: var(--green);
}
#search-form #close{
    position: absolute;
    color: #fff;
    cursor: pointer;
    top: 2rem;
    right: 3rem;
    font-size: 5rem;
}

.home .home-slider .slide{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 9rem;
}
.home .home-slider .slide .content{
    flex: 1 1 45rem;
}
.home .home-slider .slide .image{
    flex: 1 1 40.5rem;
    /* width: max-content;
    height: max-content; */
}
/* .home .home-slider .slide .image img{
    width: 100%;
    border-radius: 50%;
} */
.home .home-slider .slide .content span{
    color: var(--green);
    font-size: 2.5rem;
}
.home .home-slider .slide .content h3{
    color: var(--black);
    font-size: 7rem;
}
.home .home-slider .slide .content p{
    color: var(--light-color);
    font-size: 2.2rem;
    padding: .5rem 0;
    line-height: 1.5;
}
.swiper-pagination-bullet-active{
    background: var(--green);
}

.products{
    /* position: fixed; */
    margin-top: 10rem;
}
#see-more{
    position: absolute;
    color: #ffffff;
    right: 4.5rem;
    bottom: 0;
    background-color: #4ED486;
    padding: 1.2rem;
    font-size: 1.6rem;
}










.imageround{
    width: fit-content;
    border-radius: 50%;
}





  
.container{
	max-width: 1200px;
	padding: 4rem;
	margin: auto;
	width: 100%;
  }

  .shop-content{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,auto));
	gap:1.5rem;
	justify-content: center;
	align-content: center;
  }
  
  .food-box{
	position: relative;
	background-color: #fff;
	border: 1px solid rgb(207, 197, 197);
	box-shadow: 2rem 2rem 4rem rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	height: fit-content;
    width: auto;
    padding: 1rem;
    overflow: hidden;    
  }
  .food-img{ 
	height:22rem;
    margin-left: -0.4rem;
    width: 25rem;
    border-radius: .5rem;
  }
  /* .pic:hover img{
    transform: scale(-0.100);
    } */
    
    /* .food-img{
      transition: 0.4s;
      aspect-ratio: 1/1;
      object-fit: cover;
    } */
    
    .food-title{
      font-size: 2rem;
      font-weight: 600;
      color:#ff6348;
    }
    
    .food-price{
      font-weight:500 ;
    }
    
    .add-cart{
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: #4ed486;
      color:white;
      padding: 10px;
      font-size: 2rem;
      cursor: pointer;
      transition: 0.5s;
    }
    
    .add-cart:hover{
      background-color:rgba(255, 0, 0, 0.786);
    }
      
    
    .cart{
      position: fixed;
      top: 0;
      right: -170%;
      width: 400px;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 20px;
      background-color: white;
      box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
      z-index: 100;
    }
    
    .cart-active{
      right:0;
      transition: 0.3s;
    }
    
    .cart-title{
      text-align: center;
      font-size: 1.5rem;
      font-weight: 1000;
      text-decoration: underline;
      margin-bottom: 1rem;
      padding-bottom:20px ;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    
    .cart-box{
      display: grid;
      grid-template-columns: 32% 50% 18%;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding-bottom: 10px;
    }
    
    .cart-img{
      width: 75px;
      height: 75px;
      object-fit: cover;
      border:2px solid  rgba(0,0,0,0.1);
      padding: 5px;
    }
    .detail-box{
      display: grid;
      row-gap: 0.5rem;  
    }
    
    .price-box{
      display: flex;
        justify-content: space-between; 
    }
    
    .cart-food-title{
       font-size: 1rem;
       text-transform: uppercase;
       color:#ff6348;
       font-weight: 500;
    }
    
    .cart-price{
      font-weight: 500;
    }
    
    .cart-quantity{
      border:1px solid rgba(0,0,0,0.1);
      outline:none ;
      width: 2.4rem;
      text-align: center;
      font-size: 1rem;
    }
    
    .cart-remove{
      font-size: 24px;
      color:red;
      cursor: pointer;
    }
    
    .total{
      display: flex;
      justify-content: flex-end;
      margin-top: 1.5rem;
    }
    
    .total-title{
      font-size: 1rem;
      font-weight: 600;
    }
    
    .total-price{
      margin-left: 0.5rem;
    }
    
    .btn-buy{
      padding: 12px 20px;
      background-color:#2f3542;
      color:#fff;
      border: none;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
    }
    
    #cart-close{
      position: absolute;
      top: 1rem;
      right: 0.8rem;
      font-size: 2rem;
      cursor: pointer;
    }
    .food-title{
      font-size: 2rem;
      font-weight: 500;
    }
    .food-price{
      font-size: 2rem;
      color: black;
      text-decoration: underline;
    }
    .cart{
      width: 30%;
      /* opacity: .92; */
      background-color: rgb(35, 35, 100);
      color: white;
    }
    .cart-food-title{
      font-size: 2rem;
      color: white;
      font-weight: 800;
    }
    .total{
      font-size: 2.1rem;
    }
    .cart-title{
      font-size: 2rem;
      font-weight: 1500;
      text-decoration: underline;
    }
    .total-title{
      font-size: 1.5rem;
    }
    .cart-content{
      font-size: 1.5rem;
    }
    .btn-buy{
      font-size: 1.5rem;
    }
    .cart-quantity{
      font-size: 2rem;
      width: 5rem;
    }
    .popup {
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.4);
        display: none;
    }
    .popup-content {
        background-color: white;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888888;
        width: 40%;
        /* text-align: center; */
        font-weight: bolder;
        font-size: 2.4rem;
    }
    .popup-content button {
        display: block;
        top: 2rem;
        right: 2rem;
        font-size: 2rem;
        color: #ff4757;
        position:absolute;
        /* font-size: 2rem; */
    }
    .popup form{
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        width: fit-content;
        font-size: 2rem;
    }
    
    
    .show {
        display: block;
    }
    h1 {
        color: green;
    }
    
    .cart #myButton{
        background-color: white;
        color: #192a56;
        font-weight: 1300;
        width: 80%;
        margin-left: 10%;
        font-size: 2.2rem;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .cart #myButton:hover{box-shadow: rgba(250, 249, 249, 0.56) 0px 12px 100px 4px;
    }







  
  .cart-count{
	position: absolute;
	background-color: #00ff37;
	color: rgb(0, 0, 0);
	top: 0rem;
	right: 9.5rem;
	text-align: center;
	font-size: 1.6rem;
	height: 2rem;
	width: 2rem;
	line-height:20px ;
	border-radius: 50%;
	z-index: 99;
  }
  
  #cart-icon{
	font-size: 1px;
	cursor: pointer;
    height: 2.5rem;
    line-height: 4.5rem;
    width: 2.5rem;
	padding: 1rem;
    text-align: center;
    color: var(--black);
    border-radius: 50%;
    background: #eee;
  }
  /* .pic{
	overflow: hidden;
  } */
  
  .pic:hover img{
  transform: scale(1.03);
  }
  
  /* .food-img{
	transition: 0.4s;
	aspect-ratio: 1/1;
	object-fit: cover;
  } */
  
  .food-title{
	font-size: 2rem;
	font-weight: 600;
	color:#ff6348;
  }
  
  .food-price{
	font-weight:500 ;
  }
  
  .add-cart{
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #4ed486;
	color:white;
	padding: 10px;
	font-size: 2rem;
	cursor: pointer;
	transition: 0.5s;
  }
  
  .add-cart:hover{
	background-color:rgba(255, 0, 0, 0.786);
  }








.products .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 1.5rem;
}
.imageforproduct{
    height: 25rem;
    width: 25rem;
}
.products .box-container .box{
    padding: 2.5rem;
    background: #fff;
    border-radius: .5rem;
    border: .1rem solid rgba(0,0,0,.2);
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye{
    position: absolute;
    top: 1.5rem;
    background: #eee;
    border-radius: 50%;
    height: 3rem;
    width: 3rem;
    line-height: 3rem;
    font-size: 2rem;
    color: var(--black);
}
.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover{  
    background: var(--green);
    color: #fff;
}
.products .box-container .box .fa-heart{
    right: -15rem;
}
.products .box-container .box .fa-eye{
    left: -15rem;
}
.products .box-container .box:hover .fa-heart{
    right: 1.5rem;
}
.products .box-container .box:hover .fa-eye{
    left: 1.5rem;
}

.products .box-container .box h3{
    color: var(--black);
    font-size: 2.5rem;
}
.products .box-container .box .stars{
    padding: 1rem 0;
}
.products .box-container .box .stars i{
    font-size: 1.7rem;
    color: var(--green);
}
.products .box-container .box span{
    color: var(--green);
    font-weight: bolder;
    margin-right: 1rem;
    font-size: 2.1rem;
}
.about{
    margin-top: 5rem;
}
.about .row{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}
.about .row .image1{
    flex: 1 1 40rem;
}
.about .row .image1 img{
    width: 85%;
}

.about .row .content{
    flex: 1 1 45rem;
}
.about .row .content h3{
    color: var(--black);
    font-size: 4rem;
    padding: .5rem 0;
}
.about .row .content p{
    color: var(--light-color);
    font-size: 1.5rem;
    padding: .5rem 0;
    line-height: 2;
}
.about .row .content .icon-container{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 0;
    margin-top: .5rem;
}
.about .row .content .icon-container .icons{
    background: #eee;
    border-radius: .5rem;
    border: .1rem solid rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    flex: 1 1 17rem;
}
.about .row .content .icon-container .icons i{
    font-size: 2.5rem;
    color: var(--green);
}
.about .row .content .icon-container .icons span{
    font-size: 1.5rem;
    color: var(--black);
}
.list{
    margin-top: 5rem;
}
.list .box-container{
    display: grid;
	grid-template-columns: repeat(auto-fit,minmax(220px,auto));
	gap:1.5rem;
	justify-content: center;
	align-content: center;
    /* display:grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1.5rem; */
}
.list .box-container .food-box{
    background: #fff;
    border: .1rem solid  rgba(0,0,0,.2);
    border-radius: .5rem;
    width: fit-content;
    /* width: max-content; */
    box-shadow: var(--box-shadow);
}
.list .box-container .pic{
    height: auto;
    /* width: 25rem; */
    padding: 1.5rem;
    overflow: hidden;    
    position: relative;
}
.list .box-container img{
    height: 20rem;
    width:auto;
    border-radius: .5rem;
}
.list .box-container .box .image .fa-heart{
    position: absolute;
    top: 2.5rem; right: 2.5rem;
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 2rem;
    background: #fff;
    border-radius: 50%;
    color: var(--black);
}
.list .box-container .box .image .fa-heart:hover{
    background-color: var(--green);
    color: #fff;
}
.list .box-container .box .content{
    padding: 2rem;
    padding-top: 0;
}
.list .box-container .box .content .stars{
    padding-bottom: 1rem;
}
.list .box-container .box .content .stars i{
    font-size: 1.7rem;
    color: var(--green);
}
.list .box-container .box .content h3{
    color: var(--black);
    font-size: 2.5rem;
}
.list .box-container .box .content p{
    color: var(--light-color);
    font-size: 1.6rem;
    padding: .5rem 0;
    line-height: 1.5;
}
.list .box-container .box .content .price{
    color: var(--green);
    margin-left: 1rem;
    font-size: 2.5rem;
}

.footer{
    margin-top: 6rem;
}
.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}
.footer .box-container .box h3{
    padding: .5rem 0;
    font-size: 2.5rem;
    color: var(--black);
}
.footer .box-container .box a{
    display: block;
    padding: .5rem 0;
    font-size: 1.5rem;
    color: var(--light-color);
}
.footer .box-container .box a:hover{
    color: var(--green);
    text-decoration: underline;
}

.footer .credit{
    text-align: center;
    border-top: .2rem solid rgba(0,0,0,.1);
    font-size: 2rem;
    color: var(--black);
    padding: .5rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}
.footer .credit span{
    color: var(--green);
}
/* 
#imagechange{
    border-radius: 50%;
    animation-name: example;
    border: 1px solid black;
    text-align: center;
    height: 76.5vh;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
@keyframes example{
    0%{
      background: url(image-1.png) no-repeat;
    }
    20%{
        background: url(image-2.png) no-repeat;
    }
    50%{
        background: url(image-3.png) no-repeat;
    }
    75%{
        background: url(image-1.png) no-repeat;
    }
    100%{
        background: url(image-2.png) no-repeat;
    }
 } */

 .container20 {
	position: relative;
	width: 40rem;
	max-width: 100%;
	height: 43rem;
    
}

.image20 {
	position: absolute;
    /* border-radius: 50%; */
	width: 100%;
	opacity: 0;
	animation: change-img-anim 12s infinite;
}

.image20:nth-of-type(1) {
	animation-delay: 0s;
}
.image20:nth-of-type(2) {
	animation-delay: 4s;
}
.image20:nth-of-type(3) {
	animation-delay: 8s;
}

@keyframes change-img-anim {
	0%{ opacity: 0;}
	10%{ opacity: 1;}
	90%{ opacity: 1;}
	100%{ opacity: 0;}
}









.detailsofproduct{
    font-size: 2rem;
}
#abc img{
    height: 30rem;
    margin-left: 0;
    width: auto;
    margin: 1rem;
    justify-content:space-between;
    display:inline;
    border: 1px solid black;
}
.modal1234 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content1234 {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .close1234 {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close1234:hover,
  .close1234:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }



  .tabledata{
    width: 60%;
    margin-left: 20%;
    font-size: 2.2rem;
  }












/* name animation*/

.content .text1{
    position: relative;

}

.content .text1::before{
    content: "";
    color: #ff7f50;
    animation: words 20s infinite;
    font-size: 5.5rem;
    font-weight:bolder;
}

.content .text1::after{
    content: "";
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    background-color: #ffffff;
    border-left: 2px solid #ff7f50;
    right: 1px;
    animation: cursor .8s infinite, typing 10s steps(10) infinite;
}

@keyframes cursor {
    to{
        border-left: 2px solid #ff7f5000;
    }
}

@keyframes words {
    0%,33%{
        content: "Bathroom Shelf";
    }
    33%,66%{
        content: "Soap Rack SS";
    }
    66%,100%{
        content: "Towel Rack";
    }
}

@keyframes typing {
    10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
        width: 0;
    }
    5%,20%,25%,40%,45%,60%,65%,80%,85%{
        width: calc(100% + 8px);
    }
}




 /* #changetext {
	animation: pulse 5s;
}

@keyframes pulse {
	0% {
	color: #051E3E;
	}
	10% {
		color: #051E3E;
	}
	30% {
		color: white;
	}
	50% {
		color: #051E3E;
	}
	60% {
		color: #051E3E;
	}
	80% {
		color: white;
	}
	100% {
		color: #051E3E;
	}
} */

#changetext:after {
	content: "";
	animation: spin 20s infinite;
    color: var(--black);
    font-size: 8rem;
}

@keyframes spin {
  /* 0% { content:"Hi"; }
  100% { content:"How do you like it?"; } */
 
  0%{
    content: "Towel";
  }
  20%{
      content: "Soup";
  }
  50%{
    content: "Multi";
  }
  75%{
        content: "Towel";
  }
  100%{
      content: "Soup";
  }
}

















.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

  .swal2-popup {
    font-size: 1.6rem !important;

  }

  


















@media (max-width: 991px) {
    html{
        font-size: 55%;
    }
    
    header{
        margin-top: 0.8rem;
        padding: 1rem 2rem;
        height: 7.7rem;
    }
    section{
        margin-top: -7rem;
        padding: 2rem;
    }
    /* #products{
        position: sticky; 
    } */
    .images{
        width: 95%;
    }
    .logo{
        display: none;
    }
    .logo1{
        display: inline-block;
        width: 14.5rem;
        height: 6.2rem;
    }
    
    header .icons i{
        margin-left: .2rem;
        height: 4rem;
        line-height: 4rem;
        width: 4rem;
    }
    #shophere{
        margin-left: .2rem;
        height: 4rem;
        line-height: 4rem;
        width: 4rem;
        margin-right: 1.8rem;
    }
    
.footer .credit{
    font-size: 1.3rem;
}
}

@media (max-width: 500px) {
    .container20 {
        margin-left: 0%;
        margin-bottom: -25%;
        width: 100%;
        position: relative;
     }
    }

  

@media (max-width: 768px) {
    header .icons #menu-bars{
        display: inline-block;
    }
    .content .text1::before{
        font-size: 4rem;
        font-weight:bolder;
    }
    .heading{
        font-size: 2.3rem;
    }
    #see-more{
        position: absolute;
        right: 4.9rem;
        bottom: 0;
        background-color: #4ED486;
        padding: 1.28rem;
        font-size: 2rem;
    }
    #abc img{
        height: fit-content;
        width: 100%;
        margin-left: 0;
    }
    .tabledata{
        width: 80%;
        margin-left: 10%;
      }

      .tabledata td{
        font-size: 2.1rem;
      }

    .list .box-container .food-box{
        background: #fff;
        border: .1rem solid  rgba(0,0,0,.2);
        border-radius: .5rem;
        width: 100%;
        /* width: max-content; */
        box-shadow: var(--box-shadow);
    }
    .list .box-container .pic{
        height: auto;
        width: 100%;
        padding: 1.5rem;
        overflow: hidden;    
        position: relative;
    }
    .list .box-container img{
        height: auto;
        width:100%;
        border-radius: .5rem;
    }



 .container20 {
    margin-left: 0%;
    margin-bottom: -15%;
    width: 100%;
    position: relative;
 }
    #imagechange{
        border-radius:1%;
        height: 60vh;
    }
    .popup-content {
        width: 88%;
    }
    #cart-icon{
        font-size: 3px;
        cursor: pointer;
        height: 3rem;
        line-height: 4.5rem;
        width: 2.5rem;
        padding: 1rem;
        text-align: center;
        color: var(--black);
        border-radius: 50%;
        background: #eee;
      }
    .cart-food-title{
        font-size: 1.5rem;
        text-transform:capitalize;
    }
    .food-box{
        position: relative;
        background-color: #fff;
        border: 1px solid rgb(207, 197, 197);
        box-shadow: 2rem 2rem 4rem rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        height: min-content;
        /* width: 85; */
        padding: 1rem;
        overflow: hidden;
    }
    .food-img{ 
        height:min-content;
        margin-left: 1rem;
        width: 94%;
        border-radius: .5rem;
      }
    .cart{
        position: fixed;
        top: 0;
        right: -170%;
        width: 400px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px;
        background-color: var(--black);
        box-shadow: 0 1px 4px rgba(40, 37, 37, 0.1);
        z-index: 100;
      }
      
      .cart-active{
        right:0%;
        width: 80%;
        transition: 0.3s;
      }
    header .navbar{
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        border-top: .1rem solid rgba(0,0,0,.2);
        border-bottom: .1rem solid rgba(0,0,0,.2);
        padding: 1rem;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);      
    }
    header .navbar a{
        display: block;
        padding: 1.5rem;
        margin: 1rem;
        background: #eee;
    }
    #search-form #search-box{
        width: 90%;
        margin: 0 1rem;
    }
    .home .home-slider .slide .content h3{
        font-size: 5.5rem;
    }
    #changetext{
        font-size: 5.5rem;
    }
    
#changetext:after {
    font-size: 5.5rem;
}
    .products .box-container .box img{
        height: auto;
        width: 100%;
    }
    .cart-count{
        right: 1.5rem;
    }
}

@media (max-width: 991px) {
    html{
        font-size: 50%;
    }
}