@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*
COLORES BASE
Azul: rgba(59,86,115,1) / #3b5673
Rojo: rgba(255,49,49,1) / #ff3131
 */

body {
    font-family: 'Noto Sans', sans-serif;
    background-color: rgba(59,86,115,1);
    color: rgb(240,240,240);
}
.logo {
    height: 50px;
}
header {
    box-shadow: rgba(0,0,0,.5) 0px 5px 5px;
    position: relative;
    z-index: 2;
}
.main-banner {
    background-image: url("img/main-banner.jpeg");
    background-color: rgba(59,86,115,1);
    background-blend-mode: multiply;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 400px;
    border-top: 11px solid rgba(255,49,49,1);
    z-index: 1;
}
.nuestros-servicios {
    background-image: url("img/fresado.jpg");
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding-top: 170px;
}
.nuestros-servicios > .content {
    background: rgb(59,86,115);
    background: linear-gradient(180deg, rgba(59,86,115,0) 0%, rgba(59,86,115,1) 20%);
    padding-top: 30px;
    text-align: start;
}
.equipo { background: rgba(0,0,0,.2); }
.contacto { background: rgba(255,49,49,1); }
.contact-form {
    width: 90%;
    margin: auto;
}
.politicas {
    background: rgba(0,0,0,.2);
}

.header-0 {
    font-weight: 900;
}
.header-1 {
    font-size: 2em;
    font-weight: 100;
}
.fc-azul { color: rgba(59,86,115,1); }
.fc-rojo { color: rgba(255,49,49,1); }
p, li { font-weight: 300; font-size: 1rem; }
a {
    text-decoration: none;
    font-weight: 700;
    color: #fff;
}


@media (min-width: 576px) {
    .logo {
        height: 100px;
    }
    .main-banner {
        height: 300px;
    }
    .nuestros-servicios {
        background-image: url("img/fresado.jpg");
        background-position: left center;
        background-size: 50% auto;
        background-repeat: no-repeat;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .nuestros-servicios > .content {
        background: rgb(59,86,115);
        background: linear-gradient(90deg, rgba(59,86,115,0) 0%, rgba(59,86,115,1) 20%);
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 18%;
        text-align: left;
        width: 70%;
        margin-left: auto;
    }

    p, li { font-weight: 300; font-size: 1.25rem; }
    .contact-form {
        width: 50%;
        margin: auto;
    }
}