.levitating-div {
  /* background: linear-gradient(45deg, #ff6b6b, #4ecdc4); */
  border-radius: 20px;
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1); */
  position: relative;
  animation: levitate 3s ease-in-out infinite;
}

.levitating-div::before {
  content: "";
  position: absolute;
  /* background: radial-gradient(ellipse, rgb(255, 0, 0) 0%, transparent 70%); */
  border-radius: 50%;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes levitate {
  0%,
  100% {
    transform: translateY(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(100px) rotateX(5deg) rotateY(2deg);
  }
}

@keyframes shadowPulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(-50%) scale(0.8);
    opacity: 0.3;
  }
}

@keyframes appear1 {
  from {
    opacity: 0;
    transform: scale(1.5);
  }
  to {
    opacity: 1;
    transform: scale(0.9);
  }
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.highlight-sec {
  z-index: 100;
  background-color: black;
  border-radius: 40px;
}

.mobile-carusel-holder {
  margin-top: -7%;
  width: 100vw;
  display: flex;
  overflow: hidden;
  border-radius: 40px;
  position: relative;
  background: linear-gradient(
    rgb(0, 0, 0) 0%,
    rgb(37, 36, 36) 75%,
    #5e4b3c 100% /* white 95% */
  );
  /* background-color: red; */
}

.mobile-carusel-holder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: linear-gradient(
  black 0%,  
  black 12.5%,
    #ed8530 13.25%,
    rgb(0, 0, 0) 13%,
    rgb(0, 0, 0) 25%,
    #ed8530 25.25%,
    rgb(0, 0, 0) 25.5%,
    rgb(0, 0, 0) 32%,
    #ffffff8d 32.25%,
    rgb(0, 0, 0) 32.5%,
    rgb(0, 0, 0) 36%,
    #ed853096 36.25%,
    rgb(0, 0, 0) 36.5%,
    rgb(0, 0, 0) 38%,
    #eb934b75 38.25%,
    rgb(0, 0, 0) 38.5%,
    rgb(0, 0, 0) 39%,
    #ffffff5c 39.25%,
    rgb(0, 0, 0) 39.5%,
    rgb(0, 0, 0) 39.75%,
    #ed85304a 40%,
    rgb(0, 0, 0) 40%,
    rgb(0, 0, 0) 43%,
    rgb(6, 6, 6) 55%,
    #a55514e0 95%,
    white 95%
  ); */
  background: linear-gradient(
    to top,
    #ed8530 0.25%,
    black 0.5%,
    black 14%,
    #ed8530 14.25%,
    rgb(0, 0, 0) 14.5%,
    rgb(0, 0, 0) 25%,
    #ed8530 25.25%,
    rgb(0, 0, 0) 25.5%,
    rgb(0, 0, 0) 32%,
    #ffffff8d 32.25%,
    rgb(0, 0, 0) 32.5%,
    rgb(0, 0, 0) 36%,
    #ed853096 36.25%,
    rgb(0, 0, 0) 36.5%,
    rgb(0, 0, 0) 38%,
    #eb934b75 38.25%,
    rgb(0, 0, 0) 38.5%,
    rgb(0, 0, 0) 39%,
    #ffffff5c 39.25%,
    rgb(0, 0, 0) 39.5%,
    rgb(0, 0, 0) 39.75%,
    #ed85304a 40%,
    rgb(0, 0, 0) 40%,
    rgb(0, 0, 0) 43%,
    rgb(6, 6, 6) 55%,
    rgb(6, 6, 6) 95%,
    rgb(0, 0, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.mobile-carusel-holder:hover::before {
  opacity: 1;
}

.testimonials {
  width: 100vw;
  height: 90vh;
  opacity: 0;
  animation: appear1 1s ease-in-out 1s forwards;
  /* background-color: rgba(0, 0, 255, 0.495); */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
  /* transform: scale(1) ; */
}

.shadow-effect {
  /* background: #fff; */
  padding: 0px;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  /* border: 1px solid #ececec; */
  /* box-shadow: 0 19px 38px rgba(0, 0, 0, 0.1), 0 15px 12px rgba(0, 0, 0, 0.02); */
}

#customers-testimonials {
  position: relative;
  /* width: 100vw; */
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1.3) translateY(0px);
  /* background-color: rgba(255, 0, 0, 0.555); */
}

/* side one / two slides */
#customers-testimonials .item {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.853);
  padding: 0px;
  opacity: 1;
  transform: scale3d(1.1, 1.1, 1) scale(0.9);
  /* filter: saturate(60%); */
  transition: all 0.3s ease-in-out;
  transform-origin: center center;
  box-shadow: 0px 0px 12px 3px rgba(43, 43, 43, 0.774);
  position: relative;
  overflow: hidden;
}

/* active slide  */
#customers-testimonials .owl-item.active.center .item {
  opacity: 1;
  /* filter: saturate(100%); */
  transform: scale3d(1, 1, 1) scale(1);
  box-shadow: 0 0 0px 0px transparent;
  outline: none;
}

