/* =========================
   Basic Reset
========================= */

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


/* =========================
   Body
========================= */

body {
    font-family: Arial, sans-serif;
    background: #f5f2e8;
    color: #333;
}


/* =========================
   Header
========================= */

.site-header {
    text-align: center;
    padding: 30px 20px;

    background: #174a3c;
    color: white;
}

.site-header h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.site-header p {
    font-size: 17px;
}


/* =========================
   Map Section
========================= */

.map-section {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}

.map-section h2 {
    text-align: center;
    margin-bottom: 20px;
}


/* =========================
   Map
========================= */

#map {
    width: 100%;
    height: 650px;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================================
MAP TOGGLE BUTTON
============================================================ */

.map-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

.map-toggle-button {
    padding: 12px 28px;

     border: none;
    border-radius: 30px;

    background: #174a3c;
    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
   
}

.map-toggle-button:hover {
    transform: translateY(-2px);
}

/* ============================================================
INTERACTIVE MAP CTA
============================================================ */

.map-toggle-wrapper {

     display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

    margin: 35px auto;

    padding: 30px 20px;

    max-width: 700px;
    
}

/* ============================================================
MAP CTA NOTE
============================================================ */

.map-toggle-note {

     display: flex;

    align-items: center;

    gap: 18px;

    text-align: left;
    
}

.map-toggle-note-icon {

     display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    font-size: 30px;

    background: #e6f0eb;

    border-radius: 50%;
    
}

.map-toggle-note-content h3 {

     margin: 0 0 6px;

    color: #174a3c;

    font-size: 22px;
   
}

.map-toggle-note-content p {

     margin: 0;

    color: #666;

    font-size: 15px;

    line-height: 1.6;
    
}

/* ============================================================
MAP BUTTON
============================================================ */

.map-toggle-button {

     display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-width: 250px;

    padding: 15px 28px;

    border: none;

    border-radius: 50px;

    background: #174a3c;

    color: white;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(23, 74, 60, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
    
}

/* ============================================================
BUTTON HOVER
============================================================ */

.map-toggle-button:hover {

     transform: translateY(-3px);

    background: #21634f;

    box-shadow:
        0 12px 28px rgba(23, 74, 60, 0.35);
   
}

/* ============================================================
BUTTON ICON
============================================================ */

.map-button-icon {

     font-size: 21px;
   
}

/* ============================================================
BUTTON ARROW
============================================================ */

.map-button-arrow {

     font-size: 22px;

    transition:
        transform 0.25s ease;
    
}

.map-toggle-button:hover .map-button-arrow {

     transform: translateX(5px);
   
}

/* ============================================================
MAP HIDDEN
============================================================ */

.map-section.hidden {

     display: none;
   
}

/* ============================================================
MOBILE
============================================================ */

@media (max-width: 600px) {

    .map-toggle-wrapper {

        padding: 25px 15px;

    }


    .map-toggle-note {

        align-items: flex-start;

    }


    .map-toggle-note-content h3 {

        font-size: 18px;

    }


    .map-toggle-note-content p {

        font-size: 14px;

    }


    .map-toggle-button {

        width: 100%;

        max-width: 320px;

    }

    
}

/* ============================================================
MAP HIDDEN STATE
============================================================ */

.map-section.hidden {
    display: none;
}
/* =========================
   Tourist Popup
========================= */

.tourist-popup {
    width: 260px;
    overflow: hidden;
    border-radius: 10px;
}


/* =========================
   Popup Image
========================= */

.tourist-popup img {
    width: 100%;
    height: 150px;

    object-fit: cover;

    display: block;
}


/* =========================
   Popup Content
========================= */

.popup-content {
    padding: 12px;
}

.popup-content h3 {
    margin-bottom: 5px;

    font-size: 20px;
}

.popup-content h4 {
    margin-bottom: 8px;

    font-weight: normal;

    color: #666;
}

.popup-content p {
    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 12px;
}


/* =========================
   View Details Button
========================= */

.view-details-btn {
    display: inline-block;

    padding: 9px 15px;

    background: #174a3c;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-size: 14px;
}

.view-details-btn:hover {
    background: #226b55;
}

/* ==================================================
   MAP HEADER
================================================== */

.map-header {
    text-align: center;

    margin-bottom: 25px;
}

.map-header h2 {
    font-size: 30px;

    margin-bottom: 8px;
}

.map-header p {
    color: #666;

    font-size: 16px;
}


/* ==================================================
   SEARCH BOX
================================================== */

.map-search {
    max-width: 600px;

    margin: 0 auto 20px;

    position: relative;
}


#placeSearch {
    width: 100%;

    padding: 15px 20px;

    border: 1px solid #ddd;

    border-radius: 30px;

    font-size: 16px;

    outline: none;

    background: white;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.1);
}


