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

/* --- CORE PAGE SETUP --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100vw; /* Use viewport width for full screen */
    height: 100vh; /* Use viewport height for full screen */
    overflow: hidden; /* **CRUCIAL:** Prevents scrollbars from appearing */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    font-family: sans-serif; /* A fallback font */
}


/* Navigation Bar Background */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    /* Existing styles remain */
    /*1background-color: rgba(25, 25, 35, 0.95);*/ /* Very dark, almost black, with slight transparency */
    /*2background: linear-gradient(to right, rgba(93, 76, 177, 0.85), rgba(126, 90, 203, 0.85));*/ /* A deep, rich purple to lighter purple gradient with slight transparency */
    /* 1background-color: rgba(0, 0, 0, 0.4); Removed */
    /*1box-shadow: 0 4px 15px rgba(0, 255, 255, 0.15);*/ /* Subtle teal glow for shadow */
    background: linear-gradient(to right, #050D1A, #101F3E); /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /* #050D1A: A near-black, deepest possible blue. */
    /* #101F3E: A rich, very dark blue, still far from classic indigo. */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Enhanced shadow for maximum depth and impact */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: nowrap;
    z-index: 1000;
    box-sizing: border-box;
    display: flex;
}

/*nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);*/ /* Semi-transparent black background */
    /*display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: nowrap;
    z-index: 1000;
    box-sizing: border-box;
}*/


/* --- NAVIGATION BAR --- */
/*nav {
    position: fixed;*/ /* Keep nav fixed at the top */
/*top: 0;
    width: 100%;*/ /* Full width of the viewport */
/*z-index: 1000;*/ /* Ensure nav is on top of ALL content */
/*background-color: rgba(0, 0, 0, 0.7);*/ /* Example: semi-transparent background */
/*display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;*/ /* Include padding in the width */
}

/* Ensure no conflicting .logo if you have one in the nav */
nav .logo {
    display: none; /* If there's a logo in the nav, make sure it's handled separately */
}

/*Right Slide menu Hamburger*/
.nav-links {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
}

    /* ======= Styles for the navigation links in general =======  */
    .nav-links a,
    .dropdown-btn {
        color: #fff; /* Example: default white text */
        text-decoration: none;
        padding: 8px 12px;
        display: block;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        white-space: nowrap;
        font-size: 15px;
    }

        .nav-links a:hover,
        .dropdown-btn:hover {
            background: rgba(255, 255, 255, 0.2); /* Lighter background on hover */
            border-radius: 4px;
        }

        /* Your existing general hover rule (keep this for other links) */
        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.15); /* Lighter transparency on hover */
            border-radius: 4px;
        }


/* Add this NEW, HIGHLY SPECIFIC rule for the Affiliate dropdown button */
nav .nav-links .dropdown .dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.15); /* Match the hover background of Travel Guide */
    border-radius: 4px;
    /* You can try adding !important here as a last CSS resort if needed,
       but typically very specific selectors are enough. Use with caution. */
    /* background: rgba(255, 255, 255, 0.15) !important; */
}

