/* ==== Estilo Geral ==== */
:root {
    --main-color: #8C2C2E;
    --complementar-color: #EAEAE5;
    --complementar-color2: #F9F7F0;
    --white-text: #ffff;
    --black-text: #674930;
}
.btn-reserva {
    display: inline-flex; /* ou flex */
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--complementar-color);
    color: var(--main-color);
    text-decoration: underline;

    padding: 10px 45px;
    border-radius: 15px;
    font-size: 1.3em;
    font-weight: bolder;
    line-height: 1.1;

    transition: 0.2s;
}

.big {
    transform: scale(1.8);
}
.left, .right {
    width: 50vw;
}
.icon {
    width: 26px;
    filter: invert(1);
}

/* ==== Header ==== */
/* Background Header */
header {
    color: var(--white-text);
    background-color: var(--complementar-color);
}
header>.header-main {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: end;


    height: 70vh;

    background-image: url("/static/imgs/maktubedificio_desktop.png");
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;

}
header .title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding: 0px 80px;
    border-bottom: 2px solid rgb(255, 255, 255);
}
header h1 {
    color: var(--main-color);

    font-size: clamp(3.2em, 4vw, 4em);
}
header p {
    margin-bottom: 30px;
    font-size: clamp(1.7em, 2.8vw, 2.5em);

}

header .button {
    display: flex;
    justify-content: flex-end;
    padding: 60px 190px 60px 0px;
}
header a.btn-reserva {
    transform: scale(1.4);
}

@media (max-width: 768px) {
    header > .header-main {
        height: 65vh;
        background-image: url('/static/imgs/maktubedificio_mobile.png');
    }
    header .button {
        padding: 60px 0px;
    }
    header h1, header p {
        text-align: center;
    }
    header h1 {
        color: var(--complementar-color);
        font-weight: 800;
        text-shadow:     -3px -3px 0 var(--main-color),
     3px -3px 0 var(--main-color),
    -3px  3px 0 var(--main-color),
     3px  3px 0 var(--main-color);;
    }
    header a.btn-reserva {
        margin: auto;
    }
    header a.btn-reserva {
    transform: scale(1.2);
}
}
@media (min-width: 1500px) {
    header>.header-main {
        min-height: 520px;
        height: 100vh;
    }

}
/* Style/Display Header */

/* ==== Main ==== */
main {
    background-color: var(--complementar-color);
    color: var(--white-text);
}
main > section {
    background-color: white;
    max-width: 1600px;
    margin: auto;

    padding: 40px;
}

/* ==== Presentation ==== */
/* Background Presentation */
main>section.presentation {
    padding: 140px 40px;

    background-color: var(--main-color);
    background-image: url("/static/imgs/backgroundimg.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.presentation>div.content {
    display: flex;
    align-items: center;
    margin: auto;

    max-width: 1200px;
}
.presentation h2 {
    font-size: 4em;
    font-weight: 400;
}
.presentation p {
    text-align: justify;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.6;
}
@media (max-width: 768px) {
    .presentation>div.content {
        display: block;
    }
    .presentation h2 {
        font-size: 2.5em;
        margin-bottom: 25px;
    }
}

/* ==== Exibition ==== */
main>section.exibition {
    padding: 0;
}
/* Room Images */
.room>img {
    display: block;
    width: 100%;
}

/* ==== Details ==== */
main>section.details {
    display: flex;


    background-color: var(--complementar-color2);
    color: var(--main-color);
}
.details p {
    color: #674930;
    font-size: clamp(0.95rem, 1.5vw, 1.6rem);
    line-height: 1.6;
}
.details h2 {
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 2.6rem);

    margin-bottom: 25px;
}
.details>div.left, details>div.right {
    padding: 30px clamp(20px, 5vw, 70px);
}
.details>div.left {
    border-right: 2px solid rgb(168, 168, 168);
}
.details ul {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    padding-left: 20px;

}
.details li {
    font-size: clamp(1.1em, 2.5vw, 2.5rem);

    list-style-position: inside;
}
@media (max-width: 768px) {
    main>section.details {
        flex-direction: column;
    }
    .details>div.left, .details>div.right {
        width: 100%;
    }
    .details>div.left {
        margin-bottom: 30px;
        border-right: none;
        border-bottom: 2px solid rgb(168, 168, 168);
    }
    .details li {
        padding-bottom: 15px;
    }
}

/* ==== End ==== */
main>section.end {
    display: flex;

    background-image: url('/static/imgs/footerimg.png');
    background-size: cover;
    background-repeat: no-repeat;

    height: 900px;
    padding: 0;
}
.end h2 {
    font-size: clamp(2.2rem, 6vw, 4em);
    line-height: clamp(1.2em, 5vw, 75px);
    font-weight: 400;

    margin-bottom: 60px;
}
.end>div.left {
    display: flex;
    align-items: end;

    width: 55%;
    padding: 40px;
}
.end>.left p {
    font-size: clamp(1.1rem, 2.2vw, 1.8em);
    margin-bottom: 20px;
}
.end>div.left address {
    font-size: clamp(1.1rem, 2.2vw, 1.8em);
}
.end>div.right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background-color: #9a1e1e94;

    width: 45%;
    padding: 40px;
}
.end>div.right p {
    font-size: clamp(1.4rem, 4vw, 40px);
}
.end>div.right a {
    margin: auto;
    transform: scale(3);
}
@media (max-width: 1300px) {
    .end > div.right a {
        transform: scale(1.7);
    }
    .end h2 {
        margin-bottom: 10px;
    }
}
@media (max-width: 786px) {
    main>section.end {
        flex-direction: column-reverse;
        justify-content: space-between;

        height: 600px;
    }
    .end>div.left, .end>div.right {
        background-color: #9a1e1e94;
        flex: 1;
        width: 100%;
    }
    .end>div.left {
        align-items: center;
        padding: 30px;
    }
    .end>div.right {
        border-bottom: 3px solid rgb(177, 177, 177);
    }
    .end>div.right a {
        transform: scale(1.3);

        margin: 0;
        margin-left: 30px;
    }
    .end>div.right p {
        margin-bottom: 60px;
    }
}


/* ==== Footer ==== */
footer {
    background-color: var(--main-color);
    color: var(--white-text);

    padding: 30px 25px 30px 25px;
}
footer a {
    color: inherit;
}
footer>.top-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 1700px;
    margin: auto;
    padding-bottom: 10px;
}
footer>.top-footer>p {
    text-align: center;
}
footer a.social {
    display: flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;

    padding-bottom: 10px;
}

footer>.bottom-footer>p {
    font-size: 1.4em;
    text-align: center;
}
@media (max-width: 768px) {
    footer a.social {
        font-size: 13px;
    }
    footer>.top-footer>p {
        font-size: 0.9em;
    }
    footer>.bottom-footer>p {
        font-size: 1em;
    }

}