body {
    background-color: rgb(255, 255, 255);
}
.section-banner{
    height:50vw;
    overflow: hidden;
}
.targ {
  background-color: #D9E3E5;
}

  


.movingImage-ud{animation:4s linear infinite moveUpDown}
@keyframes moveUpDown{0%,100%{transform:translateY(8vh)}50%{transform:translateY(5vh)}}
.ls-300 {
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300!important;
    font-style: normal;
}
.ls-400 {
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400!important;
    font-style: normal;
}
.ls-500 {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500!important;
  font-style: normal;
}
.ls-600 { 
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600!important;
    font-style: normal;
}
.ibm-400 {
  font-family: "IBM Plex Sans", system-ui;
  font-weight: 400!important;
  font-style: normal;
}
.ibm-500 {
  font-family: "IBM Plex Sans", system-ui;
  font-weight: 500!important;
  font-style: normal;
}
.ibm-600 {
  font-family: "IBM Plex Sans", system-ui;
  font-weight: 600!important;
  font-style: normal;
}
.review-container {
    background: #D9E3E5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #595B59;
    border-radius: 1px;
    overflow: visible !important;
    aspect-ratio: 0.85;
}
body {
  margin: 0;
  overflow-x: hidden;
}
.animatable {
  visibility: hidden;
  animation-play-state: paused;
}
.animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running;
}
.btn-opt {
  background-color: #FFFFFF!important;
  color: #124DDE!important;
  border-radius: 40px!important;
  font-family: "League Spartan", sans-serif!important;
  font-optical-sizing: auto!important;
  font-weight: 500!important;
  font-style: normal!important;
}
.btn-opt-blue {
  background-color: #124DDE!important;
  color: #FFFFFF!important;
  border-radius: 40px!important;
  font-family: "League Spartan", sans-serif!important;
  font-optical-sizing: auto!important;
  font-weight: 500!important;
  font-style: normal!important;
}
.btn-config {
  background-color: #758082!important;
  color: #FFFFFF!important;
  border-radius: 40px!important;
  font-family: "League Spartan", sans-serif!important;
  font-optical-sizing: auto!important;
  font-weight: 500!important;
  font-style: normal!important;
}
.quit-button {
  background-color: #ffc107!important;
  color: #383838!important;
  border-radius: 40px!important;
  font-family: "League Spartan", sans-serif!important;
  font-optical-sizing: auto!important;
  font-weight: 500!important;
  font-style: normal!important;
}
.btn-opt:hover{
  color: #FFFFFF!important;
}
.transition-container {
  display: grid;
  place-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  --position: 50%;
}

.image-container {
  width: 100%;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
}

.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  /* for Firefox */
  width: 100%;
  height: 100%;
}

