/* ===========================
   RESET CSS
=========================== */

*{
    margin: 0; /* Elimina los márgenes predeterminados */
    padding: 0; /* Elimina los rellenos predeterminados */
    box-sizing: border-box; /* Hace que el cálculo de tamaños sea mucho más sencillo y predecible */
}

/* ===========================
   VARIABLES GLOBALES
=========================== */

:root {

    /* ===== Colores ===== */
    --color-primary: #00C6D7;
    --color-primary-dark: #0099A8;

    --color-dark: #06141D;
    --color-gray: #0E3959;
    --color-font: #6F7F8C;

    --color-light: #1E303B;
    --color-white: #FFFFFF;

    /* ===== Tipografía ===== */
    --font-primary: "Poppins", sans-serif;

    /* ===== Espaciados ===== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 64px;
    --spacing-xl: 96px;

    /* ===== Bordes ===== */
    --border-radius: 10px;

    /* ===== Sombras ===== */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

}

/* ===========================
   ESTILOS GENERALES
=========================== */

body {

    font-family: var(--font-primary); /* Hace que toda la página utilice Poppins */

    background-color: var(--color-light);

    color: var(--color-dark); /* Color principal del texto */

    line-height: 1.6; /* Controla el espacio entre líneas */

    overflow-x: hidden; /* Evita la barra de desplazamiento horizontal */

}

/* ===========================
   TRANCISION SUAVE
=========================== */

html {

    scroll-behavior: smooth;

}

section {

     scroll-margin-top: 140px;

}

/* ===========================
   TAMAÑO DE IMÁGENES
=========================== */

img {

    max-width: 100%;

    display: block;

}

/* ===========================
   ENLACES
=========================== */

a {

    text-decoration: none;

    color: inherit;

}

/* ===========================
    LISTAS
=========================== */

ul {

    list-style: none;

}

/* ===========================
    CONTENEDOR PRINCIPAL
=========================== */

.container {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

}

/* ===========================
   HEADER
=========================== */

.header {

    background-color: var(--color-dark); /* Color de fondo blanco */

    box-shadow: var(--shadow); /* Sombra para dar profundidad */

    position: sticky; /* Hace que el header se quede fijo al hacer scroll */

    top: 0; /* Posición superior para que se quede en la parte superior de la página */

    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */

}

/* ===========================
   NAVBAR
=========================== */

.navbar {

    display: flex; /* Utiliza Flexbox para organizar los elementos del navbar */

    justify-content: space-between; /* Distribuye los elementos a lo largo del eje horizontal */

    align-items: center; /* Centra los elementos verticalmente */

    height: 110px; /* Altura del navbar */

}

/* ===========================
   LOGO
=========================== */

.logo {

    display: flex;

    align-items: center;

}

.logo img {

    height: 150px;

    width: auto;

}

.logo-title {
    color: var(--color-white);
    font-size: 1.45rem;
    font-weight: 700;
    white-space: nowrap;
}

.logo-title span {
    color: var(--color-primary);
}

.logo-subtitle {
    margin-top: 5px;
    color: var(--color-white);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .9px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ===========================
   MENÚ DE NAVEGACIÓN
=========================== */

.nav-menu {

    display: flex;

    gap: 40px; /* Espacio entre los elementos del menú */

}

/* ===========================
    ENLACES DE NAVEGACIÓN
=========================== */

.nav-link {

    color: var(--color-white);

    font-weight: 500;

    transition: .3s;

}

/* ===========================
    Cambio de color al pasar el mouse sobre los enlaces de navegación
=========================== */

.nav-link:hover {

    color: var(--color-primary);

}

/* ===========================
   HERO
=========================== */

.hero{

    position:relative;

    min-height:650px;

    padding:0;

    background:#061b32;

    overflow:hidden;

    margin-top:0;

}


/* Contenedor principal */

.hero-container{

    position:relative;

    display:flex;

    align-items:center;

    min-height:650px;

    gap:0;

}


/* =========================
   CONTENIDO
========================= */

.hero-content{

    position:relative;

    z-index:3;

    width:50%;

    padding:50px 60px 50px 0;

}

.hero-content::before{

    content:"";

    position:absolute;

    top:0;

    right:-85%;

    width:200%;

    height:100%;

    background:#061b32;

    z-index:-1;

    clip-path:polygon(
        0 0,
        100% 0,
        55% 58%,
        100% 100%,
        0 100%
    );

    pointer-events:none;
}

/* Diagonal turquesa */

.hero-content::after{

    content:"";

    position:absolute;

    top:0;

    right:-85%;

    width:200%;

    height:100%;

    /* Turquesa semitransparente */

    background:rgba(17, 194, 200, 0.5);

    clip-path:polygon(

        96.5% 0,

        100% 0,

        56.5% 58%,

        53.5% 58%

    );

    z-index:0;

    pointer-events:none;
    
}

.hero-subtitle{

    display:block;

    color:#11c2c8;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:15px;

}


.hero h1{

    color:#ffffff;

    font-size:2.8rem;

    font-weight:700;

    line-height:1.08;

    margin-bottom:20px;

}


.hero h1 span{

    display:block;

    color:#11c2c8;

}


/* Descripción */

.hero-content > p{

    max-width:560px;

    color:#e5edf5;

    font-size:1.5rem;

    line-height:1.6;

    margin-bottom:22px;

}


/* =========================
   LISTA
========================= */

.hero-list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:6px 0;

    color:#ffffff;

    font-size:.92rem;

    font-weight:500;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.hero-list li:last-child{

    border-bottom:none;

}

.hero-list i{

    color:#11c2c8;

    font-size:1.15rem;

}

/* =========================
   BOTONES
========================= */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:25px;

}


