@keyframes up-down {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
  }
  
  .up-down-animation {
    animation: up-down 1s infinite;
  }
  @keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  .flicker-animation {
    animation: flicker 0.1s infinite;
  }
  @keyframes bee-animation {
    0% {
      transform: translate(0, 0) rotate(0);
    }
    25% {
      transform: translate(20px, -30px) rotate(-15deg);
    }
    50% {
      transform: translate(40px, 0) rotate(0);
    }
    75% {
      transform: translate(20px, 30px) rotate(15deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);
    }
  }

  .animate-bee {
    animation: bee-animation 6s infinite;
  }  

  .rotating-text{
    display: flex;
    justify-content: center;
    align-items: center;
    /* min-height: 100vh; */

  }
  .circle{
    position: relative;
    width: 200px ;
    height: 200px;
    /* background: #ccc; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .logo{
    position: absolute;
    width: 150px;
    height: 150px;
    background: url(../images/small-bee2-resized.png);
    border-radius: 50%;
    background-size: cover;
filter: brightness(1.5) contrast(1.5);

  }
  .text{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateText 10s linear infinite;
  }
  @keyframes rotateText{
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
  }
  .text span{
    position: absolute;
    left: 50%;
    font-size: 1.2rem;
    transform-origin: 0 100px;
  }

  @keyframes card-animation {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-20px);
    }
    100% {
      transform: translateX(0);
    }
  }

  .animate-card {
    animation: card-animation 3s infinite;
  }


  
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

  body {
    font-family: "Poppins", sans-serif !important;
  }
 
.loader{
  display: flex;
  justify-content: center;
  align-items: center;
 

}
@keyframes animate {
  0% {
    background-position: left 0px top 80px;
  }
  50% {
    background-position: left 800px top -50px;
  }
  100% {
    background-position: left 240px top 90px;
  }
}

.loader h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  /* font-size: 10rem; */
  color: rgba(0, 0, 0, .1);
  background-image: url('../images/IMG_20240426_214023-removebg-preview.png');
  background-repeat: repeat-x;
  -webkit-background-clip: text;
  animation: animate 5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s; /* Set animation delay to 0s */
  
  /* Ensure animation starts immediately on mobile devices */
  animation-play-state: running;
}

/* Media Query for mobile devices */
@media only screen and (max-width: 768px) {
  .loader h1 {
    animation-play-state: running; /* Ensure animation starts immediately on mobile devices */
  }
}

@keyframes beeFlightDesktop {
  0% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(100px) translateY(-50px);
  }
  50% {
    transform: translateX(200px) translateY(0);
  }
  75% {
    transform: translateX(100px) translateY(50px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes beeFlightMobile {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(50px) translateY(-25px); /* Adjusted path for mobile */
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

.bee-animation {
  animation: beeFlightDesktop 5s linear infinite; /* Default animation for desktop */
}

@media (max-width: 400px) {
  .bee-animation {
    animation: beeFlightMobile 3s linear infinite; /* Animation for mobile devices */
  }
}

/* Keyframes for the up and down motion */
@keyframes beeUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px); /* Adjust the value to control the amount of up and down motion */
  }
}

/* Style for the bee container */
.bee-container {
  width: 100%; /* Adjust the width as needed */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px; /* Adjust margin as needed */
}

/* Style for the bee image */
.bee-image {
  max-width: 100%; /* Adjust the maximum width as needed */
  height: auto;
  animation: beeUpDown 2s ease-in-out infinite alternate; /* Apply the animation */
}


.container{
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider{
  position: absolute;
  inset: 80px 200px 80px 80px;
  background: #ccc;
  border-radius: 20px;
}
.slider .slides{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 320px;
  background: var(--img);
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  transition: 0.5s;
  box-shadow: 0 25px 50px rgba(0, 0, 0, .5);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;

}
.slider .slides:nth-child(1),
.slider .slides:nth-child(2)
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(0);
  box-shadow: 0 25px 50px rgba(0, 0, 0);
  background-size: cover;

}
.slider .slides:nth-child(3){
  background-size: cover;
  left: calc(50% + 240px);
}
.slider .slides:nth-child(4){
  background-size: cover;
  left: calc(50% + 500px);
}
.slider .slides:nth-child(5){
  background-size: cover;
  left: calc(50% + 760px);
}
.slider .slides:nth-child(6){
  background-size: cover;
  left: calc(50% + 1020px);
  opacity: 0;

}
.buttons{
  position: absolute;
  bottom: 15px;
  display: flex;
  gap: 20px;
}
.buttons span{
  position: relative;
  width: 50px;
  height: 50px;
  background-color: #111;
  cursor: pointer;
  display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 50%;

}

.buttons span:before{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-top: 4px solid #fff;
  border-left: 4px solid #fff ;
  transform: rotate(315deg) translate(2px, 2px);
}
.buttons span:ntj-child(2)::before{
  transform: rotate(315deg) translate(2px, 2px);
}

.buttons span:active{
  opacity: 0.5;

}

.content{
  position: relative;
  padding-left: 40px;
  max-width: 600px;
  transition: 0.25s;
 transition-delay:0s ;
 transform: translateY(40px);
 z-index: 10000;
 opacity: 0;
}

.content h2{
  font-size: 4em;
  color: #fff;

}
.content p{
  color: #fff;
}
.slider .slides:nth-child(1) .content,
.slider .slides:nth-child(2) .content
{
  opacity: 1;
  transform: translateY(0px);
  transition-delay: 0.5s;

}

/* responsiveness  */
@media (max-width: 900px)
{
  .slider{
    position: absolute;
    inset: 40px 40px 200px 40px;

  }
  .slider .slides{
    width: 100px;
    height: 100px;
    top: initial;
    bottom: -170px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    
  }
  .slider .slides:nth-child(1),
  .slider .slides:nth-child(2)
  {
    top: initial;
    bottom: 0px;

  }
  .slider .slides:nth-child(3){
    left: 0;
  }
  .slider .slides:nth-child(4){
    left: 120px;
  }
  .slider .slides:nth-child(5){
    left: 240px;
  }
  .slider .slides:nth-child(6){
    left: 360px;
  }
}



/* product decription card */