/*========================
    GLOBAL STYLES
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#faf7f2;

    color:#333;

    overflow-x:hidden;

}

/*========================
      NAVIGATION
=========================*/

header{

    position:absolute;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

}

.navbar{

    width:90%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 0;

}

.logo h2{

    color:#fff;

    font-size:32px;

    font-family:'Cormorant Garamond',serif;

    letter-spacing:2px;

}

.navbar ul{

    display:flex;

    list-style:none;

    gap:35px;

}

.navbar ul li a{

    text-decoration:none;

    color:white;

    font-size:15px;

    transition:.3s;

}

.navbar ul li a:hover{

    color:#d8b15d;

}

.nav-btn{

    text-decoration:none;

    color:white;

    border:1px solid #d8b15d;

    padding:12px 26px;

    border-radius:40px;

    transition:.4s;

}

.nav-btn:hover{

    background:#d8b15d;

    color:#222;

}

/*========================
        HERO
=========================*/

.hero{

    height:100vh;

    background:url(images/hero.jpg);

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(20,18,16,.45);

}

.hero-content{

    position:relative;

    text-align:center;

    color:white;

    z-index:2;

}

.hero-content h3{

    color:#d8b15d;

    letter-spacing:4px;

    font-weight:300;

    margin-bottom:15px;

}

.hero-content h1{

    font-size:90px;

    font-family:'Cormorant Garamond',serif;

    margin-bottom:20px;

}

.hero-content p{

    width:650px;

    max-width:90%;

    margin:auto;

    line-height:1.8;

    margin-bottom:40px;

}

.buttons{

    display:flex;

    gap:20px;

    justify-content:center;

}

.gold-btn{

    background:#d8b15d;

    color:white;

    padding:16px 34px;

    text-decoration:none;

    border-radius:40px;

    transition:.4s;

}

.gold-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.outline-btn{

    border:1px solid white;

    color:white;

    padding:16px 34px;

    border-radius:40px;

    text-decoration:none;

    transition:.4s;

}

.outline-btn:hover{

    background:white;

    color:#222;

}

/*========================
      WELCOME
=========================*/

.welcome{

    width:88%;

    margin:120px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.welcome span{

    color:#b48b36;

    letter-spacing:2px;

    font-size:13px;

}

.welcome h2{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    margin:20px 0;

    color:#392b1c;

}

.welcome p{

    line-height:1.9;

    color:#666;

    margin-bottom:35px;

}

.dark-btn{

    background:#392b1c;

    color:white;

    padding:15px 30px;

    text-decoration:none;

    border-radius:30px;

}

.welcome-image img{

    width:100%;

    border-radius:12px;

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}

/*========================
        CARDS
=========================*/

.cards{

    width:90%;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-bottom:120px;

}

.card{

    overflow:hidden;

    background:white;

    border-radius:15px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.card:hover{

    transform:translateY(-12px);

}

.card img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.6s;

}

.card:hover img{

    transform:scale(1.08);

}

.card-text{

    padding:25px;

}

.card-text h3{

    font-family:'Cormorant Garamond',serif;

    font-size:30px;

    color:#392b1c;

    margin-bottom:10px;

}

.card-text p{

    color:#666;

    line-height:1.6;

}

/*========================
     PHILOSOPHY
=========================*/

.philosophy{

    position:relative;

    background:url(images/philosophy.jpg);

    background-size:cover;

    background-position:center;

    padding:140px 20px;

    text-align:center;

    color:white;

}

.philosophy .content{

    position:relative;

    z-index:2;

}

.philosophy h4{

    color:#d8b15d;

    letter-spacing:4px;

    margin-bottom:20px;

}

.philosophy h2{

    font-family:'Cormorant Garamond',serif;

    font-size:56px;

    margin-bottom:25px;

}

.philosophy p{

    width:700px;

    max-width:90%;

    margin:auto;

    line-height:2;

}

/*========================
        FOOTER
=========================*/

footer{

    background:#221b17;

    color:white;

    text-align:center;

    padding:60px 20px;

}

footer h2{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    margin-bottom:10px;

    color:#d8b15d;

}

footer p{

    margin-top:10px;

    color:#ddd;

}

/*========================
       RESPONSIVE
=========================*/

@media(max-width:1000px){

.cards{

grid-template-columns:repeat(2,1fr);

}

.welcome{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:65px;

}

.navbar{

flex-direction:column;

gap:20px;

}

}

@media(max-width:700px){

.cards{

grid-template-columns:1fr;

}

.hero-content h1{

font-size:50px;

}

.buttons{

flex-direction:column;

align-items:center;

}

.navbar ul{

display:none;

}

.welcome h2{

font-size:42px;

}

.philosophy h2{

font-size:40px;

}

}
/*==========================
        ABOUT PAGE
==========================*/

.about-hero{

height:70vh;

background:url(images/about-hero.jpg);

background-size:cover;

background-position:center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

}

.about-hero h4{

letter-spacing:4px;

color:#d8b15d;

margin-bottom:20px;

}

.about-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:70px;

margin-bottom:25px;

}

