html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Boheme Floral';
    src: url(../fonts/Boheme\ Floral.ttf);
}

@font-face {
    font-family: 'Trajan Pro';
    src: url(../fonts/TrajanPro-Regular.ttf);
}

body {
    font-family: 'Trajan Pro';
    margin: 0 auto;
    max-width: 1440px;
    background-color: #F7F7F7;
}

/* HOME */

.home {
    background: url(../images/home.jpeg) no-repeat center 0;
    background-size: cover;
    font-family: "Jost";
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    height: 96vh;
    position: relative;
}

.home .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    z-index: 1;
}


.home .menu .desktop-menu {
    display: flex;
    gap: 25px;
}

.home .menu .desktop-menu a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 45px;
    padding: 5px;
    transition: 0.4s;
}

.home .menu .desktop-menu li a:hover {
    color: #969E75;
}

.home .menu .open-menu {
    display: none;
    font-size: 1.4em;
    cursor: pointer;
    color: #ffffff;
    padding: 8px;
    border-radius: 3px;
}

.home .menu .mobile-menu {
    background-color: #dcdcdc;
    width: 250px;
    height: 100vh;
    padding: 30px 20px;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    transition: 0.6s;
}

.home .menu .mobile-menu li:nth-child(1) {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 5px;
}

.home .menu .mobile-menu .close-menu {
    color: #587046;
    font-size: 1.2em;
    padding: 5px;
    cursor: pointer;

}

.home .menu .mobile-menu a {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;
    padding: 5px;
    transition: 0.4s;
}

.hidden {
    display: none;
}

.active {
    display: block;
}

.home .info-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 10%;
    color: #ffffff;
}

.home .info-home .vetor-titulo-desktop {
    max-width: 500px;
    position: absolute;
    bottom: 50%;
    transform: translateX(-65%);
}

.home .info-home h1 {
    font-family: "Boheme Floral";
    font-size: 140px;
    transform: translateX(40%);
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 10px;
}

.home .info-home span {
    font-size: 16px;
    line-height: 34px;
}

.home .info-home p {
    font-size: 14px;
    line-height: 34px;
}

/* SEÇÃO CHAMADA */

.chamada {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    background: url(../images/coqueiro.png) no-repeat 35% 84%;
    background-size: 180px;
    text-align: center;
    padding: 60px 0;
    text-transform: uppercase;
    color: #7A7C6C;
}

.chamada h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
    margin-bottom: 15px;
}

.chamada h2::first-letter {
    font-size: 28px;
}

.chamada p {
    font-size: 18px;
    font-weight: 400;
    line-height: 31px;
    letter-spacing: 1.5px;
    max-width: 700px;
}

.chamada span {
    font-size: 24px;
    font-weight: 400;
    line-height: 31px;
    max-width: 620px;
}

.chamada .tempo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0 20px;
    color: #A3A590;
}

.chamada .tempo h3 {
    font-size: 34px;
    font-weight: 400;
    line-height: 31px;
    margin-bottom: 40px;
}

.chamada .tempo h3::first-letter {
    font-size: 40px;
}

.chamada .tempo .temporizador {
    display: flex;
    gap: 20px;
}

.chamada .tempo .temporizador .tempo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.chamada .tempo .temporizador .tempo-item span {
    font-size: 56px;
    font-weight: 400;
    line-height: 31px;
}

.chamada .tempo .temporizador .tempo-item p {
    font-size: 18px;
    font-weight: 400;
    line-height: 31px;
    text-transform: uppercase;
}

/* SEÇÃO PROGRAMAÇÃO */

.programacao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background-color: #FFFDF7;
    padding: 60px 0;
    margin: 0 10%;
    color: #587046;
}

.programacao h2 {
    font-size: 40px;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.programacao h2::first-letter {
    font-size: 48px;
}

.programacao .eventos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    width: 80%;
    background: url(../images/linha.png) no-repeat 50%;
    background-size: contain;
}

.programacao .eventos .evento {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 430px;
}

.programacao .eventos .evento:nth-child(1) {
    margin-right: 55%;
    align-items: end;
    text-align: end;
}

.programacao .eventos .evento:nth-child(2) {
    margin-left: 420px;
    max-width: 330px;
}

.programacao .eventos .evento:nth-child(3) {
    margin-right: 40%;
    max-width: 240px;
}

.programacao .eventos .evento:nth-child(4) {
    margin-left: 55%;
    max-width: 380px;
}

.programacao .eventos .evento h3 {
    font-size: 34px;
    font-weight: 400;
    line-height: 120%;
    max-width: 380px;
    text-transform: uppercase;
}

.programacao .eventos .evento:nth-child(4) h3 {
    max-width: 330px;
}

.programacao .eventos .evento h3::first-letter {
    font-size: 40px;
}

.programacao .eventos .evento .dia {
    font-size: 18px;
    text-transform: uppercase;
}