#placeSearch:focus {
    border-color: #174a3c;

    box-shadow:
        0 3px 18px rgba(23, 74, 60, 0.2);
}


/* ==================================================
   CATEGORY FILTERS
================================================== */

.category-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

}


.category-btn {

    padding: 10px 18px;

    border: 1px solid #ddd;

    background: white;

    color: #333;

    border-radius: 25px;

    cursor: pointer;

    font-size: 14px;

    transition:
        0.3s ease;
}


.category-btn:hover {

    background: #e9f3ef;

    border-color: #174a3c;

}


.category-btn.active {

    background: #174a3c;

    color: white;

    border-color: #174a3c;

}


/* ==================================================
   SEARCH RESULTS
================================================== */

.search-results {

    max-width: 600px;

    margin: 20px auto;

}


.search-result-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 12px;

    margin-bottom: 10px;

    background: white;

    border-radius: 10px;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.2s ease;
}


.search-result-item:hover {

    transform:
        translateY(-2px);

}


.search-result-item img {

    width: 70px;

    height: 55px;

    object-fit: cover;

    border-radius: 7px;

}


.search-result-info h4 {

    margin-bottom: 5px;

}


.search-result-info p {

    font-size: 13px;

    color: #777;

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .map-header h2 {

        font-size: 24px;

    }


    .category-filters {

        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 8px;

    }


    .category-btn {

        flex-shrink: 0;

    }


    #placeSearch {

        padding: 13px 16px;

    }

}

/* ==================================================
   SEARCH BOX CONTAINER
================================================== */

.map-search {

    max-width: 620px;

    margin: 0 auto 25px;

    position: relative;

    z-index: 1000;

}


/* ==================================================
   SEARCH INPUT WRAPPER
================================================== */

.search-input-wrapper {

    position: relative;

    display: flex;

    align-items: center;

}


/* ==================================================
   SEARCH ICON
================================================== */

.search-icon {

    position: absolute;

    left: 18px;

    top: 50%;

    transform:
        translateY(-50%);

    font-size: 18px;

    pointer-events: none;

    z-index: 2;

}


/* ==================================================
   SEARCH INPUT
================================================== */

#placeSearch {

    width: 100%;

    height: 54px;

    padding:

        0 50px 0 48px;

    border:

        1px solid #ddd;

    border-radius: 28px;

    font-size: 16px;

    outline: none;

    background: #fff;

    box-sizing: border-box;

    box-shadow:

        0 4px 18px rgba(0,
            0,
            0,
            0.10);

    transition:

        0.25s ease;

}


#placeSearch:focus {

    border-color:

        #174a3c;

    box-shadow:

        0 5px 22px rgba(23,
            74,
            60,
            0.18);

}


/* ==================================================
   CLEAR SEARCH BUTTON
================================================== */

.clear-search {

    position: absolute;

    right: 15px;

    top: 50%;

    transform:

        translateY(-50%);

    width: 30px;

    height: 30px;

    border: none;

    border-radius: 50%;

    background: #eee;

    color: #555;

    font-size: 21px;

    line-height: 25px;

    cursor: pointer;

    display: none;

}


.clear-search:hover {

    background: #ddd;

}



/* ============================================================
   PROFESSIONAL SEARCH DROPDOWN
============================================================ */

.search-suggestions {

    position: absolute;

    top: calc(100% + 10px);

    left: 0;

    right: 0;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.18);

    border:
        1px solid #eeeeee;

    display: none;

    max-height: 520px;

    overflow-y: auto;

    z-index: 5000;

}


/* ============================================================
   SEARCH RESULT CARD
============================================================ */

.search-suggestion-item {

    display: flex;

    gap: 15px;

    padding: 14px;

    cursor: pointer;

    border-bottom:
        1px solid #eeeeee;

    transition:
        all 0.2s ease;

}


