* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s ease;
}

.travel-guide-landing {
    display: flex;
    flex-direction: column;
    width: 1440px;
    margin: 0 auto;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 120px;
    background-color: rgba(0, 0, 0, 0.4); /* Make header background semi-transparent */
    backdrop-filter: blur(20px);
    width: 100%;
    box-sizing: border-box;
    position: fixed; /* Keep header fixed at the top */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 1440px; /* Constrain fixed header to content width */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for glass effect */
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 600;
    color: #FFFFFF;
    transition: color 0.3s ease;
}

.navContainer {
    display: flex;
    align-items: center;
    gap: 48px;
}

.navContainer a {
    color: #CCCCCC;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover */
    position: relative;
}

.navContainer a::after { /* Underline effect */
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
    transition: width 0.3s ease;
}

.navContainer a:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
}

.navContainer a:hover::after {
    width: 100%;
}

.ctaBtn {
    background-color: #FFFFFF;
    padding: 14px 28px;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.ctaBtn:hover {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

main {
    display: flex;
    flex-direction: column;
    position: relative; /* For absolute positioning of hero elements */
    overflow: hidden; /* Hide overflow from light beams */
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 120px 80px 120px;
    gap: 40px;
    text-align: center;
    position: relative;
    z-index: 1; /* Ensure hero content is above background effects */
}

/* Hero background effects - absolute positioning and styling */
.hero::before { /* heroGlow from .pen */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(170,170,170,0.6) 25%, rgba(255,255,255,0.6) 50%, rgba(204,204,204,0.6) 75%, rgba(136,136,136,0.6) 100%); /* Simulating mesh gradient */
    filter: blur(60px);
    z-index: -1;
}

.heroImageSection {
    position: relative; /* For z-index of images over glassOverlay3 */
}

.heroImageSection::after { /* glassOverlay3 from .pen */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.25) 100%);
    filter: blur(30px);
    z-index: 2; /* Above images */
}

/* Additional hero glass/light elements (placeholder classes for direct mapping from .pen) */
/* These would need corresponding empty divs in HTML, but for now apply to existing structure if possible */
/* Assuming they are meant as background effects, they can be styled on .hero itself or pseudo-elements */

/* For now, I'll add the styles for .glassOverlay1, .heroGlassPanel, .lightBeam1, .reflectionTop
   as if they were present in the HTML. If the user wants them, they would add the empty divs
   with these classes into the index.html */

/* Styles for .glassOverlay1 from .pen file */
.glassOverlay1 { /* O7mve */
    position: absolute;
    top: 10%;
    left: 15%;
    width: 400px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    filter: blur(40px);
    z-index: 0;
}

/* Styles for .heroGlassPanel from .pen file */
.heroGlassPanel { /* QLfjH */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(0deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    backdrop-filter: blur(30px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
}

/* Styles for .lightBeam1 from .pen file */
.lightBeam1 { /* lNW0X */
    position: absolute;
    top: 20%;
    right: 5%;
    width: 200px;
    height: 600px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-15deg);
    filter: blur(40px);
    z-index: 0;
}

/* Styles for .reflectionTop from .pen file */
.reflectionTop { /* 49pHh */
    position: absolute;
    top: 0;
    left: 0;
    width: 800px;
    height: 200px;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 100%);
    z-index: 0;
}


.badge {
    border: 1px solid rgba(255, 255, 255, 0.5); /* Semi-transparent border */
    padding: 8px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px; /* More rounded */
    transition: all 0.3s ease;
    cursor: default;
}

.badge:hover {
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.badgeText {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
}

.heroTitle {
    font-family: 'Playfair Display', serif;
    font-size: 72px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.heroSub {
    color: #CCCCCC;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
}

.heroCtas {
    display: flex;
    gap: 16px;
}

.primaryCta {
    background-color: #FFFFFF;
    padding: 18px 36px;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25); /* Adjusted opacity */
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primaryCta:hover {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.primaryCtaText {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
}

.secondaryCta {
    border: 1px solid rgba(255, 255, 255, 0.5); /* Semi-transparent border */
    padding: 18px 36px;
    background-color: rgba(255, 255, 255, 0.05); /* Lighter transparency */
    backdrop-filter: blur(10px);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.secondaryCta:hover {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

.secondaryCtaText {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
}

.heroImageSection {
    display: flex;
    gap: 24px;
    height: 400px;
    width: 100%;
    position: relative; /* For glassOverlay3 pseudo-element */
    z-index: 1;
}

.heroImageSection::after { /* glassOverlay3 from .pen */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.25) 100%);
    filter: blur(30px);
    z-index: 2; /* Above images */
}

.heroImg {
    flex: 1;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Semi-transparent border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Adjusted opacity */
    border-radius: 8px;
    overflow: hidden;
}

.featuresSection {
    display: flex;
    flex-direction: column;
    padding: 120px;
    gap: 80px;
    background-color: #FFFFFF;
    color: #000000;
}

.featureHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.featureTitle {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.featureSub {
    color: #666666;
    font-size: 18px;
    margin: 0;
}

.featureGrid {
    display: flex;
    gap: 32px;
}

.feature {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 20px;
    align-items: center; /* Center content in feature card */
    text-align: center;
}

.featureIcon {
    width: 56px;
    height: 56px;
    background-color: #000000;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 50%; /* Circular icons */
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 28px; /* Icon size */
}

.featureIcon:hover {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px) scale(1.05);
}

.feature h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 600;
    margin: 0;
}

.featureDesc {
    color: #666666;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.destinationsSection {
    display: flex;
    flex-direction: column;
    padding: 120px;
    gap: 64px;
    background-color: #000000;
    position: relative; /* For destGlow, glassOverlay2, lightBeam2, reflectionDest */
    overflow: hidden;
}

/* Destination section background effects */
.destinationsSection::before { /* destGlow from .pen */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(153,153,153,0.5) 25%, rgba(255,255,255,0.5) 50%, rgba(187,187,187,0.5) 75%, rgba(119,119,119,0.5) 100%); /* Simulating mesh gradient */
    filter: blur(80px);
    z-index: 0;
}

/* These would need corresponding empty divs in HTML, but for now apply to existing structure if possible */
/* Assuming they are meant as background effects, they can be styled on .destinationsSection itself or pseudo-elements */

/* Styles for .glassOverlay2 from .pen file */
.glassOverlay2 { /* q2rkU */
    position: absolute;
    top: 20%;
    right: 10%;
    width: 500px;
    height: 400px;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
    filter: blur(50px);
    z-index: 0;
}

/* Styles for .lightBeam2 from .pen file */
.lightBeam2 { /* FlGxE */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250px;
    height: 700px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(20deg);
    filter: blur(50px);
    z-index: 0;
}

/* Styles for .reflectionDest from .pen file */
.reflectionDest { /* SEz8Q */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 250px;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
    z-index: 0;
}


.destHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    position: relative; /* Ensure text is above background effects */
    z-index: 1;
}

