@font-face {
  font-family: 'Copperplate';
  src: url('Copperplate.otf') format('truetype');
}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
overflow-x:hidden;
background:#fff;

}

a{

text-decoration:none;

}

img{

max-width:100%;

}

.container{

width:90%;
max-width:1350px;
margin:auto;

}

/* HEADER */

header{

position:fixed;
top:0;
left:0;
width:100%;
height:75px;
border-radius: 0px 0px 25px 25px;

background:white;

display:flex;
align-items:center;

z-index:1000;

box-shadow:
0 10px 30px rgba(0,0,0,.05);
border-bottom: 5px solid #0D5ED9;

}

header:hover{
    border-bottom: 5px solid #ffd500;
    transition: 0.35s;
}

header .container{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo img{

height:50px;

}

.logo img:hover{
    transition: 2s;
    transform: scale(1.25);
}

nav a{

    position:relative;

    color:#1B64D7;

    font-weight:600;

}

nav a span{

    position:relative;

    display:inline-block;

    padding:4px 8px;

    z-index:2;

}

nav a span::before{

    content:"";

    position:absolute;

    left:-4px;

    bottom:3px;

    width:0%;

    height:75%;

    border-radius:8px;

    background:linear-gradient(
        90deg,
        rgba(29,120,234,.12),
        rgba(29,120,234,.30),
        rgba(29,120,234,.12)
    );

    transition:.45s;

    z-index:-1;

}

nav{

display:flex;
gap:45px;

perspective:1000px;

}

nav a{

color:#195ec8;

font-weight:600;

font-size:15px;

position:relative;

opacity:0;

transform:
translateY(-25px)
rotateX(-90deg);

animation:
menu .8s forwards;

}

nav a:nth-child(1){animation-delay:.3s;}
nav a:nth-child(2){animation-delay:.45s;}
nav a:nth-child(3){animation-delay:.6s;}
nav a:nth-child(4){animation-delay:.75s;}
nav a:nth-child(5){animation-delay:.9s;}
nav a:nth-child(6){animation-delay:1.05s;}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0%;
height:3px;

border-radius:50px;

background:#1d78ea;

transition:.4s;

}

nav a:hover span::before{

    width:110%;

}

.btn-header{

padding: 5px 15px;

border-radius:40px;

background:

linear-gradient(
135deg,
#0D5ED9,
#2F82F5
);

color:white;

font-weight:600;

transition:.4s;

opacity:0;

animation:
fadeUp 1s forwards 1.2s;

}

.btn-header:hover{

transform:translateY(-4px);

box-shadow:

0 15px 30px rgba(25,95,220,.3);

}

/* HERO */

.hero{

height:100vh;

position:relative;

display:flex;
justify-content:center;
align-items:center;

overflow:hidden;

}

/* SLIDER */

.slider{

position:absolute;

width:100%;
height:100%;

}

.slide{

position:absolute;

width:100%;
height:100%;

opacity:0;

transition:2s;

transform:scale(1.2);

}

.slide.active{

opacity:1;

transform:scale(1);

}

.slide img{

width:100%;
height:100%;

object-fit:cover;

}

/* OVERLAY */

.overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at 20% 8%,

        rgba(195,255,175,.22),

        transparent 28%

    ),

    radial-gradient(

        circle at 80% 15%,

        rgba(60,135,255,.35),

        transparent 35%

    ),

    radial-gradient(

        circle at 92% 70%,

        rgba(80,240,255,.28),

        transparent 30%

    ),

    linear-gradient(

        0deg,

        rgba(0,63,176,1),

        rgba(17,103,228,0)

    );

}

/* LUCES */

.light{

position:absolute;

border-radius:50%;

filter:blur(120px);

animation:pulse 8s infinite;

}

.light1{

width:500px;
height:500px;

left:-120px;
top:-120px;

background:#c7ffb0;

opacity:.20;

}

.light2{

width:650px;
height:650px;

right:-250px;
top:-120px;

background:#3f88ff;

opacity:.25;

animation-delay:2s;

}

.light3{

width:450px;
height:450px;

right:-100px;
bottom:-100px;

background:#64f0ff;

opacity:.25;

animation-delay:4s;

}

/* CONTENIDO */

.hero-content{

position:relative;

z-index:20;

text-align:center;

width:100%;

padding:30px;

}

.hero-logo{

    width:200px;

    opacity:0;

    animation:

    fadeLogo 1.2s forwards,

    floating 6s ease-in-out infinite;

    animation-delay:0s,1.5s;
    filter: brightness(0) invert(1);

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.06),

    transparent 70%);

    animation:

    pulse 12s infinite;

}

.slogan{

    margin-top:15px;

}

.slogan h2{
    display:block;
    margin: 0px 50px;
    font-family: 'Copperplate';

}

.slogan h2 span{

    position:relative;

    display:block;

    color:#0D5ED9;

    font-size:28px;

    font-weight:700;

    letter-spacing:2px;

    padding:8px 14px;

    z-index:2;

}

.slogan h2 span::before{

    content:"";

    position:absolute;

    left:-8px;

    bottom:8px;

    width:0%;

    height:75%;

    background:linear-gradient(
        90deg,
        rgba(95,185,255,0),
        rgba(255,255,255,.75),
        rgba(255,255,255,1),
        rgba(255,255,255,.75),
        rgba(95,185,255,0)
    );

    z-index:-1;

    animation:highlightText 1.2s ease forwards 1.4s;

}

.highlight{

    position:absolute;

    left:0;

    bottom:8px;

    width:0%;

    height:22px;

    background:

    linear-gradient(
        90deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.30),
        rgba(255,255,255,.08)
    );

    border-radius:12px;

    animation:

    fondoTexto

    1.3s

    forwards

    1.6s;

}