#customers-testimonials .owl-item .c-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform-style: preserve-3d;
  position: relative;
  /* max-width: 90px; */
  /* margin: 0 auto 17px; */
}
.mask-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Base gradient layer */
.mask-shadow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    178deg,
    transparent 60%,
    rgba(190, 175, 175, 0.649) 93%,
    #f5c7a1a2 100%
  );
  transition: opacity 0.6s ease-in-out;
}

/* Hover gradient layer */
.mask-shadow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    178deg,
    transparent 90%,
    #ed7f1fad 99%,
    #ed7f1fac 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* Active center state - hide the mask completely */
#customers-testimonials .owl-item.active.center .item .mask-shadow::before,
#customers-testimonials .owl-item.active.center .item .mask-shadow::after {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Hover state - show hover gradient */
.mobile-carusel-holder:hover .mask-shadow::before {
  opacity: 0;
}

.mobile-carusel-holder:hover .mask-shadow::after {
  opacity: 1;
}

/* Alternative single pseudo-element approach */
.mask-shadow-alt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    178deg,
    transparent 70%,
    #ed7f1fad 95%,
    #ed7f1f 100%
  );
  pointer-events: none;
  position: relative;
}

.mask-shadow-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    178deg,
    transparent 90%,
    #ed7f1fad 99%,
    #ed7f1fac 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

#customers-testimonials .owl-item.active.center .item .mask-shadow-alt {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.mobile-carusel-holder:hover .mask-shadow-alt::before {
  opacity: 1;
}

/* mobile screen  */
.mobile-container {
  position: absolute;
  width: 25%;
  background-color: #ffffff;
  height: 300%;
  left: 50%;
  top: 46%;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transform-origin: center center;
  box-shadow: 10px -10px 20px 5px rgba(114, 114, 114, 0.634),
    0 20px 20px 5px rgba(80, 80, 80, 0.578);
  transition: all 0.3s ease-in-out;
}

.mobile-content {
  width: 100%;
  height: auto;
  z-index: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Animation classes */
.fade-out {
  opacity: 0;
  transform: scale(0.9);
}

.fade-in {
  opacity: 1;
  transform: scale(1);
}

/* Slide animations */
.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}

.slide-in-right {
  animation: slideInRight 0.5s forwards;
}

@keyframes slideOutLeft {
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* hover me  */
.hover-me {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 300%;
  /* height: 228%; */
  border: 1px solid rgb(109, 109, 109);
  border-bottom: 1px solid rgba(164, 164, 164, 0.2);
  border-right: 1px solid rgba(164, 164, 164, 0.2);

  border-radius: 48px;
  /* border-top-left-radius: 50px; */

  background: linear-gradient(
      155deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(255, 0, 0, 0.032) 40%,
      rgb(0, 0, 0) 100%
    ),
    linear-gradient(
      115deg,
      rgba(174, 188, 191, 0.05) 0%,
      rgba(110, 119, 116, 0.3) 27%,
      rgba(10, 14, 10, 0) 28.5%,
      rgba(10, 8, 9, 0) 100%
    );
  background-color: #ffffff1a;
  /* background-color: red; */
  background-size: 100% 150%;
  background-position: 0 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  /* overflow: hidden; */
  z-index: 20;
  transform-origin: center center;
}

.hover-me a {
  outline: none;
  outline-width: 0;
  /* top: -1; */
  height: 100%;
  color: transparent;
}

.hover-me a:active {
  background-color: #ffffff19;
}

.hover-me:hover {
  transform: translate(-50%, -50%) scale(1.03);
  background-position: 0 30%;
  border: 1px solid rgb(155, 155, 155);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);

  /* rotateY(5deg) rotateX(0deg) rotateZ(-1deg) */
  transition: background-position 0.1s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hover-me:hover + .mobile-container + .mobile-frame {
  transform: translate(-50%, -50%) scale(1.03);
  transition: all 0.3s ease-in-out;
}

.hover-me:hover + .mobile-container {
  box-shadow: 12px 0 15px -5px rgba(60, 60, 60, 0.8),
    0 12px 20px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
  transform: translate(-50%, -50%) scale(1.03);
  transition: all 0.3s ease-in-out;
}

.hover-me:hover ~ #customers-testimonials .owl-item.active.center .item {
  transform: scale3d(1.03, 1.05, 1.05) scale(1);
  transition: all 0.3s ease-in-out;
}

.hover-link {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* background-color: red; */
}

/* mobile frame */

.main-cover {
  position: relative;
  display: flex;
  justify-content: center;
  /* transform: rotateZ(-5deg) skewX(-25deg); */
  /* background-color: green; */
}

.mobile-frame {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26.8%;
  /* height: 120%; */
  /* display: none; */
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  /* background-color: blue; */
}

.mobile-wrapper {
  position: relative;
  /* padding-top: 25px; */
  padding-bottom: 67.5%;
  height: 0;
  /* background-color: red; */
}

/* LOGO SECTION */
.logo-section {
  /* background: #0468cd; */
  /* padding: 50px 0; */
  overflow: hidden;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* background-color: red; */
}

.carousel-track {
  display: flex;
  /* background-color: green; */
  animation: scroll-left 30s linear infinite;
  width: calc(150px * 40); /* 20 items × 2 = 40 total items */
}