.about-story{

width:88%;

margin:120px auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.story-image img{

width:100%;

border-radius:15px;

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.story-text span{

color:#b48b36;

letter-spacing:2px;

}

.story-text h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

margin:20px 0;

color:#392b1c;

}

.story-text p{

line-height:2;

color:#666;

margin-bottom:25px;

}

.values{

padding:120px 8%;

text-align:center;

background:white;

}

.values h5{

color:#b48b36;

letter-spacing:4px;

}

.values h2{

font-size:58px;

font-family:'Cormorant Garamond',serif;

margin:20px 0 60px;

color:#392b1c;

}

.value-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.value-card{

padding:45px;

background:#faf7f2;

border-radius:18px;

transition:.4s;

}

.value-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 35px rgba(0,0,0,.1);

}

.icon{

font-size:50px;

margin-bottom:20px;

}

.value-card h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:15px;

color:#392b1c;

}

.about-banner{

margin:120px 0;

height:500px;

background:url(images/banner.jpg);

background-size:cover;

background-position:center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

}

.banner-content{

position:relative;

z-index:2;

}

.banner-content h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

}

.team{

padding:120px 8%;

text-align:center;

}

.team h5{

color:#b48b36;

letter-spacing:3px;

}

.team h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

margin:20px 0 70px;

}

.team-box{

display:grid;

grid-template-columns:320px 1fr;

gap:60px;

align-items:center;

text-align:left;

}

.team-box img{

width:320px;

height:420px;

object-fit:cover;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.team-box p{

line-height:2;

color:#666;

font-size:17px;

}

.team-box h3{

margin-top:30px;

font-family:'Cormorant Garamond',serif;

color:#b48b36;

font-size:30px;

}

.active{

color:#d8b15d !important;

}

@media(max-width:900px){

.about-story{

grid-template-columns:1fr;

}

.value-grid{

grid-template-columns:1fr;

}

.team-box{

grid-template-columns:1fr;

text-align:center;

}

.team-box img{

margin:auto;

}

.about-hero h1{

font-size:48px;

}

.banner-content h2{

font-size:42px;

}

}
/*=========================
    DESTINATIONS PAGE
=========================*/

.destinations-hero{

height:65vh;

background:url(images/destination-hero.jpg);

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

color:white;

}

.destination-section{

padding:120px 8%;

background:#faf7f2;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

letter-spacing:3px;

color:#b48b36;

}

.section-heading h2{

font-size:60px;

font-family:'Cormorant Garamond',serif;

margin-top:20px;

color:#392b1c;

}

.destination-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.destination-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,.08);

transition:.4s;

}

.destination-card:hover{

transform:translateY(-12px);

}

.destination-card img{

width:100%;

height:260px;

object-fit:cover;

transition:.6s;

}

.destination-card:hover img{

transform:scale(1.08);

}

.destination-info{

padding:30px;

}

.destination-info h3{

font-family:'Cormorant Garamond',serif;

font-size:36px;

color:#392b1c;

margin-bottom:15px;

}

.destination-info p{

color:#666;

line-height:1.8;

margin-bottom:25px;

}

.destination-info a{

color:#b48b36;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.destination-info a:hover{

letter-spacing:1px;

}
/*==========================
     EXPERIENCES PAGE
==========================*/

.experience-hero{

height:65vh;

background:url(images/experience-hero.jpg);

background-size:cover;

background-position:center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:left;

padding:0 8%;

color:white;

}

.experience-title{

padding:90px 8% 40px;

text-align:center;

background:#faf7f2;

}

.experience-title span{

letter-spacing:3px;

color:#b48b36;

font-size:14px;

}

.experience-title h2{

font-size:56px;

font-family:'Cormorant Garamond',serif;

margin-top:15px;

color:#392b1c;

}

.experience-grid{

padding:0 8% 120px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:35px;

background:#faf7f2;

}

.experience-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.experience-card:hover{

transform:translateY(-10px);

}

.experience-card img{

width:100%;

height:240px;

object-fit:cover;

transition:.5s;

}

.experience-card:hover img{

transform:scale(1.08);

}

.experience-content{

padding:28px;

position:relative;

}

.experience-icon{

position:absolute;

top:-25px;

left:25px;

width:55px;

height:55px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

box-shadow:0 10px 20px rgba(0,0,0,.15);

}

.experience-content h3{

margin-top:20px;

font-size:34px;

font-family:'Cormorant Garamond',serif;

color:#392b1c;

}

.experience-content p{

margin:15px 0 20px;

line-height:1.8;

color:#666;

}

.experience-content a{

text-decoration:none;

color:#b48b36;

font-weight:600;

}

.experience-banner{

height:420px;

background:url(images/experience-banner.jpg);

background-size:cover;

background-position:center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

padding:0 20px;

}

.banner-text{

position:relative;

z-index:2;

max-width:700px;

}

.banner-text h2{

font-size:60px;

font-family:'Cormorant Garamond',serif;

margin-bottom:20px;

}

