:root {
            --color-dark-blue: #001f3f;       /* Primary Base (Deep Navy) */
            --color-primary-accent: #ffbd59;  /* Primary Interaction/Hover Accent (Gold/Amber) */
            --color-light-accent: #ffc97d;    /* Lighter shade of primary accent for hover effects */
            --color-medium-blue: #004aad;     /* Secondary Accent 2 (Reserved for future use) */
            --color-menu-button-bg: #ffffff;  /* White background for the MENU button */
            --color-menu-button-text: #001f3f; /* Dark text for MENU button */
            --color-signup-teal: #00bfa6; /* Requested color for Sign Up */
        }

body {
    font-family: 'Poppins', sans-serif;
    background-color: #FFFFFF;
}

/* ==================== Navbar ==================== */
.navbar {
background-color: #ffffff;
transition: background-color 0.3s ease, box-shadow 0.4s ease;
border-bottom: 1px solid #e0e0e0; 
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
padding-top: 8px; 
padding-bottom: 8px; 
}
.navbar.scrolled {
background-color: #ffffff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
}

/* --- LOGO FONT STYLES --- */
.logo-main {
font-family: 'Poppins', sans-serif; 
font-weight: 800; 
font-size: 2.2rem;
letter-spacing: -0.04em; 
color: var(--color-dark-blue);
line-height: 1;
text-transform: capitalize; 
}
.logo-sub {
font-family: 'Poppins', sans-serif; 
font-size: 0.75rem;
font-weight: 500; 
letter-spacing: 0.12em; 
color: var(--color-dark-blue);
display: block;
margin-top: -0.2rem; 
text-transform: uppercase; 
}

/* === Premium CTA Button (Metallic Gradient) === */
.cta-button-mobile {
background: linear-gradient(145deg, var(--color-primary-accent) 0%, var(--color-light-accent) 100%);
color: var(--color-dark-blue); 
box-shadow: 0 4px 10px rgba(255, 189, 89, 0.4); 
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.cta-button-mobile:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 15px rgba(255, 189, 89, 0.6);
}

/* --- UNIFIED PILL STYLES --- */
.unified-menu-pill-container {
height: 44px;
border-radius: 9999px; 
background-color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
border: 2px solid transparent; 
display: flex;
align-items: center; 
overflow: hidden; 
}

.unified-menu-pill-container:hover {
box-shadow: 0 4px 12px rgba(255, 189, 89, 0.4);
border-color: var(--color-primary-accent);
}

#profile-link {
width: 36px; 
height: 36px; 
border-radius: 9999px;
background-color: var(--color-dark-blue);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem; 
margin-left: 2px; 
flex-shrink: 0;
transition: background-color 0.2s ease;
cursor: pointer; /* Added for button appearance */
border: none; /* Added for button appearance */
}

#profile-link:hover {
background-color: var(--color-primary-accent);
color: var(--color-dark-blue);
}

#menu-toggle-button {
height: 100%;
border: none;
background: none;
cursor: pointer;
padding: 0 1.25rem 0 0.75rem; 
color: var(--color-dark-blue);
font-weight: 700;
transition: color 0.2s ease;
}

#menu-toggle-button:hover {
color: var(--color-primary-accent);
}

/* === Menu Modal Styling (Hiding and Appearance) - UNCHANGED === */
.menu-modal-overlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
opacity: 0; visibility: hidden; 
transition: opacity 0.3s ease, visibility 0s 0.3s; 
background-color: rgba(0, 0, 0, 0.6); 
z-index: 9999;
display: flex; justify-content: center; align-items: center;
padding-top: 60px; 
padding-bottom: 30px; 
}
.menu-modal-overlay.is-open {
opacity: 1; visibility: visible;
transition: opacity 0.3s ease; 
}
.menu-modal-content {
background-color: #ffffff;
border-radius: 1.5rem; 
width: 90%; 
max-width: 550px; 
max-height: 85vh; 
overflow-y: auto;
transform: scale(0.9); transition: transform 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
padding-top: 1rem; 
}
.menu-modal-overlay.is-open .menu-modal-content {
transform: scale(1);
}

/* Menu View Containers */
.menu-view {
transition: opacity 0.3s ease;
}


/* Style for the close button that is outside the modal content */
#close-menu-modal, #close-connect-modal {
position: fixed;
top: 1rem; 
right: 1rem;
color: #ffffff; 
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10000; 
opacity: 0;
transition: opacity 0.3s ease;
}
.menu-modal-overlay.is-open #close-menu-modal, 
.menu-modal-overlay.is-open #close-connect-modal {
opacity: 1;
}
#close-menu-modal:hover, #close-connect-modal:hover {
background-color: rgba(0, 0, 0, 0.6);
}


