@import url(somos.css);
@import url(products.css);
body{
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
    background-color: transparent;
    border: 0;
}
img{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    color: white;
}
.color-primary{
    background-color:#3d5c7b ;
}
a:hover{
    color: #ef7234;
}
.button-navbar{
    font-size: 16px;
}
.buttons{
    display: flex;
    justify-content: space-evenly;
}
.button{
    padding: 8px 12px;
    border-radius: 5px;
    transition: .5s;
}
.button:hover{
    background-color:#483285
}
.button-primary{
    background-color: #3d5c7b ;
    
}
.button-secondary{
    background-color: #00b7a1;
}
@media(max-width:500px){
    .buttons{
        display: flex;
        justify-content: space-evenly;
    }
    .button{
        padding: 6px 8px;
        font-size: 16px;
        border-radius: 5px;
        transition: .5s;
    }
}
/* --------------------------------------- HEADER ---------------------------------------------------------------------- */
header{
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
.menu{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 120px;
}

.menu a{
    padding: 16px;
    transition: .5s;
}
.logo{
    display: flex;
    
}
.logo img{
    width: 200px;
}
.button-contact{
    background:#ef7234 ;
    border-radius: 10px;
}
.button-contact:hover{
    color: #ef7234;
    background-color: #3d5c7b;
}
@media(max-width:500px) {
    .menu{
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;  
        padding:  0 4px; 
        height: auto;     
    }
    .button-contact{
        align-items: center;
        margin-bottom: 12px;
    }
}
/* ------------------------------------------------------- MAIN --------------------------------------------------------------*/
.main-bg{
    background:linear-gradient(125deg, #CBE6FF 0%, rgba(255,122,34,0) 50%);   
}
.main-content{
    padding-top: 32px;
    width: 60%;
    margin: auto;
}
.main-title h2{
    color: #3d5c7b;
    font-size: 64px;
    margin-top: 0px;
    padding-top: 0px;
}
.main-title img{
    padding-bottom: 0;
    margin-bottom: -20px;
    width: 100px;
}
.main-text{
    color: #3d5c7b;
    line-height: 2;
    font-size: 18px;
}
.main-text-secondary{
    margin-top: 20px;
}
@media(max-width:500px){
    .main-title h2{
        font-size: 38px;
    }   
}
/*--------------------------------- Products ------------------------ */
.products{
    background: #c0ccd5;
}
.product{
    background: #f3f3f3;
    padding: 15px 20px ;
    margin-bottom: 40px;
}

.product-title{
    padding-top: 32px;
    font-size: 58px;
    text-align: center;
    color: #ff7a22;
}
.products-contents{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: 70%;
    margin: auto;
    padding: 10px 20px;
}
.product img{
    width: 50px;
    display: flex;
    margin: auto;    
}
.product h3{
    color: #ef7234;
    text-align: center;
    font-size: 32px;
}
.product h4{
    color: #3d5c7b;
    font-size: 24px;
    text-align: center;
}
.product p{
    color: #3d5c7b;
    text-align: center; font-size: 16px;
}
.product li{
    color: #3d5c7b;
    text-align: left;
    font-size: 16px;
    line-height: 2;
}
@media(max-width:500px){
    .product-title{
        font-size: 32px;   
    }
    .product h3{
        color: #ef7234;
        text-align: center;
        font-size: 28px;
    }
    .products-contents{
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 70%;
        margin: auto;
        padding: 10px 20px;
    }
    .product h4{
        color: #3d5c7b;
        font-size: 20px;
        text-align: center;
    }
}
/* Benefits */
.benefits{
    background: #3b5783;
    margin-top: -20px;
}
.benefits-header{
    text-align: center;
    padding-top: 40px;
}
.benefits-header p{
    font-size:36px;
    color: #ef7234;
}
.benefits-header h2{
    font-size: 56px;
    margin-top: -30px;
    color: #fff;
}
.benefits-contents{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:20px;
    width: 90%;
    margin: auto;
    padding: 32px;
}
.benefits-content{
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.benefits-content img{
    width: 40px;
    height: 40px;
}
.benefits-content span{
    font-size: 20px;
    color: #fff;
}
.benefits-content p{
    font-size: 18px;
    color: #fff;
}
@media(max-width:400px){
    .benefits-header h2{
        font-size: 36px;
        margin-top: -30px;
        color: #fff;
    }
    .benefits-contents{
        display: grid;
        grid-template-columns: 1fr;
        width: 80%;
        margin: auto;
    }   
    .benefits-content img{
        width: 28px;
        height: 28px;
    }
    .benefits-content p{
        font-size: 12px;
        color: #fff;
    }
}
.soluction{
    background: #ff7a22;
    margin-top: -20px;
    padding-top: 32px;
    padding-left:12px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}
.soluction-title h2{
    color: #fff;
    font-size: 37px;
}
.soluction-text p{
    color: #fff;
    padding-bottom: 16px;
}
@media(max-width:400px){
    .soluction-title h2{
        color: #fff;
        font-size: 24px;
    }   
    .soluction{
        background: #ff7a22;
        margin-top: -20px;
        padding-top: 32px;
        padding-bottom:20px;
        display: grid;
        grid-template-columns: 1fr ;
        gap: 8px;
        align-items: center;
    }
    .soluction-text p{
        color: #fff;
        
    }
}
footer{
    text-align: center;
    color: #3d5c7b;
}