.hero p{

margin:auto;

margin-top:45px;

width:780px;

font-size:22px;

font-weight:300;

line-height:1.8;

color:white;

opacity:0;

animation:
fadeUp
1s
forwards
2s;

}

.buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:55px;

}

.btn{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:10px 20px;

    border-radius:60px;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    transition:.45s;

    backdrop-filter:blur(12px);

}

.btn i{

    font-size:18px;

    transition:.45s;

}

.btn span{

    position:relative;

    z-index:2;

}

.btn{

    opacity:0;

    animation:

    fadeUp .9s forwards;

}

.btn:nth-child(1){

    animation-delay:2.3s;

}

.btn:nth-child(2){

    animation-delay:2.6s;

}

.btn-primary{

    color:#1565da;

    background:white;

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

}

.btn-primary:hover{

    transform:

    translateY(-8px)

    scale(1.03);

    box-shadow:

    0 25px 45px rgba(15,80,180,.35);

}


.btn-primary::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    transition:.8s;

}

.btn-primary:hover::before{

    left:150%;

}

.btn-primary:hover i{

    transform:

    rotate(-12deg)

    scale(1.25);

}

.btn-secondary{

    color:white;

    border:2px solid rgba(255,255,255,.7);

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

    backdrop-filter:blur(15px);

}

.btn-secondary:hover{

    background:white;

    color:#1565da;

    transform:

    translateY(-8px);

    border-color:white;

    box-shadow:

    0 20px 40px rgba(0,0,0,.20);

}

.btn-secondary:hover i{

    transform:

    translateX(6px);

}

/*==================================================
                ABOUT
==================================================*/

/*==================================================
                    ABOUT
==================================================*/

.about{
    position:relative;
    overflow:hidden;
    padding:120px 8%;
    isolation:isolate;
}

/*==============================
        IMAGEN DE FONDO
===============================*/

.about-bg{

    position:absolute;
    inset:0;

    background-image:url("fondo_about.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transform:scale(1.08);

    animation:aboutBackground 28s ease-in-out infinite;

    z-index:-5;

}

/*==============================
        CAPA OSCURA
===============================*/

.about-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(2,27,70,.90) 0%,
        rgba(8,54,126,.78) 38%,
        rgba(9,74,160,.45) 58%,
        rgba(8,74,160,.15) 72%,
        transparent 100%
    );

    z-index:-4;

}

/*==============================
      DEGRADADOS CIRCULARES
===============================*/

.about-light{

    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    pointer-events:none;

    z-index:-3;

}

/* Azul oscuro */

.light-green{

    width:460px;
    height:460px;

    background:rgba(0,63,176,1);

    top:-170px;
    right:-170px;

    opacity:.55;

}

/* Amarillo */

.light-yellow{

    width:360px;
    height:360px;

    background:#FFE986;

    left:-140px;
    top:48%;

    transform:translateY(-50%);

    opacity:.42;

}

/* Azul claro */

.light-blue{

    width:420px;
    height:420px;

    background:#74D4FF;

    bottom:-180px;

    left:50%;

    transform:translateX(-50%);

    opacity:.38;

}

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

.about-container{

    position:relative;

    z-index:5;

    width:min(1280px,100%);

    margin:auto;

}

/*==================================================
            TEXTO
==================================================*/

.about h2{

    max-width:700px;

    font-size:3.3rem;

    line-height:1.15;

    color:#fff;

    margin-bottom:28px;

}

.about-container>p{

    max-width:620px;

    color:rgba(255,255,255,.92);

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:70px;

}

/*==================================================
                TARJETAS
==================================================*/

.about-cards{

    width:48%;

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*==================================================
                TARJETA
==================================================*/

.about-card{

    position:relative;

    overflow:hidden;

    padding:35px 35px 35px 110px;

    background:rgba(255,255,255,1);

    backdrop-filter:blur(18px);

    border-radius:0 0 35px 0;

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

    transition:.35s;

}

.about-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 30px 60px rgba(0,63,176,.18);

}

/*==================================================
                ICONO
==================================================*/

.about-card-icon{

    position:absolute;

    top:0;
    left:0;

    width:82px;
    height:82px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        145deg,
        #0058D4,
        #4ABEFF
    );

    color:white;

    font-size:2rem;

    border-radius:0 0 22px 0;

}

/*==================================================
                TITULO
==================================================*/

.about-card h3{

    color:#0A3E82;

    font-size:1.45rem;

    margin-bottom:14px;

    font-weight:700;

}

/*==================================================
                TEXTO
==================================================*/

.about-card p{

    color:#555;

    line-height:1.8;

    margin:0;

    font-size:1rem;

}

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

@keyframes aboutBackground{

    0%{

        transform:scale(1.08) translateY(0);

    }

    50%{

        transform:scale(1.13) translateY(-18px);

    }

    100%{

        transform:scale(1.08) translateY(0);

    }

}


/*==================================================
                SERVICES
==================================================*/

.services{

    position:relative;

    overflow:hidden;

    padding:130px 8%;

    background:#ffffff;

    z-index:1;

}


/*=============================
        LUCES DECORATIVAS
==============================*/

.services::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-250px;
    right:-180px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(33, 255, 166, 0.55) 0%,
        rgba(169,255,220,.28) 45%,
        rgba(169,255,220,0) 75%
    );

    filter:blur(60px);

    z-index:-1;

}

.services::after{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    left:-220px;
    bottom:-220px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(75, 186, 255, 0.5) 0%,
        rgba(135,210,255,.25) 45%,
        rgba(135,210,255,0) 75%
    );

    filter:blur(70px);

    z-index:-1;

}

.services-container{

    max-width:1280px;

    margin:auto;

}

