body {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(14px, 1.5vw, 17px );
    color: #333;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    width: 100%;
}

header {
    height: 100vh;
    width: 100%;
    background: url('./images/header-bg.png') no-repeat;
    background-size: cover;
    padding-left: clamp(20px, 6vw, 160px);
    padding-right: clamp(20px, 3vw, 60px);
    padding-top: 40px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

nav ul{
    display: flex;
    width: 100%;
    padding-right: clamp(0px, 2.5vw, 70px) ;
    font-size: clamp(14px, 1.5vw, 26px);
    font-weight: 500;
    text-transform: uppercase;
    align-items: center;

}

nav li:nth-child(2),
nav li:nth-child(3),
nav li:nth-child(4),
nav li:nth-child(5) {
    margin-left: clamp(10px, 4vw, 40px);
}

nav a:hover {
    text-decoration: underline;
}

nav a:visited {
    text-decoration: underline;
    font-weight: 800;
}

.button {
    font-size: clamp(12px, 1.5vw, 16px);
    border: 1px solid #688b98;
    background-color: #688b98;
    border-radius: 60%;
    padding: 10px 25px;
    
}

.button-1 {
    font-size: 16px;
    border: 1px solid #688b98;
    background-color: #688b98;
    border-radius: 60%;
    padding: 10px 25px;
}

nav .button,
section .button,
.section-1 .button-1 {
    color: #e1f79c;
    text-transform: uppercase;
    font-weight: 500;
}

.button:hover {
    text-decoration: none;
}

.top-button {
    margin-left: auto;
}


.header-container {
    display: flex;  
    column-gap: 10px;
    padding: 100px 0 10px;
    margin: 0;
}

.header-left {
    width: 60%;
    margin-right: auto;
    padding-top: 50px;
}

h1 {
    font-size: clamp(25px, 7vw, 139px);    
    font-family:'Noto Serif Display', serif;
    font-weight: 500;
    line-height: 80%;
}

h2 {
    font-size: clamp(25px, 7vw, 139px);    
    font-family:'Noto Serif Display', serif;
    font-weight: 500;
    line-height: clamp(40px, 12vw, 134px);
}

.header-subtitle {
    color: #688b98;
    font-size: clamp(22px, 2.5vw, 29px);
    padding: 25px 0 15px;
    margin: 0;
}

.header-left-bottom {
    display: flex;
    align-items: center;
    column-gap: 20px;
    width: clamp(16rem, 80vw, 55rem);
    
    
}

.header-button {
    width: clamp(60px, 3vw, 103px);
}

.header-content {
    width: clamp(13rem, 45vw, 27rem);
    font-size: clamp(14px, 2vw, 17px );
    text-align: justify;
}

main {
    width: 100%;
}
/* ---------------------- Section-1 ----------------------*/


.section-1 {
    background: url('./images/section-1-bg.png') no-repeat #fff;
    background-position: top left;
    background-size: cover;
    padding-top:clamp(40px, 10vw, 150px);
    padding-bottom:clamp(60px, 10vw, 150px);
    text-align: center;
    width: 100%;

}

.container-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 50%;
    column-gap: 120px;
    row-gap: 90px;
    margin: auto;
    padding-top: clamp(30px, 10vw, 130px);
    padding-bottom: clamp(70px, 25vw, 130px);
}

.couple {
    position: relative;
    height: clamp(450px, 75vw, 600px);
}

.button-couple {
    position: absolute;
    top: clamp(20rem, 55vw, 27rem);
    left: clamp(12rem, 35vw, 16rem);
    width: clamp(60px, 12vw, 103px);
}

.title-couple {
    font-size:clamp(18px, 3vw, 29px);
    line-height: 41px;
    color: #688b98;
    padding: 15px 0;
    text-align: left;
    display: flex;
}

.title-couple span {
    margin-left: auto;
}


/* ---------------------- Section-2 ----------------------*/

.section-2 {
    background: url('./images/section-2-bg.png') repeat-y;
    background-position: top left;
    background-size: cover;
    display: flex;
    row-gap: 20px;
}

.column-1 {
    width: 40%;
    border-right: 2px solid #313131;
    padding-top: clamp(50px, 12vw, 250px);
    padding-bottom: 50px;

}

.column-1 h2 {
    padding-bottom:clamp(20px, 10vw, 150px);
    padding-left: clamp(15px, 7vw, 134px);
}

.column-1 {
    width: 40%;
}

.column-1 .title-couple {
    border-top: 2px solid #313131;
    padding-left: clamp(15px, 7vw, 134px);
    padding-top: 30px;
    padding-right: 15px;
}

.column-2 {
    width: 55%;
    padding-top: clamp(50px, 12vw, 230px);
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: clamp(20px, 9vw, 117px);
}

.column-2 p {
    width: clamp(9rem, 45vw, 30rem);
    text-align: justify;
}

/* ----------------------- Section-3 ------------------------------------ */



