body {
    font-size: 15pt;
}
nav{
    background:#563C06;
    position:sticky;
  top: 0 ;
  left:0; 
}
h3{
  font-family: "Story Script", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#FFFFFF ;
}
header{
    height:20rem ;
    background:#EDE0C7;
    position: relative ;
   
}
header div {
    position:absolute ;
    z-index:4;
    
}
header a{
    text-decoration:none ;
    background: #FFFFFF ;
    border:none ;
    padding:0.5rem  ;
    border-radius:1rem ;
    color:#563C06;
    font-weight:bold ;
    transition:0.3s ;
}
header a:hover{
    background:#563C06;
    color:#FFFFFF ;
}
.back{
    
    background: #563C06;
    /*clip-path: polygon(100% 27%, 75% 50%, 100% 100%, 0 98%, 50% 47%, 0 27%);*/
    clip-path: ellipse(27% 16% at 71% 83%);
    position:absolute ;
    z-index:1 ;
}
header img{
border: none ; 
object-fit:contain ;
position:absolute ;
z-index:2;
}
@media (max-width:992px) {
        .back{
        height:40rem ;
        width:50rem;
position:absolute;
right :0.25rem;
top: -20rem  ;
    }
        header img{
        height:20rem ;
width:25rem ;
position:absolute ;
top: 1rem ;
right : 0rem ;
    }
    #products{
        display:flex ; 
        gap: 1rem ;
    }
   .product{
       height:auto ;
       padding:1rem ;
   }
  .modal-content{
      background:#563C06 ;
        padding: 1rem ;
  border-radius: 2rem;
  
  width: 80%;
  color: #FFFFFF ;
  text-align: center;
  }
}
@media (max-width:600px ){
    .back{
        height:20rem ;
        width:30rem;
position:absolute;
right :0.25rem;
top:0.1rem ;
    }
    header img{
        height:10rem ;
width:25rem ;
position:absolute ;
top: 10rem ;
left: 3rem ;
    }
    .modal-content {
  background: #563C06;
  padding: 0.5rem ;
  border-radius: 0.5rem;
  
  width: 60%;
  color: #FFFFFF ;
  text-align: center;
}
}
.btn,p{
  font-family: "Vend Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight:1000 ;
  font-style: normal;
}
#filterBtns{
    display:flex;
    flex-wrap:wrap ;
    gap: 0.5rem ;
    justify-content:center ;
    margin:1rem 0;
    animation:fadeIn 0.3s ease ;
}
@keyframes fadeIn{
    from{
        transform:scale (0.8);
        opacity:0.5 ;
    }to{
        transform:scale (1);
        opacity:1 ;
    }
}
.btn{
    height:2rem ;
    width:9rem ;
    border:none ;
    background:#EDE0C7;
     color:#563C06  ;
     border-radius:0.5rem ;
     font-weight:1000 ;
     transition: 0.3s ;
     }
.active{
    background:#563C06;
     color:#EDE0C7  ;
     box-shadow:0 0 1rem #563C06;

}
img{
    height:10rem ;
    width:100% ;
    object-fit: cover ;
    
}
#products{
    gap: 1rem ;
    display:flex ;
    flex-wrap:wrap ;
    flex-grow: 1;
    justify-content:center ;
}
.product{
    background:#EDE0C7;
    text-align: center ;
    animation: moveBox 0.5s  ease-in-out ;
    
}
@keyframes moveBox{
    from{
        transform: scale(0.5);
        opacity: 0.5 ;
    }to{
        transform: scale(1);
        opacity: 1 ;
    }
}
.openModal, #openModal2{
    border-radius: 0.5rem ;
    border: none ;
    height:2rem ;
    width: 10rem ;
    margin: 1rem 0;
    background: #FFFFFF  ;
    color: #563C06 ;
    font-weight:1000 ;
    font-size:1rem ;
    transition:0.3s ;
}
.openModal:hover, #openModal:hover{
    background:#563C06 ;
    color: #FFFFFF;
    box-shadow:0 0 1rem #563C06;
    
}
.swiper{
    display:flex ;
    justify-content:center ;
    margin: 0 0 ;
}
#products .modal{
    animation:moveBox 0.5s ease-in-out ;
}
@keyframes moveBox{
    from{
        transform:scale(0.5 );
        opacity:0.5 ;
    }to{
        transform:scale(1 );
        opacity:1 ;
    }
}
#products .myModal{
    display:none;
    position:fixed;
    z-index: 1000 ;
    top:0 ;
    left: 0 ;
    justify-content:center ;
    align-items:center ;
    width: 100%;
    height:100%;
    background:hsla(235, 81%, 0%, 0.8);
    color: #FFFFFF ;
    
}
.modal-content {


}
.closeModal{
    float:right ;
    margin:1rem 1rem ;
}
.closeModal:hover{
    color:red;
}
.swiper{
    height:10rem ;
    width:100%;
}
.swiper-wrapper{
    display:flex ;
}
.swiper-slide{
    display:flex ;
    justify-content:center ;
}
.swiper-slide img{
    height:100% ;
    width:100% ;
    object-fit: contain ;
}

.modal-content h3 {
  margin: 1rem 0 0.5rem;
}
.modal-content p {
  font-size: 1rem;
  line-height: 1.5;
}