@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);
    }

@media(min-width:320px){
/*--------BANNER-----------*/
#main-banner-frontpage{
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%);
padding: 48px 16px 16px 16px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
padding-bottom: 180%;
}
#main-banner-txt-container-frontpage{
width: 100%;
padding-top: 36px;
}
#main-banner-h2-frontpage{
font-weight: bold;
font-size: 42px;
color: white;
text-align: right;
line-height: 46px;
margin-bottom: 16px;
}

#main-banner-h3-frontpage{
margin-bottom: 36px;
font-weight: 500;
color: white;
text-align: right;
}
#main-banner-p-frontpage{
margin-bottom: 48px;
font-weight: 500;
color: white;
text-align: right;
}

/*------SECTION ONE - LINK TO ABOUT */

.section-basic-frontpage{
width: 100%;
height: 0;
padding-left: 16px;
padding-right: 16px;
padding-top: 48px;
background-color: white;
}
#section-one-frontpage{
padding-bottom: 120%;
}
.section-one-txt-container h2{
font-weight: bold;
padding-bottom: 24px;
}
.section-one-txt-container p{
padding-bottom: 48px;
width: 90%;
}
/*SECTION TWO LINKING TO AUTOMATION INTELLIGECE AND ACADEMY*/
#section-two-frontpage{
width: 100%;
height: auto;
background-image: url(https://nexureon.com/wp-content/themes/nexureon/img/background-gradient.jpg);
background-position: left top;
background-size:cover;
background-repeat: no-repeat;
}
.container-card-frontpage{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
/*CSS CARD*/
.front-card-box-container{
width: 100%;
height: auto;
}
.front-card-box-container{
width: 100%;
height: auto;
border: 1px solid white;
border-radius: 24px;
padding: 36px;
transition: 0.3s;
margin-bottom: 48px;
}
.front-card-box-container:hover{
background: rgba(255, 255, 255, 0.1); /* Fondo semitransparente */

  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);          /* Difumina el fondo detrás */
  -webkit-backdrop-filter: blur(10px);  /* Compatibilidad con Safari */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
transition: 0.3s;
}
.front-card-box-header-container{
width: 100%;
display: flex;
justify-content: flex-end;
align-items: last baseline;
height: 40px;
padding-right: 0;
margin-bottom: 48px;
}
#front-card-box-header-container-automation img{
height: 100%;
padding-right: 6px;
}
#front-card-box-header-container-automation h2{
color: white;
font-weight: 900;
font-style: oblique;
line-height: 0;
padding: 0;
}
.front-subtitle-card{
color: white;
font-weight: 500 !important;
margin-bottom: 24px;
}
.front-card-box-container p{
color: white;
font-weight: 200;
margin-bottom: 16px;
}
.front-card-box-footer-container{
width: 100%;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.front-card-box-footer-container span{
color: white;
font-size: 65px;
}
.front-card-box-footer-container a{
font-size: 18px;
font-weight: 500;
color:white;
}
.front-card-box-footer-container a:hover{
text-decoration: underline;
}
/*SECTION THREE LINKING TO BLOG*/
#section-three-frontpage{
background-color:rgba(220,220,200,.3);
height: auto;
padding-bottom: 36px;
}
.front-card-blogger-container{
margin-bottom: 24px;
}
.section-three-link-container{
width: 100%;
padding: 16px;
padding-top: 36px;
border-top: 1px solid rgb(0,0,0,.3);
position: relative;
}
#section-three-button-container{
margin: auto;
width: 170px;
}
#section-three-link-blog{
font-size: 18px;
}
/*SECTION FOUR LINKING TO NEWSLETTER*/
#section-four-frontpage{
height: 100%;
padding: 48px 0;
}
.front-newslatter-container{
background-image: url(../img/background-gradient.jpg);
background-position: left top;
background-size:cover;
background-repeat: no-repeat;
padding: 24px;
box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.front-newslatter-container h2{
color: white;
text-align: center;
}
.front-newslatter-container p{
color: white;
text-align: center;
font-weight: 200;
margin-bottom: 16px;
}
.mailchimp-container{
height: 48px;
width: 80%;
background-color: white;
margin: auto;
border-radius: 24px;
}
/*---fin de @media---*/
}
@media(min-width:480px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 100%;
}

