body{
    margin: 0;
    padding: 0;
}

header{
    background-color: #01347D;
    text-align: center;
    padding: 5px;
}

header img{
    margin: 5px;
    max-width: 200px;
}

.container-pricipal-banner{
    width: 100%;
}

.container-banner__img{
    margin: 60px;
    background-image: url("../assets/banner2.png"); /* The image used */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

.container-title{
    text-align: center;
    margin: 5px;
    font-size: 48px;
    line-height: 40pt;
}

.container3{
    max-width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.container2{
    max-width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.image{
    max-width: 30%;
    cursor: pointer;
}

.image-especial{
    max-width: 40%;
    cursor: pointer;
}

.grid-container{
    max-width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 60px;
    grid-row-gap: 20px;
    padding-bottom: 2em;
}

.grid-container-fluid{
    max-width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    grid-row-gap: 10px;
    margin-bottom: 1.4em;
}

.grid-container-centered {
    max-width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 25% 1fr 25%;
    grid-gap: 30px;
    grid-row-gap: 10px;
    margin-bottom: 3em;
}

.image-grid{
    width: 100%;
    cursor: pointer;
}

.container-text__footer {
    text-align: center;
    margin-top: 80px;
    font-size: 28px;
    margin-bottom: 30px;
    max-width: 80%; 
    margin-left: auto;
    margin-right: auto; 
}

.icons-footer {
    max-width: 480px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    text-align: center;
    margin-bottom: 60px;
    justify-items: center; /* Para centrar cada icono en su celda */
}

.btn-one{
    /* max-width: 500px; */
    background-color: #18488e !important;
    border-radius: 10px;
    color: #fff;
    border: none;
}

.btn-esc{
    /* max-width: 500px; */
    background-color: #71348b !important;
    border-radius: 10px;
    color: #fff;
    border: none;
}

.btn-sdl{
    /* max-width: 500px; */
    background-color: #68c0b2 !important;
    border-radius: 10px;
    color: #fff;
    border: none;
}


.btn-ac{
    /* max-width: 500px; */
    background-color: #329e44 !important;
    border-radius: 10px;
    color: #fff;
    border: none;
}

.btn-deri{
    /* max-width: 500px; */
    background-color: #a37c14 !important;
    border-radius: 10px;
    color: #fff;
    border: none;
}

.btn-inge{
    width: 80%;
    background-color: #036DA2 !important;
    border-radius: 10px;
    color: #fff;
    border: none;
    cursor: default;
}

.btn-ingetodos{
    /* width: 80%; */
    background-color: #036DA2 !important;
    border-radius: 10px;
    color: #fff;
    border: none;
}

.img-section{
    width: 100%;
}

@media (max-width: 800px) {
    .grid-container {
        grid-template-columns: 1fr; /* Cambia a una sola columna en pantallas pequeñas */
        grid-gap: 30px; /* Ajusta el espacio entre elementos */
        grid-row-gap: 10px; /* Ajusta el espacio entre filas */
        padding-bottom: 0em; /* Ajusta el padding inferior */
    }
    .image{
        width: 100%;
    }
    .container-title{
        text-align: center;
        margin: 30px;
        font-size: 28px;
        line-height: 20pt;
    }

    .grid-container-centered {
        max-width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns:1fr;
        grid-gap: 30px;
        grid-row-gap: 10px;
    }

    .grid-container-fluid{
        max-width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 30px;
        grid-row-gap: 10px;
        margin-bottom: 1em;
        margin-top: 3em;
    }

    .container-text__footer{
        text-align: center;
        margin-top: 80px;
        padding: 1em;
        font-size: 18px;
        margin-bottom: 30px;
    }

    .icons-footer {
        max-width: 350px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        text-align: center;
        margin-bottom: 60px;
        justify-items: center; /* Para centrar cada icono en su celda */
    }

    .icons-footer > a > img {
        height: 70px;
    }

  }