.programacao .eventos .evento .data {
    font-size: 26px;
    font-weight: 700;
    color: #A3A590;
}

.programacao .eventos .evento .hora {
    font-size: 18px;
}

.programacao .eventos .evento p {
    font-size: 16px;
    line-height: 150%;
    max-width: 430px;
}

.programacao .eventos .evento p span {
    font-weight: 700;
}

.programacao .eventos .evento img {
    max-width: 120px;
}

/* SEÇÃO COMO CHEGAR */

.como-chegar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
    color: #696A65;
    margin: 60px 0;
}

.como-chegar h2 {
    font-family: "Cormorant Garamond";
    font-size: 44px;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.como-chegar h2::first-letter {
    font-size: 52px;
}

.como-chegar h3 {
    font-size: 22px;
    font-weight: 700;
    max-width: 60%;
}

.como-chegar p {
    font-size: 18px;
    line-height: 31px;
    max-width: 60%;
}

.como-chegar a {
    color: #ffffff;
    background-color: #A3A590;
    font-family: "Jost";
    font-size: 18px;
    line-height: 100%;
    padding: 10px 50px;
    border-radius: 20px;
    transform: translateY(-20px);
    transition: 0.8s;
}

.como-chegar a:hover {
    color: #A3A590;
    background-color: #ffffff;
    border: 1px solid #A3A590;
}

.como-chegar img {
    max-width: 60%;
    margin-top: 40px;
}

/* SEÇÃO DICAS */

.dicas {
    background-color: #FFFDF7;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    margin: 0 15%;
}

.dicas h2 {
    font-family: "Cormorant Garamond";
    font-size: 38px;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: #587046;
    margin-bottom: 40px;
}

.dicas h2::first-letter {
    font-size: 46px;
}

.dicas .container-dicas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px 40px;
    max-width: 800px;
}

.dicas .container-dicas img {
    width: 200px;
}

.dicas .container-dicas a {
    transition: 0.6s;
}

.dicas .container-dicas a:hover {
    transform: scale(1.08);
}

/* SEÇÃO RSVP */

.rsvp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 60px 0;
}

.rsvp .container-rsvp {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #A3A590;
    padding: 80px 20% 40px;
    text-align: center;
    color: #ffffff;
}

.rsvp .container-rsvp h2 {
    font-family: "Cormorant Garamond";
    font-size: 50px;
    font-weight: 400;
    line-height: 100%;
}

.rsvp .container-rsvp form {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-transform: uppercase;
}

.rsvp .container-rsvp form input[type="text"] {
    font-size: 16px;
    font-weight: 400;
    line-height: 31px;
    background: none;
    border: none;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 20px;
    transition: 0.8s;
}

.rsvp .container-rsvp form input[type="text"]::placeholder {
    font-family: 'Jost';
    color: #ffffff;
    padding-left: 5px;
}

.rsvp .container-rsvp form label {
    cursor: pointer;
    margin-bottom: 5px;
}

.rsvp .container-rsvp form label input {
    padding-left: 5px;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.rsvp .container-rsvp form label .checkmark {
    display: inline-block;
    height: 15px;
    width: 15px;
    background-color: #ffffff00;
    border: 1px solid #ffffff;
    margin-right: 2px;
    vertical-align: middle;
    transition: all 0.8s ease;
}

.rsvp .container-rsvp form label .checkmark:after {
    content: "";
    display: none;
    margin-left: 4px;
    margin-top: 1px;
    width: 2px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);

}

.rsvp .container-rsvp form label input:checked~.checkmark:after {
    display: block;
}

.rsvp .container-rsvp form input[type="submit"] {
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    background-color: #ffffff;
    border: none;
    color: #626262;
    padding: 10px 30px;
    border-radius: 20px;
    cursor: pointer;
    margin: 20px auto 0;
    transition: 0.8s;
}

.rsvp .container-rsvp form input[type="submit"]:hover {
    transform: scale(1.1);
    background-color: #A3A590;
    color: #ffffff;
    border: 1px solid #ffffff;
}

/* SEÇÃO PRESENTES */

.presentes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 60px 0;
}

.presentes h2 {
    font-family: "Cormorant Garamond";
    font-size: 40px;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: #587046;
    margin-bottom: 20px;
}

.presentes h2::first-letter {
    font-size: 48px;
}

.presentes div {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.presentes div a {
    font-family: "Inter";
    font-size: 16px;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    background-color: #A3A590;
    padding: 20px 45px;
    color: #ffffff;
    cursor: pointer;
    transition: 0.8s;

}

.presentes div a:hover {
    transform: scale(1.1);
    background-color: #ffffff;
    color: #A3A590;
    border: 1px solid #A3A590;
}

/* FOOTER */

.coqueiro {
    display: flex;
    justify-content: center;
    margin: 10% 0 5%;
}

.coqueiro img {
    max-width: 20%;
}