.services .section-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:100px;

    background:#EAF6FF;

    color:#0A5EA8;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:22px;

}

.services h2{

    max-width:720px;

    font-size:3.3rem;

    line-height:1.15;

    color:rgb(15, 91, 87);

    margin-bottom:28px;

}

.services>div>p,
.services-container>p{

    max-width:820px;

    font-size:1.15rem;

    line-height:1.9;

    color:#4A6781;

    margin-bottom:70px;

}


.services-grid{

    display:grid;

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

    gap:32px;

}

.service-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:35px;

    border-radius:26px;

    background:white;

    border:1px solid #E6EEF8;

    box-shadow:

    0 18px 45px rgba(0,73,150,.08);

    transition:.35s;

}

.service-card:hover{

    transform:
    translateY(-10px);

    box-shadow:

    0 28px 60px rgba(0,73,150,.15);

}



.service-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    background:

    linear-gradient(
        145deg,
        #0a9f63,
        #54ffb8
    );

    color:white;

    font-size:2rem;

    box-shadow:

    0 16px 35px rgba(10, 216, 103, 0.3);

}

.service-card h3{

    color:#073C69;

    font-size:1.45rem;

    margin-bottom:18px;

    line-height:1.3;

}

.service-card p{

    color:#4A6781;

    font-size:1rem;

    line-height:1.85;

}


.service-card::before{

    content:"";

    width:55px;

    height:5px;

    border-radius:20px;

    background:

    linear-gradient(
        90deg,
        #0a9f63,
        #54ffb8
    );

    margin-bottom:22px;

}

.service-card:hover .service-icon{

    transform:rotate(-8deg) scale(1.08);

    transition:.35s;

}

.services::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:#EAF7FF;

    filter:blur(130px);

    top:-180px;

    right:-180px;

    z-index:0;

}

.services-container{

    position:relative;

    z-index:2;

}


/*==================================================
                IDENTITY
==================================================*/

.identity{

    position:relative;

    overflow:hidden;

    padding:140px 8%;

    background:
    linear-gradient(
        180deg,
        rgba(135,210,255,.50) 0%,
        #FFFFFF 100%,
        #FFFFFF 100%
    );

}

/*==========================
Luces decorativas
==========================*/

.identity-light{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

    opacity:.28;

}

.identity .light-green{

    width:420px;
    height:420px;

    background:#B9F7C5;

    top:-140px;
    left:-120px;

}

.identity .light-gold{

    width:420px;
    height:420px;

    background:#FFF2A9;

    bottom:-120px;
    right:-120px;

}

/*==========================
Container
==========================*/

.identity-container{

    position:relative;

    z-index:2;

    max-width:1280px;

    margin:auto;

}


.identity h2{

    max-width:820px;

    font-size:3.4rem;

    line-height:1.15;

    color:#073B67;

    margin-bottom:28px;

}

.identity-intro{

    max-width:900px;

    font-size:1.15rem;

    line-height:1.9;

    color:#536B80;

    margin-bottom:90px;

}

.identity-story{

    display:grid;

    grid-template-columns:

    1.1fr
    .9fr;

    gap:70px;

    align-items:center;

    margin-bottom:110px;

}

.story-content .mini-title{

    display:inline-block;

    margin-bottom:18px;

    color:#0B73D8;

    font-weight:700;

    letter-spacing:2px;

    font-size:.82rem;

}

.story-content h3{

    font-size:2.6rem;

    color:#073B67;

    line-height:1.2;

    margin-bottom:28px;

}

.story-content p{

    margin-bottom:24px;

    color:#587286;

    font-size:1.05rem;

    line-height:1.95;

}


.story-image{

    height:600px;

    border-radius:34px;

    overflow:hidden;

    position:relative;

    background:

    linear-gradient(

        rgba(7,59,103,.25),

        rgba(7,59,103,.55)

    ),

    url("principios1.png");

    background-size:cover;

    background-position:center;

    box-shadow:

    0 35px 80px rgba(0,65,140,.18);

}


.identity-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:28px;

    margin-bottom:110px;

}

.identity-card{

    padding:40px;

    border-radius:28px;

    background:white;

    border:1px solid #EAF0F6;

    box-shadow:

    0 18px 45px rgba(0,73,150,.08);

    transition:.35s;

}

.identity-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 28px 60px rgba(0,73,150,.15);

}


.identity-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:26px;

    background:

    linear-gradient(

        145deg,

        #0C73D7,

        #58BEFF

    );

    color:white;

    font-size:2rem;

    box-shadow:

    0 18px 35px rgba(0,110,220,.30);

}

.identity-card h3{

    color:#083D67;

    font-size:1.45rem;

    margin-bottom:18px;

}

.identity-card p{

    color:#5A7287;

    line-height:1.85;

}


.identity-banner{

    position:relative;

    overflow:hidden;

    min-height:500px;

    border-radius:40px;

    margin-bottom:110px;

    background:

    linear-gradient(

        rgba(8,60,110,.55),

        rgba(8,60,110,.45)

    ),

    url("principios2.png");

    background-size:cover;

    background-position:center;

}

.banner-overlay{

    max-width:650px;

    padding:90px;

}

.banner-overlay .mini-title{

    color:white;

    letter-spacing:2px;

    font-weight:700;

    font-size:.8rem;

}

.banner-overlay h3{

    margin:25px 0;

    color:white;

    font-size:3rem;

    line-height:1.2;

}

.banner-overlay p{

    color:white;

    opacity:.92;

    line-height:2;

    font-size:1.08rem;

}

.values{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

}

.value{

    text-align:center;

    padding:35px;

}

.value i{

    font-size:2.4rem;

    color:#0A74D8;

    margin-bottom:22px;

}

