.response-message {
  display: none;
  padding: 15px 0;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.response-message.success {
  background-color: #d4edda;
  color: #155724;
  /* border: 1px solid #c3e6cb; */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.response-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.response-message.fade-in {
  display: block;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  to {
      opacity: 1;
  }
}

.ig{
  cursor: pointer;
}
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease-out forwards;
  }
  
  @keyframes fadeUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
.logo-footer{
    height: 200px;
}
.bg_contact{
    background: linear-gradient(360deg, #000 0%, rgba(0, 0, 0, 0.4) 30%),url(../img/idea.png);background-repeat: no-repeat;
}
.form-label {
    margin-top: 20px;
    margin-bottom: 10px;
}
.form-control, .form-control:focus {
    width: 100%;
    padding: 0px 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(247, 247, 247, 0.16) 0px 0px 0px 1px, rgba(247, 247, 247, 0.08) 0px 2px 5px 0px;
    border: 0px;
    border-radius: 5px;
    outline: none;
    background-color: rgba(255, 255, 255, 0.055);
    color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    min-height: 36px;
}
.logo-footer{
    height: 200px;
}
.logo-footer img{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -35px;
    z-index: -1;
    width: 90%;
}

.hero-area__bg video{
    filter: invert(1) grayscale(1) opacity(0.1)
}
.dark-mode .hero-area__bg video{
    filter: hue-rotate(41deg);
    pointer-events: none;
}
footer img {
    width: 25px;
    height: 25px;
    transition: 0.5s;
    filter: sepia(1) grayscale(1) contrast(0.5);
}
footer img:hover {
    filter: none;
}
footer{
    background: #000000;
    color: #ffffff;
}
.bg-radial{
    background-image: radial-gradient(at center center, #5967f057 0%, transparent 42%);
}
/* slider */

.dark-mode .swiper-container::before, .dark-mode .swiper-container::after{
  background: linear-gradient(to right, black 0%, rgba(255, 255, 255, 0) 100%);
}
.swiper-container::before{
  left: 0;
  top: 0;
}
.swiper-container::before, .swiper-container::after{
    content: "";
    height: 100px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.swiper-container {
  width: 100%; /* Ocupa todo el ancho */
  height: 100px; /* Altura del contenedor */
  overflow: hidden; /* Oculta cualquier desbordamiento */
  position: relative;
}


.swiper-wrapper {
  display: flex;
  animation: scroll 20s linear infinite; /* Animación continua */
}

.swiper-slide {
  width: auto!important;
  display: flex!important;
  justify-content: center;
  align-items: center;
  padding: 0 40px; /* Espaciado entre imágenes */
}

.swiper-slide img {
  height: 60px;
  max-width: 250px;
  object-fit: contain;
  filter: grayscale(1); /* Efecto de escala de grises */
}

/* Animación para desplazamiento continuo */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


  /* Slider End */
  
.text-color-bg{
    background: linear-gradient(100deg, #5967f0, #9786ff 60.42%, #7380ff 95.31%);
    background-clip: text;
    color: transparent;
}
#team h6{
    filter: grayscale(1);
    transition: 0.5s;
}
#team .w-auto:hover h6{
    filter: none;
}
#team .card{
    border-radius: 0 0 10px 10px;
}

.cursor-pointer{
    cursor: pointer;
}
.border_f {
  height: 369px;
  width: 290px;
  background: transparent;
  border-radius: 10px;
  transition: border 1s;
  position: relative;
}
#team .w-auto:hover .border_f {
  border: 1px solid #fff;
}
.card_founder {
    padding: 0;
  height: 379px;
  width: auto;
  background: #808080;
  border-radius: 10px 10px 0 0;
  transition: background 0.8s;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.santi {
  background: url("../img/santi.jpg") center center no-repeat;
  background-size: 310px;
  filter: grayscale(1);
}
#team .w-auto:hover .santi {
  background: url("../img/santi.jpg") left center no-repeat;
  background-size: 500px;
  filter: none;
}
#team .w-auto:hover .santi h2 {
  opacity: 1;
}
#team .w-auto:hover .santi .fa {
  opacity: 1;
}
.juanma {
  background: url("../img/juanma.jpg") center center no-repeat;
  background-size: 310px;
  filter: grayscale(1);
}
 #team .w-auto:hover .juanma {
  background: url("../img/juanma.jpg") left center no-repeat;
  background-size: 500px;
  filter: none;
}
#team .w-auto:hover .juanma h2 {
  opacity: 1;
}
#team .w-auto:hover .juanma .fa {
  opacity: 1;
}
.guille {
  background: url("../img/guillenew.jpg") center center no-repeat;
  background-size: 400px;
  filter: grayscale(1);
}
 #team .w-auto:hover .guille {
  background: url("../img/guillenew.jpg") left center no-repeat;
  background-size: 500px;
  filter: none;
}
#team .w-auto:hover .guille h2 {
  opacity: 1;
}
#team .w-auto:hover .guille .fa {
  opacity: 1;
}
.sebas {
  background: url("../img/sebas.jpg") center center no-repeat;
  background-size: 500px;
  filter: grayscale(1);
}
 #team .w-auto:hover .sebas {
  background: url("../img/sebas.jpg") left center no-repeat;
  background-size: 600px;
  filter: none;
}
#team .w-auto:hover .sebas h2 {
  opacity: 1;
}
#team .w-auto:hover .sebas .fa {
  opacity: 1;
}
.h2_f {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 1px 1px black;
  margin: 20px;
  opacity: 0;
  transition: opacity 1s;
}
.fa {
  opacity: 0;
  transition: opacity 1s;
}
.icons {
  position: absolute;
  fill: #fff;
  color: #fff;
  height: 130px;
  top: 226px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.card_blue_effect {
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
}

.card_blue_effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease, background 0.3s ease;
}
.crosshair{
    cursor: crosshair;
}
.border-dotted{
    border-style: dotted;
    border-color: #404040cc;
}
.line-double{
    position: absolute;
    left: 0;
    bottom: -5px;
    background-image: url("data:image/svg+xml,%3Csvg width='159' height='11' viewBox='0 0 159 11' fill='rgb(89 103 240)' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.6102 2.23473C49.7135 1.91256 64.8251 1.70545 79.9366 1.6134C95.0481 1.52135 110.02 1.55203 125.057 1.69777C133.6 1.78215 142.15 1.89722 150.693 2.05063L151.852 0.47811C132.35 0.792615 112.856 1.18383 93.3627 1.65175C73.869 2.11967 54.3752 2.6643 34.8815 3.29331C23.9384 3.64617 13.0035 4.01437 2.06039 4.41326C1.41909 4.43627 0.457152 4.58969 0.0953964 5.17267C-0.241694 5.7173 0.383157 6.00112 0.901126 5.98578C21.217 5.50252 41.5493 5.45649 61.8735 5.85538C82.1976 6.25426 102.505 7.10572 122.788 8.39443C134.184 9.11549 145.571 9.98229 156.941 10.9872C157.558 11.0409 158.577 10.757 158.906 10.2278C159.268 9.65245 158.594 9.453 158.101 9.41465C137.867 7.62734 117.584 6.27727 97.2844 5.37211C76.985 4.46695 56.6527 4.01437 36.3286 4.0067C24.9086 4.0067 13.4886 4.13711 2.06861 4.41326L0.909347 5.98578C20.3948 5.27239 39.8886 4.64338 59.3823 4.08341C78.876 3.53111 98.3697 3.04784 117.863 2.64896C128.807 2.42651 139.758 2.21939 150.701 2.04296C151.342 2.03529 152.312 1.85886 152.666 1.28355C153.02 0.708235 152.37 0.47811 151.86 0.470439C136.741 0.20963 121.637 0.048542 106.526 0.0101877C91.4141 -0.0281665 76.4424 0.0408711 61.4048 0.232642C52.8624 0.340034 44.3118 0.485781 35.7695 0.669881C35.1282 0.685223 34.158 0.853981 33.8045 1.4293C33.4674 1.97393 34.0922 2.25775 34.6102 2.24241V2.23473Z' fill='rgb(89 103 240)'%3E%3C/path%3E%3C/svg%3E");
    width: 100%;
    height: 10px;
    background-repeat: no-repeat;
    background-size: cover;
}
.rec-blue {
    background: linear-gradient(45deg, #5967f0, #717df5);
    width: fit-content;
    padding: 0 10px;
    color: white;
    rotate: 2deg;
}
.font-64{
    font-size: 64px;
}
.h1-80 h2 {
    font-size: 75px;
    font-weight: bolder;
}
.text_right{
    font-size: 20px;
    line-height: 34px;
}
.py-150 {
    padding: 150px 0;
}
.text-blue{
    color: rgb(89 103 240);
}
.hero-area__bg {
    position: absolute;
    /* width: 100%;
    height: 100%; */
    top: 0;
    /* left: 0; */
    right: 0;
    z-index: -1;
}
.hero-area__bg::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(360deg, #FFFFFF 34.13%, rgba(255, 255, 255, 0) 100%);
}


.hero-area__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(black 80%, transparent);
}
.empecemos {
    border: 1px solid rgb(0 0 0 / 20%);
    /* border-radius: 100px; */
    transition: background-color 0.3s, color 0.3s;
}
.empecemos:hover{
    /* background-color: rgba(255, 255, 255, 0.08); */
    border: 1px solid rgb(0 0 0 / 20%);
    background-color: #5967f0;
    color: #f8f9fa;
}
/* Estilo del botón cuando se ha hecho scroll */
.scrolled .empecemos {
    background-color: #5967f0;
    color: #f8f9fa;
}