.banner-text p{

margin-bottom:35px;

line-height:1.8;

}

@media(max-width:900px){

.experience-grid{

grid-template-columns:1fr;

}

.banner-text h2{

font-size:42px;

}

}
/*==========================
        BLOG PAGE
==========================*/

.blog-hero{

height:60vh;

background:url(images/blog/blog-hero.jpg);

background-size:cover;

background-position:center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

}

.featured-blog{

width:88%;

margin:100px auto;

display:grid;

grid-template-columns:1.2fr 1fr;

gap:50px;

align-items:center;

}

.featured-image img{

width:100%;

border-radius:18px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.featured-content span{

color:#b48b36;

letter-spacing:3px;

}

.featured-content h2{

font-size:54px;

font-family:'Cormorant Garamond',serif;

margin:20px 0;

color:#392b1c;

}

.featured-content p{

line-height:1.9;

margin-bottom:30px;

color:#666;

}

.featured-content a{

color:#b48b36;

font-weight:600;

text-decoration:none;

}

.blog-grid{

width:88%;

margin:0 auto 120px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.blog-card{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.blog-card:hover{

transform:translateY(-10px);

}

.blog-card img{

width:100%;

height:240px;

object-fit:cover;

transition:.5s;

}

.blog-card:hover img{

transform:scale(1.08);

}

.blog-content{

padding:25px;

}

.blog-content span{

color:#b48b36;

font-size:13px;

letter-spacing:2px;

}

.blog-content h3{

font-family:'Cormorant Garamond',serif;

font-size:32px;

margin:15px 0;

color:#392b1c;

}

.blog-content p{

color:#666;

line-height:1.7;

margin-bottom:20px;

}

.blog-content a{

color:#b48b36;

text-decoration:none;

font-weight:600;

}

.newsletter{

background:#392b1c;

padding:90px 20px;

text-align:center;

color:white;

}

.newsletter h2{

font-family:'Cormorant Garamond',serif;

font-size:52px;

margin-bottom:20px;

}

.newsletter p{

max-width:650px;

margin:0 auto 35px;

line-height:1.8;

}

.newsletter form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter input{

padding:16px 20px;

width:320px;

border:none;

border-radius:50px;

font-size:16px;

}

.newsletter button{

padding:16px 35px;

border:none;

background:#d8b15d;

color:white;

border-radius:50px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.newsletter button:hover{

background:#c49b43;

}

@media(max-width:900px){

.featured-blog{

grid-template-columns:1fr;

}

.featured-content h2{

font-size:42px;

}

}
/*====================================
      REUSABLE PAGE TEMPLATE
====================================*/

.page-hero{

height:60vh;

background:url(images/template-hero.jpg);

background-size:cover;

background-position:center;

position:relative;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

padding:0 20px;

}

.page-hero span{

letter-spacing:4px;

color:#d8b15d;

}

.page-hero h1{

font-size:72px;

font-family:'Cormorant Garamond',serif;

margin:20px 0;

}

.page-hero p{

max-width:700px;

margin:auto;

line-height:1.9;

}

.content-wrapper{

width:88%;

margin:120px auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.content-image img{

width:100%;

border-radius:18px;

box-shadow:0 20px 40px rgba(0,0,0,.1);

}

.content-text span{

color:#b48b36;

letter-spacing:3px;

}

.content-text h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

margin:20px 0;

color:#392b1c;

}

.content-text p{

line-height:2;

color:#666;

margin-bottom:30px;

}

.feature-section{

padding:100px 8%;

background:#faf7f2;

text-align:center;

}

.feature-section h2{

font-size:58px;

font-family:'Cormorant Garamond',serif;

color:#392b1c;

margin-bottom:50px;

}

.feature-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.feature-card{

background:white;

padding:40px;

border-radius:18px;

box-shadow:0 15px 30px rgba(0,0,0,.08);

transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:15px;

color:#392b1c;

}

.feature-card p{

line-height:1.8;

color:#666;

}

.gallery{

padding:100px 8%;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.gallery img{

width:100%;

height:260px;

object-fit:cover;

border-radius:16px;

transition:.35s;

}

.gallery img:hover{

transform:scale(1.04);

}

.quote{

padding:120px 20px;

background:#392b1c;

text-align:center;

color:white;

}

.quote h2{

font-family:'Cormorant Garamond',serif;

font-size:52px;

max-width:900px;

margin:auto;

}

.cta{

padding:120px 20px;

text-align:center;

background:#faf7f2;

}

.cta h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

color:#392b1c;

}

.cta p{

margin:20px auto 40px;

max-width:650px;

color:#666;

line-height:1.8;

}

@media(max-width:900px){

.content-wrapper{

grid-template-columns:1fr;

}

.gallery{

grid-template-columns:repeat(2,1fr);

}

.page-hero h1{

font-size:48px;

}

.feature-section h2,

.cta h2,

.quote h2{

font-size:42px;

}

}

@media(max-width:600px){

.gallery{

grid-template-columns:1fr;

}

}