.hidden-section {
    display: none;
}

/* Add this in your global CSS if not using tailwind-rtl plugin */
.ltr {
    direction: ltr;
    text-align: left;
  }

  .rtl {
    direction: rtl;
    text-align: right;
  }

  .header {
      background-color: white;
      width: 100%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
      transform: translateY(0);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .hide-header {
      transform: translateY(-100%);
    }


  /* slider dot css start */

  ul.slick-dots {
      display: flex;
      position: absolute;
      left: 0;
      bottom: 0px;
      list-style: none;
      right: 0;
      text-align: center;
      justify-content: center;
      margin-bottom: 20px;
  }

  .slick-dots li {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 31px;
      margin: 0;
      padding: 11px 2px;
      cursor: pointer;
  }

  .slick-dots li button {
      font-size: 0;
      line-height: 0;
      display: block;
      width: 5px;
      height: 5px;
      padding: 4px;
      cursor: pointer;
      color: transparent;
      border: 0;
      outline: none;
      background: transparent;
  }

  li.slick-active button {
      border: 3.5px solid #f9e859;
      border-radius: 50%;
  }

  .slick-dots li button:before {
      content: "•";
      font-size: 40px;
      line-height: 38px;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 19px;
      height: 19px;
      text-align: center;
      opacity: 1.25;
      color: #4e3991;
  }

  button.slick-prev.slick-arrow {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    background-color: transparent;
    border: 2px solid #f8e959;
    cursor: pointer;
    outline: none;
    z-index: 2;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    transition: background-color 0.3s ease;
}

button.slick-next.slick-arrow {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto;
    background-color: transparent;
    border: 2px solid #f8e959;
    cursor: pointer;
    outline: none;
    z-index: 2;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    transition: background-color 0.3s ease;
}

  .slick-arrow.slick-prev {
      left: 20px;
  }

  .slick-arrow.slick-next {
      right: 20px;
  }

  .slick-arrow:before {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      border-top: 2px solid #f8e959;
      border-left: 2px solid #f8e959;
  }

  button.slick-prev.slick-arrow:hover,
  button.slick-next.slick-arrow:hover{
      background-color: #4e3991;
  }

  .slick-arrow.slick-prev:before {
      transform: rotate(-45deg) translate(2px, 2px);
  }

  .slick-arrow.slick-next:before {
      transform: rotate(135deg) translate(2px, 2px);
  }

  .slider-progress span.active {
      width: 100%;
  }

  @keyframes fadeindown {
      0% {
          opacity: 0;
          transform: translateY(-20px);
      }
      50% {
          opacity: 1;
          transform: translateY(0);
      }
      100% {
          opacity: 0;
          transform: translateY(20px);
      }
  }

  /* slider dot css end */

  .circlerotate{
    animation: rotate 10s infinite linear;
  }
 @keyframes rotate{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
 }
 .from-box2{

    transition: .5s;
    position: relative;
    z-index: 1;
    display: inline-block;
}
.from-box2:before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    transform: scale(0);
    width: 100%;
    height: 100%;
    transition: .5s;
    border-radius: 100px;
    color: #29abe2;
}
.from-box2 span {
    margin-left: 6px;
    font-size: 25px;
}
.from-box2:hover:before {
    transform: scale(1);
    background: #58287a;
}
.from-box2:hover {
    color: #fff;
}

  .bradcrumb::after{
      content: "";
      position: absolute;
      left: 0;
      bottom: -10px;
      background-image: url('../images/shop/banner-bottom-shape.png');
      width: 100%;
      height: 36px;
      background-repeat: repeat;
      background-position: center;
      z-index: 1;
  }
  /* .homeprod::before{
      content: "";
      position: absolute;
      left: 0;
      top: -45%;
      background-image: url('../images/curve.png');
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -1;
  } */
  .mission::before{
      content: "";
      position: absolute;
      left: 0;
      top: -45%;
      background-image: url('../images/curve.png');
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 1;
  }
  .aboutcolumn::before{
      content: "";
      background-image: url('../images/trialbox-bg.png');
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      top: -65px;
      left: 0;
      right: 0;
      padding-bottom: 6.2%;
  }
  .aboutcolumn::after{
      content: "";
      background-image: url('../images/hero-grass.png');
      background-size: 100%;
      background-repeat: no-repeat;
      position: absolute;
      bottom: -11px;
      left: 0;
      right: 0;
      width: 100%;
      height: 208px;
  }
  .sleeping-panda {
      top: auto;
      bottom: 60px;
      right: 0;
      position: absolute;
      width: 260px;
      transform: scaleX(-1);
  }
  .zzz-zzz {
      animation-delay: 1s;
      left: 130px;
  }
  .zzz-zz {
      animation-delay: .5s;
      left: 100px;
  }
  .zzz-z {
      animation-delay: 0s;
      left: 70px;
  }
  .zzz {
      animation-name: zzz;
      animation-duration: 2s;
      animation-timing-function: ease-out;
      animation-iteration-count: infinite;
      animation-direction: forwards;
      color: #e7c3d1;
      font-weight: 700;
      position: absolute;
      z-index: 100;
      transform: translateY(100%) scaleX(-1);
  }
  @-webkit-keyframes zzz {
      0% {
          color: rgba(160,84,246,0);
          font-size: 15px;
          -webkit-transform: translateY(100%) scaleX(-1);
          transform: translateY(100%) scaleX(-1);
      }
      100% {
          color: #e7c3d1;
          font-size: 30px;
          -webkit-transform: translateY(-150%) scaleX(-1);
          transform: translateY(-150%) scaleX(-1);
      }
  }

  @keyframes zzz {
      0% {
          color: rgba(160,84,246,0);
          font-size: 15px;
          -webkit-transform: translateY(100%) scaleX(-1);
          transform: translateY(100%) scaleX(-1);
      }
      100% {
          color: #e7c3d1;
          font-size: 30px;
          -webkit-transform: translateY(-150%) scaleX(-1);
          transform: translateY(-150%) scaleX(-1);
      }
  }

  .animate-custom-upward{
    animation: customUpwardAnimation 3s ease-in-out infinite;
  }
  @keyframes customUpwardAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
        /* Adjust the desired amount of movement */
    }
    100% {
        transform: translateY(0);
    }
}
  @media only screen and (max-width:768px) {
      .header {
          position: sticky;
      }
      .btn {
          padding: 12px 21px;
      }
      .aboutmainsec:after{
          content: none;
      }
      .aboutmainsec::before{
          content: none;
      }

      .aboutcolumn::before{

          top: -25px;

      }
      .aboutcolumn::after{

          bottom: -170px;

      }
      .homeprod::before{
          content: none;
      }
  }