/* --- CSS RESET & VARIABLES --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --soft-blue: #C1EBE9;
            --deep-marine: #28396C;
            --editorial-burgundy: #6E1A37;
            --sand-bg: #EEE0CC;
            --soft-cream-card: #FFF6DE;
            --dark-accent: #7B2525;
            --white: #FFFFFF;
            
            --ff-heading: 'Fjalla One', sans-serif;
            --ff-body: 'Figtree', sans-serif;
        }

        body {
            font-family: var(--ff-body);
            background-color: var(--white);
            color: var(--editorial-burgundy);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* --- TYPOGRAPHY UTILITIES --- */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--ff-heading);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 400;
        }

        p {
            font-weight: 300;
            font-size: 1.05rem;
        }

        /* --- HEADER & NAVIGATION --- */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 55px;
            background-color: var(--soft-blue);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 4rem;
            border-bottom: 1px solid rgba(40, 57, 108, 0.1);
        }

.logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    cursor:pointer;
}

.logo img{
    display:block;
    height:148px;      /* adjust as needed */
    width:auto;
    object-fit:contain;
}        /* Desktop Nav */
        .nav-links {
            display: flex;
            gap: 3rem;
            list-style: none;
        }

        .nav-links a {
            font-family: var(--ff-body);
            font-weight: 400;
            font-size: 0.85rem;
            color: var(--deep-marine);
            text-decoration: none;
            letter-spacing: 2px;
            text-transform: uppercase;
            position: relative;
            padding-bottom: 4px;
            cursor: pointer;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background-color: var(--deep-marine);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Mobile Hamburger & Responsive Menu */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            background: none;
            border: none;
            z-index: 1001;
        }

        .hamburger span {
            width: 25px;
            height: 2px;
            background-color: var(--deep-marine);
            transition: all 0.3s ease;
        }

        /* Toggle animation classes */
        .hamburger.active span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        @media (max-width: 992px) {
            header {
                padding: 0 2rem;
            }
            .hamburger {
                display: flex;
            }
            .nav-links {
                position: fixed;
                top: 55px;
                right: -100%;
                width: 100%;
                height: calc(100vh - 55px);
                background-color: var(--soft-blue);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3rem;
                transition: right 0.4s ease;
                z-index: 999;
            }
            .nav-links.active {
                right: 0;
            }
            .nav-links a {
                font-size: 1.5rem;
            }
        }

        /* --- PAGES FUNCTIONAL SWITCH --- */
        .page {
            display: none;
            padding-top: 55px;
        }
        .page.active-page {
            display: block;
        }

        /* --- HOME PAGE SECTIONS --- */
        
        /* HERO SECTION */
        .hero {
            height: 100vh;
            display: flex;
            width: 100%;
        }
        .hero-left {
            width: 35%;
            background-color: var(--white);
            padding: 6rem 4rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .hero-left h1 {
            font-size: 4rem;
            line-height: 1.1;
            color: var(--editorial-burgundy);
            margin-top: 2rem;
        }
        .hero-narrative {
            max-width: 90%;
            font-size: 1.1rem;
            color: var(--editorial-burgundy);
        }
        .hero-right {
            width: 65%;
            background-image: url('https://i.pinimg.com/736x/0f/24/a5/0f24a5d31d709863cbcd0dbe838311f7.jpg');
            background-size: cover;
            background-position: center;
        }

        @media (max-width: 992px) {
            .hero { flex-direction: column; height: auto; }
            .hero-left { width: 100%; padding: 4rem 2rem; gap: 3rem; }
            .hero-right { width: 100%; height: 60vh; }
            .hero-left h1 { font-size: 3rem; }
        }

        /* SECTION 2: FEATURED DESTINATIONS */
        .featured-destinations {
            background-color: var(--soft-blue);
            padding: 8rem 4rem;
        }
        .section-top-layout {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 6rem;
            gap: 4rem;
        }
        .section-top-layout h2 {
            font-size: 3rem;
            width: 40%;
        }
        .section-top-layout p {
            width: 50%;
            font-size: 1.2rem;
        }

        .destination-block {
            position: relative;
            width: 100%;
            height: 75vh;
            margin-bottom: 8rem;
            padding: 0 4rem;
        }
        .destination-block:last-child {
            margin-bottom: 0;
        }
        .db-image {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }
        .db-card {
            position: absolute;
            top: 4rem;
            right: 8rem;
            background-color: var(--white);
            padding: 3rem;
            max-width: 400px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.05);
        }
        .db-card h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        @media (max-width: 992px) {
            .featured-destinations { padding: 4rem 2rem; }
            .section-top-layout { flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
            .section-top-layout h2, .section-top-layout p { width: 100%; }
            .destination-block { padding: 0; height: 60vh; margin-bottom: 4rem; }
            .db-card { position: relative; top: 0; right: 0; max-width: 100%; padding: 2rem; }
        }

        /* SECTION 3: OCEAN STORIES */
        .ocean-stories {
            background-color: var(--white);
            padding: 8rem 4rem;
            display: flex;
            gap: 6rem;
            align-items: center;
        }
        .stories-left {
            width: 40%;
        }
        .stories-left h2 {
            font-size: 3.5rem;
            margin-bottom: 2rem;
            line-height: 1.1;
        }
        .stories-left p {
            font-size: 1.15rem;
            margin-bottom: 1.5rem;
        }
        .stories-right {
            width: 60%;
        }
        .stories-img-wrapper {
            width: 100%;
            height: 70vh;
            background-image: url('https://i.pinimg.com/736x/d1/78/aa/d178aac96cf62053d6fba0715d700ca5.jpg');
            background-size: cover;
            background-position: center;
        }

        @media (max-width: 992px) {
            .ocean-stories { flex-direction: column; padding: 4rem 2rem; gap: 3rem; }
            .stories-left, .stories-right { width: 100%; }
            .stories-left h2 { font-size: 2.5rem; }
            .stories-img-wrapper { height: 45vh; }
        }

        /* SECTION 4: WHY TRAVEL DIFFERENTLY */
        .why-travel {
            background-color: var(--sand-bg);
            padding: 8rem 4rem;
        }
        .why-top {
            margin-bottom: 6rem;
        }
        .why-top h2 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }
        .why-top blockquote {
            font-family: var(--ff-body);
            font-style: italic;
            font-size: 1.4rem;
            opacity: 0.85;
        }
        .why-grid {
            display: grid;
            grid-template-columns: repeat(2, 11fr);
            gap: 4rem 6rem;
        }
        .grid-block h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(110, 26, 55, 0.2);
            padding-bottom: 0.5rem;
        }

        @media (max-width: 992px) {
            .why-travel { padding: 4rem 2rem; }
            .why-top { margin-bottom: 3rem; }
            .why-top h2 { font-size: 2.5rem; }
            .why-grid { grid-template-columns: 1fr; gap: 3rem; }
        }

        /* SECTION 5: IMMERSIVE COASTLINE (PARALLAX EFFECT) */
        .immersive-coastline {
            height: 120vh;
            background-image: url('https://i.pinimg.com/736x/79/6b/aa/796baa61c08f3fd98f207f2c9928a45b.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Overriding parallax behavior on devices that handle background-attachment poorly */
        @media (max-width: 1024px) {
            .immersive-coastline {
                background-attachment: scroll;
                height: 60vh;
            }
        }

        /* SECTION 6: TRAVEL ESSENTIALS */
        .travel-essentials {
            background-color: var(--white);
            padding: 8rem 4rem;
        }
        .essentials-top {
            margin-bottom: 5rem;
            max-width: 600px;
        }
        .essentials-top h2 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
        }
        .essentials-cards {
            display: grid;
            grid-template-columns: repeat(3, 11fr);
            gap: 3rem;
        }
        .essential-card {
            background-color: var(--soft-cream-card);
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 420px;
        }
        .essential-card h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        .essential-card p {
            margin-bottom: 3rem;
        }
        .essential-img-frame {
            width: 70px;
            height: 70px;
            background-size: cover;
            background-position: center;
        }

        @media (max-width: 992px) {
            .travel-essentials { padding: 4rem 2rem; }
            .essentials-top h2 { font-size: 2.5rem; }
            .essentials-cards { grid-template-columns: 1fr; gap: 2rem; }
            .essential-card { min-height: auto; }
        }

        /* SECTION 7: JOURNEY NOTES */
        .journey-notes {
            background-color: var(--soft-blue);
            padding: 8rem 4rem;
            display: flex;
            gap: 6rem;
        }
        .notes-left {
            width: 35%;
            position: sticky;
            top: 100px;
            height: fit-content;
        }
        .notes-left h2 {
            font-size: 3.5rem;
            margin-bottom: 2rem;
            line-height: 1.1;
        }
        .notes-right {
            width: 65%;
            display: flex;
            flex-direction: column;
            gap: 6rem;
        }
        .note-card {
            background-color: var(--white);
            padding: 4rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }
        .note-card h3 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }
        .note-card p {
            margin-bottom: 3rem;
        }
        .visual-frame {
            width: 100%;
            height: 250px;
            border: 1px dashed var(--editorial-burgundy);
            opacity: 0.4;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .visual-frame::before {
            content: 'VISUAL DIARY ENTRY';
            font-family: var(--ff-heading);
            font-size: 0.9rem;
            letter-spacing: 2px;
        }

        @media (max-width: 992px) {
            .journey-notes { flex-direction: column; padding: 4rem 2rem; gap: 4rem; }
            .notes-left { width: 100%; position: relative; top: 0; }
            .notes-left h2 { font-size: 2.5rem; }
            .notes-right { width: 100%; gap: 3rem; }
            .note-card { padding: 2rem; }
        }

        /* SECTION 8: THE HORIZON */
        .the-horizon {
            height: 100vh;
            background-image: url('https://i.pinimg.com/736x/72/36/cb/7236cbf634c29c682c83b0a046469dbd.jpg');
            background-attachment: fixed;
            background-position: center;
            background-size: cover;
            position: relative;
            padding: 6rem;
        }
        .horizon-card {
            position: absolute;
            top: 6rem;
            right: 6rem;
            background-color: var(--soft-cream-card);
            color: var(--dark-accent);
            padding: 4rem;
            max-width: 450px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }
        .horizon-card h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }

        @media (max-width: 992px) {
            .the-horizon { padding: 2rem; height: 70vh; background-attachment: scroll; }
            .horizon-card { top: 2rem; right: 2rem; left: 2rem; max-width: none; padding: 2rem; }
            .horizon-card h2 { font-size: 2rem; }
        }

        /* --- EDITORIAL BRAND STORY (ABOUT) --- */
        .editorial-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 8rem 4rem;
        }
        .about-hero {
            text-align: center;
            margin-bottom: 6rem;
        }
        .about-hero h1 {
            font-size: 4.5rem;
            margin-bottom: 2rem;
        }
        .about-hero p {
            font-size: 1.4rem;
            max-width: 800px;
            margin: 0 auto;
        }
        .editorial-section {
            display: flex;
            gap: 6rem;
            align-items: center;
            margin-bottom: 8rem;
        }
        .editorial-section.reverse {
            flex-direction: row-reverse;
        }
        .edi-text {
            width: 50%;
        }
        .edi-text h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        .edi-img {
            width: 50%;
            height: 500px;
            background-size: cover;
            background-position: center;
        }

        @media (max-width: 992px) {
            .editorial-container { padding: 4rem 2rem; }
            .about-hero h1 { font-size: 3rem; }
            .editorial-section, .editorial-section.reverse { flex-direction: column; gap: 3rem; margin-bottom: 5rem; }
            .edi-text, .edi-img { width: 100%; }
            .edi-img { height: 350px; }
        }

        /* --- DESTINATIONS JOURNAL --- */
        .journal-block {
            margin-bottom: 10rem;
        }
        .journal-block:last-child {
            margin-bottom: 0;
        }
        .journal-hero-img {
            width: 100%;
            height: 75vh;
            background-size: cover;
            background-position: center;
            margin-bottom: 3rem;
        }
        .journal-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        .journal-content h2 {
            font-size: 3rem;
            margin-bottom: 1.5rem;
        }
        .journal-content p {
            font-size: 1.15rem;
            margin-bottom: 2rem;
            text-align: justify;
        }
        .insights-box {
            border-left: 3px solid var(--editorial-burgundy);
            padding-left: 2rem;
            margin-top: 3rem;
        }
        .insights-box h4 {
            font-family: var(--ff-heading);
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        @media (max-width: 992px) {
            .journal-block { margin-bottom: 6rem; }
            .journal-hero-img { height: 50vh; }
            .journal-content h2 { font-size: 2.2rem; }
        }

        /* --- CONTACT PAGE --- */
        .contact-split {
            display: flex;
            min-height: calc(100vh - 55px);
        }
        .contact-left {
            width: 45%;
            background-color: var(--sand-bg);
            padding: 8rem 4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .contact-left h1 {
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 2rem;
        }
        .contact-right {
            width: 55%;
            padding: 8rem 6rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: var(--white);
        }
        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
            width: 100%;
            max-width: 600px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .form-group label {
            font-family: var(--ff-heading);
            font-size: 1rem;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .form-group input, .form-group textarea, .form-group select {
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--editorial-burgundy);
            padding: 0.8rem 0;
            font-family: var(--ff-body);
            font-size: 1.1rem;
            color: var(--editorial-burgundy);
            outline: none;
        }
        .form-group textarea {
            height: 120px;
            resize: none;
        }
        .submit-btn {
            align-self: flex-start;
            background-color: var(--editorial-burgundy);
            color: var(--white);
            border: none;
            font-family: var(--ff-heading);
            font-size: 1.1rem;
            padding: 1rem 3rem;
            letter-spacing: 2px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-transform: uppercase;
        }
        .submit-btn:hover {
            background-color: var(--dark-accent);
        }

        @media (max-width: 992px) {
            .contact-split { flex-direction: column; }
            .contact-left, .contact-right { width: 100%; padding: 4rem 2rem; }
            .contact-left h1 { font-size: 2.8rem; }
        }

        /* --- PRIVACY & TERMS --- */
        .legal-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 8rem 2rem;
        }
        .legal-container h1 {
            font-size: 3.5rem;
            margin-bottom: 3rem;
            text-align: center;
        }
        .legal-section {
            margin-bottom: 3rem;
        }
        .legal-section h2 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        .legal-section p {
            margin-bottom: 1rem;
            text-align: justify;
        }

        /* --- FOOTER --- */
        footer {
            background-color: var(--soft-blue);
            color: var(--deep-marine);
            padding: 6rem 4rem 3rem 4rem;
            border-top: 1px solid rgba(40, 57, 108, 0.1);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr repeat(3, 11fr);
            gap: 4rem;
            margin-bottom: 4rem;
        }
        .footer-col h4 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: var(--deep-marine);
        }
        .footer-col p {
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .footer-col ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        .footer-col ul li a {
            color: var(--deep-marine);
            text-decoration: none;
            font-size: 0.95rem;
            cursor: pointer;
        }
        .footer-col ul li a:hover {
            text-decoration: underline;
        }
        .footer-divider {
            border: none;
            border-top: 1px solid rgba(40, 57, 108, 0.2);
            margin-bottom: 2rem;
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            opacity: 0.8;
        }

        @media (max-width: 992px) {
            footer { padding: 4rem 2rem 2rem 2rem; }
            .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
            .footer-bottom { flex-direction: column; gap: 1rem; }
        }
        .newsletter-col p{
    margin-bottom:1rem;
    line-height:1.7;
}

.newsletter-form{
    display:flex;
    flex-direction:column;
    gap:0.75rem;
}

.newsletter-form input{
    padding:0.9rem 1rem;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.05);
    color:inherit;
    outline:none;
    border-radius:4px;
}

.newsletter-actions{
    display:flex;
    gap:0.75rem;
}

.newsletter-actions button{
    padding:0.85rem 1.2rem;
    border:none;
    cursor:pointer;
    border-radius:4px;
    font-size:0.85rem;
}

.newsletter-actions button:first-child{
    background:#28396C;
    color:#fff;
}

.newsletter-actions button:last-child{
    background:transparent;
    border:1px solid #28396C;
    color:#28396C;
}

#newsletterMessage{
    margin-top:0.75rem;
    font-size:0.85rem;
}