main{
    padding: 0 !important;
    padding-top: 40px !important;
}

body{
    box-sizing: border-box;
}

.main-grants{
    padding-top: 0;
    padding-top: 40px 
}

.timeline{
    position: relative;
    max-width: 100%;/*1200px!!!*/
    margin: 20px;/*Ojo!!!*/
    color: rgb(35, 43, 50);
    text-align: left;
    z-index: 0; /* Ensure timeline has the lowest z-index */
}


@keyframes movedown {
    0%{
        opacity: 1;
        transform: translateY(-30px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
    
}

.container-award{
    padding: 10px 40px;
    position: relative;
    width: 50%;
    /*background: rgb(0, 0, 0,0.3);*/
    box-sizing: border-box;/*ojo!!*/
    animation: movedown 1s linear forwards;
    z-index: 1;
    opacity: 0;
}

.container-award, .left-container, .right-container {
    position: relative; /* Ensure they create a stacking context */
    z-index: 2; /* Or higher if needed */
}


/* Specific rule to adjust the first right-container */
.right-container:first-of-type {
    left: 50%; /* Push it to the right */
}


.container-award .text-box {
    text-align: left; /* Reset alignment to the left */
    padding: 6px 20px;
    background: #fff;
    position: relative;
    border-radius: 6px;
    font-size: 15px;
}  

.container-award .text-box h2,
.container-award .text-box h3,
.container-award .text-box p {
  margin: 0; /* Reset margin to 0 for h2, small, and p */
}

.container-award .text-box h3{
    color: #002B49;
    /*margin: 16px 0 0 0;
    font-size: 18px;*/
    font-family: 'Nunito';
    font-weight: 700;
   

}

.container-award .text-box h2{
    font-weight: 300;
    cursor: pointer;
    font-size: x-large;
}


.container-award .text-box small{
    display: inline-block;
    margin-bottom: 15px;
}


/* Container for each point and year */
.timeline-break {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;/*10px 0;*/
    position: relative;
}

/* Dot in the center */
.timeline-dot {
    width: 20px;
    height: 20px;
    background-color: #eaa023;
    border-radius: 50%;
    border: 2px solid white; /* Optionally add a border for contrast */
    z-index: 2;
}

.hidden {
    display: none;
}

/* Hide date and description by default */
.container-award .text-box p {
    display: none; 
}

.container-award:hover .text-box small,
.container-award:hover .text-box p {
    display: block; /* Show date and description on hover */
}

.container-award:hover .icon-svg {
    fill: #eaa023; /* Change background color on hover */
}

/* Year next to the dot */
.timeline-date {
    cursor: pointer;
    font-size: 16px;
    color: #eaa023;
    margin-left: 0px;
    margin-right: 0px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: font-size 0.3s ease; /* Smooth transition for font-size */
}

/* Style for the active year */
.timeline-date.active {
    font-size: 24px; /* Adjust the size as needed */
    font-weight: bold; /* Optionally make it bold */
    margin-left: -15px;
    margin-right: -15px;
}

/* Year to the left of the dot */
.timeline-break.left .timeline-date {
    left: 45%;  /* Move it left relative to the center line */
    top: 50%;
    transform: translateY(-50%);
}

/* Year to the right of the dot */
.timeline-break.right .timeline-date {
    right: 45%;  /* Move it right relative to the center line */
    top: 50%;
    transform: translateY(-50%);
}


/* Apply negative margin to overlap containers vertically, only if not first child */
.left-container:not(:first-child) {
    margin-top: 0px; /* Apply overlap only for consecutive elements */
    left:0%;
}

.right-container:not(:first-child) {
    margin-top: 0px; /* Apply overlap only for consecutive elements */
    left:50%;
}

/* Continue using negative margins between alternating containers */
.left-container + .right-container {
    margin-top: -40px; /* Overlap left and right elements */
}

.right-container + .left-container {
    margin-top: -40px; /* Overlap right and left elements */
}


.container-award .icon-svg{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    right: -20px;
    top: 32px;
    z-index: 4;
    background-color: white;
    border: 2px solid white;
    fill:#002B49;
}

.right-container .icon-svg{
    left: -20px;
}


.timeline::after{
    content: '';
    position: absolute;
    width: 6px;
    height: 100%;
    background: #fff;
    top: 0;
    left: 50%;
    margin-left: -3px;
    z-index:0;
    animation: moveline 1.5s linear forwards;
}

@keyframes moveline{
    0%{
        height: 0;
    }
    100%{
        height: 100%;
    }
}

.container-arrow{
    height: 0;
    width: 0;
    position: absolute;
    top: 28px;
    z-index: 1;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.left-container .container-arrow{
    border-left: 15px solid #fff;
    right: -15px;
}

.right-container .container-arrow{
    border-right: 15px solid #fff;
    left: -14px;
}

/* Mobile (Responsive) Version */
@media screen and (max-width: 720px) {
    
    /* Reset the margins for smaller screens to avoid overlapping */
    .left-container,
    .right-container {
        margin-top: 0px;
        margin-bottom: 30px; /* Add vertical spacing between elements */
        position: relative; /* Remove absolute positioning */
        left: 0; /* Reset left position */
        right: 0; /* Reset right position */
        width: 100%; /* Full width on smaller screens */
        z-index: 2;
    }

    /* Add extra margin when consecutive elements are of the same type */
    .left-container + .left-container,
    .right-container + .right-container {
        margin-top: -40px; /* Add extra space between consecutive left or right elements */
    }
    
    .timeline {
        margin: 20px;/* 50px auto;*/
        z-index: 0;
        position: relative;
    }

    /* Align the timeline line correctly */
    
    .timeline::after {
        left: 31px; 
        z-index: -1;
        width: 6px;
    }
    

    /* Ensure dots and dates are aligned in one row */
    .timeline-break {
        display: flex;
        justify-content: flex-start; /* Align items to the left */
        align-items: center; /* Align the dot and date vertically */
        position: relative;
        padding-left: 50px; /* Adjust to align the dot with the timeline line */
        z-index: 1;
    }

    .timeline-date{
        margin-left: 40px;
        margin-right: 40px;
    }

    /* Align the dot with the vertical timeline line */
    .timeline-dot {
        margin-right: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid white;
        position: relative;
        left: -29px; /* Align dot over the timeline line */
        z-index: 5; /* Keep dot above the timeline line */
    }

    /* Year to the left of the dot */
    .timeline-break.left .timeline-date {
        left: 10%;  /* Move it left relative to the center line */
        top: 50%;
        transform: translateY(-50%);
        padding-left: 10px;
    }

    /* Year to the right of the dot */
    .timeline-break.right .timeline-date {
        left: 10%;  /* Move it right relative to the center line */
        top: 50%;
        transform: translateY(-50%);
    }

    /* Style for the active year */
    .timeline-date.active {
        font-size: 20px; /* Adjust the size as needed */
        margin-left: 0px;
        margin-right: 0px;
    }

    /* Award container styles */
    .container-award {
        width: 100%;
        padding-left: 80px;
        padding-right: 25px;
        z-index: 2;
    }

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

    .text-box small {
        margin-bottom: 10px;
    }

    .container-award .text-box h2{
        font-weight: 300;
        font-size:medium;
    }

    /* Remove any positioning for right/left containers on small screens */
    .right-container,
    .left-container {
        position: static;
    }


    .left-container .icon-svg, .right-container .icon-svg {
        left: 10px;
        top: 50%;  /* Center vertically relative to parent */
        transform: translateY(-50%);  /* Ensure perfect centering */
        z-index: 4;
    }

    .container-arrow {
        border-right: 15px solid #fff;
        border-left: 0;
        left: -15px;
        top: 50%;  /* Center vertically relative to parent */
        transform: translateY(-50%);  /* Ensure perfect centering */
    }

    .left-container .container-arrow {
        border-right: 15px solid #fff;
        border-left: 0;
        right: -15px;
        top: 50%;  /* Center vertically relative to parent */
        transform: translateY(-50%);  /* Ensure perfect centering */
        z-index: 1;
    }

}