dialog{
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    animation: esmaecer-width .3s ease-out;
    
    background: url(../../../css/imgs/background/background-feedback2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0%;
    
    border: none;
    border-radius: 20px;

    width: 80vh;
    height: 50vh;
    padding: 20px 4%;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 70%);
}

dialog::backdrop {
    background: rgba(0, 0, 0, .5); /* Fundo semi-transparente ao redor do dialog */
}

dialog .content-modal{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

dialog .content-modal .title-img{
    min-width: 40%;
    max-width: 70%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;

    border-radius: 5%;
    background: url(../../../css/imgs/imagens/foto-atendimento.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0%;

    border: solid 1px #1d1b1a;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 70%);
}

.title-img h3{
    z-index: 2;
    color: #d0804e;
    font-family: Espiritu;
    font-size: 40px;
    margin-right: 10px;

    position: relative;
    top: 10px;
    filter: drop-shadow(0px 2px 1px black);
}

.title-img h2{
    z-index: 2;
    color: #fff;
    font-family: Espiritu;
    font-size: 10px;
    font-weight: 10;

    position: relative;
    top: 30px;
    filter: drop-shadow(0px 2px 1px black);
}

dialog .content-modal .mais-info{
    height: 60%;
    width: 100%;
    padding: 20px 6%;

    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mais-info{
    gap: 10px;
    text-align: justify;
}

.mais-info h1{
    color: #d0804e;
    font-size: 16px;
    font-family: Espiritu;
    font-weight: 10;
}

.mais-info h1.obs i{
    font-size: 16px;
    color: #db3e3e;
}

.mais-info h1.obs{
    font-size: 12px;
    font-family: Poppins-Medium;
    color: #db3e3e;
}

.mais-info a{
    text-indent: 20px;
}

.mais-info a.descricao{
    color: #fff;
    font-size: 12px;
    font-family: Poppins-Medium;
}

.mais-info i{
    margin-right: 7px;
}

.mais-info a.rs, .mais-info i{
    color: #4ed05f;
    font-size: 22px;
    font-family: Poppins-Medium;
}

.mais-info a.preco{
    color: #fff;
    font-size: 18px;
    font-family: Poppins-Bold;
}

dialog .content-modal button{
    position: absolute;
    bottom: 25px;
    right: 25px;

    font-size: 12px;
    padding: 3px 4%;
    border-radius: 10px;

    text-transform: capitalize !important;
}

dialog a.titulo{
    color: #fff;
    font-family: Poppins-Medium;
    font-weight: 10;
    font-size: 14px;
}

dialog .btn-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}