.search-suggestion-item:hover {

    background:
        #f7faf8;

}


.search-suggestion-item:last-child {

    border-bottom: none;

}


/* ============================================================
   DESTINATION IMAGE
============================================================ */

.suggestion-image-wrapper {

    position: relative;

    width: 90px;

    height: 90px;

    flex-shrink: 0;

}


.suggestion-image-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 12px;

}


/* ============================================================
   FEATURED BADGE
============================================================ */

.featured-badge {

    position: absolute;

    top: 6px;

    left: 6px;

    background:
        rgba(255, 255, 255, 0.95);

    color:
        #b77900;

    padding:
        4px 7px;

    border-radius: 8px;

    font-size: 10px;

    font-weight: 700;

}


/* ============================================================
   DESTINATION INFO
============================================================ */

.suggestion-info {

    flex: 1;

    min-width: 0;

}


.suggestion-title-row {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 10px;

}


.suggestion-info h4 {

    margin: 0;

    font-size: 16px;

    color:
        #1f2933;

}


.suggestion-sinhala {

    margin:
        3px 0;

    font-size: 13px;

    color:
        #777;

}


/* ============================================================
   LOCATION
============================================================ */

.suggestion-location {

    margin:
        7px 0 0;

    font-size: 12px;

    color:
        #666;

}


/* ============================================================
   RATING
============================================================ */

.suggestion-rating {

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    color:
        #b77900;

}


/* ============================================================
   CATEGORY
============================================================ */

.suggestion-category {

    display: inline-block;

    margin-top: 7px;

    padding:
        4px 9px;

    border-radius:
        20px;

    background:
        #e9f4ef;

    color:
        #176044;

    font-size:
        11px;

    font-weight:
        600;

}


/* ============================================================
   ACTION BUTTONS
============================================================ */

.suggestion-actions {

    display: flex;

    gap: 8px;

    margin-top: 10px;

    flex-wrap: wrap;

}


/* ============================================================
   VIEW DETAILS BUTTON
============================================================ */

.view-details-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        7px 12px;

    border-radius:
        8px;

    background:
        #174a3c;

    color:
        #ffffff;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        600;

    transition:
        all 0.2s ease;

}


.view-details-btn:hover {

    background:
        #0e352b;

}


/* ============================================================
   ADD TO TRIP BUTTON
============================================================ */

.add-trip-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        7px 12px;

    border-radius:
        8px;

    border:
        1px solid #e5e5e5;

    background:
        #ffffff;

    color:
        #333333;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

}


.add-trip-btn:hover {

    background:
        #fff5f5;

    border-color:
        #ffcccc;

}


.add-trip-btn.added {

    background:
        #fff0f0;

    border-color:
        #ffcccc;

    color:
        #d64545;

}


/* ============================================================
   NO RESULTS
============================================================ */

.no-search-results {

    padding:
        30px 20px;

    text-align:
        center;

    color:
        #777;

    font-size:
        14px;

}

/* ============================================================
   SEARCH DROPDOWN SCROLLBAR
============================================================ */

.search-suggestions::-webkit-scrollbar {

    width: 7px;

}


.search-suggestions::-webkit-scrollbar-track {

    background:
        #f5f5f5;

}


.search-suggestions::-webkit-scrollbar-thumb {

    background:
        #c9d8d1;

    border-radius:
        10px;

}


.search-suggestions::-webkit-scrollbar-thumb:hover {

    background:
        #9fb8ab;

}


/* ============================================================
   SEARCH RESULT ACTIVE STATE
   Keyboard Navigation සඳහා
============================================================ */

.search-suggestion-item.active {

    background:
        #eef7f2;

    box-shadow:
        inset 4px 0 0 #174a3c;

}


/* ============================================================
   IMAGE FALLBACK
============================================================ */

.suggestion-image-wrapper {

    background:
        #eef2f0;

    overflow:
        hidden;

}


.suggestion-image-wrapper img {

    transition:
        transform 0.3s ease;

}


.search-suggestion-item:hover .suggestion-image-wrapper img {

    transform:
        scale(1.05);

}


/* ============================================================
   NO RESULT ICON
============================================================ */