.carousel-track-2 {
  display: flex;
  /* background-color: green; */
  animation: scroll-right 30s linear infinite;
  width: calc(150px * 38); /* 19 items × 2 = 38 total items */
  /* Start from the right edge for right-to-left movement */
  transform: translateX(calc(-150px * 19));
}

.logo-carousel-item {
  flex: 0 0 150px;
  height: 100px;
  display: flex;
  /* border: 1px solid red; */
  /* background-color: azure; */
  align-items: center;
  justify-content: center;
  margin: 0 0px;
}

.brands-image-wrap {
  width: 90%;
  height: 92%;
  /* max-height: 91%; */
  /* min-height: 90%; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: white; */
  border-radius: 10px;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  padding: 10px;
}

.brands-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(100%);
  transition: all 0.3s ease;
}

.brands-image-wrap:hover img {
  filter: saturate(150%);
  transform: scale(1.1);
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-150px * 19));
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(calc(-150px * 19));
  }
  100% {
    transform: translateX(0);
  }
}

.carousel-track:hover,
.carousel-track-2:hover {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-carousel-item {
    flex: 0 0 120px;
  }

  .carousel-track {
    width: calc(120px * 40);
    animation: scroll-mobile-left 25s linear infinite;
  }

  .carousel-track-2 {
    width: calc(120px * 38);
    animation: scroll-mobile-right 25s linear infinite;
    transform: translateX(calc(-120px * 19));
  }

  @keyframes scroll-mobile-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-120px * 20));
    }
  }

  @keyframes scroll-mobile-right {
    0% {
      transform: translateX(calc(-120px * 19));
    }
    100% {
      transform: translateX(0);
    }
  }
}

@media (max-width: 480px) {
  .highlight-sec {
    border-radius: 30px 30px 0 0;
  }

  .logo-carousel-item {
    flex: 0 0 100px;
  }

  .carousel-track {
    width: calc(100px * 40);
    animation: scroll-small-left 20s linear infinite;
  }

  .carousel-track-2 {
    width: calc(100px * 38);
    animation: scroll-small-right 20s linear infinite;
    transform: translateX(calc(-100px * 19));
  }

 .testimonials {
    height: 53vh;
  }

  .hover-me {
    height: calc(0.499 * 100vw); /* responsive height (e.g. 720px at 400vw) */
    border-radius: calc(3.5vw + 1px); /* ~15px at 400px width */
  }

  .mobile-container {
    height: calc(0.499 * 100vw); /* same as .hover-me */
    border-radius: calc(3.5vw + 1px);
    box-shadow: 12px 0 15px -5px rgba(60, 60, 60, 0.8),
      0 12px 20px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  .mobile-carusel-holder {
    border-radius: 0 0 30px 30px;
    margin-top: -15%;
    background: linear-gradient(
      to top,
      #ed8530 0.25%,
      black 0.5%,
      black 14%,
      #ed8530 14.25%,
      rgb(0, 0, 0) 14.5%,
      rgb(0, 0, 0) 25%,
      #ed8530 25.25%,
      rgb(0, 0, 0) 25.5%,
      rgb(0, 0, 0) 32%,
      #ffffff8d 32.25%,
      rgb(0, 0, 0) 32.5%,
      rgb(0, 0, 0) 36%,
      #ed853096 36.25%,
      rgb(0, 0, 0) 36.5%,
      rgb(0, 0, 0) 38%,
      #eb934b75 38.25%,
      rgb(0, 0, 0) 38.5%,
      rgb(0, 0, 0) 39%,
      #ffffff5c 39.25%,
      rgb(0, 0, 0) 39.5%,
      rgb(0, 0, 0) 39.75%,
      #ed85304a 40%,
      rgb(0, 0, 0) 40%,
      rgb(0, 0, 0) 43%,
      rgb(6, 6, 6) 55%,
      rgb(0, 0, 0) 95%,
      rgb(0, 0, 0) 100%
    );
  }

  #customers-testimonials .item {
    transform: scale3d(1, 1, 1) scale(1.44);
  box-shadow: 0px 0px 12px 3px rgba(43, 43, 43, 0);

    /* overflow: hidden; */
  }

  #customers-testimonials .owl-item.active.center .item {
    transform: scale3d(1, 1, 1) scale(1.44) translateX(0px);
  }

  .hover-me:hover ~ #customers-testimonials .owl-item.active.center .item {
    transform:  scale3d(1, 1, 1) scale(1.45);
    transition: all 0.3s ease-in-out;
  }

  .main-cover {
    transform: scale(2);
  }

 /* Responsive carousel height */
  .owl-carousel .owl-stage-outer {
    height: clamp(60px, 18vw, 90px);
  }

  /* Responsive top margin of carousel items */
  .owl-carousel.owl-drag .owl-item {
    margin-top: clamp(5px, 4vw, 16px);
  }

  @keyframes scroll-small-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-100px * 20));
    }
  }

  @keyframes scroll-small-right {
    0% {
      transform: translateX(calc(-100px * 19));
    }
    100% {
      transform: translateX(0);
    }
  }
}