.destTitle {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.destSub {
    color: #CCCCCC;
    font-size: 18px;
    margin: 0;
}

.destGrid {
    display: flex;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.destCard {
    flex: 1;
    display: flex;
    flex-direction: column-reverse;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); /* Adjusted opacity */
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.destCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
}

.destImg {
    height: 480px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.destContent {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.05); /* More subtle background */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Semi-transparent border */
    backdrop-filter: blur(15px);
    margin: 20px; /* To lift it above the image */
    position: relative;
    bottom: 120px;
    margin-bottom: -100px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.destCard:hover .destContent {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}

.destCardTitle {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-style: italic;
    font-weight: 600;
    margin: 0;
}

.destCardDesc {
    color: #CCCCCC;
    font-size: 15px;
    margin: 0;
}

.proofSection {
    display: flex;
    flex-direction: column;
    padding: 100px 120px;
    gap: 64px;
    background-color: #FFFFFF;
    color: #000000;
    align-items: center;
    position: relative; /* For glowStat */
    overflow: hidden;
}

.proofSection::before { /* glowStat from .pen */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 30%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
    filter: blur(60px);
    z-index: 0;
}

.statsRow {
    display: flex;
    justify-content: center;
    gap: 80px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.statNum {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-style: italic;
    font-weight: 600;
}

.statLabel {
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
}

.testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px;
    background-color: rgba(240, 240, 240, 0.8); /* Slightly transparent */
    border: 1px solid rgba(224, 224, 224, 0.5); /* Semi-transparent border */
    width: 800px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 10px;
    backdrop-filter: blur(10px); /* Add glass effect */
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.testimonial:hover {
    background-color: rgba(240, 240, 240, 0.95);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.quote {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

.author {
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.ctaSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px;
    gap: 40px;
    background-color: #000000;
    text-align: center;
    position: relative; /* For ctaGlow, glassAccent1, ctaShine */
    overflow: hidden;
}

/* CTA section background effects */
.ctaSection::before { /* ctaGlow from .pen */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 700px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(170,170,170,0.5) 25%, rgba(255,255,255,0.5) 50%, rgba(187,187,187,0.5) 75%, rgba(153,153,153,0.5) 100%); /* Simulating mesh gradient */
    filter: blur(70px);
    z-index: 0;
}

.glassAccent1 { /* 4SDd4 */
    position: absolute;
    top: 20%;
    left: 10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle at 30% 60%, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    filter: blur(60px);
    z-index: 0;
}

.ctaShine { /* brwpy */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 100px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
    filter: blur(40px);
    z-index: 0;
}


.ctaTitle {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-style: italic;
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 1;
}

.ctaSubtitle {
    color: #CCCCCC;
    font-size: 18px;
    margin: 0;
    position: relative;
    z-index: 1;
}

.ctaButtons {
    display: flex;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.ctaBtn1 {
    background-color: #FFFFFF;
    padding: 20px 40px;
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.3); /* Adjusted opacity */
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ctaBtn1:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.5);
    transform: translateY(-5px);
}

.ctaBtn1Text {
    color: #000000;
    font-size: 16px;
    font-weight: 600;
}

.ctaBtn2 {
    border: 1px solid rgba(255, 255, 255, 0.5); /* Semi-transparent border */
    padding: 20px 40px;
    background-color: rgba(255, 255, 255, 0.05); /* Lighter transparency */
    backdrop-filter: blur(10px);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ctaBtn2:hover {
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
    transform: translateY(-5px);
}

.ctaBtn2Text {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
}

.footer {
    display: flex;
    flex-direction: column;
    padding: 80px 120px 40px 120px;
    gap: 64px;
    background-color: #000000;
    position: relative; /* For background effects */
    overflow: hidden;
}

.footerMain {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    position: relative;
    z-index: 1;
}

.footerBrand {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.footerLogo {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 600;
    color: #FFFFFF;
}

.footerTagline {
    color: #999999;
    font-size: 15px;
    line-height: 1.7;
}

.footerCol {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.footerColTitle {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    color: #FFFFFF;
}

.footerLink, .footerContact {
    color: #999999;
    font-size: 15px;
    text-decoration: none;
    display: block;
}

.footerDivider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.15), rgba(255,255,255,0));
    position: relative;
    z-index: 1;
}

.footerBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.copyright, .privacyLink, .termsLink {
    color: #666666;
    font-size: 14px;
    text-decoration: none;
}

.footerLinks {
    display: flex;
    gap: 32px;
}

.footerLinks a {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footerLinks a:hover {
    color: #FFFFFF;
}