.banner-area {
    background: var(--Padro-Rosa, #FEE3EE);
    background-size: contain;
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    position: relative;
    /* font-family: "Nunito"; */
}

.banner-area p{
    color: #F31876;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 6.846px;
}

.banner-area h3{
    color: #373737 !important;
    font-family: "Nunito Sans" !important;
    text-align: center;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.logo-banner {
    width: 100px;
    height: auto;
}

.banner-retangulo {
    background-color: #FFA72B;
    position: absolute;
    left: 64%;
    transform: translate(-50%, -50%);
    width: 71%;
    height: 163px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    z-index: 0;

}

.img-banner {
    z-index: 1;
    width: 100%;
    max-width: 380px; 
    height: auto;
    display: block;
    max-width: 124px;
    top: 60%;
}

.sobre{
    /* font-family: "Nunito"; */
}

.sobre p{
    color:#696969;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}



.sobre h3{
    color: #FFA72B;
    font-size:  20px !important;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.sobre img{
    max-width: 438.277px;
    max-height: 779.159px;
}

.img-group {
    width: 153%;
    height: auto;
    position: relative;
    top: 19px;
    left: 0;
}

.img-dog{
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
}

/* @media (max-width: 350px) {
    .sobre h3{
        color: #FFA72B;
        font-size:  10px !important;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
} */

@media (min-width: 450) and (max-width: 768px) {
    .img-group {
        width: 138%;
        height: auto;
        position: relative;
        top: 8px;
        left: 0;
    }
}

/* Responsividade Mobile First */
@media (min-width: 768px) and (max-width: 992px) {
    .banner-retangulo {
        top: 36px;
        height: 244px;
        left: 177px;
        width: 67%;
        max-width: 300px;
    }

    .img1{
        position: absolute !important;
        width: 82%;
        right: 43%;
        top: -50px !important;
        left: -65px !important;
        z-index: 3;
    }
    
    .img2{
        position: absolute !important;
        width: 58%;
        top: 8px !important;
        left: 105px !important;
        z-index: 2;
    }

    /* .img-group {
        width: 132%;
        top: 22px;
        left: -122px;
    } */

    .banner-area p{
        font-size: 45px;
        line-height: 40px;
    }
    .banner-area div h3{
        font-size: 15px;
    }

    .img-banner {
        max-width: 248px;
    }

    .logo-banner {
        width: 200px;
        height: auto;
    }

    .sobre div p{
        font-size: 16px;
    }

    .sobre h3{
        font-size: 21px !important;
    }

    .img-group {
        width: 124%;
        height: auto;
        position: relative;
        top: 28px;
        left: 0;
    }
  
}
@media (min-width: 993px) {
    .banner-retangulo {
        top: 55px;
        left: 271px;
        height: 345px;
        width: 51%;
        max-width: 409px;
    }

    .img1{
        position: absolute !important;
        width: 82%;
        right: 43%;
        top: -92px !important;
        left: -43px !important;
        z-index: 3;
    }
    
    .img2{
        position: absolute !important;
        width: 54%;
        top: 10px !important;
        left: 199px !important;
        z-index: 2;
    }
    .banner-area p{
        font-size: 60px;
        line-height: 45px;
    }
    .banner-area div h3{
        font-size: 21px;
    }

    .img-banner {
        max-width: 380px;
    }

    .logo-banner {
        width: 300px;
        height: auto;
    }

    /* .img-group {
        width: 132%;
        top: 22px;
        left: -122px;
    } */
    .sobre div p{
        font-size: 18px;
        font-weight: 400;
    }

    .banner-area .container{
        max-width: 920px;
    }
    .sobre h3{
        font-size: 44px !important;
    }

    .img-group {
        width: 115%;
        max-width: 600px;
        height: auto;
        position: relative;
        top: 17px;
        left: 0;
    }
    .container.sobre{
        max-width: 900px;
    }

    .sobre img {
        max-width: 296.277px !important;
    }
}