@import url('https://fonts.googleapis.com/css2?family=Gotham:ital,wght@0,500;1,400&display=swap');

:root {
    --font-xl: calc(2vw + 1vh);
    --font-md: calc(0.8vw + 0.8vh);
}


body {
    text-align: center;
}

html {
    font-size: 62%;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    width: 100%;
}

html, body {
    overscroll-behavior-x: none;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.principal {
    background: url('../img/banner/home/banner-principal-home.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 41vw;
}


.banner {
    width: 100%;
}

.banner-sobre-nos {
    height: 34vw;
    background: url('../img/banner/banner-sobrenos-web.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-color: #E5E4E4;
}

.banner-sobre-nos img {
    display: none;
}


.texto-banner-sobre-nos {
    font-size: var(--font-md);
    position: relative;
    top: 14rem;
    left: 27vw;
}

.texto-banner-sobre-nos h1 {
    font-size: var(--font-xl);
}

.quero-reciclar {
    height: 31vw;
    background: url('../img/banner/quero-reciclar.png');
    background-repeat: no-repeat;
    background-size: 80%;
    background-color: #EFF0F0;
}

.quero-reciclar img {
    display: none;
}

.texto-banner-quero-reciclar {
    font-size: var(--font-md);
    position: relative;
    top: 10rem;
    right: 20rem;
}

.servicos {
    background-color: #fff;
    position: relative;
    height: 55em;
    left: 4rem;
    display: flex;
}

.servicos div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
    width: 90%;
    position: relative;
    left: 6rem;
    text-align: justify;
}

.servicos h1 {
    font-size: var(--font-xl);
    padding: 2%;
    position: relative;
    top: 5%;
    left: 6rem;
}

.servicos h2 {
    font-size: 1.5vw;
}

.servicos p {
    font-size: var(--font-md);
}

.botoes {
    background-color: #078D14;
    font-size: var(--font-md);
    font-weight: 700;
    color: #fff;
    width: 200px !important;
    height: 50px;
    padding: 8px;
    border-radius: 25px;
    position: relative;
    bottom: 5vw;
}

.botoes a {
    text-decoration: none;
    color: #fff;
}

.blog {
    background-color: #E5E4E4;
    height: 600px;
}

.blog h1 {
    font-size: 3.5em;
    padding-top: 30px;
}

.card-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 50px auto;
    padding: 0 15%;
}

.card {
    width: 250px;
    height: 350px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-in-out;
}

.card-container h1 {
    padding: 5rem;
}

.card-1 {
    position: relative;
    right: 10rem;
}

.card-3 {
    position: relative;
    left: 10rem;
}

.card img {
    width: 100%;
}

.card:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
}

/* estilos para o conteúdo dos cards */

.card-description {
    font-size: 16px;
    margin: 0 20px;
    text-align: justify;
}

.card-image {
    width: 100%;
    height: 200px;
    background-image: url('imagem-card.jpg');
    background-size: cover;
    background-position: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card a {
    color: #000;
    text-decoration: none;
}

.card a:visited {
    color: #000;
    text-decoration: none;
}


@media only screen and (max-width: 1440px) {

    .principal p {
        top: 24vw;
    }

    .banner-sobre-nos {
        height: 42vw;
        background-size: 100%;
    }

    .texto-banner-sobre-nos {
        position: relative;
        left: 27vw;
        top: 10rem;
    }

    .diferenciais {
        height: 40vw;
        margin-top: 8vw;
    }

    .quero-reciclar {
        height: 42vw;
        background-size: 100%;
    }

    .texto-banner-quero-reciclar {
        right: 5rem;
    }

    .servicos {
        position: unset;
        right: 4rem;
    }

    .servicos h2 {
        font-size: 1.8vw;
    }

    .card-container {
        padding: 0 5%;
    }

    .botoes {
        font-size: 1.5vw;
        left: 3rem;
        width: 200px !important;
    }

}

@media only screen and (max-width: 576px) {

    .principal { 
        height: 30rem;
        background: url('../img/banner/home/banner-principal-home-mob.png');
        background-repeat: no-repeat;
        background-size: 100%;
        margin-top: 5rem;
    }

    .banner {
        width: 100%;
        height: auto;
    }

    .nav-log img {
        width: 15rem;
    }

    .texto-banner-sobre-nos p {
        font-size: 3.5vw;
    }

    .texto-banner-sobre-nos {
        position: unset;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .banner-sobre-nos {
        height: 40rem;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        background: none;

    }

    .banner-sobre-nos img {
        margin-left: 38vw;
        margin-bottom: 4rem;
        display: unset;
    }

    .row {
        display: flex;
        flex-direction: column;
    }

    .diferenciais {
        height: 45vw;
    }

    .quero-reciclar {
        background: #EFF0F0;
        height: 45rem;
    }

    .quero-reciclar img {
        display: unset;
    }

    .texto-banner-quero-reciclar {
        font-size: 3.5vw;
        position: unset;
        text-align: center;
    }

    .servicos {
        height: 32rem;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        right: unset;
    }

    .servicos div {
        margin: unset;
        left: auto;
        right: 1rem;
        width: fit-content;
        position: relative;
        left: 1rem;
    }
    
    .servicos h1 {
        font-size: 6vw;
        padding: 2rem;
        left: 1rem;
    }

    .servicos h2 {
        font-size: 4vw;
    }

    .servicos p {
        font-size: 3.5vw;
    }

    .gestao-residuos {
        height: 26rem;
    }

    .botoes {
        font-size: 4vw;
        height: 4rem;
        width: 170px !important;
        padding: 12px;
        left: auto;
        top: 1rem;
    }

    .consumidor {
        margin: 3rem 0;
        margin: 1rem 2rem;
    }

    .consumidor h2 {
        position: relative;
        bottom: 1.5rem;
    }

    .consumidor p {
        position: relative;
        bottom: 1rem;
    }

    .gestao-residuos img {
        width: 40rem;
        margin-top: 10%;
    }

    .blog {
        height: 115em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card-container h1 {
        padding: 2rem;
    }

    .card-1 {
        position: relative;
        left: 0;
        margin-bottom: 10%;
    }

    .card-2 {
        position: relative;
        left: 0;
        margin-bottom: 10%;
    }

    .card-3 {
        position: relative;
        left: 0;
    }

}