@import "style.css";

section{
    margin: 0;
    padding: 0;
}
.mainEdu {
    display: flex;
    text-align: left;
    background: url('../img/bg_header_educacion.jpg') no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 20px;
    height: 60vh;
}
.mainEdu-left{
    flex: 2;
    padding: 20px;
}
.mainEdu-right {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainEdu-left {
    text-align: left;
}

.mainEdu h1 {
    font-size: 3.4em;
    color: white;    
}

.linesub::after {
    content: '';
    display: block;
    width: 85px;
    height: 2px;
    background-color: #ff9900;
    margin: 3px 90px 0;

}
.mainEdu-title{
    font-size: 2em;
    color: white;   
}
.mainEdu-paragraph{
    font-size: 1.4em;
    color: white;
    width: 27em;
}
.information{
    background-color: #ff9900;
    color: #232f3e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25vh;
    margin: 0;
    
}
.information-container{
    text-align: center;
    font-size: 1.5em;
    padding: 0 20px;
    max-width: 800px;
    font-weight: 600;
}

.benefitsEdu{
    background-color:#232f3e;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* height: 50vh; */
    margin: 0;
    padding-bottom:5%;
}

.benefitsEdu-title {
    color: white;
    text-align: center;
    width: 100%;
}
.benefitsEdu-title h2 {
    font-size: 2em;
}
.benefits {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
.benefit {
    border-radius: 10px;
    padding: 30px;
    width: 250px;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-color: white;
    border-style: solid;
    border-width: 1px;
}
.benefit-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: white;
}
.benefit-text {
    color: #ff9900;
    font-size: 1em;
}

.whyAWS {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 15rem;
}
.whyAWS-title {
    color: #ff9900;
    text-align: center;
    margin-bottom: 40px;
}
.whyAWS-title h2 {
    font-size: 2em;
}
.whyAWS-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 52px;
    /* max-width: 70em; */
    width: 100%;
}
.benefit-card {
    background-color: #dfe0e4;
    border-radius: 27px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    height: 12em;
}
.benefit-card-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
    color: #232f3e;
    margin-top: 9%;
}
.benefit-card-text {
    color: #232f3e;
    font-size: 1em;
}

.video{
    background-color: #dfe0e4;
    padding: 40px 20px;
}
.container-video{
    display: flex;    
    align-items: center;    
    margin-left: 10%;
}
.text-video p{font-size: 1.5em;}
.text-video h2{font-size: 2em;}

.button-industry{
    background-color: #232F3E;
    color: #ff9900;
    font-size: 1.5em;
    font-weight: bold;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: none;
}
.button-industry:hover{
    background-color: #ff9900 !important; 
    color: #232F3E;
}




/* @media (max-width: 768px) {
    .whyAWS-benefits {
        grid-template-columns: 1fr;
    }
} */

/* Responsive CSS */
@media (max-width: 1200px) {
    /* Añade tus estilos aquí para pantallas menores a 1200px */
}

@media (max-width: 992px) {
    .button-sticky{right: 20em;}
    .information{height: auto}
    .mainEdu-right{display: none;}
    .mainEdu-paragraph{width: 14em; font-size: 1.1em;}
    .mainEdu h1 {font-size: 2.5em;}
    .information-container h3{font-size: 1.7em;}
    .information-container h4{font-size: 1.1em;}
    .information-container p{font-size: 20px;}
    .story-gov{width:40%;}
    .about h2{font-size: 2em;padding-bottom: 3%;}
    .menu nav ul li a{padding: 1px 1px;}
    .whyAWS-benefits{grid-template-columns: 1fr;}
    .benefit-card-title{font-size: 1.1em;}
    .benefit-card-text{font-size: 0.9em;}
    .whyAWS{padding: 40px 5px;}
}

@media (max-width: 576px) {
    .button-sticky{right: 20em;}
    .information{height: auto}
    .mainEdu-right{display: none;}
    .mainEdu-paragraph{width: 14em; font-size: 1.1em;}
    .mainEdu h1 {font-size: 2.5em;}
    .information-container h3{font-size: 1.7em;}
    .information-container h4{font-size: 1.1em;}
    .information-container p{font-size: 20px;}
    .story-gov{width:40%;}
    .about h2{font-size: 2em;padding-bottom: 3%;}
    .menu nav ul li a{padding: 1px 1px;}
    .whyAWS-benefits{grid-template-columns: 1fr;}
    .benefit-card-title{font-size: 1.1em;}
    .benefit-card-text{font-size: 0.9em;}
    .whyAWS{padding: 40px 5px;}
}

@media only screen and (max-width: 575px) {
    .button-sticky{right: 14em;}
    .information{height: auto}
    .mainEdu-right{display: none;}
    .mainEdu-paragraph{width: 14em; font-size: 1.1em;}
    .mainEdu h1 {font-size: 2.5em;}
    .information-container h3{font-size: 1.7em;}
    .information-container h4{font-size: 1.1em;}
    .information-container p{font-size: 20px;}
    .story-gov{width:50%;}
    .story-gov h3{font-size: 1.5em;}
    .about h2{font-size: 1.5em;padding-bottom: 2%;}
    .menu nav ul li a{padding: 1px 1px; font-size: 0.7em;}
    .imagen img {width: 100%;}
    .text-video h2{font-size: 1.5em;}
    .button-industry{font-size: 1em;}
    .whyAWS{padding: 40px 5px;}
    /* .logo-lol{width: 88px;margin-left:12em;} */
}