.navbar-nav{
    border: 1px solid;
    border-bottom-width: 1px;
    border-color: rgba(255, 255, 255, 0);
    border-left-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    border-top-width: 1px;
    backdrop-filter: blur(40px);
    background-color: rgb(255 255 255 / 40%);
    border-radius: 16px;
    opacity: 1;
    will-change: auto;

}
.nav-item{
    padding: 8px 16px;
}


 .nav-link:hover{
    background-color:rgb(164 162 162 / 12%);
    opacity: 1;
}
a.nav-link {
    border-radius: 12px;
}


body {
    padding-top: 70px; /* Espacio para el navbar fijo */
    transition: background-color 0.3s, color 0.3s;
}

footer {
    padding: 20px 0;
    transition: background-color 0.3s, color 0.3s;
}

.navbar-toggler {
    border-color: transparent;
}
 a.navbar-brand {
    filter: drop-shadow(2px 0px 0px white);
 }

/* Dark Mode */
.dark-mode footer{
    color: #000000;
    background: #ffffff;
}

/* .dark-mode .logo-footer img{
    filter: invert(1);
} */

.dark-mode .slider::before, .dark-mode .slider::after{
    background: linear-gradient(to right, black 0%, rgba(255, 255, 255, 0) 100%);
}
.dark-mode .slider{
    filter: none;
}

