/* Variables de color de la marca Aliados */
:root {
    --color-primario: #0A192F; /* Azul oscuro del texto */
    --color-acento: #2CB1BC; /* Turquesa de los botones */
    --color-fondo: #FFFFFF;
    --color-fondo-gris: #F3F4F6; /* Para la barra inferior */
    --fuente-principal: 'Inter', sans-serif;
}

/* Reseteo básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-padding-top: 100px; /* Este es el margen invisible que deja para que no tape el título */
    scroll-behavior: smooth; /* ¡Bonus! Esto hace que el salto sea un deslizamiento suave en lugar de un corte brusco */
}
body {
    padding-top: 90px; /* Ajustá este número dependiendo de qué tan alta sea tu barra con el logo */
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-primario);
    line-height: 1.6;
}

/* --- Navegación --- */
.navbar {
    /* Diseño original para acomodar logo y menú */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;

    /* Tu código nuevo para fijarlo arriba */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.logo img {
    width: 220px; /* Podés subir o bajar este número para que quede idéntico al Photoshop */
    height: auto; /* Esta es la regla de oro para que no se deforme NUNCA */
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--color-primario);
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--color-acento);
}

.btn-outline {
    background-color: var(--color-acento);
    color: white !important;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
}

.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

/* --- Hero Section --- */
.hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 60px 5%;
    gap: 40px;
}

.hero-content {
    flex: 2; /* Texto toma 2 partes de espacio (más ancho) */
    max-width: 700px;
}

.hero-content h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--color-primario);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #4B5563; /* Gris oscuro para lectura */
}
.hero-image {
  flex: 1; /* Imagen toma 1 parte de espacio (más angosto) */
    text-align: right;
    display: flex; /* Crítico para matching high block */
    align-items: stretch; /* Match high text block */
    position: relative;
}
/* Borrá las anteriores y pegá esta sola: */
.hero-image img {
    max-width: 100%; /* Imagen responsiva */
    height: 100%;     /* Fuerza matching high con el texto */
    border-radius: 8px; /* Borde nórdico redondeado */
    object-fit: cover; /* balance behavior: crops to fill space without microscope effect */
    object-position: center; /* Mantiene la mujer centrada en el recorte */

    /* style="width: 40px; height: auto;" --> BORRAR ESTO DEL HTML SI LO PUSISTE */
}
/* --- El degradado blanco que se funde con el fondo --- */
.hero-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40%; /* Qué tanto de la imagen cubre el degradado. Podés probar con 30% o 50% */
    height: 100%;
    /* Crea el efecto: de blanco puro a la izquierda, a totalmente transparente hacia la derecha */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none; /* Para que el velo no bloquee clics accidentales */
}

.btn-primary {
    display: inline-block;
    background-color: var(--color-acento);
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1rem;
    transition: transform 0.2s, background-color 0.3s;
}

.btn-primary:hover {
    background-color: #23959e; /* Un tono más oscuro para el hover */
    transform: translateY(-2px);
}

.hero-image {
    flex: 1;
    text-align: right;
}

.hero-image img {
    max-width: 100%;
    border-radius: 8px; /* Pequeño borde redondeado nórdico */
}

/* ==========================================================================
   NUEVO CSS: Barra de Beneficios (Flexbox Refinado para una Sola Fila)
   ========================================================================== */

/* 1. EL CONTENEDOR PADRE (la section o div que envuelve a los tres ítems) */
/* Reemplazá '.features' por la clase real de tu contenedor padre si es diferente */
.features {
    display: flex !important;       /* Fuerza Flexbox */
    flex-direction: row !important;  /* Fuerza una fila, sobreescribiendo cualquier regla de columna para móvil */
    flex-wrap: nowrap !important;    /* Prohíbe terminantemente que los elementos se envuelvan a la siguiente línea */
    width: 100%;                     /* Ocupa todo el ancho disponible */
    justify-content: center;         /* IMPORTANTE: Centra todo el bloque de ítems horizontalmente */
    align-items: center;             /* Alinea los iconos y el texto verticalmente en el centro */
    gap: 20px;                       /* Espacio entre los tres ítems */
    padding: 15px;                   /* Padding opcional para la barra */
    box-sizing: border-box;          /* Asegura que el padding no afecte el ancho total */
}