.slider:focus-visible ~ .slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.slider-line {
  position: absolute;
  inset: 0;
  width: .2rem;
  height: 100%;
  background-color: #79a6eb;
  /* z-index: 10; */
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.slider-button {
  position: absolute;
  background-color: #79a6eb;
  color: black;
  padding: .5rem;
  border-radius: 100vw;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* z-index: 100; */
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}
@keyframes fadeIn {
  0%,
  60% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translateY(-20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}
@keyframes bounceIn {
  0% {
      opacity: 0;
      transform: scale(0.3);
  }
  50% {
      transform: scale(1.05);
  }
  70% {
      transform: scale(0.9);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}
@keyframes bounceInLeft {
  0% {
      opacity: 0;
      transform: translateX(-2000px);
  }
  60% {
      transform: translateX(20px);
  }
  80% {
      transform: translateX(-5px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}
@keyframes bounceOutRight {
  0% {
      opacity: 1;
      transform: translateX(0);
  }
  60% {
      transform: translateX(5px);
  }
  80% {
      transform: translateX(20px);
  }
  100% {
      opacity: 0;
      transform: translateX(2000px);
  }
}
@keyframes bounceInRight {
  0% {
      opacity: 0;
      transform: translateX(2000px);
  }
  60% {
      transform: translateX(-20px);
  }
  80% {
      transform: translateX(5px);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}
@keyframes moveUp {
  0% {
      transform: translateY(40px);
  }
  100% {
      transform: translateY(0);
  }
}
@keyframes fadeBgColor {
  0%,
  70% {
      background: 0 0;
  }
  100% {
      background: #464646;
  }
}
.animated.animationDelay {
  animation-delay: 0.4s;
}
.animated.animationDelayMed {
  animation-delay: 1.2s;
}
.animated.animationDelayLong {
  animation-delay: 1.6s;
}
.animated.fadeBgColor {
  animation-name: fadeBgColor;
}
.animated.bounceIn {
  animation-name: bounceIn;
}
.animated.bounceInRight {
  animation-name: bounceInRight;
}
.animated.bounceInLeft {
  animation-name: bounceInLeft;
}
.animated.fadeIn {
  animation-name: fadeIn;
}
.animated.fadeInDown {
  animation-name: fadeInDown;
}
.animated.fadeInUp {
  animation-name: fadeInUp;
}
.animated.moveUp {
  animation-name: moveUp;
}

:root {
  --card3d-height: 10rem;
  --card3d-width: calc(var(--card3d-height)*2);
}

/* Media query for small screens (e.g., mobile devices) */
@media (max-width: 600px) {
  :root {
    --card3d-height: 3rem;
  }
}

/* Media query for medium screens (e.g., tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --card3d-height: 5rem;
  }
}

* {
  box-sizing: border-box;
}
.card3d {
  width: var(--card3d-width);
  height: var(--card3d-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  perspective: 2500px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;

  min-height: 17vw;

  border-radius: 2vw ;
  overflow:hidden ;

  background-color: #EDE8D4;
}

.card3d:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;

}
.wrapper::after {
  bottom: 0;
  opacity: 1;

}

.card3d:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card3d:hover .wrapper::after {
  height: 120px;
}

.title {
  position: absolute;
  bottom:0;
  transition: transform 0.5s;
  text-decoration: none;
  font-size: 2.5vw;
}
.card3d:hover .title {
  transform: translate3d(0%, -0.5vw, 2vw);
}

.card3d:hover .cover-image {
  display: none;
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  scale: 1.01;
  z-index: -1;
}

.card3d:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}
.client-circle:hover {
    transform: scale(1.1);
}
.client-circle {
  transform: scale(1);
  transition: transform 0.2s ease-in-out;
}
.smooth-transition{
  transition: transform 1s ease-in-out;
}
.unete-section {
  background-image: url("../images/landing/unete-banner-bb490ea1a908cc785f26a3df97e0b4ca.webp");
  background-size: cover;
  background-repeat: no-repeat;
  min-height:70vh;
}
.treatments-section {
  background-image: url("../images/landing/bg-gradient-4bf94198f79090544288bc234fd49d5f.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.treatment-selected {
  position: relative; /* Ensure the pseudo-element is positioned relative to the div */
  transform: scale(1.1) !important;
}
.treatment-selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70%;
  transform: translateX(-50%);
  border-bottom: #FFFFFF solid 3px;
}
.treatment-text{
  color: #FFFFFF; /* Set the text color */
  text-shadow: 0 0 8px #0848ff
}
.treatment-option{
  cursor: pointer;
}
.scale-hover:hover {
    transform: scale(1.1);
}
.scale-hover {
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
}
.glow-on-hover {
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 30px;
}
.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #0000ff, #0033ff, #0066ff, #0099ff, #00aeff, #00a2ff, #0084ff, #0099ff, #0066ff);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 30px;
}
.quit-button.glow-on-hover:before{
  background: linear-gradient(45deg, #ffff00, #ffcc00, #ffb300, #ffa500, #ff9900, #ff8c00, #ff8000, #ff9900, #ffb300) !important;
}
.btn-config.glow-on-hover:before{
  background: linear-gradient(45deg, #c3c2c2, #505050, #cccccc, #b3b3b3, #999999, #808080, #666666) !important;
}
.glow-on-hover:active:after {
  background: transparent;
}
.glow-on-hover:hover:before {
  opacity: 1;
}
.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 30px;
}
@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

@media (max-width: 767px) {
  .unete-section {
    background-image: url("../images/landing/unete-banner-sm-c1bf8cd6be664400dbc1f2ec85d74859.webp");
    min-height:auto;
  }
}

.bg-opt-lightblue {
  background-color: #D4E6FF;
}

.bg-opt-lightgrey {
  background-color: #D9E3E5;
}

.bg-opt-grey {
  background-color: #A6C2CF;
}
.input-cita {
  border-radius: 20px!important;
  border: 1px solid #134DDD!important;
}
.label-cita {
  margin-left: 20px;
  color: #134DDD!important;
}
.delete-button{
  color:#7f7f7f!important;
}
.delete-button:hover{
  color:#ec5454!important;
}

.modal-title{
  color:#134DDD!important;
}