@import url('https://fonts.googleapis.com/css2?family=Jaldi:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jaldi:wght@400;700&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@media (min-width: 1100px) {
    * {
        margin: 0;
        box-sizing: border-box;
        transition: all 300ms ease;
    }
    
    #header {
        height: 418px;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-bottom: 15px;
    }
    
    .imgFitCover {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease-out;
    }
    
    #header>div {
        background-color: rgba(248, 113, 113, 0.5);
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }
    
    #header>h1 {
        position: absolute;
        font-family: "Zilla Slab";
        font-weight: bold;
        font-size: 64px;
        text-align: center;
        width: 100%;
        top: 50%;
        transform: translate(0, -50%);
    }
    
    #quemsomos {
        width: 1050px;
        margin: 0 15px;
        position: relative;
        left: 50%;
        transform: translate(-50%);
        div, img {
            margin-bottom: 25px;
        }
    }
    
    #quemsomos {
        display: grid;
        grid-template-columns: 50% 50%;
    }
    
    #sobrenos, #nossoobjetivo {
        font-family: "Zilla Slab";
        h1 {
            font-size: 64px;
        }
        p {
            font-size: 20px;
        }
    }
}

@media (max-width: 550px) {
    * {
        margin: 0;
        box-sizing: border-box;
        transition: all 300ms ease;
    } 

    #header {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-bottom: 15px;
    }    
    .imgFitCover {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease-out;
    }    
    #header>div {
        background-color: rgba(248, 113, 113, 0.5);
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }  
    #header>h1 {
        position: absolute;
        font-family: "Zilla Slab";
        font-weight: bold;
        font-size: 64px;
        text-align: center;
        width: 100%;
        top: 50%;
        transform: translate(0, -50%);
    }
    
    #quemsomos {
        width: 90%;
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 0 5% 5%;
    }
    
    .imgFitCoverQuemSomos {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease-out;
    }
    
    #imgQuemSomos {
        height: 200px;
    }

    #sobrenos, #nossoobjetivo {
        font-family: "Zilla Slab";
        h1 {
            font-size: 50px;
        }
        p {
            font-size: 16px;
        }
    }
}

@media (min-width: 551px) and (max-width: 1099px) {
    * {
        margin: 0;
        box-sizing: border-box;
        transition: all 300ms ease;
    } 

    #header {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        margin-bottom: 15px;
    }    
    .imgFitCover {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease-out;
    }    
    #header>div {
        background-color: rgba(248, 113, 113, 0.5);
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }  
    #header>h1 {
        position: absolute;
        font-family: "Zilla Slab";
        font-weight: bold;
        font-size: 64px;
        text-align: center;
        width: 100%;
        top: 50%;
        transform: translate(0, -50%);
    }
    
    #quemsomos {
        width: 90%;
        position: relative;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 2%;
        margin: 0 5% 5%;
    }
    
    .imgFitCoverQuemSomos {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease-out;
        max-width: 510px;
    }
    
    #imgQuemSomos {
        height: 400px;
        max-width: 510px;
    }

    #sobrenos, #nossoobjetivo {
        font-family: "Zilla Slab";
        max-width: 450px;
        margin-bottom: 2%;
        h1 {
            font-size: 50px;
        }
        p {
            font-size: 16px;
        }
    }
}