/* 2. CADA ÍTEM INDIVIDUAL (icono + texto) */
.feature-item {
    display: flex;                   /* Flexbox interno para alinear icono y texto */
    align-items: center;             /* Alinea icono y texto verticalmente */
    justify-content: center;         /* Centra el icono y el texto horizontalmente dentro del ítem */
    gap: 8px;                        /* Espacio entre el icono y el texto */
    flex: 1;                         /* Hace que cada ítem se encoja para llenar el espacio disponible */
    min-width: 0;                    /* Evita el desborde del texto en pantallas muy chicas */
    white-space: nowrap;             /* Evita que el texto se parta en dos líneas, lo que forzaría el apilado */
    font-size: 16px;                 /* Tamaño de letra base para escritorio */
    text-align: center;              /* Centra el texto */
}

/* 3. AJUSTES PARA MÓVILES (Súper importante para que entre en una sola línea) */
@media (max-width: 600px) {
    .features {
        gap: 8px;                    /* Reduce el espacio entre ítems en móviles */
    }

    .feature-item {
        font-size: 12px;             /* Reduce significativamente el tamaño de la letra para que todo quepa */
        gap: 4px;                    /* Reduce el espacio entre icono y texto */
    }

    .feature-item img {
        width: 25px !important;      /* Reduce el tamaño de los iconos en móviles */
    }
}

/* --- Botón WhatsApp --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 35px;
}
    /* --- Diseño Responsivo (Celulares) --- */
@media (max-width: 768px) {
    .nav-links {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        top: 70px; /* Altura de la barra */
        left: 0;
        width: 100%;
        background-color: var(--color-fondo);
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        gap: 20px;
    }
    
    /* Esta clase se activa con JavaScript */
    .nav-links.active {
        display: flex; 
    }

    .menu-toggle {
        display: block;
    }
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 40px 5%;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-image {
        text-align: center;
        margin-top: 20px;
    }
    .features {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}
/* --- SECCIÓN PLANES --- */
.planes {
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f9fa; /* Un gris súper clarito para separar secciones */
}
/* --- PESTAÑAS DE PLANES (Botones) --- */
.planes-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que en celulares bajen de línea si no entran */
    gap: 15px;
    margin-bottom: 40px;
}