/* === Connect Now Section (3 Columns) - UNCHANGED === */
.connect-now-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); 
gap: 0.75rem;
}
.connect-btn {
background-color: #f3f4f6;
color: var(--color-dark-blue);
font-weight: 500;
padding: 0.75rem 0.5rem; 
border-radius: 0.75rem;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.75rem; 
min-height: 80px;
}
.connect-btn:hover {
background-color: var(--color-primary-accent);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(255, 189, 89, 0.2);
}
.connect-btn i {
font-size: 1.3rem;
margin-bottom: 0.3rem;
}

/* === Modal Navigation Links Hover (Yellow/Gold) - UNCHANGED === */
.modal-nav-link:hover {
    background-color: #f3f4f6;
}
.modal-nav-link:hover, .modal-nav-link:hover i {
color: var(--color-primary-accent) !important;
}

/* Dropdown links hover */
.modal-nav-dropdown-menu a:hover {
background-color: #f3f4f6;
}
.modal-nav-dropdown-menu a:hover, .modal-nav-dropdown-menu a:hover i {
color: var(--color-primary-accent) !important;
}

/* Services Dropdown Toggle Hover */
.modal-nav-link-dropdown:hover {
background-color: #e5e7eb;
}
.modal-nav-link-dropdown:hover .fa-chevron-right, 
.modal-nav-link-dropdown:hover .fa-concierge-bell,
.modal-nav-link-dropdown:hover span {
color: var(--color-primary-accent) !important;
}


/* === Social Media Links (Single Row Scrollable) - Centered === */
.social-item-container {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
transition: transform 0.2s ease;
width: 65px; 
flex-shrink: 0; 
padding-top: 4px; 
}

.social-item-container:hover {
transform: translateY(-4px); 
}

.social-circle-icon {
width: 40px; 
height: 40px;
border-radius: 50%;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 0.25rem;
font-size: 1rem; 
transition: box-shadow 0.2s ease;
}
.social-item-container:hover .social-circle-icon {
box-shadow: 0 6px 12px rgba(255, 189, 89, 0.4);
}

.social-name-text {
font-size: 0.65rem; 
font-weight: 600;
color: var(--color-dark-blue);
line-height: 1.2;
text-align: center;
transition: color 0.2s ease;
}
.social-item-container:hover .social-name-text {
color: var(--color-primary-accent); 
}

