@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){
/*--------BANNER-----------*/
#main-banner-automation{
position: relative;
width: 100%;
height: 570px;
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: 16px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
#main-banner-txt-container-automation{
width: 100%;
}
#main-banner-title-container-automation{
display: flex;
justify-content: flex-end;
align-items:baseline;
width: 100%;
padding-top: 56px;
margin-bottom: 24px;
}
#main-banner-title-container-automation img{
height: 65px;
}
#main-banner-h2-automation{
font-weight: bold;
font-style: oblique;
font-size: 42px;
color: white;
}

#main-banner-h3-automation{
margin-bottom: 48px;
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;
}
.automation-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-automation{
width: 100%;
height: auto;
}
.model-card{
width: 100%;
height: 0;
padding: 28px;
padding-bottom: 100%;
margin-bottom: 24px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
position: relative;
}
.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-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
border-radius: 0 !important;
padding-bottom: 100%;
background: #4B0082;
background: linear-gradient(120deg, rgba(75, 0, 130, 1) 1%, rgba(10, 47, 92, 1) 100%);
border-radius: 16px !important;
}
#model-card-automation-chatbots p , #model-card-automation-admin p,
#model-card-automation-arrow p,
#model-card-automation-prod p,#model-card-automation-integra p,#model-card-automation-pred p{
margin-bottom: 18px;
}
#standar-button-automation{
position: absolute;
right: 24px;
bottom: 28px;
}
/*INDIVIDUAL VALUES FOR EACH CARDS*/
#model-card-automation-arrow{
display: none;
}


/*---fin de @media---*/
}
@media(min-width:480px){
#main-banner-automation{
height: 520px;
}
/*-----------CARDS------------*/
/*COMMON VALUES OF CARDS*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
padding-bottom: 63%;
}




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

/*--------BANNER-----------*/
#main-banner-automation{
height: 480px;
}
#main-banner-title-container-automation{
display: flex;
justify-content: flex-end;
align-items:baseline;
width: 100%;
padding-top: 36px;
margin-bottom:36px;
}
/*-----------CARDS------------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
padding-bottom: 63%;
}
#model-card-automation-chatbots h3, #model-card-automation-admin h3,
#model-card-automation-arrow h3,
#model-card-automation-prod h3,#model-card-automation-integra h3,#model-card-automation-pred h3{
font-size: 32px;
}
#model-card-automation-chatbots p, #model-card-automation-admin p,
#model-card-automation-arrow p,
#model-card-automation-prod p,#model-card-automation-integra p,#model-card-automation-pred p{
font-size: 18px;
line-height: 24px;
}
#standar-button-automation{
right: 48px;
bottom: 32px;
}
#standar-button-automation a{
font-size: 21px;
}
/*---fin de @media---*/
}
@media(min-width:640px){
/*--------BANNER-----------*/
#main-banner-automation{
height: 400px;
}

/*-----------INTRO------------*/
.page-intro{
padding: 6% 12.5%;
}
/*-----------CARDS------------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
padding-bottom: 50%;
}
/*---fin de @media---*/
}
@media(min-width:720px){

/*-----------CARDS------------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
padding-bottom: 40%;
}



/*---fin de @media---*/
}
 @media(min-width:800px){
/*--------BENNER-----------*/
#main-banner-automation{
padding: 0 36px;
}


/*---fin de @media---*/
}
@media(min-width:900px){
/*-----------CARDS------------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
padding-bottom: 33%;
}

/*---fin de @media---*/
}
@media(min-width:1024px){
    /*--------BENNER-----------*/
#main-banner-automation{
background-image: url(../img/Banner-automation.jpg);
background-repeat: no-repeat;
background-size: cover;
}

/*-----------CARDS------------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
padding-bottom: 28%;
}


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


/*---fin de @media---*/
}
@media(min-width:1280px){
/*--------BANNER-----------*/
#main-banner-automation{
padding-top: 24px;
}
#main-banner-title-container-automation h2{
font-size: 48px;
}
#main-banner-h3-automation{
margin-bottom: 65px;
}

