:root{
    --ColorAmbulancia: #2153E4;
    --blanco: #ffffff;
    --celeste: #51D1F6;
    --amarillo: #FFFF00;

}

html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
    background-color: var(--amarillo);
} 


.fondo-principal{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}


@media (min-width: 768px){
    .fondo-principal{
        flex-direction: row;
    }
}

.fondo-principal a{
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--blanco);
    font-size: 2.5rem;
    font-weight: bold;
    padding: 5rem;
}

.contenedor{
    max-width: 120rem;
    margin: 0 auto;
}


.nav-bg{
    background-color: var(--ColorAmbulancia);
}

.fondo-principal a:hover{
    background-color: var(--amarillo);
    color: var(--ColorAmbulancia);
}


.umeg{
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    max-width:32.5rem;
    position: relative;
    transform: translate(-2%);
    padding: 2rem;
    margin: 0 auto;
}

@media (min-width: 768px){
    .umeg{
        background-size: cover;
        margin-left: 70rem;
        max-width: 55rem;
    }
}

.titulo{
    margin-top: 10rem;
    text-align: center;
    font-size: 2.5rem;
    color: var(--ColorAmbulancia);
}

@media (min-width: 768px){
    .titulo{
        margin-top: 63rem;
    }
}
    

.servicios{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 768px){
    .servicios{
        grid-template-columns: repeat(3, 1fr);

    }
}

.QS{
    background-color: var(--ColorAmbulancia);
    padding: 1rem;    
}


.QS_IMG{
    width: 100%;
    height: 80%;
}

@media (min-width: 768px){
    .QS_IMG{
        width: 100%;
        height: 90%;
    }
}

.QS_TIT{
    font-size: 3rem;
}

.QS_DESC{
    font-size: 2rem;    
}

.QS_TIT,
.QS_DESC{
    margin: 2rem 0;
    text-align: center;
    color: var(--blanco);
}

.titmisvis{
    text-align: center;
    font-size: 4rem;
    color: var(--ColorAmbulancia);
}

.misvis{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
    font-size: 3rem;
    color: var(--ColorAmbulancia);
}

@media (min-width: 768px){
    .misvis{
        grid-template-columns: repeat(2, 1fr);
    }
}

.titns{
    text-align: center;
    font-size: 4rem;
    color: var(--ColorAmbulancia);
    padding-top: 2rem;
}

.footer{
    background-color: var(--ColorAmbulancia);    
}

.copyright{
    color: var(--blanco);
    text-align: center;
}

.QS_TITP{
    font-size: 2rem;
}

.QS_TITP,
.QS_DESCP{
    margin: 1rem 0;
    color: var(--blanco);
    text-align: center;    
}

@media (min-width: 768px){
    .QS_TITP{
        color: var(--blanco);
        text-align: center;
        font-size: 3rem;
    }
    
    .QS_DESCP{
        color: var(--blanco);
        text-align: center; 
        font-size: 2rem;   
    }
}


.QS_IMGP{
    width: 100%;
    height: 70%;
}


.fondo-secundario a:hover{
    background-color: var(--amarillo);
    color: var(--ColorAmbulancia);
}

@media (min-width: 768px){
    .fondo-secundario{
        flex-direction: row;
    }
}

.fondo-secundario a{
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--blanco);
    font-size: 2.5rem;
    font-weight: bold;
    padding: 5rem;
}