/*====================================================
    KAIRÓS - STYLE.CSS
    Grupo de Proyección Social
=====================================================*/


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

:root{

    --primary:#0d6efd;
    --secondary:#4f4f4f;
    --dark:#111827;
    --gray:#6b7280;
    --light:#f8fafc;
    --white:#ffffff;

    --shadow:
    0 15px 40px rgba(0,0,0,.10);

    --radius:20px;

}


/*====================================================
    RESET GENERAL
=====================================================*/

*{

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

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins',sans-serif;

    color:var(--dark);

    overflow-x:hidden;

}


a{

    text-decoration:none;

}


img{

    max-width:100%;

}



section{

    padding:100px 0;

}



/*====================================================
    TITULOS
=====================================================*/


.section-title{

    font-size:42px;

    font-weight:700;

    margin-bottom:20px;

}


.section-subtitle{

    color:var(--primary);

    font-weight:600;

    letter-spacing:2px;

    font-size:14px;

}


.section-description{

    color:var(--gray);

}



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


.navbar{

    padding:20px 0;

    transition:.4s;

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

    backdrop-filter:blur(10px);

    z-index:1000;

}


.logo-nav{

    width:55px;

    margin-right:10px;

}


.navbar-brand{

    color:white;

    font-size:24px;

    font-weight:700;

}


.nav-link{

    color:white!important;

    margin-left:25px;

    font-weight:500;

    transition:.3s;

}


.nav-link:hover{

    color:#0d6efd!important;

}



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


.hero{

    min-height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    background:

    linear-gradient(
    120deg,
    rgba(15,23,42,.95),
    rgba(30,41,59,.85)
    ),

    url("../img/hero.jpg");

    background-size:cover;

    background-position:center;

    color:white;

}


.hero-overlay{

    position:absolute;

    inset:0;

}


.badge-kairos{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

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

    font-size:13px;

    margin-bottom:25px;

}


.hero h1{

    font-size:60px;

    line-height:1.2;

    font-weight:800;

}


.hero h1 span{

    color:#60a5fa;

}


.hero-text{

    font-size:18px;

    color:#ddd;

    max-width:600px;

    margin:25px 0;

}



.hero-buttons .btn{

    border-radius:50px;

    padding:14px 35px;

    margin-right:10px;

}



.logo-hero{

    width:320px;

    filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));

    animation:float 4s infinite;

}



@keyframes float{

    50%{

        transform:translateY(-20px);

    }

}



.hero-info{

    display:flex;

    gap:50px;

    margin-top:50px;

}


.hero-info h3{

    font-size:35px;

    margin:0;

}


.hero-info p{

    color:#ddd;

}


.wave{

    position:absolute;

    bottom:-1px;

    width:100%;

}



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


.about-card{

    background:white;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}



.about-item{

    display:flex;

    gap:25px;

    margin-bottom:35px;

}



.about-item i{

    font-size:35px;

    color:var(--primary);

}



.about-item h4{

    font-weight:700;

}



/*====================================================
    MISION VISION VALORES
=====================================================*/


.info-card{

    background:white;

    padding:40px;

    height:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.4s;

}



.info-card:hover{

    transform:translateY(-15px);

}



.info-card .icon{

    font-size:45px;

    color:var(--primary);

    margin-bottom:20px;

}



.values-list{

    list-style:none;

    padding:0;

}


.values-list li{

    margin-bottom:10px;

}



/*====================================================
    ESTADISTICAS
=====================================================*/


.counter{

    background:

    linear-gradient(
    120deg,
    #0d6efd,
    #2563eb
    );

    color:white;

}



.counter i{

    font-size:45px;

}


.counter h2{

    font-size:45px;

}



/*====================================================
    PROYECTO
=====================================================*/


.project-image img{

    border-radius:25px;

}



.project-info h3{

    font-size:32px;

}



.mini-card{

    background:white;

    padding:25px;

    border-radius:15px;

    box-shadow:var(--shadow);

}



.mini-card i{

    font-size:35px;

    color:var(--primary);

}



/*====================================================
    INSTITUCION
=====================================================*/


.institution{

    background:#f8fafc;

}



.institution-box{

    background:white;

    padding:50px;

    border-radius:30px;

    box-shadow:var(--shadow);

}



.institution-icon{

    font-size:120px;

    color:var(--primary);

}



/*====================================================
    OBJETIVOS
=====================================================*/


.objective-card{

    padding:40px;

    border-radius:20px;

    background:white;

    box-shadow:var(--shadow);

    height:100%;

}


.objective-card i{

    font-size:45px;

    color:var(--primary);

}



/*====================================================
    TIMELINE
=====================================================*/


.timeline{

    position:relative;

    max-width:800px;

    margin:auto;

}



.timeline:before{

    content:"";

    position:absolute;

    width:4px;

    background:#0d6efd;

    height:100%;

    left:50%;

}



.timeline-item{

    position:relative;

    margin-bottom:50px;

}



.timeline-content{

    background:white;

    padding:30px;

    width:45%;

    box-shadow:var(--shadow);

    border-radius:20px;

}



.timeline-item:nth-child(even)
.timeline-content{

    margin-left:auto;

}



.timeline-dot{

    position:absolute;

    left:50%;

    width:20px;

    height:20px;

    background:#0d6efd;

    border-radius:50%;

    transform:translateX(-50%);

}



/*====================================================
    EQUIPO
=====================================================*/


.team-card{

    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.4s;

}



.team-card:hover{

    transform:translateY(-10px);

}



.team-photo{

    width:100%;

    height:300px;

    object-fit:cover;

}



.team-content{

    padding:30px;

    text-align:center;

}



.team-content span{

    color:var(--primary);

    font-weight:600;

}



.team-social a{

    font-size:22px;

    margin:8px;

    color:var(--dark);

}



/*====================================================
    GALERIA
=====================================================*/


.gallery-img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:20px;

    transition:.4s;

}



.gallery-img:hover{

    transform:scale(1.05);

}



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


.contact-item{

    display:flex;

    gap:20px;

    margin-bottom:25px;

}



.contact-item i{

    font-size:30px;

    color:var(--primary);

}



.contact-form{

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:var(--shadow);

}



.form-control{

    padding:15px;

    border-radius:15px;

}



.form-control:focus{

    box-shadow:none;

    border-color:#0d6efd;

}



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


footer{

    background:#111827;

    color:white;

    padding:70px 0;

}


footer p{

    color:#cbd5e1;

}



.footer-links{

    list-style:none;

    padding:0;

}


.footer-links li{

    margin-bottom:12px;

}


.footer-links a{

    color:#cbd5e1;

}



.social a{

    color:white;

    font-size:30px;

    margin-right:15px;

}



/*====================================================
    BOTON ARRIBA
=====================================================*/


.scroll-top{

    position:fixed;

    bottom:30px;

    right:30px;

    width:50px;

    height:50px;

    background:#0d6efd;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}



/*====================================================
    RESPONSIVE
=====================================================*/


@media(max-width:992px){


.hero h1{

    font-size:42px;

}


.logo-hero{

    width:220px;

}


.hero-info{

    gap:25px;

}


.timeline:before{

    left:20px;

}


.timeline-content{

    width:85%;

    margin-left:50px!important;

}


.timeline-dot{

    left:20px;

}


}



@media(max-width:576px){


.hero h1{

    font-size:34px;

}


.section-title{

    font-size:32px;

}


.hero-info{

    flex-direction:column;

    gap:10px;

}


}