.no-result-icon {

    font-size:
        32px;

    margin-bottom:
        10px;

}


.no-search-results strong {

    display:
        block;

    color:
        #333;

    font-size:
        15px;

}


.no-search-results span {

    display:
        block;

    margin-top:
        5px;

    font-size:
        12px;

    color:
        #888;

}

/* ============================================================
   SITE HEADER / NAVBAR
============================================================ */

.site-header {

    position: sticky;

    top: 0;

    z-index: 8000;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 14px 5%;

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid #eeeeee;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06);

}


/* ============================================================
   BRAND
============================================================ */

.site-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}


.brand-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background:
        #f7faf8;

    font-size: 26px;

}


.brand-text h1 {

    margin: 0;

    color:
        #174a3c;

    font-size: 20px;

    font-weight: 800;

}


.brand-text p {

    margin: 3px 0 0;

    color:
        #777;

    font-size: 11px;

}


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

.main-navigation {

    display: flex;

    align-items: center;

    gap: 6px;

}


.nav-link {

    padding:
        9px 13px;

    border-radius:
        9px;

    color:
        #555;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        all 0.2s ease;

}


.nav-link:hover {

    background:
        #f1f7f4;

    color:
        #174a3c;

}


.nav-link.active {

    background:
        #e9f4ef;

    color:
        #174a3c;

}


/* ============================================================
   HEADER ACTIONS
============================================================ */

.header-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* ============================================================
   MY TRIP BUTTON
============================================================ */

.my-trip-button {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        10px 14px;

    border:
        1px solid #e5e5e5;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #174a3c;

    font-size:
        13px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

}


.my-trip-button:hover {

    background:
        #f7faf8;

    border-color:
        #cbded4;

    transform:
        translateY(-1px);

}


/* ============================================================
   TRIP COUNTER
============================================================ */

.trip-counter {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        21px;

    height:
        21px;

    padding:
        0 5px;

    border-radius:
        50px;

    background:
        #174a3c;

    color:
        #ffffff;

    font-size:
        10px;

}


/* ============================================================
   MOBILE MENU BUTTON
============================================================ */

.mobile-menu-button {

    display:
        none;

    width:
        40px;

    height:
        40px;

    border:
        none;

    border-radius:
        9px;

    background:
        #f1f7f4;

    color:
        #174a3c;

    font-size:
        20px;

    cursor:
        pointer;

}


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

.mobile-navigation {

    display:
        none;

}

/* ============================================================
   GUIDE LOGIN BUTTON
============================================================ */

.guide-login-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 16px;

    background: #ffffff;

    color: #1f5f4a;

    border: 1px solid #1f5f4a;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* ============================================================
   HOVER
============================================================ */

.guide-login-button:hover {

    background: #1f5f4a;

    color: #ffffff;

    border-color: #1f5f4a;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

}


/* ============================================================
   ACTIVE
============================================================ */

.guide-login-button:active {

    transform: translateY(0);

    box-shadow: none;

}


/* ============================================================
   GUIDE LOGIN ICON
============================================================ */

.guide-login-button:first-letter {

    font-size: 17px;

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .guide-login-button {

        padding: 9px 12px;

        font-size: 13px;

    }

}


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

@media (max-width: 850px) {

    .main-navigation {

        display:
            none;

    }


    .mobile-menu-button {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .mobile-navigation {

        position:
            fixed;

        top:
            75px;

        left:
            0;

        right:
            0;

        z-index:
            7999;

        padding:
            15px;

        background:
            #ffffff;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.1);

    }


    .mobile-navigation.active {

        display:
            flex;

        flex-direction:
            column;

        gap:
            5px;

    }

}


@media (max-width: 600px) {

    .site-header {

        padding:
            10px 4%;

    }


    .brand-text p {

        display:
            none;

    }


    .brand-text h1 {

        font-size:
            17px;

    }


    .my-trip-button span:not(.trip-counter) {

        display:
            none;

    }

}




/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 600px) {

    .search-suggestion-item {

        padding:
            12px;

    }


    .suggestion-image-wrapper {

        width:
            70px;

        height:
            70px;

    }


    .suggestion-title-row {

        display:
            block;

    }


    .suggestion-rating {

        display:
            block;

        margin-top:
            3px;

    }


    .view-details-btn,
    .add-trip-btn {

        padding:
            7px 9px;

        font-size:
            11px;

    }

}