.tab-btn {
    background-color: transparent;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

/* Efecto al pasar el mouse */
.tab-btn:hover {
    background-color: var(--color-fondo-gris);
}

/* Diseño del botón cuando está SELECCIONADO */
.tab-btn.activo {
    background-color: var(--color-acento);
    color: white;
    border-color: var(--color-acento);
}
/* ==========================================================================
   AJUSTES DE PRECISIÓN: SECCIÓN PLANES
   ========================================================================== */

/* 1. Achicamos las "calles" (espacios verticales) */
.planes {
    padding: 40px 20px 15px !important; /* Menos aire abajo */
}

.planes h2 { 
    margin-bottom: 5px !important; 
}

.planes p { 
    margin-bottom: 35px !important; /* Espacio justo bajo la descripción */
    font-size: 18px;
    color: #666;
}

.planes-tabs { 
    margin-bottom: 30px !important; /* Espacio bajo los botones de categorías */
}

/* 2. Centrado absoluto de tarjetas cuando hay pocas (RI y PyMEs) */
.planes-carousel-track {
    display: flex;
    justify-content: center !important; 
    gap: 30px;
    padding: 10px 0;
}

/* 3. Centrado de contenido interno de las tarjetas */
.plan-card {
    text-align: center !important; /* Centra todo el texto por defecto */
    padding: 25px !important; /* Más compactas */
    flex: 0 1 320px;
}

.plan-card h3 {
    text-align: center !important;
    color: var(--color-acento);
    margin-bottom: 12px !important;
}

.plan-card .precio {
    text-align: center !important;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 20px !important;
    display: block;
}

/* Botón siempre al medio */
.plan-card .btn-primary {
    display: block !important;
    margin: 0 auto !important; 
    width: fit-content !important;
    padding: 12px 25px;
}

/* Los beneficios (ticks) vuelven a la izquierda para que se lean bien */
.plan-card ul {
    text-align: left !important;
    display: inline-block; /* Mantiene el bloque de la lista centrado pero el texto a la izq */
    margin-bottom: 20px;
}

/* 4. Ajuste de los puntos finales */
.puntos-finales {
    display: flex !important;
    justify-content: center !important;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}
/* --- Lógica visual para ocultar/mostrar planes --- */
.contenido-tab {
    display: none !important; /* Oculta todas las grillas por defecto */
}

.contenido-tab.activo {
    display: block !important; /* Muestra solo la grilla de la categoría activa */
}
.planes h2 {
    color: #0b3d60; /* Azul oscuro del logo */
    font-size: 32px;
    margin-bottom: 10px;
}

.planes p {
    color: #666;
    margin-bottom: 50px;
    font-size: 18px;
}

/* ==========================================================================
   --- SECCIÓN PLANES: ESTRUCTURA Y TARJETAS ---
   ========================================================================== */

/* --- 1. Contenedor Principal --- */
.planes-carousel-container {
    position: relative; /* Clave para que las flechas se ubiquen bien */
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
}

/* --- 2. La "Pista" (Donde van las tarjetas) --- */
.planes-carousel-track {
    display: flex;
    gap: 30px;
    padding: 20px 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    
    /* === LA MAGIA PARA CENTRAR SIN ROMPER EL SCROLL === */
    width: max-content;  /* La pista envuelve justo a las tarjetas */
    max-width: 100%;     /* Evita que la pista sea más ancha que la pantalla */
    margin: 0 auto;      /* Centra la pista entera en pantallas grandes */
    justify-content: flex-start; /* Asegura el inicio a la izquierda si se achica */
}

/* Oculta la barra de scroll en Chrome y Safari */
.planes-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Para asegurar que las tarjetas no se achiquen y fuercen el scroll */
.plan-card {
    min-width: 300px; /* Ajustá este valor si las querés más anchas o angostas */
    flex-shrink: 0;   /* Evita que se aplasten entre sí */
}
/* --- 3. Las Tarjetas --- */
.plan-card {
    background-color: white;
    border-radius: 12px;
    padding: 20px 20px; /* Bajamos de 40px a 20px para ganar mucha altura */
    flex: 1; 
    min-width: 280px; 
    max-width: 330px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: left;
    transition: transform 0.3s ease;
}

.plan-card:hover {
    transform: translateY(-10px);
}

/* Ocultamos flechas y puntos en pantallas grandes (compu) */
.carousel-prev,
.carousel-next,
.carousel-dots {
    display: none;
}

/* ==========================================================================
   --- 4. MAGIA DEL CARRUSEL (TABLETS Y CELULARES) ---
   ========================================================================== */
@media (max-width: 968px) {
    
    /* Transformamos la pista en un carrusel deslizable */
    .planes-carousel-track {
        justify-content: flex-start;
        flex-wrap: nowrap; /* Prohíbe que bajen de línea */
        overflow-x: auto; /* Activa el scroll horizontal */
        scroll-snap-type: x mandatory; /* Efecto imán */
        scroll-behavior: smooth;
        padding: 20px 5%;
        gap: 20px;
        
        /* Oculta la barra de scroll gris fea */
        -ms-overflow-style: none;  
        scrollbar-width: none;  
    }
    
    .planes-carousel-track::-webkit-scrollbar {
        display: none;
    }

    /* Ajustamos el tamaño de la tarjeta para que "asome" la siguiente */
    .plan-card {
        flex: 0 0 85%;
        scroll-snap-align: center;
    }

    /* --- Mostramos y le damos diseño a las FLECHAS con PNG --- */
.carousel-prev,
.carousel-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: 2px solid var(--color-acento);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 0; /* Limpia espacios internos */
    /* Eliminamos color, font-size y font-weight porque ya no son necesarios */
}

/* === ESTO HACE QUE TU PNG SE VEA Y SE CENTRE === */
.carousel-prev img,
.carousel-next img {
    width: 22px; /* Ajustá el tamaño a tu gusto */
    height: 22px;
    object-fit: contain; /* Mantiene la proporción del PNG */
    display: block;
    pointer-events: none; /* Para que el clic pase al botón */
}

    /* Ubicación exacta de cada flecha */
    .carousel-prev { left: 0; }
    .carousel-next { right: 0; }

    /* --- Mostramos y le damos diseño a los PUNTOS --- */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
    }

    .dot {
        width: 10px;
        height: 10px;
        background-color: #ccc; /* Gris clarito apagado */
        border-radius: 50%;
    }

    .dot.activo {
        background-color: var(--color-acento); /* Turquesa encendido */
    }
}

