*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #B20B6D;
}

.button a{
    display: flex;
    padding: 10px 20px;

    text-decoration: none;
    color: #B20B6D;
    font-size: 3vh;
    font-family: "Yrsa", serif;

    background-color: #F0DEBB;
    border-radius: 2px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.066);
}

.button a:hover{
    color: #F0DEBB;
    font-family: "Yrsa", serif;

    background-color: #B20B6D;
    transition: 0.5s;
}

.button-mob a{
    display: none;
    padding: 10px 20px;

    text-decoration: none;
    color: #B20B6D;
    font-size: 3vh;
    font-family: "Yrsa", serif;

    background-color: #F0DEBB;
    border-radius: 2px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.066);
}

.button-mob a:hover{
    color: #F0DEBB;
    font-family: "Yrsa", serif;

    background-color: #B20B6D;
    transition: 0.5s;
}

.botton-flut{
    display: none;
}

.header{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    place-items: center;
    align-items: center;
    padding: 80px 0px 0px 0px;



    background-image: url(./assts/capa.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.header .txt-header{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 650px;
}

.header .txt-header h3{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 3vh;
    letter-spacing: 3px;
    color: #F0DEBB;

    padding: 0px 3px;
    box-shadow: -2px 0px #F0DEBB;
}

.header .txt-header h1{
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 6vh;
    color: #ffff;
}

.header .txt-header p{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 3vh;
    color: #ffff;
}

.header .txt-header h1 strong{
    font-weight: 500;
    color: #F0DEBB;
}

.header .txt-header p strong{
    font-weight: 500;
}

.header .img-header img{
    display: flex;
    height: 80vh;
}

.header .txt-header .button{
    display: flex;
    padding-top: 40px;
}

.letreiro{
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    padding: 20px 0px;
    

   background-color: #F0DEBB;
}

.letreiro img{
    margin: 0px 40px;
    position: relative;

    animation: move-left 10s infinite linear;
}

.homes .carousel-inner{
    display: flex;
    height: 700px;
}

.homes .carousel-control-prev-icon{
    display: flex;
    background-color: #F0DEBB;
    padding: 25px;
    border-radius: 100%;
}

.homes .carousel-control-next-icon{
    display: flex;
    background-color: #F0DEBB;
    padding: 25px;
    border-radius: 100%;
}

.homes .carousel-caption{
    display: flex;
    flex-direction: column;
    height: 500px;
    gap: 30px;
    text-align: left;
}

.homes .title-home h1{
    display: flex;
    position: absolute;
    transform: translate(600px, 30px);
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 6vh;
    color: #ffff;
}

.homes .carousel-caption h1{
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 6vh;
    color: #F0DEBB;
}

.homes .carousel-caption p{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 3vh;
    color: #ffff;
}

.homes .carousel-caption strong{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 2.5vh;
    color: #ffff;
}

.homes .button{
    display: flex;
}

.homes .carousel-inner .carousel-item:nth-child(1){
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./assts/ap1-0.png);
}

.homes .carousel-inner .carousel-item:nth-child(2){
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./assts/ap2-0.png);
}

.homes .carousel-inner .carousel-item:nth-child(3){
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./assts/ap3-0.png);
}

.homes .carousel-inner .carousel-item:nth-child(4){
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./assts/ap4-0.png);
}

.homes .carousel-inner .carousel-item:nth-child(5){
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(./assts/ap5-0.png);
}

.acess-part{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
    background-color: #F0DEBB;
}

.acess-part h1{
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 6vh;
    color: #B20B6D;
}

.acess-part .button a{
    background-color: #B20B6D;
    color: #F0DEBB;
}

.acess-part .button a:hover{
    background-color: #e9d09e;
    color: #B20B6D;
}

.about{
    display: flex;
    justify-content: center;
    padding: 70px;
    align-items: center;
    background-color: #B20B6D;
}

.about .card-about{
    display: flex;
    justify-content: center;
    width: 1200px;
    height: 600px;

    border-radius: 20px;
    background-color: #F0DEBB;
}

.about .card-about .txt-about{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    padding: 30px;
}

.about .card-about .txt-about h1{
    font-family: "Yrsa", serif;
    font-weight: 500;
    font-size: 5vh;
    color: #B20B6D;
}

.about .card-about .txt-about p{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 2.5vh;
    color: #B20B6D;
}

.about .card-about .txt-about img{
    height: 7vh;
}


