@keyframes rotateImage {
  0% {
    rotate: -25deg;
  }

  100% {
    rotate: 25deg;
  }
}

@keyframes buttonGrow {
  0% {
    transform: translateX(-10px);
    box-shadow: 0px 0px 5px 0px rgba(230, 11, 221, 0.29);
  }

  50% {
    box-shadow: 0px 0px 8px 1px rgba(230, 11, 221, 0.29), 0px 0px 12px 2px rgba(230, 11, 221, 0.29), 0px 0px 15px 4px rgba(230, 11, 221, 0.29);
  }

  100% {
    transform: translateX(10px);
    box-shadow: 0px 0px 5px 0px rgba(230, 11, 221, 0.29);
  }
}

@keyframes lensGrow {
  0% {
    transform: translateX(-50%) rotate(-25deg);
    box-shadow: 0px 1px 3px rgba(230, 11, 221, 0.84);
  }

  50% {
    box-shadow: 0px 1px 8px #E60BDD, 0px 1px 10px #E60BDD, 0px 1px 12px #E60BDD;
  }

  100% {
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0px 1px 3px rgba(230, 11, 221, 0.84);
  }
}

.animate-rotateImage {
  animation: rotateImage 1s infinite alternate;
}

.lal-bg {
  background: linear-gradient(359deg, rgba(252, 225, 244, 0.14) -26.41%, rgba(248, 190, 236, 0.14) -5.78%, rgba(232, 197, 246, 0.13) 12.26%, rgba(170, 206, 215, 0.13) 30.31%, rgba(164, 219, 221, 0.13) 35.46%, rgba(178, 224, 226, 0.11) 48.35%, rgba(214, 238, 239, 0.06) 75.42%, rgba(255, 255, 255, 0.00) 102.49%);
}

.lal-bg-deco::before {
  content: '';
  position: absolute;
  background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-bg-deco-v1.svg');
  background-repeat: no-repeat;
  width: 140px;
  height: 140px;
  z-index: -1;
}

.lal-what-icon::before {
  content: '';
  position: absolute;
  width: 58px;
  height: 52px;
  background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-what-title-v1.svg');
  background-repeat: no-repeat;
  background-size: contain;
  top: -28px;
  right: -36px;
}

