@import url("style.css");

/*-------------------*/
/*-PALETA DE COLORES-*/
/*-------------------*/
:root {
--bluedark: rgba(10,47,92, 1);
--blue: rgba(0,56,184,1);
--black: rgba(34,34,34, 1);
--violet: rgba(75,0,130, 1);
--gray: rgba(220,220,220, 1);
    }
    /*----------------------------------------*/
    /*------------ESTILOS GENERALES-----------*/
    /*----------------------------------------*/


@media(min-width:320px){

#main-banner-about{
height: 680px;
position: relative !important;
}
/*--------BANNER-----------*/
#main-banner-about{
position: relative;
width: 100%;
height: 0;
background: #0A2F5C;
background: linear-gradient(142deg,rgba(10, 47, 92, 1) 0%, rgba(75, 0, 130, 1) 26%, rgba(0, 56, 184, 1) 65%, rgba(10, 47, 92, 1) 100%);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
padding-top: 48px;
padding-right: 16px;
padding-left:16px ;
padding-bottom: 150%;
}
#main-banner-txt-container-about{
width: 100%;
}
#main-banner-title-container-about{
display: flex;
justify-content: flex-end;
align-items:baseline;
width: 100%;
margin-bottom: 24px;
}
#main-banner-h2-about{
font-weight: 500;
font-size: 42px;
color: white;
text-align: right;
padding-bottom: 36px;
}
#main-banner-h3-about{
padding-bottom: 36px;
font-weight: 500;
color: white;
text-align: right;
}
/*-----------INTRO------------*/
.page-intro{
padding: 48px 24px;
}
.page-intro h3{
color: var(--blue);
text-align: center;
font-weight: 500;
margin-bottom: 36px;
}
.page-intro p{
text-align: center;
margin-bottom: 36px;
}
.page-intro-line-division{
width: 50%;
height: 3px;
background-color: var(--blue);
margin: auto;
}
/*-----------CARDS------------*/
.pagecards{
width: 100%;
height: auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
padding: 16px;
}
.about-container{
height: auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.page-cards-container{
height: auto;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 24px;
}
#page-cards-container-about{
width: 100%;
height: auto;
}
.model-card{
height: 0;
padding: 28px;
padding-bottom: 100%;
margin-bottom: 24px;
border-radius: 24px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.model-card:hover{
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.model-card h3{
color: white;
margin-bottom: 24px;
font-weight: 900;
}
.model-card h4{
color: white;
margin-bottom: 24px;
font-weight: 900;
}
.model-card  p{
color: white;
font-size: 14px;
line-height: 21px;
font-weight: normal;
}
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
border-radius: 0 !important;
padding-bottom: 100%;
}
/*INDIVIDUAL VALUES FOR EACH CARDS*/
#model-card-about-mision{
background-color: var(--bluedark);
}
#model-card-about-vision{
background-color: var(--blue);
}
#model-card-about-purpose{
background-color: var(--violet);
}
#model-card-about-philosofy{
background-color: var(--black);
}
/*-------VALUES CONTAINER--------*/
.about-values-container{
width: 100%;
padding: 16px;
border-left: 1px solid var(--black);
}
.about-values-container h3{
color: var(--bluedark);
font-weight: 900;
margin-bottom: 36px;
}
.value-container{
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 12px;
border-radius: 4px;
}
.value-container:hover{
background-color: var(--gray);
}
.value-container-img{
padding: 0;
height: 90%;
opacity: 0.3;
}
.value-container-img:hover{
opacity: 0.6;
}
.value-container-txt{
padding-left: 12px;
width: 100%;
}
.value-container-txt h4{
font-weight: 800;
margin-bottom: 12px;
}
.value-container-txt p{
font-size: 14px;
line-height: 18px;
font-weight: normal;
}


/*---fin de @media---*/
}
@media(min-width:480px){
/*--------BANNER-----------*/
#main-banner-about{
padding-bottom: 90%;
}
/*-----------CARDS------------*/
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 48%;
}




/*---fin de @media---*/
}
@media(min-width:540px){
/*--------BANNER-----------*/
#main-banner-about{
padding-bottom: 80%;
}
#main-banner-txt-container-about{
padding-top: 24px;
padding-right: 0;
padding-left:0 ;
padding-bottom: 0;
}
#main-banner-h2-about{
font-size: 56px;
padding-bottom: 36px;
padding-top: 0;
padding-right: 16px;
padding-left:0 ;
}
#main-banner-h3-about{
padding-bottom: 36px;
font-size: 24px;
padding-top: 0;
padding-right: 16px;
padding-left:0 ;
}
    /*---fin de @media---*/
}
@media(min-width:640px){
/*--------BANNER-----------*/
#main-banner-about{
padding-bottom: 60%;
}
#main-banner-txt-container-about{
padding-top: 24px;
padding-right: 0;
padding-left:0 ;
padding-bottom: 0;
}
#main-banner-h2-about{
font-size: 56px;
padding-bottom: 36px;
padding-top: 0;
padding-right: 16px;
padding-left:0 ;
}
#main-banner-h3-about{
padding-bottom: 36px;
font-size: 24px;
padding-top: 0;
padding-right: 16px;
padding-left:0 ;
}