/* =========================
   Mobile
========================= */

@media (max-width: 600px) {

    .site-header h1 {
        font-size: 25px;
    }

    #map {
        height: 500px;
    }

}












/* ============================================================
   tourist LOGIN BUTTON
============================================================ */

.tourist-login-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 16px;

    background: #ffffff;

    color: #1f5f4a;

    border: 1px solid #1f5f4a;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


/* ============================================================
   HOVER
============================================================ */

.tourist-login-button:hover {

    background: #1f5f4a;

    color: #ffffff;

    border-color: #1f5f4a;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

}


/* ============================================================
   ACTIVE
============================================================ */

.tourist-login-button:active {

    transform: translateY(0);

    box-shadow: none;

}


/* ============================================================
   GUIDE LOGIN ICON
============================================================ */

.tourist-login-button:first-letter {

    font-size: 17px;

}
/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .tourist-login-button {

        padding: 9px 12px;

        font-size: 13px;

    }

}

/* --- Desktop සහ සාමාන්‍ය පෙනුම --- */
.site-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    /* ලාංඡනය සහ අක්ෂර අතර පරතරය */
    padding: 10px 0;
}

.brand-icon img {
    width: 50px;
    /* ඩෙස්ක්ටොප් එක සඳහා ලාංඡනයේ පළල */
    height: 50px;
    /* ඩෙස්ක්ටොප් එක සඳහා ලාංඡනයේ උස */
    object-fit: contain;
}

.brand-text h1 {
    font-size: 24px;
    /* මාතෘකාවේ ප්‍රමාණය */
    margin: 0;
    color: #2c3e50;
}

.brand-text p {
    font-size: 14px;
    /* උප මාතෘකාවේ ප්‍රමාණය */
    margin: 5px 0 0 0;
    color: #666;
}

/* --- Mobile සඳහා විශේෂ CSS (තිරය 768px හෝ අඩු නම්) --- */
@media screen and (max-width: 768px) {
    .site-brand {
        gap: 10px;
        /* මොබයිල් එකේදී පරතරය ටිකක් අඩු කිරීම */
        padding: 5px 0;
    }

    .brand-icon img {
        width: 38px;
        /* මොබයිල් එකේදී ලාංඡනය කුඩා කරගැනීමට */
        height: 38px;
    }

    .brand-text h1 {
        font-size: 18px;
        /* මොබයිල් එකට ගැළපෙන ලෙස අකුරු ප්‍රමාණය අඩු කිරීම */
    }

    .brand-text p {
        font-size: 12px;
    }
}
/* ============================================================
   HEADER MENU
============================================================ */

.mobile-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}


/* ============================================================
   HAMBURGER BUTTON
============================================================ */

.mobile-menu-button {
    display: none;

    width: 44px;
    height: 44px;

    border: none;
    border-radius: 10px;

    background: #176044;
    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    align-items: center;
    justify-content: center;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .header-actions {
        position: relative;
    }


    /* Show Hamburger */

    .mobile-menu-button {
        display: flex;
    }


    /* Hide Menu Initially */

    .mobile-menu {
        display: none;

        position: absolute;

        top: calc(100% + 12px);

        right: 0;

        width: 230px;

        padding: 14px;

        background: #ffffff;

        border-radius: 14px;

        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.15);

        flex-direction: column;

        align-items: stretch;

        gap: 10px;

        z-index: 9999;
    }


    /* Open Menu */

    .mobile-menu.active {
        display: flex;
    }


    /* Menu Links */

    .mobile-menu a,
    .mobile-menu button {
        width: 100%;

        box-sizing: border-box;

        justify-content: center;

        text-align: center;
    }

}


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

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

.site-footer {

     width: 100%;

    margin-top: 60px;

    background:
        #123b31;

    color:
        #ffffff;
    
}

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

.footer-container {

     width: 100%;

    max-width: 1200px;

    margin:
        0 auto;

    padding:
        60px 30px 50px;

    display: grid;

    grid-template-columns:
        2fr 1fr 1.3fr 1.5fr;

    gap:
        50px;
    
}

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

.footer-column {

     min-width: 0;
    
}

.footer-column h3 {

     margin:
        0 0 22px;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.4;
    
}

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