.value h4{

    color:#073B67;

    font-size:1.3rem;

    margin-bottom:15px;

}

.value p{

    color:#60798C;

    line-height:1.8;

}

/*==================================================
                    EVENTOS
==================================================*/

.events{

    position:relative;
    overflow:hidden;

    padding:140px 8%;

    background:
    linear-gradient(
        180deg,
        #F8FCFF,
        #FFFFFF
    );

}

/*==================================
            LUCES
===================================*/

.events-light{

    position:absolute;

    border-radius:50%;

    filter:blur(130px);

    opacity:.18;

    pointer-events:none;

}

.light-blue{

    width:420px;
    height:420px;

    background:#5EBEFF;

    top:-120px;
    left:-120px;

}

.light-gold{

    width:340px;
    height:340px;

    background:#FFD976;

    right:-80px;
    bottom:20px;

}

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

.events-container{

    width:min(1350px,92%);

    margin:auto;

    position:relative;

    z-index:2;

}

.events h2{

    max-width:760px;

    margin-top:18px;
    margin-bottom:25px;

    font-size:3rem;

    line-height:1.15;

    color:#083D67;

}

.events p{

    max-width:760px;

    font-size:1.1rem;

    line-height:1.9;

    color:#5A7187;

    margin-bottom:70px;

}

/*==================================
            CARRUSEL
===================================*/

.events-slider{

    display:flex;

    gap:30px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

}

.events-slider::-webkit-scrollbar{

    display:none;

}

/*==================================
            TARJETA
===================================*/

.event-card{

    display:flex;

    flex-direction:column;

    min-width:380px;

    background:white;

    border:2px solid #E5E8EC;

    border-radius:30px;

    overflow:hidden;

    transition:.45s;

    box-shadow:

    0 20px 50px rgba(0,60,120,.08);

    scroll-snap-align:start;

}

.event-card:hover{

    transform:

    translateY(-12px);

    border-color:#2999F5;

    box-shadow:

    0 35px 65px rgba(0,92,180,.18);

}

/*==================================
        EVENTO DESTACADO
===================================*/

.event-card.featured{

    border:2px solid #2C9BFF;

    transform:scale(1.03);

    box-shadow:

    0 30px 70px rgba(30,120,230,.22);

}

.event-card.featured:hover{

    transform:

    scale(1.05)

    translateY(-8px);

}

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

.event-image{

    position:relative;

    height:260px;

    background-size:cover;

    background-position:center;

}

.event-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.05),

        rgba(0,0,0,.45)

    );

}

/*==================================
            BADGE
===================================*/

.event-badge{

    position:absolute;

    top:22px;
    left:22px;

    z-index:3;

    padding:10px 20px;

    border-radius:50px;

    background:

    linear-gradient(

        135deg,

        #FFD54D,

        #FFB800

    );

    color:#5E4200;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    box-shadow:

    0 10px 25px rgba(255,185,0,.35);

}

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

.event-content{

    padding:30px;

}

.event-date{

    display:inline-block;

    margin-bottom:12px;

    color:#2999F5;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.event-content h3{

    font-size:1.45rem;

    color:#083D67;

    margin-bottom:16px;

}

.event-content p{

    margin:0;

    font-size:1rem;

    line-height:1.8;

    color:#667A8D;

}

/*==================================
            LINK
===================================*/

.event-link{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:28px;

    color:#1678DB;

    font-weight:700;

    transition:.35s;

}

.event-link i{

    transition:.35s;

}

.event-card:hover .event-link{

    color:#0B5ED7;

}

.event-card:hover .event-link i{

    transform:translateX(8px);

}

/*==================================
            CONTROLES
===================================*/

.events-controls{

    display:flex;

    justify-content:flex-end;

    gap:15px;

    margin-top:40px;

}

.events-controls button{

    width:58px;
    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:white;

    color:#0A6ED8;

    font-size:18px;

    transition:.35s;

    box-shadow:

    0 15px 30px rgba(0,70,150,.10);

}

.events-controls button:hover{

    background:#0A75D9;

    color:white;

    transform:translateY(-4px);

}

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

.contact{

    position:relative;

    overflow:hidden;

    padding:140px 8%;

    background:

    linear-gradient(
        135deg,
        #0E66D8 0%,
        #2E9EF0 45%,
        #52D0B4 100%
    );

    border-radius:90px 90px 0 0;

}

.contact-light{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.22;

    pointer-events:none;

}

.contact .light-blue{

    width:450px;
    height:450px;

    background:#8DD9FF;

    top:-160px;
    left:-120px;

}

.contact .light-green{

    width:380px;
    height:380px;

    background:#8BFFD6;

    bottom:-120px;
    right:-100px;

}

.contact-container{

    position:relative;

    z-index:2;

    width:min(1300px,92%);

    margin:auto;

}

.contact h2{

    max-width:700px;

    margin-top:18px;
    margin-bottom:25px;

    font-size:3rem;

    line-height:1.15;

    color:white;

}

.contact>div>p,
.contact-container>p{

    max-width:760px;

    font-size:1.1rem;

    line-height:1.9;

    color:rgba(255,255,255,.9);

    margin-bottom:70px;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:

    420px

    1fr;

    gap:60px;

    align-items:start;

}

.contact-card{

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:22px;

    padding:26px;

    border-radius:26px;

    background:

    rgba(255,255,255,.12);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.18);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    background:

    rgba(255,255,255,.18);

}

.contact-icon{

    width:72px;
    height:72px;

    flex-shrink:0;

    border-radius:22px;

    display:flex;

    justify-content:center;
    align-items:center;

    background:white;

    color:#0E73D9;

    font-size:28px;

    box-shadow:

    0 15px 30px rgba(0,0,0,.12);

}