.hero-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:48px;

    padding:0 20px;

    border-radius:7px;

    font-weight:600;

    transition:.3s ease;

}


.hero-buttons .btn-primary{

    background:#11b8be;

    color:#ffffff;

}


.hero-buttons .btn-primary:hover{

    background:#0d9fa5;

    transform:translateY(-3px);

}


.hero-buttons .btn-secondary{

    background:transparent;

    color:#11c2c8;

    border:2px solid #11c2c8;

}


.hero-buttons .btn-secondary:hover{

    background:#11c2c8;

    color:#ffffff;

    transform:translateY(-3px);

}


/* =========================
   IMAGEN
========================= */

.hero-image{

    position:absolute;

    top:0;

    right:calc((1200px - 100vw) / 2);

    width:52vw;

    height:100%;

    z-index:1;

    overflow:hidden;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    animation:floating 6s ease-in-out infinite;

}


/* Capa oscura ligera sobre la imagen */

.hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.08);

    z-index:1;

}


/* =========================
   ANIMACIÓN
========================= */

@keyframes floating{

    0%{

        transform:scale(1) translateY(0);

    }

    50%{

        transform:scale(1.02) translateY(-5px);

    }

    100%{

        transform:scale(1) translateY(0);

    }

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

}

.logo-text{

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1.1;

}

.logo-title{

    color:#1F2937;

    font-size:2.01rem;

    font-weight:700;

    white-space:nowrap;

}

.logo-title span{

    color:#11c2c8;

}

.logo-subtitle{

    margin-top:5px;

    color:#6B7280;

    font-size:1.01rem;

    font-weight:500;

    letter-spacing:.9px;

    text-transform:uppercase;

    white-space:nowrap;
    
}

/* ===========================
   BOTONES
=========================== */

.btn{

    display:inline-block;

    padding:15px 30px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.btn-primary{

    background:var(--color-primary);

    color:white;

}

.btn-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-3px);

}

.btn-secondary{

    border:2px solid var(--color-primary);

    color:var(--color-primary);

}

.btn-secondary:hover{

    background:var(--color-primary);

    color:white;

    transform:translateY(-3px);

}

/* ===========================
   CARACTERISTICAS
=========================== */

.features{ /* Contenedor de la sección de características */

    padding:80px 0;

    background:var(--color-font);

}

.features-grid{/* Contenedor de la cuadrícula de características */

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.feature-card{/* Tarjeta individual de característica */

    background:var(--color-gray);

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s ease;

}

.feature-card:hover{ /* Efecto al pasar el mouse sobre la tarjeta de característica */

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.feature-card h3 {

    margin-bottom: 15px;

    font-size: 1.2rem;

    color: var(--color-white);

}

.feature-card p {

    color: #D6E2E8;

    font-size: .95rem;

}

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 198, 215, .20);
    font-size: 2rem;
}

.feature-icon i {
    color: #00C6D7;
}

/* ===========================
   SERVICIOS
=========================== */

.services {

    padding: 80px 0;

    background: var(--color-font);

}

