@font-face {
    font-family: 'Poppins-Bold.ttf';
    src: url(fonts/Poppins-Bold.ttf);
}
@font-face {
    font-family: 'Poppins-Regular.ttf';
    src: url(fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: 'Marcellus-Regular.ttf';
    src: url(fonts/Marcellus-Regular.ttf);
}
@font-face {
    font-family: 'Mulish-VariableFont_wght.ttf';
    src: url(fonts/Mulish-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Quicksand-VariableFont_wght.ttf';
    src: url(fonts/Quicksand-VariableFont_wght.ttf);
}
span{
    font-family:'Quicksand-VariableFont_wght.ttf' !important;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Marcellus-Regular.ttf' !important;   
}
a,button{
    font-family: 'Poppins-Regular.ttf' !important;
}
p{
    font-family: 'Mulish-VariableFont_wght.ttf' !important;
}
html{
    margin: 0%;
    padding: 0%;
}
.box-shadow-none{
    box-shadow: none !important;
    outline:none !important;
}
.text-decoration{
    text-decoration: none !important;
}

.text-black{
    color: #000 !important;
}tr:hover{
    background-color: #c5c5c5c2 !important;
    transition: .5s;
    cursor:pointer;
}.accept{
    background-color: #1e6830 !important;
    color: #fff !important;
    transition: .3s !important;
  
  }.accept:hover{
    background-color: #1e6830f5 !important;
    color: #fff !important;
    
  }
  .reject{
    background-color:#ad212f !important;
    color: #fff !important;
    transition: .3s !important;
  }
  .reject:hover{
    background-color:#ad212ff1 !important;
    color: #fff !important;
  }
.shop-btn{
    color: #000000 !important;
    background-color: #fff !important;
    transition: .9s !important;
}.shop-btn:hover{
    border-radius: 20px;
    color: #ffffff !important;
    background-color: #000000 !important;
}
.btn-black{
    background-color: #000;
    color: #fff !important;
    transition: .5s !important;
}
.btn-black:hover{
    background-color: #000000f3;
    border-radius: 20px;
}
h1{
    font-size: 60px !important;
}h2{
    font-size: 45px !important;
}h3{
    font-size: 32px !important;
}
h4{
    font-size: 25px !important;
}
.font-14{
    font-size: 14px !important;
}
.font-17{
    font-size: 17px !important;
}.font-18{
    font-size: 18px !important;
}.font-20{
    font-size: 20px !important;
}
.font-22{
    font-size: 22px !important;
}
.font-26{
    font-size: 26px !important;
}
.font-30{
    font-size: 30px !important;
    line-height:50px;
}
.font-40{
    font-size: 40px !important;
}
.font-45{
    font-size: 45px !important;
}
.font-60{
    font-size: 60px !important;
}
.nav-text{
    color: #000000da !important;
    font-size: 14px !important;
    transition: .8 !important;
    border-bottom: 1px transparent solid;
    padding-bottom: 20px;
    padding-top: 22px;
}
.nav-text:hover{

    color: #000000 !important;
    border-bottom: 1px #000 solid;
    transition: .8s !important;
   
}
.active-page{
    color: #000000!important;
    border-bottom: 1px #000 solid;
}
/* menu-bar-Icon................................................................................................................................................. */
.menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    color:#000;
  }
  .line {
    fill: none;
    stroke: rgb(0, 0, 0);
    stroke-width: 6;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }
  .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }
  .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
  .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }
  .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }


  

/* collapsed Arrow.......................................................................................................................... */

  .order-btn .arrow {
    transition: .5s !important;
    font-size: 32px !important;
  }
  .order-btn[aria-expanded="true"] .arrow {
    rotate: 180deg !important;
  }
    
  /* ...................................................................................................................................... */
.banner{
    background-image:url('../media/banner.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed !important;
    position: relative;
    z-index: 2 !important;
   
}.banner:before{
    position: absolute;
    content: '';
    background: #000;
    opacity: 0.50;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1 !important;
}
.banner2{
    background-image:url('../media/banner2.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed !important;
    position: relative;
    z-index: 2 !important;
}
.banner2:before{
    position: absolute;
    content: '';
    background: #000;
    opacity: 0.50;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1 !important;
}
.index-card1{
    background-image:url('../media/banner.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 2 !important;
}
.index-card1:before{
    position: absolute;
    content: '';
    background: #000;
    opacity: 0.50;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1 !important;
}.index-card2{
    background-image:url('../media/banner2.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 2 !important;
}
.index-card2:before{
    position: absolute;
    content: '';
    background: #000;
    opacity: 0.50;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1 !important;
}
.cart {
    position: relative;
    display: block;
    width: 38px;
    height: 38px;
    height: auto;
    /* overflow: hidden; */
    .material-icons {
      position: relative;
      top: 4px;
      z-index: 1;
      font-size: 24px;
      /* color: white; */
      text-align: center !important;
    }
    .count {
      position: absolute;
      top: -6px;
      right: 9px;
      z-index: 2;
      font-size: 10px;
      border-radius: 50%;
      background: #d60b28;
      width: 15px;
      height: 15px;
      line-height:15px;
      display: block;
      text-align: center;
      color: white;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
    }
  }

  .quantity {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  .quantity_minus,
  .quantity_plus {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0;
    background: transparent;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color: #000;
    border: 1px solid #0505058a !important;
    text-decoration: none !important;
  }
  .quantity_minus:hover,
  .quantity_plus:hover {
    background: #575b7125;
    color: #000000;
  } 
  .quantity_minus{
    border-radius: 3px 0 0 3px;
  }
  .quantity_plus{
    border-radius: 0 3px 3px 0;
  }
  .quantity_input{
    width: 80px;
    height: 40px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000;
    border-top: 1px solid #0505058a;
    border-bottom: 1px solid #0505058a;
    border-left: 0px !important;
    border-right: 0px !important;
    background: transparent;
    color: #8184a1;
  }

  .nav-tabs {
    border-bottom: 0px !important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #fff;
    background-color: transparent !important;
}
.nav-tabs .nav-link {
    border-top: 3px solid transparent;
    border-top-left-radius:0px !important;
    border-top-right-radius:0px !important 
    
}
.nav-tabs .nav-link.active{
    color: #495057;
    background-color: #fff;
    border-top: 3px solid #000;
    border-left: 0px !important;
    border-right: 0px !important;
    border-radius: 0px;
}

.page-link {
    position: relative;
    display: block;
    color: #000000 !important;
    background-color: #ffffff !important;
    border: 1px solid #000000 !important;
    border-radius: 0px !important;
    padding: 10px 20px !important;
    transition: .5s !important;
}
.page-link:hover{
    position: relative;
    display: block;
    color: #ffffff !important;
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
}
.footer-icon{
    color: #000 !important;
    transition: .3s !important;
}
.footer-icon:hover{
    color: #000000a2 !important;
}
@media only screen and (min-width:321px) and (max-width:768px){
    h1{
        
        font-size: 40px !important;
        
    }h2{
        
        font-size: 38px !important;
        
    } h4{
        
        font-size: 20px !important;
        
    }
}