.ml-auto{
    margin-left:auto;
}
.mr-auto{
    margin-right: auto;
}
.max-wd-600{
    max-width:600px !important;
}
.rounded-all {
    border-radius: var(--fc-border-radius) !important;
}
.guest-dropdown::after{
    margin-top: 6px;
}
.wd-100-per{
width: 100% !important;
}

.btn-grad {background-image: linear-gradient(to right, #FCC900 0%, #DCC723  100%) !important}
.btn-grad {
    margin: 0px;
    padding: 7px 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    /* background-size: 200% auto; */
    color: black;
    box-shadow: 0 0 20px #eee;
    border-radius: 20px;
    display: block;
    border: 1px solid transparent;
 }
 .t-uppercase{
    text-transform: uppercase;
 }

 .btn-grad:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }
.dp-none{
    display: none !important;
}
.h-100vh{
    height: 100vh;
}
.head-icon-border{
    border: 1px solid #C4CDD5;
    border-radius: 50%;
    padding: 1px;
}
.cat-head-bg{
    background: #080808;
}
.clr-white{
    color: #FFFFFF !important;
}
.bdr-top-only{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.mrl-1{
    margin-left: 0.1rem;
}
.bdr-20{
border-radius: 20px !important;
}
.product-card-dimen{
    width: 99.7%;
    margin-top: .4px;
}
.img-container-card{
    position: relative;
}
.instock-pill{
    position: absolute;
    bottom: 22px;
    left: 4px;
    padding: 6px 9px;
    background: linear-gradient(to right, #D4FC79 0%, #96E6A1 100%);
    color: #166534;
    text-transform: uppercase;
    font-size: 10px;
}
.outstock-pill{
    position: absolute;
    bottom: 22px;
    left: 4px;
    padding: 6px 9px;
    background: linear-gradient(to right, #FF574F 0%, #FFC0BD 100%);
    color: #7E0600;
    text-transform: uppercase;
    font-size: 10px;
}

.outstock-pill-detailed{  
  position: absolute;
  right: 25px;
  top: 60px;
  padding: 8px 12px;
  background: linear-gradient(to right, #FF574F 0%, #FFC0BD 100%);
  color: #7E0600;
  text-transform: uppercase;
  font-size: 15px;
  z-index: 1;
  height: 32px;
  width: 155px;
  text-align: left;
}
.check-icon-green{
    background-color: #166534;
    border-radius: 50%;
    padding: 1px;
    color: #D4FC79;
    margin-left: -2px;
    margin-right: 3px;
}
.cross-icon-red{
    background-color: #7E0600;
    border-radius: 50%;
    padding: 1px;
    color: #FFC0BD;
    margin-left: -2px;
    margin-right: 3px;
}
.sale-icon-product{
    position: absolute;
    top: 5px;
    left: 5px;
    height: 35px;
    width: 35px;
}
.lab-tested-btn{
    position: absolute;
    right: -2px;
    top: 8px;
    width: 105px;
    height: 30px;
}
.py-half{
    padding-bottom: 0.2rem !important;
    padding-top: 0.2rem !important;
}
.product-card-desc{
    color: #5A5A5A;
    font-size: 14px;
    margin-top: -5px;
    font-weight: 400;
    margin-bottom: 5px;
}
.product-title{
    color: #222222;
    font-size: 16px;
    font-weight: 600;

}
.product-price{
    color: #249B3E !important;
    font-size: 16px;
}
.fs-975 {
    font-size: .975rem !important;
}
.custom-hr{
    margin: .5rem 0px;
}
.product-attribute{
    color: #666363;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
}
.mb-2 {
    margin-bottom: 2rem !important;
}
.shop-banner{
    width: 100%;
    margin-top:3rem;
}
.about-section-home{
    background-image: url(../images/about/about-bg.png);
    background-position: bottom;
    background-size: cover;
    padding-bottom: 10%;
}
.about-desc-img{
    width: 100%;
    max-height: 450px;
    object-fit: contain;
}
.texted-div{
    margin-top: 5%;
}
.main-modal-btn-close{
    margin-top: -18px;
    opacity: 1;
}
.main-modal-btn-close i{
    color: white !important;
    background: #fcc900;
   
}
@media (max-width:991px){
    .d-sm-block{
        display: block;
    }
}
@media (min-width:992px){
    .d-lg-none{
        display: none;
    }
}
.mll-5{
    margin-left:-5px;
}
.footer{
    background: url(../images/banner/footer-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width: 768px) {
    .pt-md-10 {
        padding-top: 10rem !important;
    }
    .pt-md-2 {
        padding-top: 2rem !important;
    }
   
}
.foot-head-desc {
    position: relative;
    display: inline-block;
  }

  .foot-head-desc::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 1px;
    right: 10px;
    height: 2px;
    background-color: #DCC723; /* Line color */
  }
.vertical-line-right {
  border-right: 1px solid #333; /* Line color */
  }
  .vertical-line-left {
    border-left: 1px solid #333; /* Line color */
    }
  .tr-desc{
    margin-top: 40px;
    max-width: 80%;
  }
/* .pt-5 {
    padding-top: 5rem !important;
} */
 .pt-25{
    padding-top: .25rem !important
 }
 .pt-2{
    padding-top: 2rem !important
 }
 .mt-25{
margin-top: .25rem !important
 }
 .mt-5{
    margin-top: 5rem !important
     }
     .mt-3{
        margin-top: 3rem !important
         }
         .mt-15{
          margin-top: 1.5rem !important
           }
           .mt-15{
            margin-top: 1.5rem !important
             }
           .mt-1{
            margin-top: 1rem !important
             }
 .btn-search-nav{
    height: 35px;
    --fc-btn-padding-y: 0.25rem;
 }
 .nav-btn-search{
    height: 35px;
 }
 .input-group-margin{
    margin-top:-5px; 
 }
 @media screen and (max-width: 768px) {
    .input-group-margin{
        margin-top:-20px; 
     }
     .tr-desc{
        max-width: 100%;
     }
     .first-col-foot{
        text-align: center;
     }
     
}
@media(max-width:768px) and (min-width:568px){
    .about-desc-img{
        margin-top: 21%;
    }
    .mbb-8{
        margin-bottom: 8rem !important;
     }
   
}
@media(max-width:567px) {
    .about-desc-img{
        margin-top: 21%;
    }
}
@media screen and (max-width:992px){
    .about-section-home{
        margin-bottom: 20% !important;
    }
}
.footer-dumble{
    position: absolute;
    top: -15%;
    left: 10%;
    z-index: -1;
}
.footer-div{
    position: relative;
    padding-top: 3%;
}
@media (max-width:568px){
    /* .vertical-line-left {
        border-left: 1px solid transparent; 
        } */
}
.about-text{
    color: #535353;
    line-height: 34px;
    font-size: 18px;
    margin-top: -25px;
    margin-bottom: 30px;
    margin-right: 44px;
}
.about-texts{
    color: #535353;
    line-height: 34px;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 10px;
}
.about-texts a{
    color: #9f832b;
}
.attribute-txt{
    color:#000000;
    font-size: 19px;
    line-height: 24px;
    font-weight: bold;
    text-transform: capitalize;
    margin-left: 5px;

}
.accordion-item{
    border: 1px solid transparent;
}
/* faq-listings */
    .accordion .accordion-item {
        border-bottom: 1px solid #e5e5e5;
      }
      
      .accordion .accordion-item button[aria-expanded='true'] {
        /* border-bottom: 1px solid #4B5562; */
      }
      
      .accordion button {
        position: relative;
        display: block;
        text-align: left;
        width: 100%;
        padding: 1em 0;
        color: #7288a2;
        font-size: 1.15rem;
        font-weight: 400;
        border: none;
        background: none;
        outline: none;
      }
      
      .accordion button:hover,
      .accordion button:focus {
        cursor: pointer;
        color: #4B5562;
      }
      
      .accordion button:hover::after,
      .accordion button:focus::after {
        cursor: pointer;
        color: #4B5562;
        border: 1px solid #4B5562;
      }
      
      .accordion button .accordion-title {
        padding: 1em 1.5em 1em 0;
      }
      
      .accordion button .icon {
        display: inline-block;
        position: absolute;
        top: 18px;
        right: 0;
        width: 22px;
        height: 22px;
        border: 1px solid;
        border-radius: 22px;
      }
      
      .accordion button .icon::before {
        display: block;
        position: absolute;
        content: '';
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: black;
      }
      .accordion button .icon::after {
        display: block;
        position: absolute;
        content: '';
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor;
      }
      
      .accordion button[aria-expanded='true'] {
        color: #4B5562;
      }
      .accordion button[aria-expanded='true'] .icon::after {
        width: 0;
      }
      .accordion button[aria-expanded='true'] + .accordion-content {
        opacity: 1;
        max-height: 9em;
        transition: all 200ms linear;
        will-change: opacity, max-height;
      }
      .accordion .accordion-content {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.1s ease-in-out;
        /* transition: opacity 200ms linear, max-height 200ms linear; */
        will-change: opacity, max-height;
      }
      .accordion .accordion-content p {
        font-size: 1rem;
        font-weight: 300;
        margin: 2em 0;
      }
      .gradient-text {
        background: linear-gradient(12deg, #FCC900, #00000053); /* Define gradient colors */
        -webkit-background-clip: text; /* Use the background clip to apply gradient to text */
        background-clip: text; /* Ensure it works on all browsers */
        color: transparent; /* Make text color transparent to reveal the gradient */
      }
      .slick-slider .slick-prev{
        border: 1px solid linear-gradient(353deg, #ffe200, #DCC723);
        color: linear-gradient(353deg, #ffe200, #DCC723);;
      }
      .slick-slider .slick-next{
        background: linear-gradient(353deg, #ffe200, #DCC723);
        color: #ffffff;
        box-shadow: 0px 14px 44px rgba(14, 20, 34, 0.2),   /* Bottom shadow (darker) */
        0px -4px 10px rgba(255, 255, 255, 0.8); /* Top shadow (lighter) */
      }
      .faq-title {
        position: relative; /* Required for the positioning of the pseudo-element */
        display: inline-block; /* Ensure the title is treated as inline */
      }
      .faq-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            right: 0px;
            /* transform: translateX(-50%); */
            width: 90px;
            height: 2px;
            background: linear-gradient(90deg, #ffe200, #DCC723);
      }

      .slick-slider .slick-prev::before {
        content: ''; /* Create an empty pseudo-element */
        position: absolute; /* Position it absolutely within the button */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 8px; /* Make the border radius match the button */
        background: linear-gradient(45deg, #ffe200, #DCC723); /* Apply gradient to the border */
        z-index: -1; /* Place the border behind the text */
        padding: 4px; /* Set the thickness of the border */
      }
      
      /* Gradient text color */
      .slick-slider .slick-prev {
        background-image: linear-gradient(45deg, #ffe200, #DCC723); /* Gradient text color */
        color: transparent; /* Make text color transparent to show the gradient */
        background-clip: text; /* Clip the background gradient to the text */
        -webkit-background-clip: text; /* Ensure compatibility with WebKit browsers */
        border: 1px solid #DCC723;
        box-shadow: 0px 14px 44px rgba(14, 20, 34, 0.2),   /* Bottom shadow (darker) */
        0px -4px 10px rgba(255, 255, 255, 0.8); /* Top shadow (lighter) */
      }
      .btn-Viewall{
        background: linear-gradient(119deg, #ffe200, #DCC723);
      }
      @media (max-width: 768px) {
        .hero-slider {
          height: 40vh; /* Reduce height to 40vh for mobile */
          background-size: cover; /* Maintain proper scaling of the background */
          background-position: center top; /* Adjust position to focus on the top */
        }
    }      

    @media screen and (max-width: 768px) {
        .hero-slider {
          /* height: 50vh;  Adjust height for smaller screens */
          /*  background-size: contain;  Ensure SVG fits entirely without cropping */
          /* height: 40vh;
              background-size: contain;
              background-size: cover;
              background-position-x: 50%; */
        }
        .footer-div{
            margin-top: 20%;
        }
      }
      .accordion button[aria-expanded='true'] + .accordion-content{
        max-height: 100%;
      }
      .accordion button[aria-expanded='true'] {
        color: #4B5562;
        background: linear-gradient(2deg, #FCC900, #00000053);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: bold;
        height: 100%;
        font-size: 20px;
        padding-bottom: 0px;
    }
    .accordion button[aria-expanded='true'] .icon{
        color: white;
        background: linear-gradient(2deg, #FCC900, #00000053);
        border: 1px solid yellow;
    }
    .accordion .accordion-item button[aria-expanded='true'] {
        border-bottom: 0px;
    }
    @media (max-width: 990px) {
        .navbar-offcanvas-color .nav-item .nav-link {
            border-bottom: 1px solid var(--fc-gray-200);
            color: #21313c !important;
            text-transform: uppercase;
            font-weight: 500;
        }
    }
    .mtt-35{
        margin-top:35px !important;
    }
    header{
        position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: 0px;
   background: rgb(0 0 0 / 37%);
   z-index: 10;
   color: white;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgb(0 0 0 / 4%) 100%);
     }
        .our-slider {
           /* position: relative;
   height: 100vh;
   width: 100%; */
   /* background: url(../assets/images/slider/cover-hero.svg); */
   /* background-size: cover;
   display: flex;
   justify-content: center;
   align-items: center;
   color: white;
   z-index: 5;
   background-position-y: 50%; */
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
   overflow: hidden;
   background-color: #000;
}
@media(max-width:600px){
  .our-slider{
     padding-bottom: 60%;
  }
}
.our-slider img{
  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-position: center;
}

.our-slider .slide {
 text-align: center;
}
@media(max-width:500px){
    .dp-sm-none{
        display: none;
    }
}
.subpage-header .text-div{
    padding-top: 180px;
    text-align: center;
}
.subpage-header {
    background: url('../images/banner/banner-behind.png'); 
    min-height: 350px;
}
.breadcrumb-item+.breadcrumb-item:before{
    display: none;
}
.breadcrumb li:not(:last-child)::after {
    content: "›";  /* Arrow character */
    margin-left: 10px;
    color: #fff;  /* Arrow color */
    font-size: 24px;
  }
  .breadcrumb{
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(204, 204, 204, 0.65);
    max-width: max-content;
    margin: auto;
    padding: 12px 100px;
    border-radius: 36px;
    font-weight: 400;
  }
  .breadcrumb a, .breadcrumb li{
    font-size: 24px;
    color: #FFFFFF !important;
  }
  .breadcrumb-item.active{
    color: #FFC800 !important;
  }
  .bg-dark {
    --fc-bg-opacity: 1;
    background-color: #000000 !important;
}
th{
    color: #FFC800 !important;
    text-align: center ;
}
.pricelist-table tr{
    text-align: center;
}
.btn-grad-table {
    margin: 0px auto;
    padding: 5px 15px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    /* background-size: 200% auto; */
    color: black;
    box-shadow: 0 0 20px #eee;
    border-radius: 20px;
    display: block;
    border: 1px solid transparent;
    background-image: linear-gradient(to right, #FCC900 0%, #DCC723 100%) !important;
}
.rounded-table {
    border-collapse: separate; /* Required to maintain rounded corners */
    border-spacing: 0; /* Remove spacing between cells */
    width: 100%; /* Border color and thickness */
    border: 1px solid #D8D8D8;
    border-radius: 10px; /* Round the corners of the table */
    overflow: hidden;
    /* Ensures that content doesn't overflow the rounded corners */
  }
  .order-status-table{
    color: #DC251C;
    font-size: 10px;
  }
  .pic-div img{
    margin-top: 10px;
    height: 470px;
  }
  .form-div{
    background: #E3E3E3;
    border: 1px solid #DCDBD7;
    border-radius: 30px;
    padding: 50px;
    z-index: 1;
    min-height: 480px;
  }

  .login-grad {
    margin: auto;
    padding: 5px 30px;
    text-align: center;
    max-width: 200px;
    text-transform: uppercase;
    transition: 0.5s;
    /* background-size: 200% auto; */
    color: black;
    box-shadow: 0 0 20px #eee;
    border-radius: 20px;
    display: block;
    border: 1px solid transparent;
    background-image: linear-gradient(to right, #FCC900 0%, #DCC723 100%) !important;
}
.justify-content-center {
    justify-content: center !important;
}
.txt-center{
    text-align: center;
}
.txt-right{
    text-align: right;
}
.gradient-hr {
    border: none; /* Remove the default border */
    height: 2px; /* Set the thickness of the line */
    background: linear-gradient(to right, #FCC900, #DCC723); /* Gradient from left to right */
    max-width: 70px;
    margin: 10px auto;
  }
  .greyed-anchor{
    color: #717171;
    font-size: 12px;
    margin: 5px 2px;
  }
  @media(min-width:768px){
   .form-div{
    margin-left: -20px;
    margin-top: -10px;
   }
   .pic-div{
    text-align: right;
  }
  }
  @media(max-width:767px){
    .form-div{
        margin: 20px 20px;
    }
    .pic-div{
        text-align: center;
      }
      main{
        margin-bottom: 15%;
      }
  }
  .form-control{
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 1.5rem;
  }
  .ticket-container-div{
    background: #E3E3E3;
    border: 1px solid #DCDBD7;
    border-radius: 30px;
    padding: 50px;
    z-index: 1;
    min-height: 480px;
  }.card-title {
    color: #000000;
    margin-bottom: var(--fc-card-title-spacer-y);
    margin-top: 10px;
    font-size: 16px;
}
.blogs-card .card-text{
  min-height: 120px;
}
.blogs-card svg{
  height: 13px;
    width: 13px;
    margin-top: -2px;
}
.card small{
  color: #7D7D7D;
}
.container-dived {
  display: flex;
  align-items: center;  /* Vertically align the text and SVG */
  justify-content: flex-start;
  width: 100%;
}

.overview-text {
  margin-right: 7px;
    font-size: 14px;
    font-weight: bold;
    width: 160px;
}

.line-svg {
  width: 100%;         /* Ensure SVG takes full width of container */
  height: 14px;        /* Set the height of the line */
  max-width: none;     /* Ensure SVG doesn't get scaled down */
}

svg line {
  stroke-width: 1;     /* Set line stroke width */
  stroke-linecap: round; /* Optional: rounded ends for the line */
}
.btn-reviews {
  margin: 0px;
  padding: 2px 5px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  /* background-size: 200% auto; */
  color: black;
  box-shadow: 0 0 20px #eee;
  border-radius: 20px;
  width: 99px;
  height: 24px;
  display: block;
  color: white;
  font-size: 11px;
  border: 1px solid transparent;
  background-image: linear-gradient(to right, #000000 0%, #666666 100%) !important;

}
.gradient-bullets {
  list-style: none;
  padding-left: 25px;
  margin-top: 20px;
}

.gradient-bullets li {
  position: relative;
  font-size: 14px;
}

.gradient-bullets li::before {
  content: ''; /* Create an empty pseudo-element */
  position: absolute;
  left: -20px; /* Position it to the left of the list item */
  top: 50%;
  transform: translateY(-50%); /* Center the bullet vertically */
  width: 9px; /* Bullet width */
  height: 9px; /* Bullet height */
  border-radius: 50%; /* Make it round */
  background: linear-gradient(45deg, #FCC900, #D5AD2C); /* Gradient background */
}
.price-tag-stroked{
  color: #DC251C;
    -webkit-text-stroke: 3px rgba(220, 196, 37, 0.23);
    font-size: 25px;
}
.pricetag-input{
  min-width: 80px !important;
  border-right: 0px !important;
  border-left: 0px !important;
}
.add-quantity-input{
  border-right: 0px !important;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.minus-quantity-input{
  border-left: 0px !important;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.input-spinner-shadowed{
  box-shadow: -1px 1px 0.2px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}
.pll-20{
  padding-left: 20px;
}
.pll-40{
  padding-left: 40px;
}
.product-detailed-div {
  position: relative;
}
.product-detailed-div #product-mw{
  margin-left: 5%;
}
.product-detailed-div .product-tools{
  position: absolute;
  top: 0px;
  transform: translateY(10%);
}
.mtb-20{
  margin-top: 20px;
  margin-bottom: 20px;
}
.product-tools img{
  border: 1px solid #DADADA;
}
.product-detailed-div .thumbnails .tns-nav-active .thumbnails-img {
  background: none;
  border: 1px solid #DADADA;
  border-right: 4px solid #FAD007;
  border-radius: 0.5rem;
  /* padding: 7px; */
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.product-tools img {
  border-radius: 6px;
  max-width: 100%;
  max-height: 100px !important;
}
.lab-tested--detailed-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  width: 170px;
  height: 50px;
  z-index: 1;
}
.instock-pill-detailed {
  position: absolute;
  right: 25px;
  top: 60px;
  padding: 8px 20px;
  background: linear-gradient(to right, #D4FC79 0%, #96E6A1 100%);
  color: #166534;
  text-transform: uppercase;
  font-size: 15px;
  z-index: 1;
  height: 32px;
  width: 155px;
  text-align: left;
}
.span-active{
  color: #FFC800 !important;
}
.number-nav .pagination{
  display: flex;
  padding: 0;
  margin: 0;
}
.number-nav {
  text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;

}
.guides-list a{
  color: lightskyblue;
  margin-top: 5px;
}


/* new code  */


.min-170{
  min-height: 170px;
}
.accordian-bg-head{
  background: #ebebeb;
    padding: 15px 14px;
    border-radius: 4px;
    border: 1px solid #d4d4d4;
}
.checkout-accor .accordion-item {
  border-bottom: 1px solid transparent;
}
.bordered-div{
  border: 1px solid #ababab;
  border-radius: 4px;
}
/*.mtt-10{
  margin-top:10px;
}
.mll-5{
  margin-left: 5px;
}
*/
/* backend dev code */

.card-product{
    overflow: hidden;
}

.nav-category .nav-item .nav-link:hover {
    color: #b89907 !important;
}
a:hover{
      color: #b89907 !important;
}

.texted-div h1{
 font-family: "Audiowide", sans-serif !important;
  font-weight: 400;
  font-style: normal; 
  
}

.prod_labtest_icon {
    position: absolute;
    right: 7px;
    top: 0px;
    padding: 15px 18px;
    font-size: 18px;
    z-index: 1;
    height: 65px;
    width: 189px;
    text-align: left;
}