.dark-mode .nav-link:hover{
    background-color:rgb(255 255 255 / 12%);
    opacity: 1;
}

.dark-mode .text-color-bg{
    background: linear-gradient(100deg, #8987f4, #d6d3e9 60.42%, #7380ff 95.31%);
    background-clip: text;
    color: transparent;
}
.dark-mode #team .card{
    background: #0d0d0d;
   }
.dark-mode .hero-area__bg::after {
    background: linear-gradient(360deg, #000 34.13%, rgba(0, 0, 0, 0.4) 100%);
}
.dark-mode a.navbar-brand {
    filter: invert(1) drop-shadow(2px 0px 0px black);
}
.dark-mode {
    background-color: #000000;
    color: #e0e0e0;
}

.dark-mode .empecemos {
    border: 1px solid rgb(255 255 255 / 20%);
    /* border-radius: 100px;  */
    color: white;
}
.dark-mode .hero-area__bg img{
    filter: invert(1);
}
.dark-mode .navbar-nav {
    background-color:rgba(0, 0, 0, 0.4)
}

.dark-mode .navbar-light .navbar-brand,
.dark-mode .navbar-light .nav-link {
    color: #e0e0e0;
}
.dark-mode .text-muted{
    color: rgb(106 106 106 / 75%);
}
.dark-mode .card {
    color: #e0e0e0;
}
.dark-mode .line-md--moon-rising-loop, .dark-mode .line-md--sun-rising-loop{
    background-color: white;
}
.dark-mode .line-md--moon-rising-loop:hover, .dark-mode .line-md--sun-rising-loop:hover{
    background: linear-gradient(100deg, #8987f4, #d6d3e9 60.42%, #7380ff 95.31%);
}
#darkModeToggle {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    width: max-content;
    display: flex;
    align-items: center;
    cursor: pointer;
}


/* Dark mode End */

.line-md--moon-rising-loop:hover, .line-md--sun-rising-loop:hover{
    background: linear-gradient(100deg, #8987f4, #d6d3e9 60.42%, #7380ff 95.31%);
}
.line-md--moon-rising-loop {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-opacity='0'%3E%3Cpath d='M15.22 6.03l2.53-1.94L14.56 4L13.5 1l-1.06 3l-3.19.09l2.53 1.94l-.91 3.06l2.63-1.81l2.63 1.81z'%3E%3Canimate id='lineMdMoonRisingLoop0' fill='freeze' attributeName='fill-opacity' begin='0.7s;lineMdMoonRisingLoop0.begin+6s' dur='0.4s' values='0;1'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+2.2s' dur='0.4s' values='1;0'/%3E%3C/path%3E%3Cpath d='M13.61 5.25L15.25 4l-2.06-.05L12.5 2l-.69 1.95L9.75 4l1.64 1.25l-.59 1.98l1.7-1.17l1.7 1.17z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+3s' dur='0.4s' values='0;1'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+5.2s' dur='0.4s' values='1;0'/%3E%3C/path%3E%3Cpath d='M19.61 12.25L21.25 11l-2.06-.05L18.5 9l-.69 1.95l-2.06.05l1.64 1.25l-.59 1.98l1.7-1.17l1.7 1.17z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+0.4s' dur='0.4s' values='0;1'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+2.8s' dur='0.4s' values='1;0'/%3E%3C/path%3E%3Cpath d='M20.828 9.731l1.876-1.439l-2.366-.067L19.552 6l-.786 2.225l-2.366.067l1.876 1.439L17.601 12l1.951-1.342L21.503 12z'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+3.4s' dur='0.4s' values='0;1'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='lineMdMoonRisingLoop0.begin+5.6s' dur='0.4s' values='1;0'/%3E%3C/path%3E%3C/g%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M7 6 C7 12.08 11.92 17 18 17 C18.53 17 19.05 16.96 19.56 16.89 C17.95 19.36 15.17 21 12 21 C7.03 21 3 16.97 3 12 C3 8.83 4.64 6.05 7.11 4.44 C7.04 4.95 7 5.47 7 6 Z' transform='translate(0 22)'%3E%3CanimateMotion fill='freeze' calcMode='linear' dur='0.6s' path='M0 0v-22'/%3E%3C/path%3E%3C/svg%3E");
    background-color: black;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.line-md--sun-rising-loop {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Ccircle cx='12' cy='32' r='6'%3E%3Canimate fill='freeze' attributeName='cy' dur='0.6s' values='32;12'/%3E%3C/circle%3E%3Cg%3E%3Cpath stroke-dasharray='2' stroke-dashoffset='2' d='M12 19v1M19 12h1M12 5v-1M5 12h-1'%3E%3Canimate fill='freeze' attributeName='d' begin='0.7s' dur='0.2s' values='M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.7s' dur='0.2s' values='2;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='2' stroke-dashoffset='2' d='M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5'%3E%3Canimate fill='freeze' attributeName='d' begin='0.9s' dur='0.2s' values='M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.9s' dur='0.2s' values='2;0'/%3E%3C/path%3E%3CanimateTransform attributeName='transform' dur='30s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-color: black;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* Animaciones */
.transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

@media only screen and (max-width: 990px) {
    .logo-footer img{
        width: 300px;
        bottom: -5px;
    }
    .h1-80 h2{
        font-size: 33px;
    }
    .py-150{
        padding: 100px 0;
    }
    .font-64 {
        font-size: 24px;
    }
    .w-75{
        width: 100%!important;
    }
    .text_right{
        font-size: 17px;
    }
    section#conocenos h3 {
        font-size: 18px;
    }
    .line-double{
        background-size: contain;
    }
    #empecemos h3{
        font-size: 18px;
    }
    #empecemos h5{
        font-size: 14px;
    }
    .logo-footer {
        height: 0;
    }
    .bg-radial{
        background-image: radial-gradient(at center center, #5967f057 0%, transparent 75%);
    }
    .card{
        width: 21rem;
    }
    .border_f{
        width: 320px;
    }
    .fs-m-24 {
        font-size: 24px;
    }
    /* .slider{
        width: 350px;
    }
    .slide-track{
        animation: scroll 15s linear infinite;
    }
    @keyframes scroll {
        100% {
            transform: translateX(-80%);
        }
    } */
    .container-bg {
        width: 100vw; /* Ancho del 100% del viewport */
        height: 100vh; /* Alto del 100% del viewport */
        margin: 0;
        width: 100%;
        min-height: 568px;
        margin: 0 auto;
        position: fixed;
        top: 0;
        overflow: hidden;
        -webkit-transform: scale(1);
        z-index: 0;
      }
      
      .menu-trigger, .close-trigger {
        position: absolute;
        top: 15px;
        right: 20px;
        display: block;
        width: 32px;
        height: 32px;
        cursor: pointer;
        z-index: 333;
      }
      .menu-trigger:hover .menu-trigger-bar:before, .close-trigger:hover .menu-trigger-bar:before {
        width: 100%;
      }
      .menu-trigger:hover .close-trigger-bar:before, .close-trigger:hover .close-trigger-bar:before {
        width: 100%;
      }
      
      .close-trigger {
        z-index: 5;
        top: 25px;
      }
      
      .menu-trigger-bar {
        display: block;
        width: 100%;
        height: 4px;
        background-color: white;
        margin-bottom: 6px;
        transform: rotate(-45deg);
        position: relative;
      }
      .menu-trigger-bar:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 0%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
      }
      .menu-trigger-bar.top {
        width: 50%;
      }
      .menu-trigger-bar.middle:before {
        left: auto;
        right: 0;
      }
      .menu-trigger-bar.bottom {
        width: 50%;
        margin-left: 50%;
      }
      
      .close-trigger-bar {
        display: block;
        width: 100%;
        height: 4px;
        background-color: white;
        position: relative;
      }
      .close-trigger-bar:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 0%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.2);
        transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
      }
      .close-trigger-bar.left {
        transform: translateX(100px) translateY(-100px) rotate(-45deg);
      }
      .close-trigger-bar.right {
        transform: translateX(-100px) translateY(-100px) rotate(45deg);
        top: -3px;
      }
      
      .inner-container, .menu-container {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
      }
      
      .inner-container {
        z-index: 0;
      }
      
      .menu-container {
        display: flex;
        align-items: flex-start;
      }
      
      .menu {
        display: block;
        width: 100%;
        padding: 20% 10%;
        opacity: 0;
      }
      .menu li {
        text-align: left;
        display: block;
        padding: 15px 0;
      }
      .menu a {
        text-decoration: none;
        color: #222222;
        display: inline-block;
        padding: 10px 0;
        position: relative;
      }
      .menu a:hover:before {
        opacity: 1;
        transform: translateX(0px);
      }
      .menu a:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 18px;
        height: 4px;
        opacity: 0;
        background-color: #222222;
        transform: translateX(100px);
        transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
      }
      
      .menu-bg {
        position: absolute;
        display: block;
        width: 218%;
        left: -53%;
        top: -25%;
        height: 40%;
        background-color: black;
      }
      .menu-bg.middle {
        top: 29%;
        left: -53%;
        transform: rotate(-45deg) scaleY(0);
      }
      .menu-bg.top {
        left: -35%;
        top: 11px;
        transform: rotate(-45deg) translateY(-152%);
      }
      .menu-bg.bottom {
        top: 102%;
        transform: rotate(-45deg) translateY(25%);
        left: -21%;
      }
      .dark-mode .nav-link:hover {
        background-color: black;
        opacity: 1;
    }
    .menu a:before{
        background-color: rgb(89 103 240);
    }
    .menu li a{
       color: white;
    } 
    .juanma,.santi,.guille,.sebas{
      background-size: cover;
    }
    .bg_contact{
      background-position: bottom;
    }
    @keyframes scroll {
      100% {
          transform: translateX(-400%);
      }
    }
      
  }
  /* Estilos responsive */
    @media (max-width: 768px) {
      .swiper-wrapper {
        animation: scroll 15s linear infinite; /* Acelera la animación en móviles */
      }
      .swiper-slide {
        padding: 0 20px; /* Reduce el espacio entre logos */
      }
      .swiper-slide img {
        height: 50px; /* Ajusta el tamaño de los logos */
      }
    }

    @media (max-width: 480px) {
      .swiper-wrapper {
        animation: scroll 12s linear infinite; /* Más rápido en pantallas pequeñas */
      }
      .swiper-slide {
        padding: 0 15px; /* Menos espacio en pantallas pequeñas */
      }
      .swiper-slide img {
        height: 40px; /* Logos más pequeños en móviles */
      }
    }