/* Estilos gerais */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    /* justify-content: center; Centraliza horizontalmente */
    /*  align-items: center; Centraliza verticalmente */
}




.slide {
    width: 100%;
    min-height: 758px;
    padding: 4%;
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: cover;
}


.slide-1 {
    background-image: url(images/slide-01-bg.png);
}

.slide-2 {
    background-image: url(images/slide-2.jpg);
    position: relative;
    display: flex;
    justify-content: center;
}

.slide-3 {
    background-image: url(images/slide-3.jpg);
    position: relative;
    display: flex;
    justify-content: center;
    background-position-y: 75%;
}

.slide-3 .container {
    height: fit-content;
}

.slide-3 h1 {
    font-size: clamp(50px, 3.4vw, 15.5vw);
}

.slide-4-bg {
    background-image: url(images/slide-4-bg.jpg);
    position: relative;
    display: flex;
    justify-content: center;
    background-position-y: 60%;
}

.slide-5 {
    background-image: url(images/slide-5.jpg);
    position: relative;
    background-position-y: 61%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-marrom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66, 41, 16, 70%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-vinho {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(58, 16, 3, 80%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-bege {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(239 229 219 / 75%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-branco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255 255 255 / 60%);
    display: flex;
    justify-content: center;
    align-items: center;
}


.bg-1 {
    width: 100%;
    /* Largura 100% da div */
    height: 100%;
    /* Altura 100% da div */
}

.content-slide-1 {
    padding-left: 15%;
}

@font-face {
    font-family: 'Sprite Graffiti';
    src: url('fonts/Sprite\ Graffiti.otf') format('truetype');
}

@font-face {
    font-family: 'HeyGotcha-Regular';
    src: url('fonts/HeyGotcha-Regular.otf') format('truetype');
}

@font-face {
    font-family: 'OpenSauceTwo-Bold';
    src: url('fonts/OpenSauceTwo-Bold.ttf') format('truetype')
}

@font-face {
    font-family: 'OpenSauceTwo-Regular';
    src: url('fonts/OpenSauceTwo-Regular.ttf') format('truetype')
}

@font-face {
    font-family: 'TT Wellingtons Trial Regular';
    src: url('fonts/TT\ Wellingtons\ Trial\ Regular.otf') format('truetype')
}

/* Estilos do texto */
h1 {
    color: rgb(64, 41, 22);
    font-family: Sprite Graffiti;
    font-size: 86px;
    font-weight: normal;
}

h2 {
    color: rgb(64, 41, 22);
    font-family: HeyGotcha-Regular;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    font-size: 36px;

}


.titulo-slide-1,
.titulo-slide-10 {
    margin-bottom: 0px;
}

.titulo-slide-1>span {
    width: min-content;
    display: block;
    font-size: clamp(50px, 4.5vw, 15.5vw);
}

.subtitulo-slide-1 {
    margin-top: 5px;
}

.logo {
    width: 10%;
    min-width: 150px;
    height: auto;
}


.sResistencia {
    width: fit-content;
    padding: 10px;
    border-radius: 40px;
    background-color: rgb(64, 41, 22);
    color: white;
    text-align: center;
    font-family: OpenSauceTwo-Bold;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 24px;
}

.container {
    width: 70%;
    z-index: 2;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.right .textblock {
    display: flex;
    flex-direction: column;
    padding: 10px;
    font-size: clamp(21px, 1.35vw, 36px);
}

.left {
    flex: 1;
}

.topleft h1 {
    font-size: clamp(50px, 4.5vw, 15.5vw);
}

.right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.textblock {
    font-size: large;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: OpenSauceTwo-Regular;
    font-weight: normal;
    color: #efe5db;
    font-size: 28px;
}

.lefttitle {
    color: #efe5db;
    margin-top: 0px;
    margin-bottom: 0px;
}

.round-border {
    border-radius: 40px;
}

.midtop {
    text-align: center;
}

.midtop h1,
.midbot p {
    margin: 0;
}

.midbot {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.blockflex {
    display: block;
}

.botcards {
    width: 100%;
    /* Slightly less than 33.33% to account for margins */
    display: flex;
    gap: 40px;
    justify-content: center;
}

.cardimage {
    border-radius: 40px;
    width: 100%;
    height: 200PX;
    overflow: hidden;
    text-align: center;
}

.cardimage img {
    max-width: 100%;
    position: relative;
    top: -70%;
}

.card {
    max-width: 400px;
    background-color: white;
    border-radius: 40px;
    padding: 20px;
}

.cardtitle {
    color: rgb(64, 41, 22);
    font-family: HeyGotcha-Regular;
    font-weight: normal;
    font-size: xx-large;
    text-align: center;
}

.cardtext {
    font-family: OpenSauceTwo-Regular;
    color: rgb(64, 36, 22);
    text-align: center;
}

.container-4 {
    height: 412px;
    width: 695px;
    background-color: white;
    overflow: hidden;
}

.slide-img-4 {
    /* max-height: 102%; */
    position: relative;
    top: -11%;
}

.slide-5-txt {
    color: rgb(64, 41, 22);
    font-size: 30px;
    font-weight: bold;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.slide-5-txt-container {
    width: 70%;
}

.slide-6 {
    background-image: url(images/slide-6-bg.jpg);
    position: relative;
    background-position-y: 39%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-slide-6 {
    background-color: #402916;
    max-width: 938PX;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    padding: clamp(1px, 3vw, 92px);
}

.title-slide-6 {
    color: #efe5db;
    font-size: 55px;
    margin: 0;
}

.text-slide-6 {
    color: #efe5db;
    font-size: 24px;
    font-family: OpenSauceTwo-Regular;
    /* padding: 10px; */
    /* display: flex; */
    text-align: center;
}

.fix-title {
    padding: 7px;
    padding-top: 0px;
    margin-top: 0;
}

.slide-7 {
    background-image: url(images/slide-7-bg.jpg);
    position: relative;
    background-position-y: 61%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-slide-7 {
    background-color: #efe5db;
    max-width: 938PX;
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    padding: clamp(1px, 3vw, 92px);
}

.title-slide-7 {
    color: #402916;
    font-size: clamp(43px, 4.5vw, 55px);
    margin: 0;
}

.text-slide-7 {
    color: #402916;
    font-size: 24px;
    font-family: OpenSauceTwo-Regular;
    /* padding: 10px; */
    /* display: flex; */
    text-align: center;
}

.slide-8 {
    background-image: url(images/slide-8-bg.jpg);
    position: relative;
    background-position-y: 84%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-9 {
    background-image: url(images/slide-9.jpg);
    position: relative;
    display: flex;
    justify-content: center;
    background-position-y: 22%;
}

.slide-9 .midtop {
    padding-bottom: 60px;
}

.slide-9 h1 {
    color: #efe5db;
    font-size: 50px;
}

.slide-10 {
    background-image: url(images/slide-10.jpg);
    position: relative;
    background-position-y: 38%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.titulo-slide-10 {
    font-size: clamp(57px, 4.5vw, 86px);
}

.container-slide-10 {
    display: flex;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    padding: clamp(1px, 3vw, 92px);
    position: relative;
}

.text-slide-10 {
    color: #402916;
    font-family: OpenSauceTwo-Regular;
    text-align: center;
    font-weight: bold;
    font-size: clamp(16px, 37px, 37px);
    display: flex;
    flex-direction: column;
}

.slide-10-donation-box {
    text-align: center;
    font-size: clamp(22px, 7vw, 70px);
}

.slide-11 {
    width: 100%;
    min-width: 100%;
    display: flex;
    background-color: rgb(239 229 219);
    justify-content: center;
    overflow: hidden;
    flex-wrap: wrap;
}

.card-1-slide-11 {
    width: 369px;
    display: flex;
    flex-direction: column;
}

.card-2-slide-11 {
    max-width: 820px;
}

.slide-11-text {
    color: rgb(64, 41, 22);
    font-family: OpenSauceTwo-Regular;
    font-weight: normal;
    font-size: 18px;
    padding-bottom: 15px;
}

.slide-11-text p {
    font-family: Wellingtons Trial Regular;
    font-weight: bold;
    margin: 0;
}

.slide-5 .midbot,
.slide-5 .midtop {
    height: revert;
}

.slide-5 .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.slide-5 h1 {
    font-size: clamp(34px, 3.4vw, 15.5vw);
}


/* If the screen size is less than 768px, apply these styles */
@media (max-width: 768px) {
    .container {
        width: 100%;
    }

    .flex-container {
        flex-direction: column;
    }

    .slide-5-txt-container {
        width: 100%;
    }

    .right {
        display: block;
    }

    .content-slide-1{
        padding-left: 0;
    }
}