.section-3 {
    background: url('./images/section-3-bg.png') no-repeat #fff;
    background-position: top left;
    background-size: cover;
    padding-top: clamp(50px, 9vw, 164px);
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.section-3 .couple {
    position: relative;
    width: clamp(290px, 90vw, 1176px);
    height: clamp(150px, 45vw, 676px);
    margin: 0 auto;
}


.img-title {
    position: absolute;
    top: clamp(75px, 25vw, 388px);
    left: 7%;
}


.title-couple-white {
    font-size: clamp(18px, 4vw, 29px);
    color: #fff;
    padding-top: clamp(3px, 0.5vw, 30px);
}




/* ---------------------------------- Carousel ----------------------------------*/

.carousel {   
    margin: 0 auto;
    width: 63%;
}

.slider {
    position: relative;
    padding: 70px 60px 0;
}

.slick-track {
    display: flex;  
    min-width: 0;
}

.slick-list {
    overflow: hidden;
}


.slider .slick-arrow {
    position: absolute;
    top: 40%;
    z-index: 10;
    height: 30px;
    width: 45px;
    font-size: 0;
    cursor: pointer;
    
}

.slick-arrow.slick-disabled {
    opacity: 0.2;
}

.slider .slick-arrow.slick-prev {
    left: 0;
    background: url('./images/slider-arrow-left.png') 0 0 / 100% no-repeat;
}

.slider .slick-arrow.slick-next {
    right: 0;
    background: url('./images/slider-arrow-right.png') 0 0 / 100% no-repeat;
}


.slider-couple {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.slider-couple img {
    width: 87%;
}


  /* ----------------------- Section-4 ------------------------------------ */

.section-4 {
    background: url('./images/section-4-bg.png') no-repeat;
    background-position: top left;
    background-size: cover;
    padding-top: clamp(40px, 10vw, 100px);
    padding-bottom: clamp(20px, 1.5vw, 98px);
    padding-left: clamp(30px, 10vw, 130px);
    display: flex;    
    column-gap: 110px;

}

.section-4-cont {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 30%;
    row-gap: 40px;
    padding: 60px 0;
    text-align: justify;
}


.section-4 .banner {
    width: clamp(250px, 55vw, 461px);
    
}



/* ----------------------- Section-5 ------------------------------------ */



.section-5 {
    background: url('./images/section-5-bg.png') no-repeat;
    background-position: top left;
    background-size: cover;
    padding: 125px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery {
    display: flex;
    justify-content: center;
    column-gap: clamp(40px, 5vw, 95px);
    margin: 75px 0;
}

.section-5 .couple {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    
}

.section-5 .button-couple {
    top: 55%;
    left: 50%;
}

.button-couple-big {
    position: absolute;
    top: clamp(0.25rem, 2vw, 3rem);
    width: clamp(60px, 12vw, 103px);
    right: clamp(0.25rem, 2vw, 3rem);
}

.button-couple-small {
    position: absolute;
    top: clamp(1rem, 34vw, 29rem);
    left: clamp(9rem, 10vw, 14rem);
    width: clamp(50px, 7vw, 95px);
}

/* ------------------------ Footer -----------------------*/

footer {
    background-color: #e3f8a3;
    padding-top: 85px;
    padding-bottom: 65px;
    padding-right: 25px;
    padding-left: clamp(20px, 10vw, 134px);
    margin-top: auto;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: clamp(50px, 15vw, 185px);
    padding-bottom: 55px;
}

footer li {
    padding-top: 5px;
}

footer a:hover {
    text-decoration: underline;
}

footer .title-couple a {
    font-weight: bolder;
    width: 10%;
    margin-left: 10px;
}

/* ----------------- Adaptive -------------------------*/


@media (max-width:1024px) {
    .section-4 {
        flex-wrap: wrap;
        align-content: center;
    }

    .section-4-cont{
        padding-top: 25px;
        width: 90%;
    }

    .gallery {
        flex-direction: column;
        justify-content: center;
    }


    .button-couple-small {
        top: clamp(20rem, 4vw, 28rem);
        left: clamp(17rem, 12vw, 10rem);
        width: clamp(60px, 20vw, 103px);
    }

    .button-couple-big {
        top: clamp(38rem, 4vw, 28rem);
        left: clamp(23rem, 12vw, 10rem);
        width: clamp(60px, 20vw, 103px);
    }
}


@media (max-width:600px) {
    nav ul {
        flex-direction: column;
        align-items: flex-end;
        row-gap: 20px;
        
    }

    nav li {
        font-size: clamp(14px, 5vw, 20px);
    }

    nav li:nth-child(6) {
        margin-top: 10px;
    }

    .header-left {
        width: 60%;
    }

    .couple {
        height: clamp(250px, 75vw, 450px);
    }
    
    .button-couple {
        top: clamp(10rem, 55vw, 20rem);
        left: clamp(7rem, 35vw, 13rem);
        width: clamp(40px, 12vw, 70px);
    }

    .button-couple-small,
    .button-couple-big {
        top: clamp(19rem, 95vw, 20rem);
        left: 11rem;
        width: clamp(60px, 24vw, 103px);
    }

    .small {
        width: clamp(310px, 5vw, 150px);
    }
}