#section-one-frontpage{
padding-bottom: 105%;
}
#section-one-frontpage{
padding-bottom: 105%;
}
/*---fin de @media---*/
}
@media(min-width:540px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 80%;
}
#section-one-frontpage{
padding-bottom: 62.5%;
}
#section-one-frontpage{
padding-bottom: 62.5%;
}
/*SECTION TWO*/
.front-card-box-header-container{
height: 60px;
}
#front-card-box-header-container-automation h2{
font-size: 48px;
}
.front-card-box-footer-container{
    padding-top: 16px;
padding-right: 24px;
}
.front-card-box-footer-container a{
font-size: 21px;
}

/*---fin de @media---*/
}

@media(min-width:640px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 65%;
}
#section-one-frontpage{
padding-bottom: 54%;
}
#section-one-frontpage{
padding-bottom: 54%;
}
/*---fin de @media---*/
}

@media(min-width:720px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 55%;
}
.section-basic-frontpage{
padding-left: 36px;
padding-right: 36px;
padding-top: 48px;
}
#section-one-frontpage{
padding-bottom: 48%;
}
/*---SECTION THREE-----*/
.front-card-blogger-container{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}
/*---fin de @media---*/
}

@media(min-width:800px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 50%;
}
#section-one-frontpage{
background-image: url(../img/frontpage-sec-1-background.png);
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
padding-bottom: 52%;
}
.section-one-txt-container{
width: 40%;
}
/*---fin de @media---*/
}

@media(min-width:900px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 42.86%;
background-image: url(https://nexureon.com/wp-content/themes/nexureon/img/Banner-frontpage.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.section-one-txt-container{
width: 50%;
}
#section-one-frontpage{
padding-bottom: 46%;
}
/*SECTION FOUR LINKING TO NEWSLETTER*/
.front-newslatter-container{
padding: 48px 0;
}
.mailchimp-container{
width: 60%;
}





/*---fin de @media---*/
}

@media(min-width:1024px){
/*--------BANNER-----------*/
#main-banner-txt-container-frontpage{
padding-top: 16px;
}
#main-banner-h2-frontpage{
font-size: 56px;
margin-bottom: 36px;
}
#main-banner-h3-frontpage{
font-size: 36px;
margin-bottom: 56px;
}
#main-banner-p-frontpage{
font-size: 18px;
margin-bottom: 72px;
}
/*--------*/
#section-one-frontpage{
padding-bottom: 33%;
}
/*----SECTION TWO-----*/
.front-card-box-container{
width: 32%;
padding: 16px;
height: 636px;
position: relative;
}
.front-card-box-footer-container{
position: absolute;
width: 90%;
bottom: 24px;
}
.front-card-box-header-container{
margin-bottom: 36px;
padding-right: 12px;
}
#front-card-box-header-container-automation h2{
font-size: 32px;
}
.front-card-box-footer-container a{
font-size: 18px;
}

/*---fin de @media---*/
}
@media(min-width:1100px){
#section-one-frontpage{
padding-bottom: 28%;
}

/*---fin de @media---*/
}

@media(min-width:1280px){
/*--------BANNER-----------*/
#main-banner-txt-container-frontpage{
padding-top: 32px;
}
#main-banner-h2-frontpage{
font-size: 56px;
margin-bottom: 48px;
}
#main-banner-h3-frontpage{
font-size: 36px;
margin-bottom: 63px;
}
#main-banner-p-frontpage{
font-size: 18px;
margin-bottom: 136px;
}
/*---fin de @media---*/
}