.contact-card h3{

    color:white;

    font-size:1.3rem;

    margin-bottom:8px;

}

.contact-card p{

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

.contact-social{

    margin-top:40px;

}

.contact-social h3{

    color:white;

    margin-bottom:25px;

}

.social-links{

    display:flex;

    gap:18px;

}

.social-links a{

    width:60px;
    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;
    align-items:center;

    background:

    rgba(255,255,255,.18);

    color:white;

    font-size:22px;

    transition:.35s;

    backdrop-filter:blur(10px);

}

.social-links a:hover{

    background:white;

    color:#0E73D9;

    transform:

    translateY(-6px)

    rotate(8deg);

}

.contact-form{

    padding:45px;

    border-radius:35px;

    background:

    rgba(255,255,255,.15);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.20);

}

.contact-form h3{

    color:white;

    font-size:2rem;

    margin-bottom:12px;

}

.contact-form p{

    color:rgba(255,255,255,.88);

    margin-bottom:35px;

}

.input-group{

    margin-bottom:22px;

}

.input-group input,
.input-group select,
.input-group textarea{

    width:100%;

    padding:18px 22px;

    border:none;

    outline:none;

    border-radius:18px;

    background:

    rgba(255,255,255,.85);

    font-size:16px;

    color:#17436B;

    transition:.35s;

}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{

    background:white;

    box-shadow:

    0 0 0 4px rgba(255,255,255,.25);

}

textarea{

    resize:none;

    min-height:180px;

}

.contact-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 38px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    background:white;

    color:#0C6ED8;

    font-size:17px;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 18px 35px rgba(0,0,0,.18);

}

.contact-btn:hover{

    transform:

    translateY(-6px);

    box-shadow:

    0 28px 50px rgba(0,0,0,.22);

}

.contact-btn:hover i{

    transform:translateX(6px);

}

.contact-btn i{

    transition:.35s;

}




.animate{

    opacity:0;

    transition:

    opacity .9s ease,

    transform .9s ease,

    filter .9s ease;

}


.animate.show{

    opacity:1;

    transform:none;

    filter:none;

}

/*==================================================
                DIRECCIONALES
==================================================*/

.fade-up{
    transform:translateY(70px);
}

.animate.show.fade-up{
    transform:translateY(0);
}

.fade-down{
    transform:translateY(-70px);
}

.animate.show.fade-down{
    transform:translateY(0);
}

.fade-left{
    transform:translateX(-90px);
}

.animate.show.fade-left{
    transform:translateX(0);
}

.fade-right{
    transform:translateX(90px);
}

.animate.show.fade-right{
    transform:translateX(0);
}


/*==================================================
                    ZOOM
==================================================*/

.zoom{
    transform:scale(.75);
}

.animate.show.zoom{
    transform:scale(1);
}

.zoom-big{
    transform:scale(.5);
}

.animate.show.zoom-big{
    transform:scale(1);
}


/*==================================================
                    BLUR
==================================================*/

.blur{
    filter:blur(15px);
}

.animate.show.blur{
    filter:blur(0);
}

.blur-zoom{

    filter:blur(15px);

    transform:scale(.8);

}

.animate.show.blur-zoom{

    filter:blur(0);

    transform:scale(1);

}


/*==================================================
                ROTACIONES
==================================================*/

.rotate{
    transform:rotate(-25deg);
}

.animate.show.rotate{
    transform:rotate(0);
}

.spin{
    transform:rotate(-180deg) scale(.6);
}

.animate.show.spin{
    transform:rotate(0) scale(1);
}


/*==================================================
                    3D
==================================================*/

.rotate-x{

    transform:

    perspective(900px)

    rotateX(-90deg);

}

.animate.show.rotate-x{

    transform:

    perspective(900px)

    rotateX(0);

}

.rotate-y{

    transform:

    perspective(900px)

    rotateY(90deg);

}

.animate.show.rotate-y{

    transform:

    perspective(900px)

    rotateY(0);

}

.flip{

    transform:

    perspective(1000px)

    rotateY(180deg);

}

.animate.show.flip{

    transform:

    perspective(1000px)

    rotateY(0);

}


/*==================================================
                ESQUINAS
==================================================*/

.corner{

    transform:

    translate(-70px,70px);

}

.animate.show.corner{

    transform:

    translate(0,0);

}

.corner-right{

    transform:

    translate(70px,70px);

}

.animate.show.corner-right{

    transform:

    translate(0,0);

}

.corner-top{

    transform:

    translate(-70px,-70px);

}

.animate.show.corner-top{

    transform:

    translate(0,0);

}

.corner-top-right{

    transform:

    translate(70px,-70px);

}

.animate.show.corner-top-right{

    transform:

    translate(0,0);

}


/*==================================================
                FLOAT
==================================================*/

.float{

    transform:

    translateY(80px)

    scale(.7);

}

.animate.show.float{

    transform:

    translateY(0)

    scale(1);

}


/*==================================================
                STRETCH
==================================================*/

.stretch{

    transform:

    scaleX(.5);

}

.animate.show.stretch{

    transform:

    scaleX(1);

}

.stretch-y{

    transform:

    scaleY(.5);

}

.animate.show.stretch-y{

    transform:

    scaleY(1);

}


/*==================================================
                BOUNCE
==================================================*/

.bounce{

    transform:

    translateY(90px);

}

.animate.show.bounce{

    animation:bounceIn .8s ease forwards;

}


/*==================================================
                ELASTIC
==================================================*/

.elastic{

    transform:scale(.6);

}

.animate.show.elastic{

    animation:elastic .9s forwards;

}


/*==================================================
                APPLE
==================================================*/

.apple{

    transform:

    translateY(80px)

    scale(.92);

    filter:blur(10px);

}