/*-----------CARDS------------*/
#model-card-automation-arrow{
display: block;
position: relative;
background: transparent;
background-color: transparent !important;
box-shadow: none !important;
}
.img-arrow-automation{
position: absolute;
left: 24px;
bottom: 24px;
}
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
width: 32%;
padding-bottom: 28%;
}
#model-card-automation-chatbots h3, #model-card-automation-admin h3,
#model-card-automation-arrow h3,
#model-card-automation-prod h3,#model-card-automation-integra h3,#model-card-automation-pred h3{
font-size: 28px;
margin-bottom: 42px;
}
#model-card-automation-chatbots p, #model-card-automation-admin p,
#model-card-automation-arrow p,
#model-card-automation-prod p,#model-card-automation-integra p,#model-card-automation-pred p{
font-size: 16px;
line-height: 21px;
}
#standar-button-automation{
right: 48px;
bottom: 36px;
}

/*---fin de @media---*/
}
@media(min-width:1360px){
/*--------BANNER-----------*/
#main-banner-automation{
height: 580px;
padding: 48px 48px 0 48px;
}
#main-banner-h2-automation{
font-size: 63px !important;
margin-bottom: 48px;
}
#main-banner-title-container-automation img{
height: 90px;
}
#main-banner-h3-automation{
font-size: 36px;
margin-bottom:112px;
}


/*--------INTRO-----------*/
.page-intro p{
margin-bottom: 48px;
}


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

#main-banner-automation{
height: 686px;
padding: 84px 56px 0 56px;
}
#main-banner-h2-automation{
font-size: 72px !important;
margin-bottom: 56px;
}
#main-banner-h3-automation{
margin-bottom:148px;
}
/*--------INTRO-----------*/
.page-intro h3{
font-size: 36px;
line-height: 42px;
}
.page-intro p{
    font-size: 18px;
    line-height: 24px;
margin-bottom: 48px;
}
/*--------CARDS-----------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
width: 32%;
padding-bottom: 28%;
}
#model-card-automation-chatbots h3, #model-card-automation-admin h3,
#model-card-automation-arrow h3,
#model-card-automation-prod h3,#model-card-automation-integra h3,#model-card-automation-pred h3{
font-size: 36px;
margin-bottom: 42px;
padding-top: 24px;
}
#model-card-automation-chatbots p, #model-card-automation-admin p,
#model-card-automation-arrow p,
#model-card-automation-prod p,#model-card-automation-integra p,#model-card-automation-pred p{
font-size: 18px;
line-height: 24px;
}
#standar-button-automation{
right: 48px;
bottom: 36px;
}
/*---fin de @media---*/
}
@media(min-width:1920px){
/*--------BANNER-----------*/

/*--------INTRO-----------*/
.page-intro h3, .page-intro p{
margin-bottom: 65px;
}
/*--------CARDS-----------*/
#model-card-automation-chatbots, #model-card-automation-admin,
#model-card-automation-arrow,
#model-card-automation-prod,#model-card-automation-integra,#model-card-automation-pred{
width: 32%;
padding-bottom: 28%;
}
#model-card-automation-chatbots h3, #model-card-automation-admin h3,
#model-card-automation-arrow h3,
#model-card-automation-prod h3,#model-card-automation-integra h3,#model-card-automation-pred h3{
font-size: 42px;
margin-bottom: 42px;
padding-top: 24px;
}
#model-card-automation-chatbots p, #model-card-automation-admin p,
#model-card-automation-arrow p,
#model-card-automation-prod p,#model-card-automation-integra p,#model-card-automation-pred p{
font-size: 21px;
line-height: 28px;
}
#standar-button-automation{
right: 48px;
bottom: 36px;
}
#standar-button-automation a{
font-size: 28px;
}
/*---fin de @media---*/
}