@media(min-width:1360px){
/*--------BANNER-----------*/
#main-banner-frontpage{
padding-bottom: 39.53%;
}
#main-banner-txt-container-frontpage{
padding-top: 32px;
padding-right: 21px;
}
#main-banner-h2-frontpage{
font-size: 56px;
margin-bottom: 48px;
}
#main-banner-h3-frontpage{
font-size: 36px;
margin-bottom: 63px;
}
#main-banner-p-frontpage{
font-size: 18px;
margin-bottom: 124px;
}
/*--------*/
.section-basic-frontpage{
padding-left: 48px;
padding-right: 48px;
}
#section-one-frontpage{
padding-bottom: 42.86%;
}
.section-one-txt-container{
width: 52%;
padding-top: 63px;
}
.section-one-txt-container h2{
font-size: 56px;
line-height: 62px;
}
/*----SECTION TWO-----*/
.front-card-box-container{
padding: 36px 24px;
padding-bottom: 16px;
height: 560px;
}
#front-card-box-header-container-automation h2{
font-size: 42px;
}
/*SECTION FOUR LINKING TO NEWSLETTER*/
.mailchimp-container{
width: 50%;
}


/*---fin de @media---*/
}

@media(min-width:1440px){
/*--------BANNER-----------*/
#main-banner-txt-container-frontpage{
padding-top: 56px;
padding-left: 48px;
padding-right: 48px;
}
#main-banner-h2-frontpage{
font-size: 63px;
margin-bottom: 36px;
}
#main-banner-h3-frontpage{
margin-bottom: 72px;
}
#main-banner-p-frontpage{
margin-bottom: 148px;
}
/*--------*/
/*---fin de @media---*/
}

@media(min-width:1600px){
/*--------BANNER-----------*/
#main-banner-txt-container-frontpage{
padding-top: 72px;
padding-left: 48px;
padding-right: 48px;
}
#main-banner-h2-frontpage{
font-size: 72px;
margin-bottom: 36px;
}
#main-banner-h3-frontpage{
font-size: 42px;
margin-bottom: 72px;
}
#main-banner-p-frontpage{
font-size: 24px;
margin-bottom: 180px;
}
/*-------*/
.section-one-txt-container h2{
font-size: 63px;
line-height: 72px;
}
.section-one-txt-container p{
font-size: 21px;
line-height: 24px;
}
/*SECTION FOUR LINKING TO NEWSLETTER*/
.front-newslatter-container h2{
font-size: 64px;
margin-bottom: 16px;
}
.front-newslatter-container p{
margin-bottom: 24px;
}
/*----SECTION THREE-----*/

#section-three-frontpage{
padding: 48px 164px;
}




/*---fin de @media---*/
}


@media(min-width:1920px){
/*FOR ALL SECTIONS*/
.section-basic-frontpage{
padding-left: 96px;
padding-right: 96px;

}
/*--------BANNER-----------*/
#main-banner-txt-container-frontpage{
padding-top: 96px;
padding-left: 48px;
padding-right: 48px;
}
#main-banner-h2-frontpage{
font-size: 84px;
margin-bottom: 72px;
}
#main-banner-h3-frontpage{
font-size: 48px;
margin-bottom: 86px;
}
#main-banner-p-frontpage{
font-size: 28px;
margin-bottom: 224px;
}
/*-------*/
/*SECTION ONE*/
.section-one-txt-container{
padding-top: 96px;
}

.section-one-txt-container h2{
margin-bottom: 56px;
}
.section-one-txt-container p{
font-size: 21px;
line-height: 24px;
margin-bottom: 56px;
}
/*----SECTION TWO-----*/
.front-card-box-container h4{
font-size: 18px;
line-height: 24px;
}
.front-card-box-container p{
font-size: 18px;
line-height: 24px;
}
.front-card-box-footer-container a{
font-size: 24px;
}

/*---SECTION THREE-----*/
#section-three-frontpage{
padding: 56px 96px;
}

/*---fin de @media---*/
}