body {
    margin: 0;
    height: 100vh;
    font-family: "Libre Franklin", sans-serif;
}

* {
    box-sizing: border-box;
}

.gradient-heading {
    background: linear-gradient(293.02deg, #000000 11.02%, #4D2C76 49.3%, #3B59B7 99.6%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.text-gradient-secondary {
  background: linear-gradient(310.14deg, #FFFFFF 12.98%, #B574AB 110.83%, #6E4291 131.58%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.container {
    display: flex;
    width: 300vw;


    section {
        width: 100vw;
    }
}

section {
    height: 100vh;
}

.image-cards-container {
    height: 100%;
}

.image-card {
    height: 284px;
    width: 360px;
}

.image-card-1 {
    position: absolute;
    top: 174px;
    left: 88px;
}

.image-card-2 {
    position: absolute;
    top: 348px;
    z-index: 2;
    left: 293px;
}

.image-card-3 {
    position: absolute;
    top: 567px;
    left: 186px;
}

@keyframes vertical-scroll {
    0% { transform: translateY(0); }
    50% { transform: translateY(-100px); }
    100% { transform: translateY(0); }
  }

  @keyframes horizontal-scroll-200 {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }

  .animate-horizontal-scroll-200 {
    animation: horizontal-scroll-200 6s linear infinite;
  }

  @keyframes horizontal-scroll-200-reverse {
    0% { transform: translateX(0); }
    50% { transform: translateX(-200px); }
    100% { transform: translateX(0); }
  }

  .animate-horizontal-scroll-200-reverse {
    animation: horizontal-scroll-200-reverse 6s linear infinite;
  }

  @keyframes infinite-horizontal-scroll {
    0% { transform: translateX(0); }
    90% { transform: translateX(-100%); }
    100% {transform: translateX(0);}
  }

  .animate-infinite-horizontal-scroll {
    animation: infinite-horizontal-scroll 10s linear infinite;
  }

  @keyframes horizontal-scroll-500 {
    0% { transform: translateX(0px); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(-500px); }
  }

  .animate-horizontal-scroll-500 {
    animation: horizontal-scroll-500 20s linear infinite;
  }
  

  @keyframes horizontal-scroll-500-reverse {
    0% { transform: translateX(0px); }
    50% { transform: translateX(-300px); }
    100% { transform: translateX(0); }
  }

  .animate-horizontal-scroll-500-reverse {
    animation: horizontal-scroll-500-reverse 20s linear infinite;
  }

  .animate-vertical-scroll-1 {
    animation: vertical-scroll 6s linear infinite;
  }
  
  .animate-vertical-scroll-2 {
    animation: vertical-scroll 8s linear infinite;
  }
  
  .animate-vertical-scroll-3 {
    animation: vertical-scroll 10s linear infinite;
  }
  
  .animate-vertical-scroll-4 {
    animation: vertical-scroll 12s linear infinite;
  }
  
  .animate-vertical-scroll-5 {
    animation: vertical-scroll 14s linear infinite;
  }

  /* Define the keyframes for the horizontal scrolling */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Apply the animation to the scrolling container */
.animate-scroll-left {
    animation: scroll-left 20s linear infinite;
}

.animate-scroll-right {
    animation: scroll-right 20s linear infinite;
}

.testimonial-card{
    box-shadow: 0px 6px 25px 0px #00000026;
}

.scroll-container{
    overflow: hidden;
    white-space: nowrap;
  }

  .card-overlay {
    background: rgba(0,0,0,0.3);
  }

  .swiper-container {
    width: 100%;
    overflow: hidden;  /* Prevent the scrollbar */
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}

.gallery {
    margin: 20px 0;
}

.social-media-handler{
    display: flex;
    align-items: center;
    gap: 10px;
}

.influencer-video{
  /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.influencer-profile {
  /* box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
  height: 100px;
  width: 100%;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px -80px 34px -24px inset
}

.sticky-header {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.85) !important;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.circle-image {
  animation: rotate360 100s linear infinite;
}

.brands-card-1 {
    background: linear-gradient(202deg, #FF2470 25.3%, #FFA0DA 47.82%);
}

.brands-card-2 {
    background: linear-gradient(199.44deg, #7B24FF 27.13%, #9BA9FF 48.28%);
}

.brands-card-3 {
    background: linear-gradient(199.44deg, #24BDFF 27.13%, #9BFFFD 48.28%);
}

.brands-card{
    position: absolute;
    top: 55%;
    right: 0;
    border-radius: 747px;
    filter: blur(62px);
    width: 747px;
    height: 580px;
}