/* NEW: Style for the active/clicked state of the dropdown button */
.nav-links .dropdown-btn.active-click-state {
    background: rgba(255, 255, 255, 0.15); /* Same as your hover background */
    border-radius: 4px;
    /* You might want a slightly stronger visual cue if it's "active" vs "hover" */
    /* For example: */
    /* box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.3); */
}



    /* Ensure default link color is still white for readability */
    .nav-links a,
    .dropdown-btn {
        color: #fff; /* Ensure text is white against the dark background */
    }

        /* --- Styles for the ACTIVE navigation link --- */
        /*.nav-links a.active-page {*/
        /*background-color: #ff6a00;*/ /* Keep your blue background */
        /*color: rgba(255, 255, 255, 0.9);*/ /* White with 90% opacity (10% transparent) */
        /*font-weight: bold;
            border-bottom: 2px solid rgba(255, 255, 255, 0.7);*/ /* Optional: make border transparent too */
        /*}*/

        /*.nav-links a.active-page {*/
        /* background-color: #007bff;*/
        /*color: rgba(255, 255, 255, 0.7);*/ /* White with 70% opacity (30% transparent) */
        /*font-weight: bold;
            border-bottom: 2px solid rgba(255, 255, 255, 0.5);
        }*/

        /*.nav-links a.active-page {*/
        /*background-color: #f0f0f0;*/ /* Example: A light grey active background */
        /*color: rgba(0, 0, 0, 0.8);*/ /* Black with 80% opacity */
        /*font-weight: bold;*/
        /*border-bottom: 0px solid rgba(0, 0, 0, 0.6);*/
        /* }*/


        /* Active Menu Item */
        /*.nav-links a.active-page {*/
            /*1background: rgba(0, 255, 255, 0.1);*/ /* Very subtle teal background */
            /*background: rgba(0, 255, 255, 0.2);*/ /* Very subtle teal background */
            /*1color: #00FFFF;*/ /* Bright teal text */
            /*color: #fff;*/ /* White text for active */
            /*font-weight: bold;
            border-bottom: 3px solid rgba(255, 255, 255, 0.7);*/ /* A more prominent white border */
            /*border-radius: 0px;*/ /* Slightly rounded corners */
            /*1border-bottom: 2px solid #00FFFF;*/ /* Bright teal border */
            /*1border-radius: 2px;*/
            /*1text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);*/ /* Glowing text effect */
        /*}*/

        /* Active Menu Item */
        .nav-links a.active-page {
            background: rgba(255, 255, 255, 0.25); /* Subtle transparent white background for active */
            color: #FFF; /* Pure white text for excellent contrast */
            font-weight: bold;
            /*border-bottom: 3px solid #00E5FF;*/ /* A vibrant electric blue/cyan for a sharp, modern pop */
            border-radius: 2px; /* Soft rounded corners */
        }


        /* Hover State for all links */
        .nav-links a:hover,
        .dropdown-btn:hover {
            /*1background: rgba(0, 255, 255, 0.05);*/ /* Even more subtle teal background on hover */
            /*1border-radius: 2px;*/
            background: rgba(255, 255, 255, 0.15); /* Slightly lighter background on hover */
            border-radius: 0px;
        }




        /*.nav-links a.active-page {
            background: rgba(255, 255, 255, 0.2);*/ /* Lighter background on hover */
            /*background-color: #007bff;*/ /* Assuming you want to keep your blue background for the active state */
            /*color: rgba(80, 0, 0, 0.8);*/ /* <--- Your new midnight red transparent text color */
            /*color: rgba(70, 130, 180, 0.8);*/ /* <--- Your new darker blue transparent text color */
            /*font-weight: bold;
            border-bottom: 2px solid rgba(80, 0, 0, 0.6);*/
            /*border-bottom: 2px solid rgba(135, 206, 235, 0.6);*/ /* Optional: make border transparent too */
        /*}*/

    /* For the dropdown button, if it's supposed to be active when one of its sub-links is */
    /* This is a more advanced scenario, for now, focus on direct links */ /*Affiliate menu - green background*/
.nav-links .dropdown-btn {
    /*        .nav-links .dropdown-btn.active-page*/
    background-color: transparent;
    /* background-color: #007bff;*/
    color: #ffffff;
    font-weight: normal;
    border-bottom: 0px solid #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease; /* Ensure transition is here */
}

    /* Make sure the active state overrides the hover if both happen */
    .nav-links .dropdown-btn.active-click-state:hover {
        background: rgba(255, 255, 255, 0.2); /* Slightly darker on hover if active */
    }

    /* Optional: Keep the mouse hover effect if you want it *in addition* to the click state */
    .nav-links .dropdown-btn:hover {
        background: rgba(255, 255, 255, 0.15); /* This is for mouse hover */
        border-radius: 4px;
    }

@media screen and (max-width: 900px) {
    .nav-links a,
    .dropdown-btn {
        font-size: 14px;
        padding: 8px 10px;
    }

    nav {
        flex-wrap: nowrap;
    }
}

/*Drop-Down Menu*/
.dropdown {
    position: relative;
    display: inline-block;
}