.footer-brand {

     max-width:
        330px;
    
}

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

.footer-logo {

     display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        800;

    letter-spacing:
        0.5px;

    text-decoration:
        none;

    transition:
        opacity 0.25s ease;
    
}

.footer-logo:hover {

     opacity:
        0.8;
    
}

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

.footer-brand p {

     margin:
        0;

    color:
        rgba(255,
            255,
            255,
            0.75);

    font-size:
        15px;

    line-height:
        1.8;
    
}

/* ============================================================
FOOTER LINKS LIST
============================================================ */

.footer-column ul {

     margin:
        0;

    padding:
        0;

    list-style:
        none;
   
}

.footer-column ul li {

     margin-bottom:
        12px;
    
}

.footer-column ul li:last-child {

     margin-bottom:
        0;
    
}

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

.footer-column ul li a {

     color:
        rgba(255,
            255,
            255,
            0.72);

    font-size:
        15px;

    line-height:
        1.6;

    text-decoration:
        none;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
    
}

.footer-column ul li a:hover {

     color:
        #ffffff;

    padding-left:
        5px;
    
}

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

.footer-contact li {

     display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    color:
        rgba(255,
            255,
            255,
            0.75);

    font-size:
        15px;

    line-height:
        1.6;
    
}

.footer-contact li a {

     padding-left:
        0 !important;
    
}

/* ============================================================
SOCIAL MEDIA
============================================================ */

.footer-social {

     display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        25px;
    
}

.footer-social a {

     width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255,
            255,
            255,
            0.25);

    border-radius:
        50%;

    background:
        rgba(255,
            255,
            255,
            0.08);

    color:
        #ffffff;

    font-size:
        17px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
    
}

.footer-social a:hover {

     background:
        rgba(255,
            255,
            255,
            0.2);

    border-color:
        rgba(255,
            255,
            255,
            0.6);

    transform:
        translateY(-3px);
    
}

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

.footer-bottom {

     border-top:
        1px solid rgba(255,
            255,
            255,
            0.12);
    
}

.footer-bottom-container {

 width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        20px 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
    
}

.footer-bottom p {

     margin:
        0;

    color:
        rgba(255,
            255,
            255,
            0.6);

    font-size:
        14px;

    line-height:
        1.6;
    
}

/* ============================================================
LEGAL LINKS
============================================================ */

.footer-legal {

     display:
        flex;

    align-items:
        center;

    gap:
        10px;
    
}

.footer-legal a {

     color:
        rgba(255,
            255,
            255,
            0.6);

    font-size:
        14px;

    text-decoration:
        none;

    transition:
        color 0.25s ease;
    
}

.footer-legal a:hover {

     color:
        #ffffff;
    
}

.footer-legal span {

     color:
        rgba(255,
            255,
            255,
            0.3);
    
}

/* ============================================================
TABLET
============================================================ */

@media (max-width: 900px) {

     .footer-container {

        grid-template-columns:
            1fr 1fr;

        gap:
            40px;

        padding:
            50px 25px 40px;

    }


    .footer-brand {

        max-width:
            100%;

    }


    .footer-bottom-container {

        padding:
            20px 25px;

    }

    
}

/* ============================================================
MOBILE
============================================================ */

@media (max-width: 600px) {

     .site-footer {

        margin-top:
            40px;

    }


    .footer-container {

        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            45px 20px 35px;

    }


    .footer-column h3 {

        margin-bottom:
            16px;

        font-size:
            17px;

    }


    .footer-logo {

        font-size:
            28px;

    }


    .footer-brand p {

        font-size:
            14px;

        line-height:
            1.7;

    }


    .footer-social {

        margin-top:
            20px;

    }


    .footer-bottom-container {

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        text-align:
            center;

        padding:
            20px;

    }


    .footer-legal {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }

    
}

/* ============================================================
SMALL MOBILE
============================================================ */

@media (max-width: 380px) {

     .footer-container {

        padding:
            40px 16px 30px;

    }


    .footer-bottom-container {

        padding:
            18px 16px;

    }


    .footer-legal {

        gap:
            7px;

    }


    .footer-legal a,
    .footer-bottom p {

        font-size:
            13px;

    }


}


/* ============================================================
   LANKAQUEST MAIN NAVIGATION
   FINAL OVERRIDE
============================================================ */


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

