* {
      box-sizing: border-box;
}

html {
      scroll-behavior: smooth;
}
body {
      font-family: "Work Sans", sans-serif;
      background-color: #ffffff;
}

.banner-section {
background-image: url('assets/banner-rect.png');
background-position: center;
background-size: cover;
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
z-index: 99;
}

.animate-moveDot {
      animation: moveDot 3s ease-out 1.25s infinite alternate none;
}

.moveDot-heading {
      animation: moveDot2 3s ease-out 1.25s infinite alternate none;
}

.animate-social {
      animation: moveDot3 3s ease-out 1.5s infinite alternate none;
}

@keyframes moveDot{
      0% {
          transform:  scale(.75);
      }
      100% {
          transform:  scale(1.125);
      }
  }

  @keyframes moveDot2{
      0% {
          transform:  scale(1);
      }
      100% {
          transform:  scale(1.125);
      }
  }  

  @keyframes moveDot3{
      0% {
          transform:  scale(.85);
      }
      100% {
          transform:  scale(1.25);
      }
  } 

  .bubble1 {
      right: 40%; /* Set the initial right position */
      bottom: 60%; /* Set the initial bottom position */
      animation: moveBubble1 20s ease-in-out infinite alternate, bobble1 10s ease-in-out infinite alternate;
      /* Adjust the animation durations and distances as needed */
    }
    
    @keyframes moveBubble1 {
      0%, 100% {
        right: 40%; 
      }
      50% {
        right: 75%; 
      }
    }
    
    @keyframes bobble1 {
      0%, 100% {
        bottom: 40%; 
      }
      50% {
        bottom: 55%;
      }
    }



    .bubble2 {
      left: 10%; /* Set the initial right position */
      bottom: 60%; /* Set the initial bottom position */
      animation: moveBubble2 30s ease-in-out infinite alternate, bobble2 20s ease-in-out infinite alternate;
      /* Adjust the animation durations and distances as needed */
    }
    
    @keyframes moveBubble2 {
      0%, 100% {
        left: 0%; 
      }
      50% {
        left: 30%; 
      }
    }
    
    @keyframes bobble2 {
      0%, 100% {
        top: 40%; 
      }
      50% {
        top: 20%;
      }
    }

    .bubble {
      /* right: 40%; Set the initial right position */
      /* bottom: 60%; Set the initial bottom position */
      animation: moveBubble 20s ease-in-out infinite alternate, bobble 10s ease-in-out infinite alternate;
      /* Adjust the animation durations and distances as needed */
    }
    
    @keyframes moveBubble {
      0%, 100% {
        right: 90%; 
      }
      50% {
        right: 75%; 
      }
    }
    
    @keyframes bobble {
      0%, 100% {
        bottom: 40%; 
      }
      50% {
        bottom: 55%;
      }
    }

    
  #sec-text::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      border-left: 2px solid #1EBCB4;
      background: #f4f4f4;
      animation: textanimate 2.5s steps(16) forwards .5s;
      }
      
      @keyframes textanimate {
            0% {
                  left:0;
            }
            100% {
                  left: 100%;
            }
      }
    
  
@media (max-width:480px) {  
.header-whtsp {
      max-width: 185px;
}
}

.shadow-img {
      filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.85));

}

.background-grid {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, #eee 1px, transparent 1px), linear-gradient(to bottom, #eee 1px, transparent 1px);
      background-size: 50px 50px; /* Adjust the size of each small box */
      /* z-index: -10; */
      transform: rotate(2deg);

    }

    .shadow-text {
      text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
    }
    
    .swiper {
      width: 100%;
      height: auto;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      /* width: 100%; */
      /* height: 100%; */
      object-fit: contain;
    }

    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
      display: none;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
      display: none;
    }

 .marquee-container {

  animation: marquee 15s linear infinite;
 }   

 .marquee-container img {
      width: 100%; 
      aspect-ratio: 1/1;
      mix-blend-mode: color-burn;
      }
    
    @keyframes marquee {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-100%);
      }
    }