/* Personalización de los colores de fondo */
.bg-celeste { background-color: #1cc0e4 !important; }
.bg-celeste-50 { background-color: #e8fbff !important; }
/* Esta regla se asegura de que en modo oscuro se sobrescriba el fondo */
.dark .bg-celeste-50 { background-color: #374151 !important; }
.bg-celeste-500 { background-color: #1cc0e4; }
.bg-celeste-600 { background-color: #1a98c3; }
.bg-celeste-700 { background-color: #187da2; }
.bg-celeste-800 { background-color: #166a82; }
.bg-celeste-900 { background-color: #145762; }

.text-celeste-500 { color: #1cc0e4; }
.text-celeste-600 { color: #1a98c3; }

.text-celeste { color: #1cc0e4 !important; }
.border-celeste { border-color: #1cc0e4 !important; }
.hover\:bg-celeste-700:hover { background-color: #187da2; }

.hover\:text-celeste-600:hover { color: #187da2; }


.border-celeste-500{
    border-left: 1px solid #1cc0e4;
}

/* Diseño en móviles (por defecto) */
.bg-white-left {
width: 75%;
max-width: 100%; /* Evita que sobrepase el ancho de la pantalla */
overflow: hidden; /* Evita el desbordamiento */
border-top: 2px solid #1cc0e4;
border-bottom: 2px solid #1cc0e4;
}

/* En pantallas medianas en adelante (desktop) */
@media (min-width: 768px) {
    .bg-white-left {
        width: 100%;
        max-width: 100%; /* Evita que sobrepase el ancho de la pantalla */
    }
    .blue-bg {
        left: 440px;
        clip-path: polygon(80px 0, 100% 0, 100% 100%, 51px 100%);
    }
}
  


.active-tab::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 10px 0;
    border-style: solid;
    border-color: #1cc0e4 transparent transparent;
    transition: all 0.3s ease;
  }
  
  .scroll-horizontal::-webkit-scrollbar {
    height: 6px;
    background: #f1f1f1;
  }
  
  .scroll-horizontal::-webkit-scrollbar-thumb {
    background: #1cc0e4;
    border-radius: 4px;
  }



  #google_translate_element {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: white;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);  /* Comienza fuera de la pantalla a la izquierda */
    }
    to {
        opacity: 1;
        transform: translateX(0);  /* Se mueve a su posición original */
    }
}

.animate-fadeInLeft {
    animation: fadeInLeft 1s ease-out forwards;
}

/* Clase para ocultar el elemento al principio */
.initial-hidden {
    opacity: 0;
    transform: translateX(-100%);
}


/* Cambiar color de los iconos */
.icon {
    color: #1cc0e4;
}


.service-card:hover .hover-underline {
    width: 100%;
    left: 0;
    right: auto;
}
.hover-underline {
    transition: width 0.7s;
}

@media (max-width: 640px) {
    .instagram-media {
      max-width: 100% !important;
      min-width: 100% !important;
    }
  }


@keyframes splitEffect {
    0% { transform: scaleX(1); }
    100% { transform: scaleX(0); }
}


@media (max-width: 1300px) {
    .flag-label {
        display: none;
    }
}

.logo_nav{
    width: 270px;
}




@media (max-width: 800px) {
    .logo_nav{
        width: 240px;
    }
    
}


@media (max-width: 600px) {
    .logo_nav{
        width: 220px;
    }
    
}



@media (max-width: 425px) {
    .logo_nav{
        width: 180px;
    }
    
}




@media (max-width: 382px) {
    .logo_nav{
        width: 170px;
    }
    
}



@media (max-width: 362px) {
    .logo_nav{
        width: 150px;
    }
    
}




@media (max-width: 335px) {
    .logo_nav{
        width: 126px;
    }
    
}