#mobileMenu.mobile-menu {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 8px !important;

    position: static !important;

    width: auto !important;

    height: auto !important;

    padding: 0 !important;

    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   ALL NAV LINKS
============================================================ */

#mobileMenu.mobile-menu>a {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 42px !important;

    padding: 10px 15px !important;

    margin: 0 !important;

    color: #222222 !important;

    background: transparent !important;

    border: 1px solid transparent !important;

    border-radius: 8px !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    opacity: 1 !important;

    box-shadow: none !important;

    transform: none !important;

}


/* ============================================================
   NORMAL NAV HOVER
============================================================ */

#mobileMenu.mobile-menu>a:not(.nav-login-button):not(.nav-register-button):hover {

    color: #17613d !important;

    background: #edf8f1 !important;

}


/* ============================================================
   LOGIN BUTTON
============================================================ */

#mobileMenu.mobile-menu>a.nav-login-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 42px !important;

    padding: 10px 18px !important;

    color: #17613d !important;

    background: #ffffff !important;

    border: 2px solid #17613d !important;

    border-radius: 8px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    opacity: 1 !important;

}


/* ============================================================
   LOGIN HOVER
============================================================ */

#mobileMenu.mobile-menu>a.nav-login-button:hover {

    color: #ffffff !important;

    background: #17613d !important;

    border-color: #17613d !important;

}


/* ============================================================
   REGISTER BUTTON
============================================================ */

#mobileMenu.mobile-menu>a.nav-register-button {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 42px !important;

    padding: 10px 18px !important;

    color: #ffffff !important;

    background: #17613d !important;

    border: 2px solid #17613d !important;

    border-radius: 8px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    opacity: 1 !important;

}


/* ============================================================
   REGISTER HOVER
============================================================ */

#mobileMenu.mobile-menu>a.nav-register-button:hover {

    color: #ffffff !important;

    background: #0f4d30 !important;

    border-color: #0f4d30 !important;

}


/* ============================================================
   MY TRIP
============================================================ */

#mobileMenu.mobile-menu>button#myTripButton {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    min-height: 42px !important;

    padding: 10px 15px !important;

    color: #222222 !important;

    background: #ffffff !important;

    border: 2px solid #d7d7d7 !important;

    border-radius: 8px !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    opacity: 1 !important;

}


/* ============================================================
   MY TRIP HOVER
============================================================ */

#mobileMenu.mobile-menu>button#myTripButton:hover {

    color: #17613d !important;

    background: #edf8f1 !important;

    border-color: #17613d !important;

}


/* ============================================================
   TRIP COUNTER
============================================================ */

#mobileMenu.mobile-menu .trip-counter {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 21px !important;

    height: 21px !important;

    padding: 0 5px !important;

    color: #ffffff !important;

    background: #17613d !important;

    border-radius: 50% !important;

    font-size: 11px !important;

    font-weight: 700 !important;

}


/* ============================================================
   MOBILE MENU BUTTON
============================================================ */

.mobile-menu-button {

    display: none;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    padding: 0;

    color: #222222 !important;

    background: #ffffff !important;

    border: 2px solid #d7d7d7 !important;

    border-radius: 8px;

    font-size: 22px;

    cursor: pointer;

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 768px) {

    .mobile-menu-button {

        display: inline-flex !important;

    }


    #mobileMenu.mobile-menu {

        display: none !important;

        position: absolute !important;

        top: calc(100% + 10px) !important;

        right: 0 !important;

        width: min(320px, calc(100vw - 24px)) !important;

        height: auto !important;

        padding: 14px !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 8px !important;

        background: #ffffff !important;

        border: 1px solid #dddddd !important;

        border-radius: 10px !important;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;

    }


    #mobileMenu.mobile-menu.active,
    #mobileMenu.mobile-menu.open,
    #mobileMenu.mobile-menu.show {

        display: flex !important;

    }


    #mobileMenu.mobile-menu>a,
    #mobileMenu.mobile-menu>a.nav-login-button,
    #mobileMenu.mobile-menu>a.nav-register-button,
    #mobileMenu.mobile-menu>button#myTripButton {

        width: 100% !important;

        min-height: 44px !important;

        box-sizing: border-box !important;

    }

}