.section-header{ /* Contenedor del encabezado de la sección de servicios */

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.section-header h2{ /* Título de la sección de servicios */

    font-size:2.5rem;

    margin-bottom:20px;

    color: var(--color-white);

}

.section-header p{ /* Descripción de la sección de servicios */

    color:#D6E2E8;

    font-size:1.05rem;

}

.services-grid{ /* Contenedor de la cuadrícula de servicios */

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.service-card{ /* Tarjeta individual de servicio */

    background: var(--color-gray);

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--shadow);

    transition: .35s ease;

    display: flex;

    flex-direction: column;

}

.service-card:hover{ /* Efecto al pasar el mouse sobre la tarjeta de servicio */

    transform: translateY(-10px);

    box-shadow: 0 20px 45px rgba(0,0,0,.12);

}

.service-image{ /* Contenedor de la imagen del servicio */

    overflow: hidden;

}

.service-image img{ /* Imagen del servicio */

    width:100%;

    height:230px;

    object-fit:cover;

    transition:.5s;

}

.service-card:hover .service-image img{ /* Efecto de zoom al pasar el mouse sobre la imagen del servicio */

    transform:scale(1.08);

}

.service-content{ /* Contenido de la tarjeta de servicio */

    padding:35px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.service-content h3 {/* Título del servicio */

    position: relative;

    display: inline-block;

    color: var(--color-white);

}

.service-content h3::after{ /* Línea decorativa debajo del título del servicio */

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:.35s;

}

.service-card:hover h3::after{ /* Efecto de animación de la línea decorativa al pasar el mouse sobre la tarjeta de servicio */

    width:100%;

}

.service-content p { /* Descripción del servicio */

    color: #D6E2E8;

    margin-bottom: 25px;

}

.service-link{/* Estilo del enlace "Conocer más" en la tarjeta de servicio */

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:var(--color-primary);

    font-weight:700;

    background:transparent;

    border:none;

    padding:0;

    text-decoration:none;

    cursor:pointer;

    transition:.3s ease;

    margin-top:auto;
    
}

.service-link span{/* Estilo del icono de flecha */

    transition:.3s ease;

}

.service-link:hover{/* Efecto al pasar el mouse */

    color:var(--color-primary-dark);

    transform:translateX(4px);

}

.service-link:hover span{

    transform:translateX(3px);

}

.service-card:hover .service-link span{ /* Efecto de animación al pasar el mouse sobre el enlace de "Leer más" */

    transform:translateX(6px);

}

/* ===========================
   MODAL DE SERVICIOS
=========================== */

.service-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.service-modal.active{

    opacity:1;

    visibility:visible;

}

.service-modal-content{

    position:relative;

    width:100%;

    max-width:950px;

    max-height:90vh;

    overflow:auto;

    background:#263442;

    border-radius:22px;

    box-shadow:0 25px 70px rgba(0,0,0,.25);

    transform:scale(.85);

    transition:.35s ease;

}

.service-modal.active .service-modal-content{

    transform:scale(1);

}

.service-modal-image img{

    width:100%;

    height:360px;

    object-fit:cover;

    display:block;

}

.service-modal-info{

    padding:35px;

}

.service-modal-info h2{

    margin-bottom:15px;

    color:var(--color-white);

}

.service-modal-info h3{

    color:var(--color-white);

    margin-bottom:12px;

}

.service-modal-info p{

    color:#D6E2E8;

    line-height:1.8;

    margin-bottom:20px;

}

#modalServiceDetails{

    color:#D6E2E8;

    line-height:1.8;

}

#modalServiceDetails ul{

    padding-left:20px;

    margin-top:15px;

}

#modalServiceDetails li{

    color:#D6E2E8;

    margin-bottom:8px;

}

.service-modal-close{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:var(--color-dark);

    font-size:20px;

    cursor:pointer;

    z-index:2;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    transition:.3s;

}

.service-modal-close:hover{

    transform:rotate(90deg);
    
    color:var(--color-primary);

}

/* ===========================
   NOSOTROS
=========================== */

.about{ /* Contenedor de la sección de nosotros */

    padding:100px 0;

    background: var(--color-font);

}

.about-content{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:45px;

    align-items:stretch;

}


/* ===========================
   CONTENIDO DE INFORMACIÓN
=========================== */

.about-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:15px;

}


/* ===========================
   ENCABEZADO
=========================== */

.about-heading{

    margin-bottom:15px;

}