.plan-card h3 {
    color: #2db8b6; /* Celeste/turquesa del logo */
    font-size: 24px;
    margin-bottom: 8px;
}

.plan-card .precio {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #333;
}

.plan-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.plan-card ul li {
    margin-bottom: 8px;
    font-size:15px;
    padding-left: 25px;
    position: relative;
    color: #555;
}

.plan-card ul li::before {
    content: "✓";
    color: #2db8b6;
    position: absolute;
    left: 0;
    font-weight: bold;
}
/* --- SECCIÓN NOSOTROS --- */
.nosotros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 5%;
    background-color: white;
    gap: 40px;
}

.nosotros-contenido {
    flex: 1;
}

.nosotros-contenido h2 {
    color: #0b3d60;
    font-size: 32px;
    margin-bottom: 20px;
}

.nosotros-contenido p {
    color: #555;
    font-size: 18px;
    margin-bottom: 15px;
}

.nosotros-imagen {
    flex: 1;
    text-align: center;
}

.nosotros-imagen img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Para que en celulares la foto pase abajo del texto */
@media (max-width: 768px) {
    .nosotros {
        flex-direction: column;
        text-align: center;
    }
}
/* --- FOOTER / CONTACTO --- */
.footer {
    background-color: #0b3d60; /* El azul oscuro de tu marca */
    color: white;
    padding: 60px 5% 20px;
    margin-top: 40px;
}

.footer-contenido {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.footer-info, .footer-enlaces {
    flex: 1;
    min-width: 250px;
}

.footer-info h3 {
    color: #2db8b6; /* Turquesa de la marca */
    font-size: 24px;
    margin-bottom: 15px;
}

.footer-enlaces h4 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #2db8b6;
}

.footer-enlaces p {
    margin-bottom: 10px;
    color: #e0e0e0;
}

.footer-enlaces a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-enlaces a:hover {
    color: #2db8b6;
}

.footer-legal {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    font-size: 14px;
    color: #aaa;
}
/* --- SECCIÓN CONTACTO Y REDES --- */
.contacto-seccion {
    padding: 80px 5%;
    background-color: #f8f9fa; /* Gris clarito de fondo */
}