/* Dropdown Menu Background */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    width: auto; /* Change to auto width */
    border-radius: 0 0 0 0;
    z-index: 1000;
    
    /* Updated Glassy Background with Transparent Linear Gradient */
    /* Glassy Background with Transparent Linear Gradient (Left to Right) */
    background: linear-gradient(to right, rgba(5, 13, 26, 2.95), /* #050D1A with 95% opacity (starts on the left) */
    rgba(16, 31, 62, 0.5) /* #101F3E with 10% opacity (ends on the right) */
    );
    backdrop-filter: blur(10px) saturate(150%); /* Increased blur and saturation for a more pronounced glassy effect */
    -webkit-backdrop-filter: blur(10px) saturate(150%); /* For Safari support */
    border: 0px solid rgba(255, 255, 255, 0.1); /* Subtle white border for a defined glass edge */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); /* Enhanced shadow for maximum depth and impact */
    /*background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95),*/ /* Start: Black with 80% opacity */
    /*rgba(255, 255, 255, 0.1)*/ /* End: Light White with 10% opacity */
    /*);*/
    /*background: linear-gradient(to right, #050D1A, #101F3E); */ /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /*background: linear-gradient(to right, rgba(5, 13, 26, 0.7),*/ /* Start: Your deepest blue with 70% opacity */
    /*rgba(16, 31, 62, 0.5)*/ /* End: Lighter deep blue with 50% opacity */
    /*);*/
    /*backdrop-filter: blur(10px) saturate(150%);*/ /* Increased blur and saturation for a more pronounced glassy effect */
    /*-webkit-backdrop-filter: blur(10px) saturate(150%);*/ /* For Safari support */
    /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /* Subtle white border for a defined glass edge */
    /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);*/ /* Enhanced shadow for maximum depth and impact */
    /*background: linear-gradient(to right, #050D1A, #101F3E);*/ /* Extremely dark navy/blue to a slightly lighter, deep blue */
    /* #050D1A: A near-black, deepest possible blue. */
    /* #101F3E: A rich, very dark blue, still far from classic indigo. */
    /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5); */ /* Enhanced shadow for maximum depth and impact */
    /*1background-color: rgba(25, 25, 35, 0.98);*/ /* Matches the primary nav bar color, less transparent */
    /*1backdrop-filter: blur(8px);*/ /* Increased blur */
    /*1box-shadow: 0 2px 10px rgba(0, 255, 255, 0.25);*/ /* Teal glow for dropdown */
}

/*.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    width: auto;*/ /* Change to auto width */
    /*border-radius: 0 0 5px 5px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    white-space: nowrap;*/ /* Prevent wrapping of dropdown menu items */
    /*background: rgba(20, 20, 20, 0.95);
            min-width: 100%;
            width: 100%;*/
/*}*/

    .dropdown-menu a {
        display: block;
        padding: 10px;
        color: white;
        text-decoration: none;
        white-space: nowrap;
        
    }

.dropdown.open .dropdown-menu {
    display: block;
}

/* Hamburger styles */
.hamburger {
    display: none; /* Hidden by default on larger screens */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto; /* Move hamburger to the right */
    padding: 5px; /* Add some padding for easier clicking */
}

    .hamburger .bar {
        height: 4px;
        width: 30px;
        /*background-color: white;*/
        margin: 1px 0;
        border-radius: 2px;
        background-color: white; /* Initial color of the bars */
        transition: 0.4s; /* Smooth transition for the animation */
    }

    /* Hamburger active state (forms red X) */
    .hamburger.active .top {
        /* transform: rotate(45deg) translate(5px, 5px);*/
        transform: rotate(45deg) translate(10px, 10px);
        background-color: #e63946; /* Red color when active */
    }

    .hamburger.active .middle {
        opacity: 0; /* Middle bar disappears */
    }

    .hamburger.active .bottom {
        transform: rotate(-45deg) translate(4px, -6px);
        background-color: #e63946; /* Red color when active */
    }

/* =======  Close Button styles (Solid Red &#39;X&#39;) =======  */
.close-btn {
    display: none; /* Initially hidden on all screens */
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: #e63946; /* **SET COLOR TO RED** */
    font-size: 25px;
    cursor: pointer;
    z-index: 1003;
    padding: 5px;
}

    .close-btn.show {
        display: block; /* Show only when the mobile menu is active */
    }

    .close-btn:hover {
        color: #cc2936; /* Slightly darker red on hover for visual feedback (optional) */
    }