.about-subtitle{

    display:block;

    color:var(--color-primary);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:3px;

    margin-bottom:8px;
}

.about-heading h2{

    color:var(--color-white);

    font-size:2.5rem;

    line-height:1.15;

    margin-bottom:15px;

    max-width:600px;

}

.about-heading h2 span{

    color:var(--color-primary);

}

.about-heading p{

    color:var(--color-white);

    line-height:1.6;

    max-width:650px;

    margin:0;

}


/* ===========================
   TARJETAS DE INFORMACIÓN
=========================== */

.about-card{

    background:var(--color-light);

    padding:20px 22px;

    border-radius:12px;

    border-left:4px solid var(--color-primary);

    box-shadow:var(--shadow);

    transition:.35s ease;
}

.about-card:hover{

    transform:translateX(6px);

}

.about-card h3{

    color:var(--color-primary);

    margin-bottom:8px;

}

.about-card p{
    color:var(--color-white);
    line-height:1.5;
    margin:0;
}


/* ===========================
   IMAGEN
=========================== */

.about-image{
    overflow:hidden;
    border-radius:20px;
    min-height:600px;
    box-shadow:var(--shadow);
}

.about-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;

    transition:.4s;
}

.about-image:hover img{
    transform:scale(1.05);
}

/*===========================
        VALORES
===========================*/

.values{

    margin-top:100px;

}

.values-grid{ /* Contenedor de la cuadrícula de valores */

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); /* Ajusta automáticamente el número de columnas según el tamaño de la pantalla */

    gap:25px;

}

.value-card{ /* Tarjeta individual de valor */

    background:var(--color-gray);

    border-radius:18px;

    padding:35px 25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.value-card h3 {

    color:var(--color-white);

}

.value-card p {

    color:#D6E2E8;

}

.value-card:hover{ /* Efecto al pasar el mouse sobre la tarjeta de valor */

    transform:translateY(-10px);

}

.value-card span{ /* Icono de la tarjeta de valor */

    font-size:40px;

    display:block;

    margin-bottom:18px;

}

.value-card i{ /* Icono de la tarjeta de valor */

    font-size:45px;

    color:var(--color-primary);

    margin-bottom:20px;

}

.value-card:hover i{

    transform:scale(1.15);

}

/*===========================
        PROYECTOS
===========================*/

.project-gallery{ 

    padding:80px 0; 

}

.project-hero{

    padding:100px 0 80px;

    background:var(--color-font);

    text-align:center;

}

.project-hero h1{

    font-size:3rem;

    color:var(--color-white);

    margin:25px 0 20px;

}

.project-hero p{

    max-width:850px;

    margin:0 auto;

    color:#D6E2E8;

    font-size:1.1rem;

    line-height:1.8;

}

.back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--color-primary);

    font-weight:600;

    transition:.3s;

}

.back-link:hover{

    color:var(--color-white);

    transform:translateX(-5px);

}

.project-details{

    padding:100px 0;

    background:var(--color-dark);

}

.project-details-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:50px;

}

.project-detail-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:30px;

    background:var(--color-gray);

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.35s ease;

}

.project-detail-card:hover{

    transform:translateY(-8px);

}

.project-detail-card > i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(0,198,215,.20);

    color:#00C6D7;

    font-size:22px;

}

.project-detail-card h3{

    margin-bottom:8px;

    color:var(--color-white);

}

.project-detail-card p{

    margin:0;

    color:#D6E2E8;

    line-height:1.7;

}

.project-description{

    padding:100px 0;

    background:var(--color-dark);

}

.project-description-content{

    max-width:900px;

    margin:0 auto;

}

.project-description-content h2{

    margin-bottom:25px;

    color:var(--color-white);

    font-size:2.2rem;

}

.project-description-content p{

    margin-bottom:20px;

    color:#FFFFFF !important;

    line-height:1.8;

    font-size:1.05rem;

}

.gallery-main{ 
    
    margin-bottom:25px; 

}

.gallery-main img{ 
    
    width:100%; 
    
    max-height:650px; 
    
    object-fit:cover; 
    
    border-radius:20px; 
    
    box-shadow:var(--shadow); 

}

.gallery-thumbnails{ 
    
    display:flex; 
    
    gap:15px; 
    
    justify-content:center; 
    
    flex-wrap:wrap; 

}

.gallery-thumbnails img{ 
    
    width:140px; 
    
    height:90px; 
    
    object-fit:cover; 
    
    border-radius:12px; 
    
    cursor:pointer; 
    
    transition:.3s; 
    
    opacity:.7; 

}

