/* General Reset */
/* Ensure the background color covers the full page */
html, body {
    height: 100%; /* Make sure both html and body take up the full height */
    margin: 0; /* Remove default browser margins */
    padding: 0; /* Remove default browser padding */
}

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Light gray background for the full page */
    color: #333; /* Dark gray text for readability */
    display: flex; /* Use flexbox to align content */
    flex-direction: column; /* Stack header, main, and footer vertically */
}

main {
    flex: 1; /* Allow the main content to grow and fill available space */
    padding: 20px; /* Add padding inside the main section */
    text-align: center; /* Center-align text */
}

main {
    flex: 1; /* Allow the main content to grow and fill available space */
    padding: 20px; /* Add padding inside the main section */
    text-align: center; /* Center-align text */
}

/* Enhanced Navbar & Hotel Name Styling */

/* Improved Header Styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    color: #fff;
    padding: 15px 20px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Enhanced Hotel Name Styling */
header .hotel-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
}

header .hotel-name h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 5px 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

header .hotel-name h1:hover {
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* Ensure the navbar elements maintain their positioning */
nav {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    header .hotel-name h1 {
        font-size: 22px;
        padding: 3px 10px;
    }
}

@media (max-width: 480px) {
    header {
        flex-wrap: wrap;
        padding: 12px;
    }
    
    header .hotel-name {
        position: relative;
        left: auto;
        transform: none;
        margin: 5px 0;
        width: 100%;
        order: 1;
    }
    
    header .hotel-name h1 {
        font-size: 20px;
        padding: 3px 0;
    }
    
    nav {
        width: 100%;
        justify-content: space-between;
        order: 2;
        margin-top: 10px;
    }
}

/* Return Button Styling */
.return-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: #000;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.return-btn:hover {
    background-color: #f0f0f0;
    transform: translateX(-3px);
}

.return-btn svg {
    transition: transform 0.2s ease;
}

.return-btn:hover svg {
    transform: translateX(-2px);
}

/* Language Dropdown Styling */
.language-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    color: #000;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    min-width: 100px;
}

.dropdown-btn:hover {
    background-color: #f5f5f5;
}

.dropdown-icon {
    transition: transform 0.3s ease;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #fff;
    min-width: 150px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
    animation: slideIn 0.25s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.dropdown-content a:hover {
    background-color: #f8f8f8;
}

.dropdown-content a.active {
    background-color: #f0f0f0;
    font-weight: bold;
}

.lang-flag {
    font-size: 16px;
}

.lang-name {
    flex: 1;
    text-align: right;
}

/* Show the dropdown when the open class is added */
.language-dropdown.open .dropdown-content {
    display: block;
}

.language-dropdown.open .dropdown-icon {
    transform: rotate(180deg);
}

/* Add a subtle arrow pointer to the dropdown */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 5px rgba(0,0,0,0.04);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    nav {
        gap: 10px;
    }
    
    .return-btn, .dropdown-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    header .hotel-name h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    header {
        padding: 10px 15px;
    }
    
    .return-btn span {
        display: none; /* Hide text, show only icon on very small screens */
    }
    
    .return-btn {
        padding: 8px;
    }
}

/* Language Switch Button */
.language-switch {
    display: flex;
    gap: 10px;
}

.language-switch button {
    background-color: #fff; /* White buttons */
    color: #000; /* Black text */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.language-switch button.active {
    background-color: #333; /* Highlight active language */
    color: #fff; /* White text */
}

/* Main Content Styling */
main {
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9; /* Light gray background for contrast */
}

#services {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 350px;
    height: 300px;
    padding: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.service-item:hover {
    transform: scale(1.05);
}

.service-bubble {
    width: 100%;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
    overflow: hidden;
}


/* Taxi Service Background */
.service-bubble[data-service="taxi"] {
    background-image: url('https://www.streamadqfm.store/KatelyaIMG/Taxi/taxi-service.jpeg'); /* Use the SVG file */
}

/* Transfer Service Background */
.service-bubble[data-service="transfer"] {
    background-image: url('https://www.streamadqfm.store/KatelyaIMG/VIP/vip-service.png'); /* Use the new SVG file */
}

/* Tours Service Background */
.service-bubble[data-service="tours"] {
    background-image: url('https://www.streamadqfm.store/KatelyaIMG/tours/tours-service.jpeg'); /* Use the tours image */
}

/* Tours Service Background */
.service-bubble[data-service="sim-card"] {
    background-image: url('https://www.streamadqfm.store/KatelyaIMG/sim-card/sim-card-main.jpeg'); /* Use the tours image */
}

/* Tours Service Background */
.service-bubble[data-service="cruise"] {
    background-image: url('https://www.streamadqfm.store/KatelyaIMG/dinner-cruise/cruise.jpeg'); /* Use the tours image */
}

/* Tours Service Background */
.service-bubble[data-service="Tour-Guide"] {
    background-image: url('https://www.streamadqfm.store/KatelyaIMG/Tour-Guide/tour-guide-txt.jpeg'); /* Use the tours image */
}

/* Tours Service Background */
.service-bubble[data-service="Turkish-Bath-&-SPA"] {
    background-image: url('https://www.streamadqfm.store/Turkish-Bath-%26-SPA/Turkish-Bath-%26-SPA.jpeg'); /* Use the tours image */
}

.service-text {
    margin-top: 10px; /* Space between bubble and text */
    color: #333; /* Dark gray text for readability */
    font-size: 14px;
    line-height: 1.4; /* Improve readability with proper line spacing */
}

.service-text h2 {
    font-size: 18px;
    margin-bottom: 5px; /* Space between title and description */
}

/* Disabled Service Item */
.service-item.disabled {
    position: relative; /* Required for overlay positioning */
    pointer-events: none; /* Disable interaction */
    opacity: 0.6; /* Make it visually appear disabled */
}

/* Dark Overlay for Disabled Button */
.service-item.disabled .coming-soon-overlay {
    position: absolute; /* Position relative to the parent service item */
    top: 0;
    left: 0;
    width: 100%; /* Cover the entire service item */
    height: 100%; /* Cover the entire service item */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border-radius: 10px; /* Match the rounded corners of the frame */
    z-index: 1; /* Ensure it's above the service item content */
}

/* "Coming Soon" Text */
.service-item.disabled .coming-soon-text {
    font-size: 18px; /* Adjust font size for the button */
    font-weight: bold; /* Bold text */
    color: #fff; /* White text */
    text-transform: uppercase; /* Uppercase letters */
    letter-spacing: 2px; /* Spacing between letters */
    text-align: center; /* Center-aligned text */
    opacity: 0.9; /* Slightly transparent text */
}