/*-----------INTRO------------*/
.page-intro{
padding: 6% 12.5%;
}
/*-----------CARDS------------*/
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 33%;
}
/*---fin de @media---*/
}
@media(min-width:720px){
/*--------BANNER-----------*/
#main-banner-about{
padding-bottom: 55%;
}
/*-----------CARDS------------*/
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 33%;
width: 49%;
}
.model-card h3{
font-size: 28px;
line-height: 32px;
}
.model-card p{
font-size: 16px;
line-height: 21px;
}


/*---fin de @media---*/
}
 @media(min-width:800px){
/*--------BANNER-----------*/
#main-banner-about{
padding-bottom: 48%;
}

/*---fin de @media---*/
}
@media(min-width:900px){
/*--------BANNER-----------*/
#main-banner-about{
padding-bottom: 42.68%;
}
/*---fin de @media---*/
}
@media(min-width:1024px){
/*--------BANNER-----------*/
#main-banner-about{
background-image: url(../img/Banner-about.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#main-banner-txt-container-about{
padding-top: 48px;
}
#main-banner-h2-about{
font-size: 63px;
padding-bottom: 48px;
}
#main-banner-h3-about{
font-size: 24px;
margin-left: 40%;
padding-bottom: 56px;
}
/*-----------CARDS------------*/
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 25%;
}


/*---fin de @media---*/
}
@media(min-width:1100px){

/*---fin de @media---*/
}
@media(min-width:1280px){
/*--------BANNER-----------*/
#main-banner-txt-container-about{
padding-top: 56px;
}
#main-banner-h2-about{
font-size: 72px;
padding-bottom: 63px;
}
#main-banner-h3-about{
font-size: 24px;
margin-left: 35%;
padding-bottom: 150px;
}
/*-----------CARDS------------*/
#page-cards-container-about{
width: 60%;
}
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 50%;
}

/*---fin de @media---*/
}
@media(min-width:1360px){
/*--------BANNER-----------*/
#main-banner-txt-container-about{
padding-top: 56px;
padding-right: 24px;
padding-left:24px ;
padding-bottom: 0;
}
#main-banner-txt-container-about{
padding-top: 56px;
}
#main-banner-h2-about{
font-size: 72px;
padding-bottom: 63px;
}
#main-banner-h3-about{
font-size: 24px;
margin-left: 35%;
padding-bottom: 163px;
}
/*--------INTRO-----------*/
.page-intro p{
margin-bottom: 48px;
}
/*-----------CARDS-----------*/
#pagecards-intro{
padding: 0 48px;
}
/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 45%;
}
/*-------VALUES CONTAINER--------*/
.about-values-container{
width: 38%;
}
.about-values-container h3{
margin-bottom: 12px;
}
.value-container{
margin: 0;
}


 /*---fin de @media---*/
}
@media(min-width:1440px){
/*--------BANNER-----------*/

#main-banner-h2-about{
font-size: 72px;
padding-bottom: 63px;
}
#main-banner-h3-about{
font-size: 24px;
margin-left: 35%;
padding-bottom: 260px;
}



/*---fin de @media---*/
}
@media(min-width:1600px){
/*--------BANNER-----------*/

#main-banner-h2-about{
font-size: 84px;
padding-bottom: 63px;
}
#main-banner-h3-about{
font-size: 32px;
margin-left: 30%;
line-height: 42px;
padding-bottom: 260px;
}
/*--------INTRO-----------*/
.page-intro h3{
font-size: 36px;
line-height: 42px;
}
.page-intro p{
    font-size: 18px;
    line-height: 24px;
margin-bottom: 48px;
}
/*-----------CARDS-----------*/

/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 40%;
}
/*---fin de @media---*/
}
@media(min-width:1920px){
/*--------BANNER-----------*/
#main-banner-txt-container-about{
padding-top: 120px;
padding-right: 24px;
padding-left:24px ;
padding-bottom: 0;
}
#main-banner-h2-about{
font-size: 96px;
padding-bottom: 120px;
}
#main-banner-h3-about{
font-size: 36px;
margin-left: 30%;
line-height: 42px;
padding-bottom: 300px;
}
/*--------INTRO-----------*/
.page-intro h3, .page-intro p{
margin-bottom: 65px;
}
/*-----------CARDS-----------*/

/*COMMON VALUES OF CARDS*/
#model-card-about-mision, #model-card-about-vision,
#model-card-about-purpose,
#model-card-about-philosofy{
padding-bottom: 33%;
}
/*---fin de @media---*/
}