#hero-section {
  /* background: radial-gradient(ellipse 50% 50%, rgba(251, 23, 206, 0.44) 100%, transparent 100.1%); */
  /* background-image: url("../images/background-images/top-ellipse.svg"); */
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-size: 50% 60px; */
  /* filter: blur(1px); */
}

html {
  overflow-x: hidden;
}

#hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 100% at right center, rgba(161, 1, 210, 0.47) 100%, transparent 100.1%),
    radial-gradient(ellipse 50% 100% at left center, rgba(161, 1, 210, 0.47) 100%, transparent 100.1%);
  background-repeat: no-repeat;
  background-size: 600px 100%, 600px 100%;
  background-position: right center, left center;
  transform: rotate(180deg);
  pointer-events: none;
  filter: blur(120px);
  height: 40%;
  margin-top: auto;
  margin-bottom: auto;
}



#buttonGradient {
  background: linear-gradient(90deg, #FB17CE 0%, #0166D2 100%);
  clip-path: polygon(0% 0%, 100% 0, 100% 70%, 80% 100%, 0% 100%);


}


#voiceContainerfirst.voice-bottom {
  position: fixed !important;
  right: 1%;
  bottom: 100px;
  transform: translate(-50%, 100%);
  z-index: 9999;
  scale: 0.6;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1), left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#voiceContainerfirst.voice-bottom.show {
  transform: translate(-50%, 0);
}

#voiceContainerfirst {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#voiceSpan {
  display: block;

  animation: ripple 1.5s linear infinite;
  transition: all 0.4s ease;
  border-radius: 50px;
}

#voiceSpan:hover {
  transform: scale(1.3);
}

/* #MiddleBorder{
    background-image: url(middle\ border.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  } */

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
      0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 40px rgba(255, 255, 255, 0.1),
      0 0 0 60px rgba(255, 255, 255, 0.1);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
      0 0 0 40px rgba(255, 255, 255, 0.1),
      0 0 0 60px rgba(255, 255, 255, 0.1),
      0 0 0 80px rgba(255, 255, 255, 0);
  }
}


#seoncSecBox {
  clip-path: polygon(5% 0, 100% 0, 100% 96%, 95% 100%, 0 100%, 0 4%);
  background-color: white;





}

#seoncSecBox-inner {
  clip-path: polygon(5% 0, 100% 0, 100% 96%, 95% 100%, 0 100%, 0 4%);
}



#secondSecBox:hover {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
}

#SecondSection {
  transition: all 1s ease;
}

#SecondSection a:hover {
  /* color: var(--primary-gradient) !important; */
  background: -webkit-linear-gradient(180deg, #307FE2 0%, #EA27C2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}

#SecondSection a:hover img {
  transform: translateX(5px);
}

#industries-we-serve {
  background-image: url("../images/background-images/Ellipse-23.svg"), url("../images/background-images/Ellipse-24.svg");
  /* background-image: linear-gradient(270deg, #307FE2 0%, #EA27C2 100%), url("../images/background-images/Ellipse-24.svg"); */
  background-size: contain, contain;
  background-position: center, center;
  background-repeat: no-repeat;
}

/* #our-solution{
  border-radius: 50%;
  background: var(--Primary-Gradient-1, linear-gradient(270deg, #307FE2 0%, #EA27C2 100%));
  filter: blur(100px);
} */

#our-solution {
  position: relative;
  overflow: hidden;
  /* Ensures the blur doesn't bleed outside */
}

#our-solution::before {
  content: "";
  position: absolute;
  top: 225px;
  left: 0;
  right: 0;
  bottom: 215px;
  border-radius: 50%;
  /* Or adjust as needed */
  background: var(--primary-gradient);
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}

#our-solution>* {
  position: relative;
  z-index: 1;
}


.slider-active {
  z-index: 20;
  transform: translateX(-50%) scale(1.1);
  opacity: 1;
  box-shadow: 0 10px 32px 0 #0005;
  pointer-events: auto;
  transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
  left: 50%;
  position: relative;
}

.slider-left {
  z-index: 10;
  transform: translateX(-110%) scale(0.9);
  opacity: 0.7;
  filter: blur(1px);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
  left: 50%;
  position: absolute;
}

.slider-right {
  z-index: 10;
  transform: translateX(10%) scale(0.9);
  opacity: 0.7;
  filter: blur(1px);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
  left: 50%;
  position: absolute;
}

.slider-hidden {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
  left: 50%;
  position: absolute;
  display: none !important;
}

@media screen and (max-width:992px) {
  #hero-section {
    height: 100vh;
  }

  .slider-left {
    z-index: 10;
    transform: translateX(-110%) scale(0.9);
    opacity: 0.7;
    filter: blur(1px);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
    left: 50%;
    position: absolute;
    visibility: hidden !important;
  }

  .slider-right {
    z-index: 10;
    transform: translateX(10%) scale(0.9);
    opacity: 0.7;
    filter: blur(1px);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(.4, 0, .2, 1);
    left: 50%;
    position: absolute;
    visibility: hidden !important;
  }

  .slider-dots {
    position: relative;
    right: auto !important;
    rotate: 0deg !important;
  }
}


#card-container {
  overflow: hidden;
  position: relative;
}

.card {
  width: 100%;
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.slider-dots {
  position: absolute;
  right: -31px;
  rotate: 269deg;
}

.slider-dots-industries {
  position: relative;
  z-index: 10;
}

.slider-dots {
  z-index: 10;
}

@media (min-width: 992px) {
  #hero-section {
    background-image: url("../images/background-images/top-ellipse.svg");
  }
}