body {
        margin: 0;
    }
    
    header {
        background-image: url('../img/banner.png');
        background-repeat: no-repeat;
        background-size: cover;
        height: 39.6vw;
        width: 100%;
        position: relative;
    }
    
    header h1 {
        position: relative;
        color: white;
        font-size: 1.4em;
        max-width: 500px;
        width: 50vw;
        text-align: center;
        text-transform: uppercase;
        top: 10vw;
        left: 7vw;
    }
    
    header a,
    header a:hover {
        text-decoration: none;
        color: white;
    }
    
    section {
        color: #575756;
    }
    /* MISION  */
    
    section.mision {
        margin-top: 75px;
        margin-bottom: 75px;
    }
    
    section.mision .texto {
        padding-left: 50px;
        font-size: 2rem;
        line-height: normal;
    }
    
    h2,
    h3 {
        color: #005b9b;
        font-size: 2.5rem;
    }
    
    section.mision .texto>h2 {
        font-weight: bolder;
        margin-bottom: 0;
        line-height: 0.9;
    }
    
    section.mision .texto>h3 {
        line-height: 0.8;
        margin-bottom: 20px;
    }
    /* VALORES */
    
    section.valores h2 {
        font-weight: bolder;
    }
    
    section.valores p:not(.card-text) {
        font-size: 2rem;
        line-height: normal;
    }
    
    div.card {
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    }
    
    h5.card-title {
        color: #005b9b;
        font-size: 2.5rem;
        font-weight: bolder;
    }
    
    p.card-text {
        font-size: 1.1rem;
    }
    /* PORTAFOLIO */
    
    section.portafolio {
        margin-top: 75px;
        background-image: url("../img/pexels-fauxels-3183197.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: center;
        padding: 8em 0 12em 0;
    }
    
    section.portafolio .contenido {
        background-color: rgba(0, 91, 155, .65);
        color: white;
        font-size: 26px;
        font-weight: bold;
        padding: 2em 0;
        border-radius: 25px;
    }
    
    section.portafolio .contenido h2 {
        color: white;
        font-weight: bolder;
    }
    
    section.portafolio .contenido .col {
        padding: .5em 3em;
        text-align: center;
        line-height: normal;
    }
    /* SERVICIOS */
    
    section.servicios h2 {
        background-color: #005b9b;
        color: white;
        padding-top: .5em;
        padding-bottom: .5em;
        margin: 2em;
        font-weight: bolder;
        text-align: center;
    }
    
    section.servicios img,
    section.servicios .img {
        width: 100%;
        height: 300px;
        background-position-y: center;
    }
    
    section.servicios .img {
        width: 100%;
        height: 300px;
        background-size: cover;
        background-position-y: center;
    }
    
    section.servicios .img1 {
        background-image: url("../img/pexels-fauxels-3184360.jpg");
    }
    
    section.servicios .img2 {
        background-image: url("../img/pexels-fauxels-3184418.jpg");
    }
    
    section.servicios .img3 {
        background-image: url("../img/pexels-fauxels-3184298.jpg");
    }
    
    section.servicios .img4 {
        background-image: url("../img/pexels-the-coach-space-2977547.jpg");
    }
    
    section.servicios .col-12,
    section.servicios .col-md-6 {
        font-size: 1.5rem;
        line-height: normal;
        margin-bottom: 3em;
    }
    
    section.servicios .col-12 h3,
    section.servicios .col-md-6 h3 {
        font-size: 1.5rem;
        line-height: normal;
        font-weight: bolder;
    }
    /*FOOTER*/
    
    footer {
        width: 100%;
        background-color: #182034;
        color: white;
        font-size: 1.5rem;
        padding-left: 50px;
    }
    
    footer a,
    footer a:hover {
        color: white;
        text-decoration: none;
    }
    
    @media (min-width: 768px) {
        header img.logo {
            width: 25vw;
            position: relative;
            top: 10vw;
            left: 7vw;
        }
        header div.contacto {
            position: relative;
            left: 7vw;
            bottom: -17vw;
            max-width: 50vw;
        }
        section.servicios .col-12,
        section.servicios .col-md-6 {
            font-size: 1rem;
        }
    }
    
    @media(min-width:768px) and (max-width: 836px) {
        header h1 {
            text-align: left;
        }
        header div.contacto {
            bottom: -12vw;
        }
    }
    
    @media (min-width: 992px) {
        header div.contacto {
            bottom: -19vw;
        }
        section.servicios .col-12,
        section.servicios .col-md-6 {
            font-size: 1.5rem;
        }
    }
    
    @media (min-width: 1200px) {
        header div.contacto {
            bottom: -21vw;
        }
    }
    
    @media (max-width: 767.98px) {
        body {
            font-size: 14px;
        }
        header {
            background-image: none;
            background-color: #182034;
            text-align: center;
            height: unset;
        }
        header h1 {
            width: unset;
            top: unset;
            left: unset;
            font-size: 1.3em;
            max-width: 80vw;
            margin: 1em auto;
            font-weight: bold;
        }
        header img.logo {
            margin-top: 30px;
            width: 300px;
        }
        div.contacto {
            font-size: 1.2em;
            color: white;
            padding-bottom: 1em;
        }
        span.uno {
            color: #0c669c;
        }
        section.mision .texto {
            padding-left: .7rem;
            padding-right: .7rem;
        }
        section.servicios h2 {
            margin: 2em 0;
        }
        section.servicios .col-12 {
            font-size: 1.3rem;
        }
        footer {
            font-size: 1rem;
            padding-left: 50px;
        }
        footer .mail {
            width: 2rem;
        }
    }
    
    @media (max-width: 575.98px) {
        footer .footer-contacto {
            text-align: center;
        }
        section.portafolio .row {
            --bs-gutter-x: 0;
        }
    }