.contacto-contenedor {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    gap: 50px;
    background: white;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.contacto-info {
    flex: 1;
}

.contacto-info h2 {
    color: #0b3d60; /* Azul oscuro */
    font-size: 32px;
    margin-bottom: 15px;
}

.contacto-info p {
    color: #555;
    margin-bottom: 30px;
    font-size: 16px;
}

.redes-sociales {
    display: flex;
    gap: 15px;
}

.icono-red {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: #0b3d60;
    color: white;
    border-radius: 50%;
    text-decoration: none;
    font-size: 20px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.icono-red:hover {
    background-color: #2db8b6; /* Turquesa */
    transform: translateY(-5px); /* Efecto salto */
}

.contacto-formulario {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contacto-formulario input,
.contacto-formulario textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.contacto-formulario input:focus,
.contacto-formulario textarea:focus {
    outline: none;
    border-color: #2db8b6;
}

/* Modo celular */
@media (max-width: 768px) {
    .contacto-contenedor {
        flex-direction: column;
        padding: 30px 20px;
    }
}
.inicio-imagen img {
    max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
    height: auto;     /* Mantiene la proporción para no deformarla */
}
/* Si la pantalla es bajita (como una notebook), achicamos todo más */
@media (max-height: 800px) {
    .planes h2 { margin-bottom: 10px; }
    .planes p { margin-bottom: 20px; }
    .planes-tabs { margin-bottom: 20px; }
    .plan-card { padding: 20px; }
}

/* --- ARMONIZACIÓN DE ESPACIOS (CALLLES) --- */

/* Achicamos el espacio bajo el título principal */
.planes h2 { 
    margin-bottom: 5px !important; 
}

/* Achicamos el espacio bajo el texto descriptivo */
.planes p { 
    margin-bottom: 40px !important; 
}

/* Achicamos el espacio bajo las pastillas (Monotributo, etc) */
.planes-tabs { 
    margin-bottom: 35px !important; 
}

/* Eliminamos el aire extra del contenedor de los planes */
.planes-carousel-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ajuste final de los 3 puntos para que suban */
/* --- ESTE ES EL NUEVO BLOQUE PARA LOS PUNTOS --- */
.puntos-finales {
    display: flex !important;
    justify-content: center !important; /* Los centra horizontalmente */
    width: 100% !important; /* Ocupa todo el ancho disponible */
    margin-top: 30px !important; /* Los separa de las tarjetas */
    margin-bottom: 20px !important;
    clear: both !important; /* Los obliga a ir debajo de los planes */
    position: relative !important;
}

/* Estilo para los circulitos */
.puntos-finales .dot {
    display: inline-block !important;
    margin: 0 8px !important;
    width: 12px !important;
    height: 12px !important;
}

/* Achicamos el aire de la sección entera para que no se escape nada por abajo */
.planes {
    padding-bottom: 15px !important;
}

/* --- CENTRADO DE TÍTULO, PRECIO Y BOTÓN EN LAS TARJETAS --- */

/* 1. Centramos el Título (h3) */
.plan-card h3 {
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* 2. Centramos el Precio (p.precio) */
.plan-card .precio {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 25px !important;
}

/* 3. Centramos el Botón (Elegir Plan) */
.plan-card .btn-primary {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important; /* Para que el botón no ocupe todo el ancho, solo su texto */
    text-align: center !important;
}

/* FORZAR VISIBILIDAD DEL CARRUSEL */
.planes-carousel-container {
    display: none; /* Oculto por defecto */
    position: relative;
    width: 100%;
    overflow: hidden; /* Para que las tarjetas que sobran no se desparramen */
    padding: 20px 0;
}

/* Solo se muestra cuando la pestaña está activa */
.planes-carousel-container.activo, 
.contenido-tab.activo {
    display: block !important;
}

/* Ajuste de la "pista" de tarjetas para que sigan en fila */
.planes-carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px;
    justify-content: center; /* Mantiene el centrado que tenías */
}

/* Ocultar la barra de scroll para que quede estético */
.planes-carousel-track::-webkit-scrollbar {
    display: none;
}
.planes-carousel-track {
    scrollbar-width: none;
}
/* BOTÓN FLOTANTE DE WHATSAPP */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
}