.lal-button {
  border-radius: 16px;
  background: linear-gradient(180deg, #D3F3F4 0%, #FFEDFB 100%);
  font-size: 14px;
  font-weight: 900;
  color: var(--color-lal);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.1em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 8px;
  width: fit-content;
  animation: buttonGrow 2s infinite alternate;
}

.lal-table tr {
  border-bottom: 0.5px solid #6B6B6B;
}

.lal-table .lens-lal::after {
  content: '';
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDEiIGhlaWdodD0iMTA2IiB2aWV3Qm94PSIwIDAgMTAxIDEwNiIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTM4LjkxOCA3NS41MzJjLTUuMDE1LTIuMDk0LTEyLjYyNi02LjAxNi0xOS45MDMtMTMuMjE3IDAgMC0zLjc3Ny0zLjc2LTYuOTI4LTguMTg0Qy0yLjU4IDMzLjU1OC0uMjUzIDExLjQwMi44MTMgNS4xMDJsLjM0Mi0yLjAzQTMuNjk0IDMuNjk0IDAgMCAxIDUuNDEyLjA1M2MuMzE4LjA1Ny42MzUuMTQ3LjkzNi4yNzdsLjEzOS4wNjRjMS40NzMuNjkgMi4yMzggMi4yMjUgMS45NTMgMy45MTQtLjIwMyAxLjE4NS0uODE0IDIuMDM4LTEuODggMi42MTQtMy4xNDIgMS42OTctNS4xMTIgNS4wNS01LjEyOCA4Ljc0NC0uMDU3IDEzLjc5NCAzLjk0IDI2LjQzNCAxMS44OTMgMzcuNTlhNjQuNSA2NC41IDAgMCAwIDEyLjM3MyAxMy4wMzggNjUgNjUgMCAwIDAgOS44NzQgNi40NDZsMy4zNDYgMi44MDF6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTUxLjMwNyA4NC40MDZjMTcuNzM2IDAgMzIuMTE0LTE0LjM0IDMyLjExNC0zMi4wMjkgMC0xNy42ODgtMTQuMzc4LTMyLjAyOC0zMi4xMTQtMzIuMDI4UzE5LjE5NCAzNC42OSAxOS4xOTQgNTIuMzc3YzAgMTcuNjkgMTQuMzc4IDMyLjAyOSAzMi4xMTMgMzIuMDI5WiIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMuOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+PHBhdGggZD0iTTUxLjMwNyA3OC4yMmMxNC4zMSAwIDI1LjkxLTExLjU3IDI1LjkxLTI1Ljg0MiAwLTE0LjI3My0xMS42LTI1Ljg0Mi0yNS45MS0yNS44NDJzLTI1LjkxIDExLjU3LTI1LjkxIDI1Ljg0MWMwIDE0LjI3MyAxMS42IDI1Ljg0MiAyNS45MSAyNS44NDJaIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS4yNiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+PHBhdGggZD0iTTYzLjE3NiAyOS4wODVjNC44NiAyLjEzNSAxMi4yMDIgNi4wOTcgMTkuMTIxIDEzLjI3NCAwIDAgMy42NDcgMy44MzIgNi43MDggOC4zNyAxNC4xMDcgMjAuOTcgMTEuMTY4IDQzLjA0NiA5LjkzIDQ5LjMxM2wtLjM5OCAyLjAxNGEzLjY5IDMuNjkgMCAwIDEtNC4zMzkgMi44OTggNC4zIDQuMyAwIDAgMS0uOTI4LS4zbC0uMTM4LS4wNjVjLTEuNDU3LS43MzEtMi4xODItMi4yODItMS44NDgtMy45NjIuMjM2LTEuMTc3Ljg3LTIuMDE0IDEuOTUzLTIuNTU4IDMuMTkyLTEuNjE1IDUuMjQzLTQuOTExIDUuMzY1LTguNTk3LjQ0LTEzLjc4Ni0zLjIxNS0yNi41MzItMTAuODYtMzcuODk4YTY0LjIgNjQuMiAwIDAgMC0xMi4wMTQtMTMuMzcyIDY0LjQgNjQuNCAwIDAgMC05LjY5NS02LjcxNCA4ODggODg4IDAgMCAxLTIuODUtMi40MTF6IiBmaWxsPSIjZmZmIi8+PC9zdmc+'), linear-gradient(90deg, #3B0F35 0%, #6D2E61 33%, #833C75 50%, #924C83 63%, #BC75AA 90%, #CE88BB 100%);
  background-repeat: no-repeat;
  background-size:
    28px 30px,
    100% 100%;
  background-position: center;
  top: -40px;
  left: 50%;
  /* transform: translateX(-50%); */
  border: 2px solid #fff;
  animation: lensGrow 2s infinite alternate;
}

.lal-table .lens-lal::before {
  content: '';
  position: absolute;
  height: 100%;
  width: calc(100% + 2px);
  bottom: 0;
  right: -1px;
  background: linear-gradient(90deg, #3B0F35 0%, #6D2E61 33%, #833C75 50%, #924C83 63%, #BC75AA 90%, #CE88BB 100%);
  z-index: -1;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.lal-table .lens-other::after {
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-icon-other-v1.svg');
  background-repeat: no-repeat;
  background-size: contain;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

.lal-table .lens-other::before {
  content: '';
  position: absolute;
  height: 40px;
  width: calc(100% + 24px);
  bottom: 0;
  right: -0.8px;
  background: linear-gradient(90deg, #A5DBDD 0%, #B6DBDD 41%, #C5DCDD 67%);
  z-index: -2;
}

.lal-table tbody td {
  padding-left: 4px;
  padding-right: 4px;
}

.lal-table tbody tr td:first-child {
  background-color: #F4F4F5;
  border-left: 0.8px solid #6B6B6B;
  padding-left: 12px;
  padding-right: 12px;
}

.lal-table tbody tr td:nth-child(2) {
  background-color: #fef2f7;
  border-left: 2px solid #3B0F35;
  border-right: 2px solid #CE88BB;
}

.lal-table tbody tr td:nth-child(3) {
  background-color: #f3fafb;
  border-right: 0.8px solid #6B6B6B;
}

.lal-table tbody tr:last-child td:nth-child(2):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #3B0F35 0%, #6D2E61 33%, #833C75 50%, #924C83 63%, #BC75AA 90%, #CE88BB 100%);
}

.why-swiper .swiper-slide {
  background-color: #f4f3f3;
  padding: 16px;
  border-radius: 28px;
  position: relative;
}

.why-swiper .swiper-slide:not(:last-child) {
  overflow: hidden;
}

.why-swiper .swiper-slide::before {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  pointer-events: none;
}

.why-swiper .swiper-slide:nth-child(1)::before {
  background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-why-01-v1.webp');
}

.why-swiper .swiper-slide:nth-child(2)::before {
  background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-why-02-v1.webp');
}

@media screen and (max-width: 359px) {
  .lal-button {
    font-size: 12px;
  }
}

@media screen and (max-width: 1023px) {
  .lal-table th {
    height: 42px;
  }

  .lal-table td {
    height: 56px;
  }

  .lal-table tbody tr:last-child td {
    height: 100px;
  }

  .why-swiper .swiper-slide {
    min-height: 228px;
    height: auto;
  }

  .why-swiper .swiper-slide:nth-child(1)::before {
    width: 50%;
    height: 100%;
    right: 0;
    bottom: 0;
    background-position: right;
  }

  .why-swiper .swiper-slide:nth-child(2)::before {
    width: 50%;
    height: 100%;
    right: 0;
    bottom: 0;
    background-position: right;
    rotate: 84deg;
  }

  .why-swiper .swiper-slide:nth-child(3)::before {
    background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-why-03-mb-v1.webp');
    width: 50%;
    height: 120%;
    right: 0;
    bottom: -20px;
    background-position: left;
    background-size: cover;
  }
}

@media screen and (min-width: 1024px) {
  .lal-what-icon::before {
    width: 116px;
    height: 104px;
    top: -52px;
    right: -72px;
  }

  .lal-bg-deco::before {
    width: 340px;
    height: 340px;
  }

  .lal-table tr {
    border-bottom-width: 0.8px;
  }

  .lal-table th {
    height: 116px;
  }

  .lal-table td {
    height: 132px;
  }

  .lal-table .lens-lal {
    border-left-width: 4px;
    border-right-width: 4px;
  }

  .lal-table .lens-lal::after {
    width: 184px;
    height: 184px;
    top: -152px;
    border-width: 5px;
    background-size:
      100px 105px,
      100% 100%;
  }

  .lal-table .lens-lal::before {
    width: calc(100% + 4px);
    right: -2px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }

  .lal-table .lens-other::after {
    width: 148px;
    height: 148px;
    top: -100px;
  }

  .lal-table .lens-other::before {
    height: 96px;
  }

  .lal-table tbody tr:last-child td {
    height: 240px;
  }

  .lal-table tbody tr td:first-child {
    padding-left: 40px;
    padding-right: 40px;
  }

  .lal-table tbody tr td:nth-child(2) {
    border-left-width: 4px;
    border-right-width: 4px;
  }

  .lal-table tbody tr:last-child td:nth-child(2):before {
    height: 4px;
  }

  .lal-button {
    padding: 24px;
    font-size: 30px;
    border-radius: 36px;
    box-shadow: 0 0 15px 4px #e60bdd4a;
  }

  .why-swiper .swiper-slide {
    padding: 36px;
    width: 100% !important;
    flex-shrink: 1;
  }

  .why-swiper .swiper-slide:is(:nth-child(2), :nth-child(3)) {
    min-height: 300px;
  }

  .why-swiper .swiper-slide:nth-child(1)::before {
    width: 564px;
    height: 572px;
    bottom: -120px;
    left: -20px;
  }

  .why-swiper .swiper-slide:nth-child(2)::before {
    width: 500px;
    height: 280px;
    rotate: -49deg;
    bottom: -40px;
    right: 20px;
  }

  .why-swiper .swiper-slide:nth-child(3)::before {
    background-image: url('https://statichk.cmermedical.com/newopd/services/cataract/lal-why-03-v1.webp');
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    background-position: right;
  }
}