.container{
    max-width: 1400px;    
    margin: auto;
}

.container-menu{
    max-width: 1400px;    
    margin: auto;
}

#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;    
    height: 84vh;
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    )
    ,url("../img/hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/*** CELULAR ***/
#hero h1 {
    color: white;
    font-size: 28px;
    width: 100%;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
}

#hero button {
    font-size: 22px;
    margin-top: 30px;
}

#hero  {
    padding: 400px 0px;
}


/* NOSOTROS */
#nosotros {
    background-color: rgb(247, 247, 249);
    width: 100%;
}

#nosotros h2 {
    font-size: 33px;
}
    
#nosotros .texto {
    width: 95%;
    max-width: 600px;
    text-align: initial;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#nosotros .container {
    text-align: center;
    padding: 150PX 1px;
    height: 110vh;
    padding: 100px 0px;
    background-color: rgb(247, 247, 249);
}

#nosotros p {
    text-align: justify;
    line-height: 30px;
}

/* SISTEMAS */
#sistemas {
    background-color: rgb(30,30,30);
    color: white;
    text-align: center;
}

#sistemas .container {
    padding: 120px 12px;
    height: 120vh;
}

#sistemas h2 {
    margin-top: 0;
    font-size: 35px;
}

#sistemas p {
    display: none;
}

#sistemas .carta {
    background-position: center center;
    background-size: cover;
    padding: 40px 0px;
    margin: 30px;
    border-radius: 15px;
    font-size: 13px;    
}

.carta h3{
    font-size: 22px;
}

.programas{
    padding-top: 50px;
}

.carta:first-child{
background-position: center center;
    background-size: cover;    
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    )
    ,url("../img/front-end.jpg");
}

.carta:nth-child(2){
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    )
    ,url("../img/full-stack.jpg");
}

.carta:nth-child(3){
    background-image: linear-gradient(
        0deg,
        rgba(0,0,0,0.5),
        rgba(0,0,0,0.5)
    )
    ,url("../img/python.jpg");
}

/* FACTURACION */
#facturacion {
    background-color: rgb(247, 247, 249);
    color: black;
    text-align: center;    
}

#facturacion .container {
    padding: 190px 12px;  
    height: 100vh;     
}

#facturacion h2 {
    margin-top: 0;
    font-size: 35px;
}

#facturacion button{
    margin-top: 50px;
    width: 80%;
    font-size: 22px;
}

/* SERVICIOS */
#servicios {
    background-color: rgb(30,30,30);
    color: white;
}

#servicios .container{        
    padding: 110px 0px;     
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;    
}

#servicios h2 {    
    font-size: 35px;
    text-align: center;
    width: 100%;    
}

#servicios .lista {
    background: #2d3436;
    color: #ffffff;
    height: 110px;
    display: flex;        
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;    
    text-align: center;
    padding: 13px;;
    width: 38%;
    font-size: 15px;
    border-radius: 5px;
}

#servicios .lista:hover {
    cursor: pointer;
    color: blue;
    background: #ffffff;
    font-weight: bold;    
    background: lightgray;
}

/* CONTACTO */
#contacto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgb(247, 247, 249);
    height: 100vh;
    padding: 100px 0px;
}

#contacto .container {
    padding: 190px 12px;  
    height: 100vh;     
}

#contacto h2{
    font-size: 30px;
}

#contacto button{
    margin-top: 50px;
    font-size: 30px;
}
/* FIN CONTACTO */

/**************************************************************/

/*** ESCRITORIO ***/
@media (min-width: 850px){
    #hero h1{
        font-size: 60px;
    }

    /* NOSOTROS */
    #nosotros .container{
        display: flex;
        justify-content: space-evenly;
        height: 105vh;
        padding: 150px 40px;     
    }

    #nosotros .texto{
        width: 48%;
        max-width: 600px;
        text-align: initial;
        padding-left: 40px;
        padding-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #nosotros h2{
        margin-top: 0px;
    }

    #nosotros .img-container {  
        margin-top: 50px;  
        height: 450px;
        width: 55%;
        background-image: linear-gradient(0deg,
                rgba(0, 0, 0, 0.2),
                rgba(0, 0, 0, 0.2)), url("../img/somos-adviser.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    /* SISTEMAS */
    #sistemas .container {
        padding: 150px 12px;
        height: 120vh;
    }

    #sistemas .programas{
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }

    #sistemas p{
        display: block;
        margin-bottom: 10px;
        padding: 30px;
        font-size: 17px;
    }

    #sistemas h2{
        font-size: 55px;
    }

    #sistemas h3{
        margin-top: 0;
    }

    #sistemas .carta{
        /*padding: 50px;*/
        background-size: 100% 200px;
        background-repeat: no-repeat;
        background-position-y: 0;
        background-color: rgba(50, 50, 50, 1);
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        height: 300px;
    padding: 40px 0px;
    margin-top: 30px;
    border-radius: 15px;
    font-size: 13px;          
    }

    .carta:first-child{
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("../img/front-end-cropped.jpg");
    }

    .carta:nth-child(2){
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("../img/full-stack-cropped.jpg");
    }

    .carta:nth-child(3){
        background-image: linear-gradient(
            0deg,
            rgba(0,0,0,0.5),
            rgba(0,0,0,0.5)
        )
        ,url("../img/python-cropped.jpg");
    }

    /* FACTURACION */
    #facturacion h2{
        font-size: 55px;
        padding-top: 100px;
    }

    #facturacion button{
        margin-top: 60px;
        width: 30%;
        font-size: 30px;        
    }

    /* SERVICIOS */    
    #servicios .container{        
        padding: 160px 0px;     
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;    
    }

    #servicios h2 {    
        font-size: 55px;
        text-align: center;
        width: 100%;    
    }

    #servicios .lista {
        font-size: 22px;
        width: 30%;
    }    

    /* CONTACTO */
    #contacto h2{
        font-size: 55px;
        padding-top: 50px;        
    }

    #contacto button{
        margin-top: 60px;        
        font-size: 30px;
        width: 55%;
    }

    footer .container{
        justify-content: flex-end;
    }
    
    #hero {
        height: 100vh;
    }
}