main {
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Estilos para el titulo y descripción del EL HUB DE SEGURIDAD*/
.main_title {
    display: flex;
    flex-direction: row;
    margin: 20px 0;
}

.main_title img {
    width: 11.375rem;
    height: 11.375rem;
    border-radius: 25px;
    margin-bottom: 15px;
}

.index_title {
    margin-left: 20px;
}

.index_title h1 {
    font-size: 32px;
    color: var(--darkblue-400);
    text-align: left;
    margin-bottom: 15px;
}

.index_title h3 {
    font-size: 20px;
    color: var(--darkblue-200);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/*Estilos para Campus Empresarial*/
.hub_campus {
    background-color: var(--lightblue-100);
    border-radius: 15px;
    height: 16.563rem;
}

.hub_campus h2 {
    font-size: 24px;
    color: #20262C;
    margin-top: 24px;
}

.hub_inf {
    display: flex;
    flex-direction: row;
    margin: 24px 24px;
}

#campus_hub {
    width: 17.125rem;
    height: 10.375rem;
    margin-right: 16px;
}

.hub_inf p {
    font-size: 16px;
    font-weight: 500;
    color: #4C5967;
    text-align: left;
}

/*Estilos para servicios (Campus y Comunidad)*/
.our_services {
    margin: 16px 0;
    display: flex;
    flex-direction: row;
}

.campus,
.comunidad {
    width: 50%;
    border-radius: 15px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
}

.service_icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 24px
}

.service_detail {
    /* Arriba | Derecha | Abajo | Izquierda */
    margin: 24px 0 10px 0;
    color: var(--lightblue-100);
}

.service_detail h3 {
    font-size: 18px;
    font-weight: bold;
}

.service_detail p {
    font-size: 16px;
    text-align: left;
}

.campus {
    background-color: var(--blue-300);
}

.comunidad {
    background-color: var(--darkblue-500);
}

/*Estilos para podcast*/
#podcast {
    display: flex;
    flex-direction: row;
    padding: 24px 24px;
    height: 12.625rem;
    margin: 16px 0px;
}

#podcast img {
    width: 9.625rem;
    height: 9.625rem;
    border-radius: 15px;
    margin-right: 16px;
}

.hub_details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.hub_details h2 {
    font-size: 24px;
    font-weight: bold;
    align-self: flex-start;
}

.hub_details p {
    font-size: 16px;
    font-weight: 500;
    color: #4C5967;
}

.hub_details a {
    font-size: 16px;
    font-weight: 600;
    color: #20262C;
    align-self: flex-end;
}

/*Estilos para social media*/
.contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 25px 0;
}

.social_media {
    width: 4rem;
    height: 4rem;
    background-color: var(--blue-300);
    border-radius: 20px;
    margin: 0 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.social_media img {
    width: 2.375rem;
    height: 2.375rem;
}

.social_media:hover {
    background-color: #D0D7F0;
}

/*Estilos para el footer*/
footer {
    width: 100%;
    background-color: var(--lightblue-100);
    height: 7.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    color: var(--darkblue-400);
}

footer a {
    font-weight: bold;
    color: var(--blue-400);
}

@media (max-width: 700px) {
    main {
        width: 90%;
    }

    /*Estilos para el titulo y descripción del EL HUB DE SEGURIDAD*/
    .main_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .main_title img {
        width: 7.5rem;
        height: 7.5rem;
    }

    .index_title {
        margin: 0px;
    }

    .index_title h1 {
        font-size: 24px;
        text-align: center;
    }

    .index_title h3 {
        font-size: 16px;
        text-align: justify;
    }

    /*Estilos para Campus Empresarial*/
    .hub_campus {
        height: 31.5rem;
    }

    .hub_campus h2 {
        font-size: 20px;
        padding-top: 14px;
    }

    .hub_inf {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 24px 24px;
    }

    #campus_hub {
        margin-bottom: 16px;
    }

    #button_campus {
        width: 90%;
    }

    /*Estilos para servicios (Campus y Comunidad)*/
    .our_services {
        margin: 16px 0;
        display: flex;
        flex-direction: column;
    }

    .campus,
    .comunidad {
        width: 100%;
        border-radius: 20px;
        margin: 10px 0;
    }

    .service_icon {
        width: 3rem;
        height: 3rem;
    }

    .campus p {
        font-size: 15px;
    }

    /*Estilos para podcast*/
    #podcast {
        display: flex;
        flex-direction: column;
        height: 22.25rem;
        align-items: center;
        justify-content: center;
    }

    #podcast img {
        width: 7.5rem;
        height: 7.5rem;
        margin-top: 14px;
    }

    .hub_details h2 {
        font-size: 20px;
    }

    /*Estilos para social media*/
    .social_media {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 15px;
    }

    .social_media img {
        width: 1.5rem;
        height: 1.5rem;
    }

    /*Estilos para footer*/
    footer {
        text-align: center;
    }

}

@media (min-width: 701px) and (max-width: 1290px) {
    main {
        width: 90%;
    }

    /*Estilos para el titulo y descripción del EL HUB DE SEGURIDAD*/
    .main_title img {
        width: 7.5rem;
        height: 7.5rem;
    }

    /*Estilos para Campus Empresarial*/
    .hub_campus {
        height: 19.450rem;
    }

    /*Estilos para servicios (Campus y Comunidad)*/
    .campus p{
        margin-bottom: 25px;
        font-size: 16px;
        margin-right: 20px;
    }
}