/* Specific Brand Colors for the circle background */
.social-facebook .social-circle-icon { background-color: #1877F2; }
.social-tiktok .social-circle-icon { background-color: #000000; } 
.social-instagram .social-circle-icon { background-color: #c13584; } 
.social-youtube .social-circle-icon { background-color: #FF0000; }
.social-viber .social-circle-icon { background-color: #665CAC; }
.social-pinterest .social-circle-icon { background-color: #E60023; }


/* === Dropdown Selectors (Used only in Modal) - UNCHANGED === */
.dropdown-container {
position: relative;
z-index: 20; 
}
.dropdown-button {
width: 100%;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 0.75rem;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
color: var(--color-dark-blue);
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.dropdown-button:hover {
border-color: var(--color-primary-accent);
box-shadow: 0 0 0 2px rgba(255, 189, 89, 0.2);
}
.dropdown-button i {
color: var(--color-dark-blue);
transition: color 0.2s ease;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 0.75rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 50;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
max-height: 250px;
overflow-y: auto;
}
.dropdown-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
display: block;
padding: 0.75rem 1rem;
color: var(--color-dark-blue);
font-weight: 400;
cursor: pointer;
}
.dropdown-menu a:hover {
background-color: #f3f4f6;
color: var(--color-primary-accent); 
}

.modal-nav-link-dropdown {
background-color: #f3f4f6; 
color: var(--color-dark-blue);
font-weight: 500;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}

.modal-nav-dropdown-menu {
margin-top: 0.25rem;
padding: 0.5rem 0;
background-color: #ffffff;
border-radius: 0.75rem;
box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
display: none;
overflow: hidden;
}
.modal-nav-dropdown-menu.is-open {
display: block;
}
.modal-nav-dropdown-menu a {
padding: 0.5rem 1.5rem 0.5rem 3.5rem; 
display: flex;
align-items: center;
gap: 1rem;
}

/* ========================================================================= */
/* LUXURY LIGHT LOGIN VIEW STYLES (Updated V10) */
/* ========================================================================= */

.luxury-login-card {
background-color: #ffffff; 
padding: 2.5rem;
border-radius: 1.5rem;
box-shadow: 0 15px 50px rgba(0, 31, 63, 0.15); 
border: 1px solid #f0f0f0; 
}

/* Update the existing input-field for a modern look */
.input-field {
width: 100%;
padding: 0.85rem 1rem; 
border: 1px solid #dcdcdc; 
border-radius: 0.75rem;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background-color: #ffffff;
}

select.input-field{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23001f3f'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1em;
}

.input-field:focus {
outline: none;
border-color: var(--color-primary-accent); 
box-shadow: 0 0 0 3px rgba(255, 189, 89, 0.4); 
}

/* Update the primary login button */
.login-btn {
background: linear-gradient(90deg, var(--color-dark-blue) 0%, #003366 100%); 
color: white;
padding: 0.9rem; 
border-radius: 0.75rem;
font-weight: 700; 
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 31, 63, 0.3); 
border: 2px solid transparent; 
}
.login-btn:hover {
background: linear-gradient(90deg, #003366 0%, #004aad 100%);
box-shadow: 0 6px 20px rgba(0, 31, 63, 0.4), 0 0 0 4px var(--color-primary-accent); 
transform: translateY(-2px);
}

/* --- Social Login Buttons (UPDATED V10: Logo Left, Text Center) --- */
.social-login-btn {
display: flex;
align-items: center;
justify-content: center; /* Center the content */
width: 100%;
padding: 0.85rem; 
border-radius: 0.75rem;
font-weight: 600;
transition: all 0.3s ease;
border: 1px solid #dcdcdc; 
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); 

/* Required for positioning the icon/svg */
position: relative; 
gap: 0;
padding-left: 0; 
}

/* Pin the icon or SVG absolutely to the left */
.social-login-btn i, .social-login-btn .google-logo-svg { 
position: absolute; 
left: 1.5rem; /* Standard spacing from the left edge */
font-size: 1.125rem; /* For the i tag */
z-index: 10;
}

/* Set specific SVG dimensions to match the icon size */
.social-login-btn .google-logo-svg {
width: 1.125rem; 
height: 1.125rem;
}

/* Style adjustments for specific brand colors */
.social-login-btn.facebook i {
color: #1877F2; /* Facebook Blue - Original color */
}
/* Removed .social-login-btn.google i color definition, as the SVG handles its own colors */

.social-login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--color-primary-accent); 
background-color: #f7f9fb; 
}

/* General White/Dark Text Styling */
.social-login-btn.facebook, .social-login-btn.google {
background-color: white; 
color: var(--color-dark-blue);
}

/* --- NEW: Gender Selection Buttons --- */
.gender-button {
background-color: #f7f9fb;
border: 1px solid #dcdcdc;
color: var(--color-dark-blue);
padding: 0.75rem 1rem;
border-radius: 0.75rem;
font-weight: 500;
transition: all 0.2s ease;
}
.gender-button.selected {
background-color: var(--color-primary-accent);
color: var(--color-dark-blue);
border-color: var(--color-primary-accent);
box-shadow: 0 0 0 2px rgba(255, 189, 89, 0.4);
}
.gender-button:not(.selected):hover {
background-color: #eeeeee;
border-color: #b0b0b0;
}

/* --- NEW LUXURY CHECKBOX STYLES --- */
.luxury-checkbox {
/* Hide default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Custom size and shape */
width: 22px;
height: 22px;
border: 1px solid var(--color-dark-blue); /* Dark Blue Border */
border-radius: 6px; /* Slightly rounded corners */
flex-shrink: 0;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
background-color: #ffffff;
/* Vertical alignment correction */
margin-top: 1px;
}

.luxury-checkbox:hover {
border-color: var(--color-primary-accent); /* Gold border on hover */
box-shadow: 0 0 0 4px rgba(255, 189, 89, 0.2);
}

.luxury-checkbox:checked {
background-color: var(--color-primary-accent); /* Solid Gold background when checked */
border-color: var(--color-primary-accent);
box-shadow: 0 2px 5px rgba(255, 189, 89, 0.4); /* Subtle shadow for depth */
}

/* Custom checkmark using a pseudo-element (Font Awesome Checkmark) */
.luxury-checkbox:checked::after {
content: '\f00c'; /* Font Awesome check icon */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--color-dark-blue); /* Dark checkmark color */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
}

/* ==================== Custom Mobile Overrides (<= 425px) ==================== */
@media (max-width: 425px) {
    /* Reduce Logo Size for smaller screens */
    .logo-main {
        font-size: 1.8rem; /* Smaller Jaros text */
    }
    .logo-sub {
        font-size: 0.6rem; /* Smaller 'TRAVEL & TOURS' text */
    }

    /* Make Call Us button smaller (px-3 py-1.5, text-xs) */
    .cta-button-mobile {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-top: 0.375rem !important;
        padding-bottom: 0.375rem !important;
        font-size: 0.75rem !important; /* text-xs */
    }
    /* Reduce gap between icon and text */
    .cta-button-mobile > i {
        margin-right: 0.125rem;
    }

    /* Make Unified Pill smaller (smaller height, font, and padding) */
    .unified-menu-pill-container {
        height: 38px; /* Reduced height from 44px */
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); /* Lighter shadow */
    }
    /* Adjust profile link size inside the pill */
    #profile-link {
        width: 32px; /* Reduced width from 36px */
        height: 32px; /* Reduced height from 36px */
        font-size: 0.9rem; /* Smaller icon */
        margin-left: 1px; /* Tighter spacing */
    }
    /* Adjust Menu button size/padding */
    #menu-toggle-button {
        padding: 0 0.85rem 0 0.65rem; /* Reduced horizontal padding */
        font-size: 0.8rem; /* Smaller MENU text */
    }
}