.container{
    max-width:1240px;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.hero {
    background-image: url('../img/historia/banner.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 700px;
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Alinea el contenido a la derecha */
    align-items: center; /* Centra verticalmente */
    box-sizing: border-box; /* Asegura que el padding se incluya en la altura total */
}

.space{
    min-height:30px;
}

/* SECCION TIMELINE */
.section-timeline-movil{
    display: none;
}

.section-timeline-desktop{
    display: block;
}

.section-timeline-desktop{
    padding: 80px 0px 80px 0px;
}

.content-info{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-paragraph{
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3em;
}

.text-date{
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3em;
    color:#003b5c;
}

.text-center{
    text-align: center;
}

.img-logo{
    width: 7%;
}

/*1999*/
.img-start-end{
    width: 60%;
}

/* 2005 */
.date-2005 {
    position: absolute;
    top: -2050px; 
}

.date-img-2005{
    position: absolute;
    top: -2100px;
}

/* 2006 */
.date-2006 {
    position: absolute;
    top: -1550px;
}

.date-img-2006 {
    position: absolute;
    top: -1700px;
}

/* 2007 */
.date-2007 {
    position: relative;
    top: -1210px;
}

.date-img-2007 {
    position: relative;
    top: -1250px;
}

/* 2008 */
.date-2008 {
    position: relative;
    top: -1050px;
}

.date-img-2008 {
    position: relative;
    top: -1000px;
}

/* 2010 */
.date-2010 {
    position: relative;
    top: -800px;
}

.date-img-2010 {
    position: relative;
    top: -850px;
}

/* 2011 */
.date-2011 {
    position: relative;
    top: -650px;
}

.date-img-2011 {
    position: relative;
    top: -580px;
}

/* 2012 */
.date-2012 {
    position: relative;
    top: -360px;
}

.date-img-2012 {
    position: relative;
    top: -400px;
}

/* 2013 */
.date-2013 {
    position: relative;
    top: -180px;
}

.date-img-2013 {
    position: relative;
    top: -150px;
}

/* 2015 */
.date-2015 {
    position: relative;
    top: 250px;
}

.date-img-2015 {
    position: relative;
    top: 210px;
}

/* 2016 */
.date-2016 {
    position: relative;
    top: 450px;
}
.date-img-2016 {
    position: relative;
    top: 480px;
}

/* 2018 */
.date-2018 {
    position: relative;
    top: 730px;
}
.date-img-2018 {
    position: relative;
    top: 700px;
}

/* 2019 */
.date-2019 {
    position: relative;
    top: 920px;
}
.date-img-2019 {
    position: relative;
    top: 950px;
}

/* 2020 */
.date-2020 {
    position: relative;
    top: 1180px;
}
.date-img-2020 {
    position: relative;
    top: 1160px;
}

/* 2021 */
.date-2021 {
    position: relative;
    top: 1420px;
}
.date-img-2021 {
    position: relative;
    top: 1450px;
}

/* 2022 */
.date-2022 {
    position: relative;
    top: 1670px;
}
.date-img-2022 {
    position: relative;
    top: 1650px;
}

/* 2023 */
.date-2023 {
    position: relative;
    top: 1870px;
}
.date-img-2023 {
    position: relative;
    top: 1920px;
}

/*TIME LINE*/
.timeline-container {
    position: relative; /* Asegura que los elementos hijos con position absolute sean relativos a este contenedor */
}

.img-timeline-container{
    display: flex;
    justify-content: center;
    align-items: center;  
}

.img-timeline{
    width: 100%;
}

.circle-one{
    position: absolute;
    top: 950px;
    left: -150px;
    width: 20%;
}

.circle-two{
    position: absolute;
    top: 1800px;
    right: -30px;
    width: 5%;
}

.circle-three{
    position: absolute;
    top: 2500px;
    left: 15px;
    width: 5%;
}

.circle-four{
    position: absolute;
    top: 3400px;
    right: -120px;
    width: 15%;
}

.circle-five{
    position: absolute;
    top: 4200px;
    left: -40px;
    width: 6%;
}

.circle-six{
    position: absolute;
    top: 4950px;
    right: 40px;
    width: 5%;
}

.circle-seven{
    position: absolute;
    top: 5900px;
    left: -100px;
    width: 15%;
}

.circle-eight{
    position: absolute;
    top: 6700px;
    right: 0px;
    width: 5%;
}

.circle-nine{
    position: absolute;
    top: 7400px;
    left: 20px;
    width: 5%;
}

.circle-ten{
    position: absolute;
    top: 8500px;
    right: 0px;
    width: 15%;
}

.circle-eleven{
    position: absolute;
    top: 9800px;
    right: 50px;
    width: 5%;
}

/*TABLET*/
@media screen and (min-width: 768px) and (max-width: 1000px) {
    .texture{
        display: none;
    }
    .hero {
        background-position: center center;
        min-height: 250px;
    }
    .space{
        min-height:15px;
    }

    /* SECCION TIMELINE */
    .section-timeline-movil{
        display: block;
    }

    .section-timeline-desktop{
        display: none;
    }

    .section-timeline-movil{
        padding: 30px 0px 30px 0px;
    }

    .img-logo{
        width: 15%;
    }

    .text-date{
        font-size: 25px;
    }

    /*1999*/
    .img-start-end{
        width: 100%;
    }
}

/*Movil*/
@media screen and (max-width: 767px){
    .texture{
        display: none;
    }
    .hero {
        background-position: center center;
        min-height: 250px;
    }
    .space{
        min-height:15px;
    }

    /* SECCION TIMELINE */
    .section-timeline-movil{
        display: block;
    }

    .section-timeline-desktop{
        display: none;
    }

    .section-timeline-movil{
        padding: 30px 0px 30px 0px;
    }

    .img-logo{
        width: 15%;
    }

    .text-date{
        font-size: 25px;
    }

    /*1999*/
    .img-start-end{
        width: 100%;
    }
}

/*Movil*/
@media screen and (min-width: 320px) and (max-width: 766px) {
    .texture{
        display: none;
    }
   /* SECCION TIMELINE */
    .img-logo{
        width: 15%;
    }

    .text-date{
        font-size: 15px;
    }

    /*1999*/
    .img-start-end{
        width: 80%;
    }

    .text-paragraph{
        font-size: 12px;
    }
}