.animate.show.apple{

    transform:

    translateY(0)

    scale(1);

    filter:blur(0);

}


/*==================================================
                GLASS
==================================================*/

.glass{

    transform:

    translateY(60px);

    filter:blur(20px);

}

.animate.show.glass{

    transform:

    translateY(0);

    filter:blur(0);

}


/*==================================================
                WAVE
==================================================*/

.wave{

    transform:

    translateY(60px)

    rotate(-3deg);

}

.animate.show.wave{

    transform:

    translateY(0)

    rotate(0);

}


/*==================================
ANIMACIONES
===================================*/

@keyframes highlightText{

    0%{

        width:0%;
        opacity:0;

    }

    40%{

        opacity:1;

    }

    100%{

        width:100%;
        opacity:1;

    }

}

@keyframes menu{

    from{
        opacity:0;
        transform:translateY(-25px) rotateX(-90deg);
    }

    to{
        opacity:1;
        transform:translateY(0) rotateX(0);
    }

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

@keyframes fadeLogo{

    from{
        opacity:0;
        transform:scale(.75);
        filter:blur(12px);
    }

    to{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }

}

@keyframes pulse{

    0%{
        transform:scale(1);
        opacity:.20;
    }

    50%{
        transform:scale(1.18);
        opacity:.38;
    }

    100%{
        transform:scale(1);
        opacity:.20;
    }

}

@keyframes linea{

    from{
        width:0%;
    }

    to{
        width:100%;
    }

}

@keyframes fondoTexto{

    from{

        width:0%;
        opacity:0;

    }

    to{

        width:100%;
        opacity:.18;

    }

}

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes bounceIn{

    0%{

        opacity:0;

        transform:translateY(90px);

    }

    60%{

        opacity:1;

        transform:translateY(-18px);

    }

    80%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes bounceIn{

    0%{

        opacity:0;

        transform:translateY(90px);

    }

    60%{

        opacity:1;

        transform:translateY(-15px);

    }

    80%{

        transform:translateY(8px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes elastic{

    0%{

        opacity:0;

        transform:scale(.6);

    }

    50%{

        opacity:1;

        transform:scale(1.08);

    }

    70%{

        transform:scale(.96);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

.rotate3d{

    transform:

    perspective(900px)

    rotateX(90deg)

    rotateY(-30deg);

}

.apple{

    opacity:0;

    filter:blur(15px);

    transform:

    translateY(80px)

    scale(.92);

}

.apple.show{

    opacity:1;

    filter:none;

    transform:none;
}


@media(max-width:1100px){

.hero-content{

width:90%;

}

.hero p{

width:100%;

font-size:19px;

}

.hero-logo{

width:330px;

}

nav{

display:none;

}

}

/* ==========================================
   MÓVIL
========================================== */

@media (max-width:768px){

    header{
        height:70px;
        border-radius:0 0 18px 18px;
    }

    .container{
        width:92%;
    }

    nav{
        display:none;
    }

    .btn-header{
        display:none;
    }

    .hero-content{
        width:100%;
        padding:20px;
    }

    .hero-logo{
        width:150px;
    }

    .slogan{
        margin-top:18px;
        padding: 18px 22px;
    }

    .slogan h2{
        margin:10px;
        line-height: 1.4;
    }

    .slogan h2 span{

        font-size:15px;
        line-height:1.4;
        letter-spacing:1px;
        padding:0;

    }

    .hero p{

        width:100%;
        margin-top:30px;

        font-size:17px;
        line-height:1.8;

    }

    .buttons{

        flex-direction:column;
        gap:18px;

        width:100%;
        margin-top:35px;

    }

    .btn{

        width:100%;
        max-width:340px;

        justify-content:center;

        font-size:15px;

    }

    .about{

        padding:80px 28px;

    }

    .about-container{

        width:100%;

    }

    .section-tag{

        font-size:.75rem;
        padding:9px 18px;
        letter-spacing:1.5px;

    }

    .about{

        padding:90px 24px;

    }

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

    .about-bg{

        background-position:72% center;

        transform:scale(1.02);

        animation:none;

    }

    /*=========================================
                CAPA OSCURA
    =========================================*/

    .about-overlay{

        background:
        linear-gradient(
            180deg,
            rgba(2,28,74,.88) 0%,
            rgba(4,58,132,.80) 35%,
            rgba(7,86,180,.60) 70%,
            rgba(7,86,180,.40) 100%
        );

    }

    /*=========================================
                LUCES
    =========================================*/

    .light-green{

        width:220px;
        height:220px;

        top:-90px;
        right:-90px;

        opacity:.45;

    }

    .light-yellow{

        width:180px;
        height:180px;

        left:-80px;

        top:38%;

        opacity:.30;

    }

    .light-blue{

        width:220px;
        height:220px;

        bottom:-90px;

        left:50%;

        opacity:.30;

    }

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

    .about-container{

        width:100%;

    }

    .about h2{

        max-width:100%;

        font-size:2.2rem;

        line-height:1.2;

        text-align:center;

        margin-bottom:22px;

    }

    .about-container>p{

        max-width:100%;

        font-size:1rem;

        line-height:1.8;

        text-align:center;

        margin-bottom:50px;

        color:rgba(255,255,255,.92);

    }

    /*=========================================
                TARJETAS
    =========================================*/

    .about-cards{

        width:100%;

        gap:22px;

    }

    .about-card{

        padding:100px 28px 28px;

        border-radius:0 0 28px 0;

    }

    /*=========================================
                ICONO
    =========================================*/

    .about-card-icon{

        width:72px;
        height:72px;

        font-size:1.7rem;

        border-radius:0 0 18px 0;

    }

    /*=========================================
                TITULO
    =========================================*/

    .about-card h3{

        font-size:1.35rem;

        margin-bottom:14px;

        text-align:center;

    }

    /*=========================================
                TEXTO
    =========================================*/

    .about-card p{

        font-size:.96rem;

        line-height:1.75;

        text-align:center;

    }

    /*=========================================
        SERVICES - MÓVIL
=========================================*/

.services{

    padding:85px 28px;

}

.services-container{

    width:100%;

}

/* Etiqueta */

.services .section-tag{

    font-size:.75rem;

    padding:9px 18px;

    letter-spacing:1.5px;

    margin-bottom:18px;

}

/* Título */

.services h2{

    font-size:2.2rem;

    line-height:1.25;

    margin-bottom:20px;

}

/* Texto introductorio */

.services-container > p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:45px;

}

/* Grid */

.services-grid{

    grid-template-columns:1fr;

    gap:22px;

}

/* Tarjetas */

.service-card{

    padding:28px;

    border-radius:22px;

}

/* Línea decorativa */

.service-card::before{

    width:45px;

    height:4px;

    margin-bottom:18px;

}

/* Icono */

.service-icon{

    width:68px;

    height:68px;

    font-size:1.7rem;

    border-radius:18px;

    margin-bottom:20px;

}

/* Título */

.service-card h3{

    font-size:1.3rem;

    margin-bottom:12px;

    line-height:1.35;

}

/* Texto */

.service-card p{

    font-size:.98rem;

    line-height:1.75;

}

/* Hover más suave */

.service-card:hover{

    transform:translateY(-4px);

}

/*=========================================
    SERVICES - TELÉFONOS PEQUEÑOS
=========================================*/

.services{

    padding:70px 22px;

}

.services h2{

    font-size:1.9rem;

}

.services-container > p{

    font-size:.95rem;

}

.service-card{

    padding:24px;

}

.service-icon{

    width:62px;

    height:62px;

    font-size:1.5rem;

}

.service-card h3{

    font-size:1.2rem;

}

.service-card p{

    font-size:.95rem;

    line-height:1.7;

}

/*=========================================
        IDENTITY - MÓVIL
=========================================*/

.identity{

    padding:85px 28px;

}

.identity-container{

    width:100%;

}

/* Etiqueta */

.identity .section-tag{

    font-size:.75rem;

    padding:9px 18px;

    letter-spacing:1.5px;

    margin-bottom:18px;

}

/* Título */

.identity h2{

    font-size:2.2rem;

    line-height:1.25;

    margin-bottom:20px;

}

/* Introducción */

.identity-intro{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:55px;

}

/*==========================
Historia
==========================*/

.identity-story{

    display:flex;

    flex-direction:column;

    gap:35px;

    margin-bottom:65px;

}

.story-content .mini-title{

    font-size:.75rem;

    letter-spacing:1.5px;

}

.story-content h3{

    font-size:1.8rem;

    line-height:1.3;

    margin:15px 0 20px;

}

.story-content p{

    font-size:.98rem;

    line-height:1.8;

    margin-bottom:18px;

}

/* Imagen */

.story-image{

    width:100%;

    height:320px;

    border-radius:24px;

}

/*==========================
Principios
==========================*/

.identity-grid{

    grid-template-columns:1fr;

    gap:22px;

    margin-bottom:65px;

}

.identity-card{

    padding:28px;

    border-radius:22px;

}

.identity-icon{

    width:68px;

    height:68px;

    font-size:1.7rem;

    border-radius:18px;

    margin-bottom:18px;

}

.identity-card h3{

    font-size:1.3rem;

    margin-bottom:12px;

}

.identity-card p{

    font-size:.98rem;

    line-height:1.75;

}

/*==========================
Banner
==========================*/

.identity-banner{

    min-height:380px;

    border-radius:28px;

    margin-bottom:65px;

}

.banner-overlay{

    padding:38px 30px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:380px;

}

.banner-overlay .mini-title{

    font-size:.75rem;

    letter-spacing:1.5px;

}

.banner-overlay h3{

    font-size:2rem;

    line-height:1.3;

    margin:18px 0;

}

.banner-overlay p{

    font-size:1rem;

    line-height:1.8;

}

/*==========================
Valores
==========================*/

.values{

    grid-template-columns:1fr;

    gap:20px;

}

.value{

    padding:24px;

    border-radius:20px;

    background:#fff;

    box-shadow:0 10px 30px rgba(0,73,150,.08);

}

.value i{

    font-size:2rem;

    margin-bottom:15px;

}

.value h4{

    font-size:1.2rem;

    margin-bottom:10px;

}

.value p{

    font-size:.95rem;

    line-height:1.7;

}

/* Luces decorativas */

.identity .light-green{

    width:240px;

    height:240px;

    top:-80px;

    left:-80px;

}

.identity .light-gold{

    width:220px;

    height:220px;

    right:-70px;

    bottom:-70px;

}

/*==================================================
                    EVENTOS
==================================================*/

.events{

    padding:90px 28px;

}

.events-container{

    width:100%;

}

.events h2{

    font-size:2.2rem;

    line-height:1.25;

    margin-top:15px;
    margin-bottom:18px;

}

.events p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:40px;

}

/*==================================
            CARRUSEL
===================================*/

.events-slider{

    gap:18px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding-bottom:12px;

}

.events-slider::-webkit-scrollbar{

    display:none;

}

/*==================================
            TARJETAS
===================================*/

.event-card{

    min-width:88%;

    scroll-snap-align:center;

    border-radius:24px;

}

.event-card:hover{

    transform:none;

}

/*==================================
        TARJETA DESTACADA
===================================*/

.event-card.featured{

    transform:none;

    border:2px solid #1F94F2;

}

.event-card.featured:hover{

    transform:none;

}

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

.event-image{

    height:210px;

}

/*==================================
            BADGE
===================================*/

.event-badge{

    top:18px;
    left:18px;

    padding:8px 16px;

    font-size:.72rem;

}

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

.event-content{

    padding:22px;

}

.event-date{

    font-size:.78rem;

}

.event-content h3{

    font-size:1.25rem;

    line-height:1.35;

    margin-bottom:12px;

}

.event-content p{

    font-size:.95rem;

    line-height:1.7;

}

.event-link{

    margin-top:20px;

    font-size:.95rem;

}

/*==================================
            CONTROLES
===================================*/

.events-controls{

    justify-content:center;

    margin-top:28px;

}

.events-controls button{

    width:50px;
    height:50px;

    font-size:16px;

}

/*==================================
            LUCES
===================================*/

.light-blue{

    width:250px;
    height:250px;

    top:-70px;
    left:-80px;

}

.light-gold{

    width:180px;
    height:180px;

    right:-50px;
    bottom:10px;

}

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

.contact{

    padding:90px 28px;

    border-radius:45px 45px 0 0;

}

.contact-container{

    width:100%;

}

.contact h2{

    font-size:2.2rem;

    line-height:1.2;

    margin-top:18px;
    margin-bottom:18px;

}

.contact > .contact-container > p{

    font-size:1rem;

    line-height:1.8;

    margin-bottom:45px;

}

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

.contact-wrapper{

    display:flex;

    flex-direction:column;

    gap:40px;

}

/*==================================
        TARJETAS
===================================*/

.contact-card{

    padding:22px;

    gap:18px;

    border-radius:22px;

}

.contact-icon{

    width:60px;
    height:60px;

    font-size:22px;

    border-radius:18px;

}

.contact-card h3{

    font-size:1.15rem;

    margin-bottom:6px;

}

.contact-card p{

    font-size:.95rem;

    line-height:1.7;

}

/*==================================
        REDES
===================================*/

.contact-social{

    margin-top:15px;

}

.contact-social h3{

    font-size:1.3rem;

    margin-bottom:18px;

}

.social-links{

    flex-wrap:wrap;

    gap:15px;

}

.social-links a{

    width:52px;
    height:52px;

    font-size:18px;

}

/*==================================
        FORMULARIO
===================================*/

.contact-form{

    padding:28px;

    border-radius:24px;

}

.contact-form h3{

    font-size:1.6rem;

    margin-bottom:10px;

}

.contact-form p{

    font-size:.95rem;

    line-height:1.7;

    margin-bottom:25px;

}

/*==================================
        INPUTS
===================================*/

.input-group{

    margin-bottom:18px;

}

.input-group input,
.input-group select,
.input-group textarea{

    padding:16px 18px;

    font-size:15px;

    border-radius:15px;

}

textarea{

    min-height:150px;

}

/*==================================
        BOTÓN
===================================*/

.contact-btn{

    width:100%;

    justify-content:center;

    padding:16px;

    font-size:16px;

}

/*==================================
        LUCES
===================================*/

.contact .light-blue{

    width:260px;
    height:260px;

    top:-80px;
    left:-80px;

}

.contact .light-green{

    width:220px;
    height:220px;

    right:-70px;
    bottom:-70px;

}
    
}

/* ==========================================
   TELÉFONOS PEQUEÑOS
========================================== */

@media (max-width:480px){

    .hero-logo{
        width:145px;
    }

    .slogan h2 span{

        font-size:18px;
        letter-spacing:.5px;

    }

    .hero p{

        font-size:15px;
        line-height:1.7;

    }

    .btn{

        font-size:14px;
        padding:14px 18px;

    }

    /*=========================================
IDENTITY - TELÉFONOS PEQUEÑOS
=========================================*/

.identity{

    padding:70px 22px;

}

.identity h2{

    font-size:1.9rem;

}

.identity-intro{

    font-size:.95rem;

}

.story-content h3{

    font-size:1.6rem;

}

.story-content p{

    font-size:.95rem;

}

.story-image{

    height:260px;

}

.identity-card{

    padding:24px;

}

.identity-icon{

    width:62px;

    height:62px;

    font-size:1.5rem;

}

.identity-card h3{

    font-size:1.2rem;

}

.identity-card p{

    font-size:.95rem;

}

.identity-banner{

    min-height:330px;

}

.banner-overlay{

    min-height:330px;

    padding:28px 22px;

}

.banner-overlay h3{

    font-size:1.7rem;

}

.banner-overlay p{

    font-size:.95rem;

}

.value{

    padding:22px;

}

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

.contact{

    padding:75px 20px;

    border-radius:35px 35px 0 0;

}

.contact h2{

    font-size:1.9rem;

}

.contact > .contact-container > p{

    font-size:.95rem;

}

.contact-card{

    flex-direction:column;

    align-items:flex-start;

    text-align:left;

}

.contact-icon{

    width:56px;
    height:56px;

    font-size:20px;

}

.contact-form{

    padding:22px;

}

.contact-form h3{

    font-size:1.4rem;

}

.input-group input,
.input-group select,
.input-group textarea{

    font-size:14px;

}

.contact-btn{

    font-size:15px;

}

    .events{

        padding:75px 20px;

    }

    .events h2{

        font-size:1.9rem;

    }

    .events p{

        font-size:.95rem;

    }

    .event-card{

        min-width:94%;

    }

    .event-image{

        height:185px;

    }

    .event-content{

        padding:18px;

    }

    .event-content h3{

        font-size:1.15rem;

    }

    .event-content p{

        font-size:.9rem;

    }

    .events-controls button{

        width:45px;
        height:45px;

        font-size:15px;

    }

}