@media screen and (max-width: 768px) {
    .hamburger {
        display: flex; /* Show hamburger on small screens */
    }


    /*HERE IS THE DROPDOWN_MENU WHEN MINIMZE INTO SMALL DEVICES*/
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 57px;
        right: -100%; /* Hidden off-screen by default */
        /*background: linear-gradient(to right, #050D1A, #101F3E);*/ /* Extremely dark navy/blue to a slightly lighter, deep blue */
        /*background: rgba(0, 0, 0, 0.95);*/ /*black transparency*/
        /* ----- UPDATED BACKGROUND FOR TRANSPARENCY ----- */
        /* Option 1: Solid Dark Blue with Transparency */
        /* Glassy Background Effect */
        /*background-color: rgba(5, 13, 26, 0.7);*/ /* A slightly transparent version of your deepest blue */
        /* Glassy Background Effect with Linear Gradient */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95), /* Start: Black with 80% opacity */
        rgba(255, 255, 255, 0.1) /* End: Light White with 10% opacity */
        );
        /*backdrop-filter: blur(10px) saturate(180%);*/ /* Blur the content behind, and make it a bit more vibrant */
        /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/ /* For Safari support */
        border: 0px solid rgba(255, 255, 255, 0.1); /* Subtle white border for a more defined glass edge */
        border-radius: 0px; /* Slightly rounded corners can enhance the glassy look */
        /*backdrop-filter: blur(10px) saturate(180%);*/ /* Blur the content behind, and make it a bit more vibrant */
        /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/ /* For Safari support */
        /*border: 1px solid rgba(255, 255, 255, 0.1);*/ /* Subtle white border for a more defined glass edge */
        /*border-radius: 0px;*/ /* Slightly rounded corners can enhance the glassy look */
        /*background: rgba(0, 0, 0, 0.55);*/
        /*background-color: rgba(5, 13, 26, 0.9);*/
        /* A slightly transparent version of your deepest blue */
        /*backdrop-filter: blur(8px);*/ /* Optional: Adds a subtle blur effect to content behind it */
        /* Option 2: Gradient Dark Blue with Transparency (More advanced, but keeps the gradient feel) */
        /* If you want to keep the linear gradient effect with transparency: */
        /* background: linear-gradient(to right, rgba(5, 13, 26, 0.9), rgba(16, 31, 62, 0.9)); */
        /* backdrop-filter: blur(8px); /* Optional: Adds a subtle blur effect */
        /* background: rgba(0, 0, 0, 0.95); /* <-- REMOVE THIS LINE, as it's black transparency */
        /* background: linear-gradient(to right, #050D1A, #101F3E); /* <-- REMOVE THIS LINE, as it's fully opaque */
        width: 225px; /* Width of the slide-out menu */
        height: 550px;
        padding: 20px 15px 15px 15px;
        transition: right 0.3s ease-in-out;
        gap: 8px;
        overflow-y: auto; /* Enable scrolling for long menus */
        z-index: 1002; /* Ensure it's above the video */
    }

        .nav-links.active {
            right: 0; /* Slides into view */
        }

    .close-btn {
        display: block; /* Show the close button when the mobile menu is active */
    }

    .dropdown-menu {
        position: relative;
        background-color: #111;
        /*background: linear-gradient(to bottom, rgba(0, 0, 0, 1.95),*/ /* Start: Black with 80% opacity */
        /*rgba(255, 255, 255, 0.1)*/ /* End: Light White with 10% opacity */
        /*);*/
        width: 100%;
        min-width: 100%;
        left: 0;
        top: auto;
    }

    .nav-links a, .dropdown-btn {
        width: 100%;
    }
}

/* You might want to adjust the 'max-width' value based on your specific breakpoints */
/* For example, for even smaller phones, you might use: */

@media (max-width: 480px) {
    .nav-links {
        height: 550px;
    }
}


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    display: none;
}

    #overlay.show {
        display: block;
    }

body.light-theme {
    background-color: #f0f0f0;
    color: #222;
}

    body.light-theme nav {
        background-color: #eee;
        color: #000;
    }

    body.light-theme .nav-links a,
    body.light-theme .dropdown-btn,
    body.light-theme .theme-toggle {
        color: #000;
    }

    body.light-theme .dropdown-menu {
        background-color: #ddd;
    }



/* ======== Style the container/contact section ======= */
.containertwo {
    border-radius: 5px;
    background-color: transparent;
    padding: 10px;
    width: 100%;
    margin-top: 175px;
}

/* --- Responsive Image Styling --- */
.responsive-image {
    max-width: 100%; /* Ensures the image doesn't exceed its parent's width */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes extra space below the image */
    margin: 0 auto; /* Centers the image if it's smaller than its container */
    padding: 15px; /* Add some padding around the image */
}

/* Optional: Add a media query for very small screens if you want specific adjustments */
@media (max-width: 576px) {
    .responsive-image {
        /* You can add more specific styles for extra small devices here if needed */
        /* For example, if you want a smaller max-width percentage: */
        /* max-width: 90%; */
    }
}



/* Mobile view */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
    }

    .nav-links {
        position: absolute;
        top: 60px;
        right: 0;
        background: #fff;
        flex-direction: column;
        width: 200px;
        padding: 1rem;
        box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }

        .nav-links.active {
            transform: translateX(0);
        }
}