.gallery-thumbnails img:hover{ 
    
    transform:translateY(-5px); 
    
    opacity:1; 

}

.gallery-thumbnails img.active{ 
    
    opacity:1; 
    
    border:3px solid var(--color-primary); 

}

.projects{

    padding:100px 0;

    background:var(--color-font);

}

.projects-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.project-card{
    background:var(--color-gray);

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s ease;

    display:flex;

    flex-direction:column;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.project-image{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

}

.project-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.project-content h3{

    margin-bottom:12px;

    color:var(--color-white);

}

.project-content p{

    color:#D6E2E8;

    line-height:1.7;

    margin-bottom:25px;

}

.project-content .btn{

    margin-top:auto;

    align-self:flex-start;

}

.project-image-bafar{

    transform:scale(1.6);

}

/*===========================
    PROJECT DESCRIPTION
===========================*/

.project-description{

    padding:80px 0;

    background:var(--color-font);

}

.project-description-content{

    max-width:900px;

    margin:0 auto;

}

.project-description-content h2{

    margin-bottom:25px;

    color:var(--color-white);

}

.project-description-content p{

    margin-bottom:20px;

    color:var(--color-font);

    line-height:1.8;

}

/*===========================
        CONTACTO
===========================*/

.contact{

    padding:100px 0;

    background:var(--color-font);

}

.contact-container{

    display:grid;

    grid-template-columns:1fr 1.3fr;

    gap:60px;

    align-items:start;

}

.contact-info h3{

    margin-bottom:20px;

    color:var(--color-white);

}

.contact-info p{

    color:#D6E2E8;

}

.contact-cards{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:35px;

}

.contact-card{

    display:flex;

    align-items:center;

    gap:20px;

    background:var(--color-gray);

    padding:22px;

    border-radius:16px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.contact-card:hover{

    transform:translateX(8px);

}

.contact-card i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,198,215,.20);

    color:#00C6D7;

    font-size:24px;

    flex-shrink:0;

}

.contact-card h4{

    margin-bottom:6px;

    color:var(--color-white);

}

.contact-card p{

    margin:0;

    color:#D6E2E8;

}

/*===========================
      CONTACT FORM
===========================*/

.contact-info{

    width:100%;

}

.contact-form{

    width:100%;

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

}

.contact-cta{

    width:100%;

    max-width:450px;

    padding:45px;

    background:rgba(14,165,168,.08);

    border:1px solid rgba(14,165,168,.15);

    border-radius:20px;

    box-shadow:var(--shadow);

}

.contact-cta > i{

    font-size:32px;

    color:var(--color-primary);

    margin-bottom:20px;

}

.contact-cta h3{

    font-size:42px;

    color:var(--color-primary);

    margin-bottom:20px;

    line-height:1.2;

}

.contact-cta p{

    font-size:18px;

    color:#D6E2E8;

    line-height:1.8;

    margin-bottom:30px;

}

.contact-cta .btn{

    width:100%;

    display:flex;

    justify-content:center;

}

/*===========================
          FOOTER
===========================*/

.footer{

    background:var(--color-dark);

    color:var(--color-white);

    padding:70px 0 25px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-logo{

    width:160px;

    height:auto;

    display:block;

    margin-bottom:20px;
    
}

.footer p{

    color:#D6E2E8;

    line-height:1.8;

}

.footer h3{

    margin-bottom:20px;

    color:var(--color-white);

}

.footer-links ul{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer a{

    color:#D6E2E8;

    text-decoration:none;

    transition:.3s;

}

.footer a:hover{

    color:var(--color-primary);

}

.footer-contact p{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

}

.footer-social{

    display:flex;

    flex-direction:column;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(0,198,215,.12);

    margin-bottom:12px;

    transition:.3s;

}

.footer-social a:hover{

    background:var(--color-primary);

    color:var(--color-white);

    transform:translateY(-3px);

}

.footer-logo-bottom {

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:50px;

    margin-bottom:30px;

}

.footer-logo-bottom img {

    width:180px;

    height:auto;

    display:block;

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.15);

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.whatsapp-card{

    text-decoration:none;

    color:inherit;

}

.whatsapp-card:hover{

    border-color:#25D366;

}

.whatsapp-card:hover i{

    background:#25D366;

    color:var(--color-white);

}