.about .img-about{
    display: flex;
    background-image: url(./assts/Mask2\ group.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 20px 20px 0px;
}

.about .button a{
    background-color: #B20B6D;
    color: #F0DEBB;
}

.about .button a:hover{
    background-color: #e9d09e;
    color: #B20B6D;
}

.feedback{
    display: flex;
    flex-direction: column;
    padding: 8vh;
    gap: 12vh;
    background-color: #B20B6D;
}

.feedback .title-fdb h1{
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 6vh;
    color: #F0DEBB;
}

.cards-feedback{
    display: flex;
    justify-content: center;
    gap: 30px;
}

.cards-feedback .card{
    display: flex;
    flex-direction: column;
    padding: 0px 20px;
    gap: 80px;
    
    width: 330px;
    height: 430px;

    border-radius: 20px;
    background-color: #F0DEBB;
}

.cards-feedback .card p{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 2.3vh;
    color: #B20B6D;
    text-align: center;
}

.cards-feedback .card .img-person img{
    position: absolute;
    padding: 20px;
    width: 15vh;
    background-color: #B20B6D;
    border-radius: 100%;
    transform: translate(75px,-90px);
}

.cards-feedback .card img{
    width: 15vh;
}

.contact{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    justify-items: center;
    padding: 90px 0px;

    background-image: url(./assts/Mask3\ group.png);
    background-size: cover;
}

.contact .txt-contact{
    display: flex;
    flex-direction: column;
    gap: 6vh;
    width: 550px;
}

.contact .txt-contact h1{
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 6.5vh;
    color: #fff;
}

.contact .txt-contact h1 strong{
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 600;
    color: #F0DEBB;
}

.contact .txt-contact p{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 2.5vh;
    color: #fff;
}


.contact .txt-contact p strong{
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.contact .footer-txt-contact{
    display: flex;
    flex-direction: column;
    gap: 2vh;
}

.contact .footer-txt-contact h3{
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 2.5vh;
    color: #fff;
}

.contact .apps{
    display: flex;
    gap: 3vh;
}

.contact .formulário{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;

    background-color: #B20B6D;
    border-radius: 20px;
}

.contact .formulário form{
    display: flex;
    flex-direction: column;
    width: 450px;
    gap: 4vh;
}

.contact .formulário form div{
    display: flex;
    justify-content: space-between;
}

.contact .formulário form h1{ 
    display: flex;
    place-self: center;

    font-family: "Yrsa", serif;
    font-weight: 500;
    font-size: 4.5vh;
    color: #F0DEBB;
}

.contact .formulário form input{ 
    padding: 10px;
    border: 0px;
    border-radius: 5px;
    background-color: #F0DEBB;
}

.contact .formulário form button{ 
    padding: 2.5px;
    width: 20vh;
    border: 3px solid #F0DEBB;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0);

    font-size: 2.5vh;
    color: #F0DEBB;
}

.contact .formulário form button:hover{ 
    transition: 0.5s;
    border: 3px solid #F0DEBB;
    background-color: #F0DEBB;
    color: #B20B6D;
}

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

    background-color: #F0DEBB;
}

.footer h1{
    font-size: 3vh;
    font-family: "Yrsa", serif;
    font-style: italic;
    font-weight: 500;
    color: #B20B6D;
}

@media screen and (width < 560px){    
    .button a{
        display: none;
    }

    .button-mob a{
        display: inline;
        padding: 10px 20px;
    
        text-decoration: none;
        color: #B20B6D;
        font-size: 3vh;
        font-family: "Yrsa", serif;
    
        background-color: #F0DEBB;
        border-radius: 2px;
        box-shadow: 5px 5px rgba(0, 0, 0, 0.066);
    }
    
    .botton-flut{
        display: block;
        position: fixed;
        top: 590px;
        right: 30px;
        background: #45FF6A;
        border-radius: 50%;
        z-index: 1;
    }

    .botton-flut img{
        padding: 5px;
        height: 7vh;
    }

    .header{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        place-items: center;
        align-items: right;
        padding: 80px 0px 0px 20px;
    
    
    
        background-image: url(./assts/capa-mob.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .header .txt-header{
        width: 350px;
    }
    
    .header .txt-header h3{
        font-size: 2.5vh;
    }
    
    .header .txt-header h1{
        font-size: 4.5vh;
    }
    
    .header .txt-header p{
        font-size: 2.5vh;
    }
    
    .header .img-header img{
        display: flex;
        height: 45vh;
    }
    
    .header .txt-header .button{
        display: none;
    }

    .header img{
        height: 10vh;
    }
    
    .letreiro img{
        height: 8vh;
    }
    
    .homes .carousel-inner{
        display: flex;
        height: 600px;
    }
    
    .homes .carousel-control-prev-icon{
        display: none;
    }
    
    .homes .carousel-control-next-icon{
        display: none;
    }
    
    .homes .carousel-caption{
        height: 450px;
        width: 330px;
    }

    
    .homes .title-home h1{
        transform: translate(70px, 30px);
        font-size: 4.5vh;
    }
    
    .homes .carousel-caption h1{
        font-size: 4.5vh;
    }
    
    .homes .carousel-caption p{
        font-size: 2.5vh;
    }
    
    .homes .carousel-caption strong{
        font-weight: 600;
        font-size: 1.5vh;
    }
    
    .homes .button{
        display: flex;
    }
    
    .homes .carousel-inner .carousel-item:nth-child(1){
        background-image: url(./assts/apartamentomob-1.png);
    }
    
    .homes .carousel-inner .carousel-item:nth-child(2){
        background-image: url(./assts/apartamentomob-2.png);
    }
    
    .homes .carousel-inner .carousel-item:nth-child(3){
        background-image: url(./assts/apartamentomob-3.png);
    }
    
    .homes .carousel-inner .carousel-item:nth-child(4){
        background-image: url(./assts/apartamentomob-4.png);
    }

    .homes .carousel-inner .carousel-item:nth-child(5){
        background-image: url(./assts/apartamentomob-5.png);
    }

    .acess-part{
        gap: 5px;
    }
    
    .acess-part h1{
        font-size: 3.5vh;
    }

    .acess-part .button-mob a{
        background-color: #B20B6D;
        color: #F0DEBB;
    }
    
    .acess-part .button-mob a:hover{
        background-color: #e9d09e;
        color: #B20B6D;
    }

    .about{
        padding: 70px 10px;
    }
    
    .about .card-about{
        flex-direction: column;
        justify-content: space-between;
        width: 380px;
        height: 800px;
    }
    
    .about .card-about .txt-about{
        flex-direction: column;
        text-align: justify;
    }
    
    .about .card-about .txt-about h1{
        font-size: 4.5vh;
    }
    
    .about .card-about .txt-about p{
        font-size: 2.5vh;
    }
    
    .about .card-about .txt-about img{
        height: 6vh;
    }
    
    .about .img-about{
        display: flex;
        background-image: url(./assts/Mask2\ group.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 0px 0px 20px 20px;
    }

    .about .img-about img{
        display: flex;
        height: 45vh;
    }
    
    .about .button-mob a{
        background-color: #B20B6D;
        color: #F0DEBB;
    }
    
    .about .button-mob a:hover{
        background-color: #e9d09e;
        color: #B20B6D;
    }
    
    .feedback{
        padding: 20px;
        gap: 5vh;
    }
    
    .feedback .title-fdb h1{
        font-size: 5vh;
    }
    
    .cards-feedback{
        display: flex;
        place-self: center;
        flex-direction: column;
        gap: 50px;
    }
    
    .cards-feedback .card{
        gap: 40px;
        
        width: 330px;
        height: 300px;
    }
    
    .cards-feedback .card p{
        font-size: 2.3vh;
        text-align: left;
    }
    
    .cards-feedback .card .img-person img{
        padding: 10px;
        width: 10vh;
        transform: translate(-65px,-40px);
    }
    
    .cards-feedback .card img{
        width: 15vh;
    }
    
    .contact{
        grid-template-columns: repeat(1,1fr);
        padding: 50px 5px;
        gap: 3vh;
    
        background-image: url(./assts/Mask-footer-group.png);
    }
    
    .contact .txt-contact{
        display: flex;
        flex-direction: column;
        gap: 2vh;
        width: 330px;
    }
    
    .contact .txt-contact h1{
        text-align: center;
        font-size: 4.5vh;
    }
    
    .contact .txt-contact p{
        text-align: center;
        font-size: 2.5vh;
    }
    
    .contact .footer-txt-contact{
        display: flex;
        flex-direction: column;
        gap: 2vh;
    }

    .contact .formulário{
        padding: 40px 10px;
    }
    
    .contact .formulário form{
        width: 360px;
        gap: 4vh;
    }
    
    .contact .formulário form h1{ 
        font-size: 4.5vh;
    }
    
    .contact .formulário form input{ 
        width: 20vh;
    }
    
    .footer h1{
        font-size: 2.0vh;
    }
}

@keyframes move-left {
    from {
      left: 0%;
    }
    to {
      left: -60%;
    }
}

/* Personalizar a barra de rolagem */
::-webkit-scrollbar {
    width: 5px; /* Largura da barra */
}


::-webkit-scrollbar-thumb {
    background: #B20B6D; /* Cor da parte rolável */
    border-radius: 2px; /* Borda arredondada */
}


::-webkit-scrollbar-track {
    background: #F0DEBB; /* Cor do fundo */
    border-radius: 10px;
}