@import url('base.css');

:root{
    --fuente: 'Baloo Tamma 2', cursive;
    --color3:#0A8C2D;
    --blanco: #FFF;
    --fondo:#242A2A;
    --boton: #0B98F4;
    --borde: #696B6D;
    --colorF1: #140C0C;
    --colorF2: #170D0D;
    --colorF3: #262323;
}

.sombra2{
-webkit-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
-moz-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
}
.serviciosD{
    display: flex;
    padding: 2rem 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
}
.producto{
    display: block;
    color: var(--blanco);
    width: 90%;
    margin: 1rem 0;
}
.nombre_producto{
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
    font-size: 1.7rem;
}
.cara1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.cara1 p{
    font-size: 1.2rem;
}
.cara2{
    width: 70%;
    height: 70%;
    padding: 1rem 1rem;
}
.imagen_lenguaje{
    width: 40%;
}
.boton-cotizar{
    padding: 1rem 2rem;
    background-color: transparent;
    border: 3px solid var(--blanco);
    border-radius: 2rem;
}
.boton-cotizar a{
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.2rem;
    transform: font-size .3s ease;
}
.boton-cotizar a:hover{
    font-size: 1.5rem;
}

/*********************************Pagina Devtech*********************************/
.empresa{
    display: block;
    width: 100%;
    justify-items: center;
}
.titulo_somos{
    color: var(--blanco);
    text-align: center;
    padding: 1rem 0;
}
.contenidos{
    display: block;
    width: 90%;
    justify-items: center;
}
.objetivo{
    display: block;
    width: 90%;
    text-align: center;
}
.iconos_devtech{
    width: 30%;
    padding: 1rem 0;
}
.text-nombre{
    padding: 1rem 0;
}
.texto_dato{
    color: var(--blanco);
    padding: 1rem 1rem;
}
.list_servicio{
    list-style-type:square;
    list-style-position:inside;
}

/******************************************Casos de Exito**********************************/
    .banner-casos{
        display: block;
        justify-items: center;
        text-align: center;
    }
    .nombre_seccion{
        color: var(--blanco);
        margin: 1rem 0;
    }
    .referencia{
        display: block;
        width: 70%;
        padding: 1rem;
        text-align: left;
    }
    .encabezado-usuario{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: .5rem;
        padding: 1rem;
    }
    .imagen_usuario{
        width: 60%;
    }
    .nombre_usuario{
        color: var(--blanco);
        grid-column: 2 / 4;
        align-content: center;
        justify-content: left;
        justify-items: left;
        text-align: left;
        font-size: 1.2rem;
    }
    .texto_usuario{
        color: var(--blanco);
        grid-column: 1 / 3;
        font-size: .9rem;
    }
    .text-fecha{
        color: var(--blanco);
        grid-column: 2 / 4;
        font-style: italic;
        font-size: .7rem;
    }
    .boton-referencia{
        display: flex;
        border: #FFF 2px solid;
        padding: 1rem;
        margin: 1rem 0;
        color: var(--blanco);
        cursor: pointer;
        border-radius: 20rem;
        background: var(--colorB);
    }



/************************************Resolución de imagen alta**************************************/
@media (min-width:768px){
.seccion{
    display: flex;
    justify-content: center;
}
.serviciosD{
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    width: 100%;
    align-items: center;
    gap:2rem;
}
.producto{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: var(--blanco);
    text-align: center;
    width: 90%;
    align-items: center;
    gap: .5rem;
    margin: 2rem 0;
}
.nombre_producto{
    grid-column: 1/3;
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
}
.cara1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.cara1 p{
    font-size: 1.2rem;
}
.cara2{
    width: 80%;
    height: 80%;
}
.imagen_lenguaje{
    width: 40%;
}
.boton-cotizar{
    padding: 1rem 2rem;
    background-color: transparent;
    border: 3px solid var(--blanco);
    border-radius: 2rem;
}
.boton-cotizar a{
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.2rem;
    transform: font-size .3s ease;
}
.boton-cotizar a:hover{
    font-size: 1.5rem;
}
.sombra2{
-webkit-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
-moz-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
}

/****************************************Devtech*********************************************/
.nosotros{ /*Section*/
    display: block;
    justify-items: center;
    width: 100%;
    margin: 1rem 0;
}
.titulo_somos{ /*H2*/
    color: var(--blanco);
    margin: 2rem 0;
    font-size: 1.7rem;
}
.empresa{ /*Div*/
    display: block;
    width: 95%;
    text-align: center;
    margin: 2rem 0;
    padding: 2rem 0;
}
.contenidos{ /*Div*/
    display: block;
}
.objetivo{ /*Div*/
    display: block;
}
.iconos_devtech{ /*img*/
    width: 8%;
    margin: 1rem;
}
.sombra{
-webkit-box-shadow: -2px 10px 5px -10px rgba(255,255,255,1);
-moz-box-shadow: -2px 10px 5px -10px rgba(255,255,255,1);
box-shadow: -2px 10px 5px -10px rgba(255,255,255,1);
}
.text-nombre{
    margin: .5rem 0;
}
.texto_dato{
    color: var(--blanco);
}
.titulo_dato{
    color: var(--blanco);
    padding: 1rem 0;
    font-size: 1.4rem;
}
/**************************************Inicio Casos de Exito*****************************/
    .CasosE{
        display: block;
        justify-items: center;
        padding: 1rem;
    }
    .banner-casos{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
        width: 95%;
        margin: 1rem 0;
    }
    .nombre_seccion{
        color: var(--blanco);
        grid-column: span 4;
        margin: 1rem 0;
    }
    .referencia{
        display: block;
        width: 90%;
        align-content: center;
    }
    .encabezado-usuario{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 1rem;
    }
    .imagen_usuario{
        width: 4rem;
    }
    .nombre_usuario{
        grid-column: span 2;
        width: 100%;
        color:var(--blanco);
        font-size: 1rem;
        align-content: center;
    }
    .texto_usuario{
        color: var(--blanco);
        grid-column: span 2;
        font-size: .9rem;
    }
    .text-fecha{
        color:var(--blanco);
        text-align: right;
        font-family: var(--fuente1);
        font-size: .8rem;
        font-style: italic;
        grid-column: 2 / 4;
    }
}