/* Neo ring counters */
.counter-grid.neo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(15px, 2vw, 20px);
    max-width: min(1000px, 100vw - 40px);
    margin: 10px auto 0 auto;
    width: 100%;
}

.counter-neo {
    position: relative;
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(28,168,203,0.18);
    border-radius: 16px;
    padding: 22px 14px 18px 14px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(2,6,23,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.counter-neo:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(28,168,203,0.20);
}

.counter-neo .ring {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 10px auto;
}

.counter-neo .ring-svg {
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.counter-neo .ring-bg {
    fill: none;
    stroke: rgba(2,6,23,0.08);
    stroke-width: 8;
}

.counter-neo .ring-fg {
    fill: none;
    stroke: url(#grad1);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326;
    stroke-dashoffset: 65;
    animation: ringSpin 6s linear infinite;
}

.counter-neo .ring-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(28,168,203,0.35);
    pointer-events: none;
}

.counter-neo .content .icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: #fff;
    margin: -6px auto 8px auto;
    box-shadow: 0 10px 20px rgba(28,168,203,0.35);
}

.counter-neo .content .icon i { font-size: 18px; }

.counter-neo .content .counter-number {
    font-weight: 800;
    font-size: 2.1rem;
    color: #0F172A;
}

.counter-neo .content .label {
    margin-top: 4px;
    font-size: 0.95rem;
    color: #334155;
}

@keyframes ringSpin {
    0% { stroke-dashoffset: 65; }
    100% { stroke-dashoffset: 391; }
}

@media (max-width: 992px) {
    .counter-grid.neo { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 576px) {
    .counter-grid.neo { grid-template-columns: 1fr; gap: 14px; }
    .counter-neo .content .counter-number { font-size: 1.7rem; }
}
/* Reset and Base Styles */
* {
    margin: 0;
   
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    background: #f0f0f0 url('background.jpeg') center/cover no-repeat fixed;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}


.container {
    max-width: min(1200px, 100vw - 40px);
    margin: 0 auto;
    padding: 0 clamp(15px, 2vw, 20px);
    width: 100%;
}

@media (max-width: 768px) {
    .container {
        max-width: calc(100vw - 20px);
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .container {
        max-width: calc(100vw - 16px);
        padding: 0 8px;
    }
}

/* Header Styles */
.header {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    backdrop-filter: blur(25px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: all 0.3s ease;
    padding-top: 2px;
}



.header .container {
    position: relative;
    z-index: 2;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 3px 15px !important;
    min-height: 30px;
}

.logo-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    gap: 10px;
    max-width: calc(100vw - 250px);
    width: auto;
    min-height: 20px;
}

.logo-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.logo-section .tagline {
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}


.flag-icon {
    width: 30px;
    height: 20px;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.flag-stripe {
    height: 25%;
    width: 100%;
}

.flag-stripe.red { background: #EA2839; }
.flag-stripe.blue { background: #1E3A8A; }
.flag-stripe.yellow { background: #FCD34D; }
.flag-stripe.green { background: #10B981; }

.logo h1 {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tagline {
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
    margin-top: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
}

.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nav-link:hover {
    color: #ffffff;
    transform: translateY(-1px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.nav-arrow-button {
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(28, 168, 203, 0.3);
}

.nav-arrow-button:hover {
    background: linear-gradient(135deg, #1E3A8A, #1CA8CB);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(28, 168, 203, 0.4);
}



/* Navbar Responsive for all screen sizes */
@media (min-width: 769px) {
    .header .container {
        justify-content: flex-start !important;
    }
    
    .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        padding: 0 !important;
        flex-direction: row !important;
    }
}

@media (min-width: 1024px) {
    .header .container {
        justify-content: flex-start !important;
    }
    
    .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        padding: 0 !important;
        flex-direction: row !important;
    }
}

@media (min-width: 1200px) {
    .header .container {
        justify-content: flex-start !important;
    }
    
    .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        padding: 0 !important;
        flex-direction: row !important;
    }
}

.cta-button {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #0F766E 0%, #F59E0B 100%);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    position: relative;
    overflow: hidden;
    padding: 60px 0 0 0;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    animation: backgroundFloat 8s ease-in-out infinite;
    opacity: 1;
    z-index: 1;
    animation-delay: 0.5s;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, #1CA8CB 0%, #1CA8CB 100%);
    opacity: 0.8;
    z-index: 1;
}

.hero .shimmer-effect {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 20%, rgba(28, 168, 203, 0.3) 40%, rgba(28, 168, 203, 0.8) 50%, rgba(64, 224, 208, 0.6) 60%, transparent 80%);
    animation: shimmer 2s ease-in-out infinite;
    z-index: 2;
}

@keyframes backgroundFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(-30px) rotate(2deg) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) rotate(-2deg) scale(0.9);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-40px) rotate(1deg) scale(1.05);
        opacity: 0.9;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) skewX(-15deg);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(100%) skewX(-15deg);
        opacity: 0;
    }
}

.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: floatParticle 15s linear infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.particle:nth-child(1) {
    width: 4px;
    height: 4px;
    left: 10%;
    animation-duration: 20s;
}

.particle:nth-child(2) {
    width: 6px;
    height: 6px;
    left: 20%;
    animation-duration: 18s;
}

.particle:nth-child(3) {
    width: 3px;
    height: 3px;
    left: 30%;
    animation-delay: 4s;
    animation-duration: 22s;
}

.particle:nth-child(4) {
    width: 5px;
    height: 5px;
    left: 60%;
    animation-delay: 1s;
    animation-duration: 16s;
}

.particle:nth-child(5) {
    width: 4px;
    height: 4px;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 19s;
}

.particle:nth-child(6) {
    width: 7px;
    height: 7px;
    left: 90%;
    animation-delay: 5s;
    animation-duration: 17s;
}

@keyframes floatParticle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out;
    line-height: 1.2;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.95;
    animation: fadeInUp 1s ease-out 0.2s both;
    line-height: 1.6;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


.mauritius-highlight {
    color: #1CA8CB;
    font-weight: 800;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 1.2em;
    letter-spacing: 1px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(15px, 2vw, 20px);
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out 0.4s both;
    max-width: min(1000px, 100vw - 40px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 1rem;
    opacity: 0.9;
}

.time-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.visits-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2.5rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 0;
    flex-wrap: nowrap;
    animation: fadeInUp 1s ease-out 0.6s both;
    overflow-x: visible;
    padding: 0 10px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 16px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

.badge:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.badge i {
    font-size: 1.1rem;
    color: white;
}

.hero-cta {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    border: none;
    padding: 18px 36px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(239, 68, 68, 0.4);
}

/* Services Section */
.services {
    background: transparent;
    padding: 80px 0 100px 0;
    position: relative;
    margin-top: 0;
    z-index: 1;
}



.services .container {
    position: relative;
    z-index: 2;
}

.section-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

/* Header Carousel Container - FIXED HEIGHT */
.header-carousel-container {
    position: relative;
    width: 100%;
    height: 200px !important;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.header-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.header-carousel .swiper-slide {
    width: 100%;
    height: 100%;
}

.header-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: none;
    opacity: 1;
}

.header-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(28, 168, 203, 0.3);
    border-radius: 20px;
    padding: 20px;
    margin: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-text-content {
    text-align: center;
}

.header-text-overlay .h22 {
    margin: 0px 0 0px 0 !important;
    padding: 0 !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Individual line styling with transparent background */
.header-text-line {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.536) !important;
    padding: 0px 2px !important;
    border-radius: 4px !important;
    margin: 0.5px !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* More specific targeting for header text lines */
.header-text-overlay .header-text-line,
.header-text-content .header-text-line,
.h22 .header-text-line,
.header-text-overlay .h22 .header-text-line {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.536) !important;
    padding: 0px 2px !important;
    border-radius: 4px !important;
    margin: 0.5px !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Override h22 color specifically for header overlay */
.header-text-overlay .h22,
.header-text-overlay .h22 .header-text-line {
    color: white !important;
}

.header-text-overlay .experience-text {
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    font-family: 'Montez', cursive !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    margin: 10px 0 0 0 !important;
    padding: 4px 8px !important;
    text-align: center !important;
    text-shadow: none !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Experience text with transparent background */
.header-text-overlay .experience-text.header-text-line {
    background: rgba(255, 255, 255, 0.536);
    padding: 0px 4px;
    border-radius: 4px;
    display: inline-block;
}

/* Force gradient background with highest specificity */
.header-carousel-container .header-text-overlay .experience-text {
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    text-shadow: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 15px;
    line-height: 1.1;
}

.section-header p {
    font-size: 1.125rem;
    color: #6B7280;
    margin-bottom: 20px;
}

.section-header .experience-text {
    font-family: 'Montez', cursive !important;
    font-size: 3rem !important;
    font-weight: 400 !important;
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    margin: 0 0 0 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    max-width: 100% !important;
    width: inherit !important;
    height: inherit !important;
    line-height: 1.1 !important;
    display: inline-block !important;
}

/* Force gradient background for experience text with highest specificity */
.experience-text {
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Override any other experience text colors */
h2 .experience-text,
.section-header h2 .experience-text,
.hero-subtitle .experience-text {
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Specific override for header-text-line experience text */
.experience-text.header-text-line {
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
}

/* Comprehensive overrides for ALL experience-text instances */
.header-text-overlay .experience-text.header-text-line,
.header-carousel-container .header-text-overlay .experience-text.header-text-line,
.header-text-overlay .experience-text,
.header-carousel-container .header-text-overlay .experience-text,
.section-header .experience-text,
h2 .experience-text,
.hero-subtitle .experience-text,
.experience-text {
    font-family: 'Montez', cursive !important;
    font-size: 32px !important;
    color: white !important;
    background: linear-gradient(315deg, #042E7A, #0D58C3) !important;
    border: 13px solid transparent !important;
    background: linear-gradient(315deg, #042E7A, #0D58C3), linear-gradient(315deg, #0D58C3, #042E7A) !important;
    background-clip: padding-box, border-box !important;
    border-radius: 20px !important;
    padding: 0px 0px !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0, 0, 0, 0.2) !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-block !important;
    text-decoration: none !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    animation: zoomOut 3s ease-in-out infinite !important;
    opacity: 0.75 !important;
}

/* Hover zoom in effect for experience text */
.experience-text:hover {
    transform: scale(1.05) !important;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        0 12px 24px rgba(0, 0, 0, 0.4),
        0 18px 36px rgba(0, 0, 0, 0.3) !important;
    animation-play-state: paused !important;
}

/* Force gradient background with highest specificity */
p.experience-text,
p.experience-text.header-text-line,
span.experience-text,
div.experience-text {
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    text-shadow: none !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    transition: transform 0.3s ease-in-out !important;
    animation: zoomOut 3s ease-in-out infinite !important;
}

.section-footer {
    text-align: center;
    margin-top: -25px;
    position: relative;
    z-index: 10;
}

.section-footer h2 {
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-top: 30px;
    margin-bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

.section-footer h2:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

/* Animated 3D Counter Section */
.counter-section {
    position: relative;
    background: linear-gradient(135deg, rgba(28, 168, 203, 0.06), rgba(245, 158, 11, 0.05));
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 3px 12px rgba(28, 168, 203, 0.1);
    max-width: 450px;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.counter-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="%231CA8CB" opacity="0.1"/><circle cx="80" cy="30" r="2" fill="%23F59E0B" opacity="0.1"/><circle cx="40" cy="70" r="2.5" fill="%231CA8CB" opacity="0.1"/><circle cx="90" cy="80" r="1.5" fill="%23F59E0B" opacity="0.1"/><path d="M10,50 Q30,30 50,50 Q70,70 90,50" stroke="%231CA8CB" stroke-width="1" fill="none" opacity="0.1"/><path d="M15,25 Q35,15 55,25 Q75,35 85,25" stroke="%23F59E0B" stroke-width="1" fill="none" opacity="0.1"/></svg>');
    background-size: 200px 200px;
    background-position: 0 0, 100px 100px;
    background-repeat: repeat;
    animation: floatBackground 20s ease-in-out infinite;
    z-index: 1;
}

/* Compact ring counters */
.ring-counters { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; overflow: visible; justify-content: center; }
.ring-card { display: flex; justify-content: center; position: relative; z-index: 1; animation: boingFall 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, bounce 2s ease-in-out infinite 1s; opacity: 1; }
.ring-card:nth-child(1) { animation-delay: 0s, 1s; z-index: 4; }
.ring-card:nth-child(2) { animation-delay: 0.15s, 1.15s; z-index: 3; }
.ring-card:nth-child(3) { animation-delay: 0.3s, 1.3s; z-index: 2; }
.ring-card:nth-child(4) { animation-delay: 0.45s, 1.45s; z-index: 1; }
.ring-wrap { position: relative; width: 80px; height: 80px; transition: transform 0.3s ease; }
.ring-wrap:hover { transform: scale(1.1) translateY(-4px); }
.ring-bg, .ring-progress { position: absolute; inset: 0; border-radius: 50%; }
.ring-bg { background: conic-gradient(#e5e7eb 0 360deg); box-shadow: inset 0 4px 9px rgba(0,0,0,0.06); }
.ring-progress { mask: radial-gradient(circle 32px at 50% 50%, transparent 32px, black 33px); background: var(--ring-gradient, conic-gradient(#ef4444 0 270deg, transparent 270deg)); filter: drop-shadow(0 3px 7px rgba(0,0,0,0.1)); animation: sweep 2.2s ease both; }
.ring-inner { position: absolute; inset: 6px; border-radius: 50%; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 5px 10px rgba(0,0,0,0.06); }
.ring-title { font-size: 10px; font-weight: 700; color: var(--title-color, #ef4444); text-transform: uppercase; letter-spacing: .5px; line-height: 1.2; animation: fadeUp 0.8s ease both 0.3s; }
.ring-inner .counter-number { font-size: 14px; font-weight: 800; color: var(--value-color, #ef4444); margin-top: 4px; animation: fadeUp 0.8s ease both 0.5s; }
.ring-inner .ring-subtitle { font-size: 9px; font-weight: 600; color: var(--value-color, #ef4444); margin-top: 2px; animation: fadeUp 0.8s ease both 0.5s; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.8; }
.ring-badge { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; top: -5px; left: -5px; background: var(--badge-gradient, linear-gradient(135deg, #ef4444, #b91c1c)); box-shadow: 0 5px 8px rgba(0,0,0,0.15); animation: popIn 0.5s ease both 0.2s, badgeBounce 3s ease-in-out infinite 1s; }
.ring-badge i { font-size: 12px; }

/* Animations */
@keyframes sweep { from { background: conic-gradient(currentColor 0deg, transparent 0deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } }
@keyframes badgeBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes boingFall { 
    0% { 
        transform: translateY(-120px) scale(0.8); 
        opacity: 0.3; 
    } 
    30% {
        opacity: 0.7;
    }
    70% { 
        transform: translateY(12px) scale(1.1); 
        opacity: 0.9; 
    }
    85% {
        transform: translateY(-6px) scale(0.95);
        opacity: 1;
    }
    100% { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
    } 
}

@keyframes floatContainer {
    0%, 100% { 
        transform: translateY(0px) rotateX(0deg); 
    }
    50% { 
        transform: translateY(-10px) rotateX(2deg); 
    }
}

@keyframes shimmerOverlay {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1) rotate(0deg); 
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.05) rotate(1deg); 
    }
}

@keyframes rotateGlow {
    0% { 
        transform: rotate(0deg); 
    }
    100% { 
        transform: rotate(360deg); 
    }
}

@keyframes iconFloat {
    0%, 100% { 
        transform: translateY(0px) rotateY(0deg); 
    }
    50% { 
        transform: translateY(-8px) rotateY(5deg); 
    }
}

@keyframes iconShine {
    0% { 
        transform: translateX(-100%) skewX(-20deg); 
        opacity: 0; 
    }
    50% { 
        opacity: 1; 
    }
    100% { 
        transform: translateX(100%) skewX(-20deg); 
        opacity: 0; 
    }
}

@keyframes titlePulse {
    0%, 100% { 
        text-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% { 
        text-shadow: 
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 0 50px rgba(255, 255, 255, 0.6);
    }
}

@keyframes navFloat {
    0%, 100% { 
        transform: translateX(-50%) translateY(0px); 
    }
    50% { 
        transform: translateX(-50%) translateY(-5px); 
    }
}

@keyframes bulletPulse {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.2); 
    }
}

@keyframes slideInUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Themes */
/* Mauritius flag colors: Red, Blue, Yellow, Green */
.theme-red   { --ring-gradient: conic-gradient(#EA2839 0 300deg, transparent 300deg); --badge-gradient: linear-gradient(135deg,#EA2839,#b91c1c); --title-color:#EA2839; --value-color:#EA2839; }
.theme-blue  { --ring-gradient: conic-gradient(#1E3A8A 0 288deg, transparent 288deg); --badge-gradient: linear-gradient(135deg,#60a5fa,#1E3A8A); --title-color:#1E3A8A; --value-color:#1E3A8A; }
.theme-yellow{ --ring-gradient: conic-gradient(#FCD34D 0 324deg, transparent 324deg); --badge-gradient: linear-gradient(135deg,#FCD34D,#b45309); --title-color:#b45309; --value-color:#b45309; }
.theme-green { --ring-gradient: conic-gradient(#10B981 0 306deg, transparent 306deg); --badge-gradient: linear-gradient(135deg,#34d399,#065f46); --title-color:#065f46; --value-color:#065f46; }

/* COMPACT EDGE BUTTON & WIDGET PANEL DESIGN */

/* Edge Button - Floating on right side */
.edge-button {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 120px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 25px 0 0 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.edge-button:hover {
    width: 60px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(25px);
    border: none;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
}

/* Edge Button at Gallery Level */
.edge-button.gallery-level {
    position: fixed;
    top: 39%;
    right: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 120px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 25px 0 0 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
}

.edge-button.gallery-level:hover {
    width: 60px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(25px);
    border: none;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
}

.edge-button.gallery-level .edge-btn-icon {
    color: white;
    font-size: 18px;
    margin-bottom: 5px;
}

.edge-button.gallery-level .edge-btn-label {
    color: white;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
}

/* Hide the button completely when panel is open */
.widget-panel.open ~ .edge-button {
    right: -70px !important;
    transition: right 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0 !important;
    pointer-events: none !important;
}

.widget-panel.open ~ .edge-button:hover {
    right: -70px !important;
    opacity: 0 !important;
}

/* Alternative selector for when edge button comes before widget panel */
body:has(.widget-panel.open) .edge-button {
    right: -70px !important;
    transition: right 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0 !important;
    pointer-events: none !important;
}

body:has(.widget-panel.open) .edge-button:hover {
    right: -70px !important;
    opacity: 0 !important;
}

/* Stats Edge Button - Matching Main Edge Button Design */
.stats-edge-btn {
    position: fixed;
    top: calc(50% + 242px);
    left: 0;
    transform: translateY(-50%);
    width: 50px;
    height: 120px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 0 25px 25px 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999 !important;
    box-shadow: 5px 0 20px rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.stats-edge-btn:hover {
    width: 60px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(25px);
    border: none;
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2);
}

.stats-edge-btn .stats-btn-icon {
    color: white;
    font-size: 16px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.stats-edge-btn .stats-btn-label {
    color: white;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Ensure stats button is always visible */
.stats-edge-btn {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
}

/* Hide stats button when stats panel is open */
.stats-panel.open ~ .stats-edge-btn {
    left: -70px !important;
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0 !important;
    pointer-events: none !important;
}

.stats-panel.open ~ .stats-edge-btn:hover {
    left: -70px !important;
    opacity: 0 !important;
}

/* Alternative selector for when stats button comes before stats panel */
body:has(.stats-panel.open) .stats-edge-btn {
    left: -70px !important;
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0 !important;
    pointer-events: none !important;
}

body:has(.stats-panel.open) .stats-edge-btn:hover {
    left: -70px !important;
    opacity: 0 !important;
}

/* Stats Panel */
.stats-panel {
    position: fixed;
    top: calc(39% - 57px + 242px);
    left: -200px;
    transform: none;
    width: 190px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 20px 20px 0;
    z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.stats-panel.open {
    left: 0;
    opacity: 1;
    pointer-events: auto;
}

/* Stats Panel Header - Matching Main Widget Panel */
.stats-panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stats-panel-header h3 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    text-shadow: none;
}

.stats-panel-close {
    width: 28px;
    height: 28px;
    background: rgba(234, 40, 57, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.stats-panel-close:hover {
    background: rgba(234, 40, 57, 1);
    transform: scale(1.1);
}

.stats-panel-close i {
    font-size: 12px;
}

/* Stats Panel Content - Matching Main Widget Panel */
.stats-panel-content {
    padding: 12px;
    height: calc(100% - 60px);
    overflow: visible;
}

/* Stats panel uses existing widget CSS classes */

/* Copyright Widget */
.copyright-widget {
    position: fixed;
    bottom: 0px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.copyright-widget:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.copyright-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0px 0px;
}

.copyright-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.copyright-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.copyright-company {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.copyright-year {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

/* Responsive Copyright Widget */
@media (max-width: 768px) {
    .copyright-widget {
        bottom: 15px;
        right: 15px;
    }
    
    .copyright-content {
        padding: 0px 0px;
    }
    
    .copyright-icon {
        font-size: 12px;
    }
    
    .copyright-company {
        font-size: 11px;
    }
    
    .copyright-year {
        font-size: 9px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .copyright-widget {
        bottom: 18px;
        right: 18px;
    }
    
    .copyright-content {
        padding: 11px 14px;
    }
    
    .copyright-icon {
        font-size: 13px;
    }
    
    .copyright-company {
        font-size: 11px;
    }
    
    .copyright-year {
        font-size: 9px;
    }
}

/* Individual Stats Widgets */
.stats-widget {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 12px;
    margin: 0 2px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 80px;
    height: 44px;
}

.stats-widget:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stats-widget-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 14px;
    font-weight: bold;
}

.stats-widget-icon.red {
    background: linear-gradient(135deg, #EA2839, #B91C1C);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 40, 57, 0.3);
}

.stats-widget-icon.blue {
    background: linear-gradient(135deg, #1E3A8A, #1E40AF);
    color: white;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3);
}

.stats-widget-icon.yellow {
    background: linear-gradient(135deg, #FCD34D, #F59E0B);
    color: #B45309;
    box-shadow: 0 2px 8px rgba(252, 211, 77, 0.3);
}

.stats-widget-icon.green {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.stats-widget-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stats-widget-number {
    font-size: 14px;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 2px;
}

.stats-widget-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.stats-widget-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(234, 40, 57, 0.1) 25%,
        rgba(30, 58, 138, 0.1) 40%,
        rgba(252, 211, 77, 0.1) 60%,
        rgba(16, 185, 129, 0.1) 75%,
        transparent 100%);
    border-radius: inherit;
    animation: statsGlow 3s ease-in-out infinite;
}

@keyframes statsGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.line-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.line-stat-number {
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    line-height: 1;
    margin-bottom: 2px;
}

.line-stat-label {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
}

/* Individual stat colors - Mauritius flag colors */
.line-stat-item:nth-child(1) .line-stat-number { color: #EA2839; } /* Red */
.line-stat-item:nth-child(1) .line-stat-label { color: #EA2839; }

.line-stat-item:nth-child(2) .line-stat-number { color: #1E3A8A; } /* Blue */
.line-stat-item:nth-child(2) .line-stat-label { color: #1E3A8A; }

.line-stat-item:nth-child(3) .line-stat-number { color: #FCD34D; } /* Yellow */
.line-stat-item:nth-child(3) .line-stat-label { color: #B45309; } /* Darker yellow for readability */

.line-stat-item:nth-child(4) .line-stat-number { color: #10B981; } /* Green */
.line-stat-item:nth-child(4) .line-stat-label { color: #065F46; } /* Darker green for readability */

/* Divider lines between stats with flag colors */
.line-stat-item:nth-child(1):after {
    background: linear-gradient(to bottom, transparent, rgba(234, 40, 57, 0.4), transparent);
}
.line-stat-item:nth-child(2):after {
    background: linear-gradient(to bottom, transparent, rgba(30, 58, 138, 0.4), transparent);
}
.line-stat-item:nth-child(3):after {
    background: linear-gradient(to bottom, transparent, rgba(252, 211, 77, 0.4), transparent);
}

.line-stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
}

/* Keep stats visible even when widget panel is open */
.widget-panel.open ~ .stats-widget-panel,
body:has(.widget-panel.open) .stats-widget-panel {
    left: 0;
    opacity: 1;
    pointer-events: auto;
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
}

/* Stats Close Button */
.stats-close-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: rgba(234, 40, 57, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stats-close-btn:hover {
    background: rgba(234, 40, 57, 1);
    transform: scale(1.1);
}

.stats-close-btn i {
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Show stats with slide animation when panel is closed - but only if not auto-opening or auto-closed */
body:not(:has(.widget-panel.open)) .stats-widget-panel:not(.auto-opening):not(.auto-closed) {
    animation: slideInStatsLeft 1.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Prevent animation during auto-open phase */
.stats-widget-panel.auto-opening {
    left: 0;
    opacity: 1;
    pointer-events: auto;
}

/* Auto-closed state for stats panel */
.stats-widget-panel.auto-closed {
    left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@keyframes slideInStatsLeft {
    0% {
        left: -420px;
        opacity: 0;
    }
    100% {
        left: 0;
        opacity: 1;
    }
}

  .edge-btn-icon {
    font-size: 16px;
    color: #000000;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.edge-btn-label {
    font-size: 10px;
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* Widget Panel */
.widget-panel {
    position: fixed;
    top: calc(39% - 57px);
    right: -200px;
    transform: none;
    width: 190px;
    height: 500px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 20px 0 0 20px;
    z-index: 9999;
    transition: right 0.3s ease;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.widget-panel.open {
    right: 0;
}

/* Simple slide-in animation */
@keyframes slideIn {
    0% {
        right: -220px;
        opacity: 0;
    }
    100% {
        right: 0;
        opacity: 1;
    }
}

/* Simple slide-out animation */
@keyframes slideOut {
    0% {
        right: 0;
        opacity: 1;
    }
    100% {
        right: -220px;
        opacity: 0;
    }
}

/* Apply slide-out animation when closing */
.widget-panel.closing {
    animation: slideOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.widget-panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget-panel-header h3 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    text-shadow: none;
}

.close-panel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
}

.close-panel-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.widget-panel-content {
    padding: 12px;
    height: calc(100% - 60px);
    overflow: visible;
}

.widget-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* Widget Items */
.widget-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.widget-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-5px);
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.widget-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--widget-color, #ff4444);
    transition: width 0.3s ease;
}

.widget-item:hover::before {
    width: 8px;
}

.widget-icon {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, 
        var(--widget-color, #ff4444),
        var(--widget-color-dark, #cc3333));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.widget-item:hover .widget-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.widget-icon i {
    font-size: 14px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.widget-info {
    flex: 1;
}

.widget-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
    text-shadow: none;
}

.widget-desc {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* Widget Color Themes */
.gps-widget {
    --widget-color: #ef4444;
    --widget-color-dark: #dc2626;
}

.emergency-widget {
    --widget-color: #f59e0b;
    --widget-color-dark: #d97706;
}

.translator-widget {
    --widget-color: #3b82f6;
    --widget-color-dark: #2563eb;
}

.esim-widget {
    --widget-color: #FF1493;
    --widget-color-dark: #C71585;
}

.currency-widget {
    --widget-color: #10b981;
    --widget-color-dark: #059669;
}

/* Responsive Widget Panel Positioning */
@media (max-width: 480px) {
    .widget-panel {
        top: calc(35% - 57px);
    }
    
    .stats-widget-panel {
        top: calc(60% - 57px);
    }
    
    .edge-button.gallery-level {
        top: 35%;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .widget-panel {
        top: calc(37% - 79px);
    }
    
    .stats-widget-panel {
        top: calc(60% - 79px);
    }
    
    .edge-button.gallery-level {
        top: 50%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .widget-panel {
        top: calc(38% - 57px);
    }
    
    .stats-widget-panel {
        top: calc(60% - 57px);
    }
    
    .edge-button.gallery-level {
        top: 38%;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .widget-panel {
        top: calc(39% - 57px);
    }
    
    .stats-widget-panel {
        top: calc(60% - 57px);
    }
    
    .edge-button.gallery-level {
        top: 39%;
    }
}

@media (min-width: 1441px) {
    .widget-panel {
        top: calc(40% - 57px);
    }
    
    .stats-widget-panel {
        top: calc(60% - 57px);
    }
    
    .edge-button.gallery-level {
        top: 40%;
    }
}

/* Mobile Responsive - Edge Button & Widget Panel */
@media (max-width: 768px) {
    .stats-widget-panel {
        top: calc(60% - 25px);
        z-index: 1000;
    }
    
    .edge-button {
        width: 40px;
        height: 100px;
        border-radius: 20px 0 0 20px;
    }
    
    .edge-btn-icon {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .edge-btn-label {
        font-size: 8px;
    }
    
    .widget-panel {
        width: 160px;
        height: 400px;
        right: -170px;
    }
    
    .widget-panel-header {
        padding: 10px 12px;
    }
    
    .widget-panel-header h3 {
        font-size: 12px;
    }
    
    .widget-panel-content {
        padding: 10px;
    }
    
    .widget-item {
        padding: 8px;
    }
    
    .widget-icon {
        width: 28px;
        height: 28px;
        margin-right: 8px;
    }
    
    .widget-icon i {
        font-size: 12px;
    }
    
    .widget-title {
        font-size: 11px;
    }
    
    .widget-desc {
        font-size: 9px;
    }
    
    /* Hide button completely on mobile when panel is open */
    .widget-panel.open ~ .edge-button {
        right: -60px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .widget-panel.open ~ .edge-button:hover {
        right: -60px !important;
        opacity: 0 !important;
    }
    
    /* Alternative selector for mobile when edge button comes before widget panel */
    body:has(.widget-panel.open) .edge-button {
        right: -60px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    body:has(.widget-panel.open) .edge-button:hover {
        right: -60px !important;
        opacity: 0 !important;
    }
    
    /* Mobile horizontal line stats */
    .stats-widget-panel {
        width: 320px;
        height: 50px;
        padding: 0 25px 0 20px;
        top: calc(60% - 25px);
        z-index: 1000;
    }
    
    .line-stat-number {
        font-size: 12px;
    }
    
    .line-stat-label {
        font-size: 8px;
    }
    
    .line-stat-item:not(:last-child)::after {
        right: -12px;
        height: 25px;
    }
    
    /* Mobile stats panel - Matching Main Widget Panel */
    .stats-panel {
        width: 160px;
        height: 400px;
        left: -170px;
        top: calc(35% - 57px + 192px);
    }
    
    .stats-panel.open {
        left: 0;
    }
    
    .stats-panel-header {
        padding: 10px 12px;
    }
    
    .stats-panel-header h3 {
        font-size: 12px;
    }
    
    .stats-panel-content {
        padding: 10px;
    }
    
    /* Mobile stats edge button */
    .stats-edge-btn {
        width: 40px;
        height: 100px;
        border-radius: 0 20px 20px 0;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 9999 !important;
        top: calc(50% + 192px);
    }
    
    /* Hide stats button on mobile when stats panel is open */
    .stats-panel.open ~ .stats-edge-btn {
        left: -60px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .stats-panel.open ~ .stats-edge-btn:hover {
        left: -60px !important;
        opacity: 0 !important;
    }
    
    /* Alternative selector for mobile when stats button comes before stats panel */
    body:has(.stats-panel.open) .stats-edge-btn {
        left: -60px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    body:has(.stats-panel.open) .stats-edge-btn:hover {
        left: -60px !important;
        opacity: 0 !important;
    }
    
    .stats-edge-btn .stats-btn-icon {
        font-size: 14px;
        margin-bottom: 6px;
    }
    
    .stats-edge-btn .stats-btn-label {
        font-size: 8px;
    }
    
    /* Mobile stats keep visible behavior */
    .widget-panel.open ~ .stats-widget-panel,
    body:has(.widget-panel.open) .stats-widget-panel {
        left: 0;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-widget-panel {
        top: calc(60% - 27px);
        z-index: 1000;
    }
    
    .edge-button {
        width: 45px;
        height: 110px;
    }
    
    .widget-panel {
        width: 175px;
        height: 450px;
        right: -185px;
    }
    
    /* Hide button completely on tablet when panel is open */
    .widget-panel.open ~ .edge-button {
        right: -65px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .widget-panel.open ~ .edge-button:hover {
        right: -65px !important;
        opacity: 0 !important;
    }
    
    /* Alternative selector for tablet when edge button comes before widget panel */
    body:has(.widget-panel.open) .edge-button {
        right: -65px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    body:has(.widget-panel.open) .edge-button:hover {
        right: -65px !important;
        opacity: 0 !important;
    }
    
    /* Tablet horizontal line stats */
    .stats-widget-panel {
        width: 360px;
        height: 55px;
        padding: 0 27px 0 22px;
        top: calc(60% - 27px);
        z-index: 1000;
    }
    
    .line-stat-number {
        font-size: 13px;
    }
    
    .line-stat-label {
        font-size: 8.5px;
    }
    
    .line-stat-item:not(:last-child)::after {
        right: -13px;
        height: 28px;
    }
    
    /* Tablet stats panel - Matching Main Widget Panel */
    .stats-panel {
        width: 175px;
        height: 450px;
        left: -185px;
        top: calc(38% - 57px + 192px);
    }
    
    .stats-panel.open {
        left: 0;
    }
    
    .stats-panel-header {
        padding: 12px 15px;
    }
    
    .stats-panel-header h3 {
        font-size: 13px;
    }
    
    .stats-panel-content {
        padding: 12px;
    }
    
    .stats-item {
        padding: 8px;
    }
    
    .stats-icon {
        width: 30px;
        height: 30px;
        border-radius: 11px;
        margin-right: 9px;
    }
    
    .stats-icon i {
        font-size: 13px;
    }
    
    .stats-title {
        font-size: 12px;
    }
    
    .stats-desc {
        font-size: 9.5px;
    }
    
    /* Tablet stats edge button */
    .stats-edge-btn {
        width: 45px;
        height: 110px;
        border-radius: 0 22px 22px 0;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 9999 !important;
        top: calc(50% + 150px);
    }
    
    /* Hide stats button on tablet when stats panel is open */
    .stats-panel.open ~ .stats-edge-btn {
        left: -65px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .stats-panel.open ~ .stats-edge-btn:hover {
        left: -65px !important;
        opacity: 0 !important;
    }
    
    /* Alternative selector for tablet when stats button comes before stats panel */
    body:has(.stats-panel.open) .stats-edge-btn {
        left: -65px !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    body:has(.stats-panel.open) .stats-edge-btn:hover {
        left: -65px !important;
        opacity: 0 !important;
    }
    
    .stats-edge-btn .stats-btn-icon {
        font-size: 16px;
        margin-bottom: 7px;
    }
    
    .stats-edge-btn .stats-btn-label {
        font-size: 9px;
    }
    
    /* Tablet stats keep visible behavior */
    .widget-panel.open ~ .stats-widget-panel,
    body:has(.widget-panel.open) .stats-widget-panel {
        left: 0;
    }
}

/* Translator Modal Styles */
#translatorModal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

#translatorModal.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.translator-modal-content {
    max-width: 800px !important;
    width: 95% !important;
    max-height: 90vh !important;
    margin: 2% auto !important;
    animation: slideUpFromBottom 0.6s ease !important;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05)) !important;
    backdrop-filter: blur(25px) !important;
    border: none !important;
}

.translator-body {
    padding: 0;
    max-height: calc(90vh - 100px);
    overflow-y: auto;
}

.translator-interface {
    padding: 20px;
}

.language-selectors {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.lang-selector {
    flex: 1;
    min-width: 150px;
}

.lang-selector label {
    display: block;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.lang-dropdown {
    width: 100%;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #000000;
    font-size: 14px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.lang-dropdown:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.lang-dropdown option {
    background: #ffffff;
    color: #000000;
}

.swap-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    margin-top: 25px;
}

.swap-btn:hover {
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.translation-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.input-section,
.output-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
}

.input-header,
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.input-label,
.output-label {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.clear-btn,
.copy-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.clear-btn:hover,
.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#sourceText {
    width: 100%;
    height: 120px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 12px;
    color: #000000;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

#sourceText:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

#sourceText::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.char-count {
    text-align: right;
    color: #ffffff;
    font-size: 12px;
    margin-top: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.translation-output {
    min-height: 120px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 12px;
    color: #333333;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    backdrop-filter: blur(10px);
}

.translator-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.translate-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.translate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.voice-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.voice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.voice-btn.listening {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    animation: pulse-red 1.5s ease-in-out infinite;
}

.voice-status {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    margin: 15px 0;
}

.voice-indicator {
    display: flex;
    gap: 3px;
    align-items: end;
}

.voice-wave {
    width: 4px;
    height: 20px;
    background: #ef4444;
    border-radius: 2px;
    animation: voice-wave 1.2s ease-in-out infinite;
}

.voice-wave:nth-child(2) {
    animation-delay: 0.2s;
}

.voice-wave:nth-child(3) {
    animation-delay: 0.4s;
}

.voice-text {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

@keyframes voice-wave {
    0%, 100% { height: 20px; }
    50% { height: 5px; }
}

.speak-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.speak-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.quick-phrases {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.quick-phrases h4 {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.phrase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.phrase-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.phrase-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    transform: translateY(-1px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Mobile Responsive for Translator */
@media (max-width: 768px) {
    .translator-modal-content {
        width: 98% !important;
        margin: 1% auto !important;
        max-height: 95vh !important;
    }
    
    .language-selectors {
        flex-direction: column;
        gap: 10px;
    }
    
    .lang-selector {
        min-width: 100%;
    }
    
    .swap-btn {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    .translation-boxes {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .translator-actions {
        justify-content: center;
    }
    
    .phrase-grid {
        grid-template-columns: 1fr;
    }
}

/* GPS Map Modal Styles */
#gpsMapModal .modal-content {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    margin: 2% auto;
    position: relative;
    width: 90%;
    max-width: 800px;
    height: calc(85vh - 80px);
}

.gps-map-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.map-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 15px;
    padding: 0 10px;
}

.gps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #F5F5DC, #FDF5E6);
    color: #8B4513;
    border: 2px solid #8B4513;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 
        0 2px 8px rgba(139, 69, 19, 0.2),
        inset 0 1px 2px rgba(255, 248, 220, 0.5);
    min-height: 40px;
    font-family: 'Times New Roman', serif;
}

.gps-btn.primary {
    background: linear-gradient(135deg, #CD853F, #A0522D);
    color: #FFF8DC;
    box-shadow: 
        0 2px 8px rgba(139, 69, 19, 0.3),
        inset 0 1px 2px rgba(255, 248, 220, 0.3);
}

.gps-btn.tourism {
    background: linear-gradient(135deg, #DEB887, #D2B48C);
    color: #8B4513;
    box-shadow: 
        0 2px 8px rgba(139, 69, 19, 0.2),
        inset 0 1px 2px rgba(255, 248, 220, 0.6);
}

.gps-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(139, 69, 19, 0.3),
        inset 0 1px 2px rgba(255, 248, 220, 0.6);
}

.gps-btn.primary:hover {
    box-shadow: 
        0 4px 12px rgba(139, 69, 19, 0.4),
        inset 0 1px 2px rgba(255, 248, 220, 0.4);
}

.gps-btn.tourism:hover {
    box-shadow: 
        0 4px 12px rgba(139, 69, 19, 0.3),
        inset 0 1px 2px rgba(255, 248, 220, 0.7);
}

/* Active state for GPS buttons */
.gps-btn.active {
    background: linear-gradient(135deg, #8B4513, #A0522D) !important;
    color: #FFF8DC !important;
    box-shadow: 
        0 4px 12px rgba(139, 69, 19, 0.5),
        inset 0 1px 2px rgba(255, 248, 220, 0.3) !important;
    transform: translateY(-1px);
}

.gps-btn i {
    font-size: 12px;
}

.map-container {
    flex: 1;
    min-height: 600px;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(139, 69, 19, 0.3),
        0 4px 16px rgba(160, 82, 45, 0.2),
        inset 0 2px 4px rgba(255, 248, 220, 0.3);
    border: 3px solid #8B4513;
    background: 
        radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(160, 82, 45, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #F5F5DC 0%, #FDF5E6 50%, #FFF8DC 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-family: 'Times New Roman', serif;
}

.map-container:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(139, 69, 19, 0.4),
        0 6px 20px rgba(160, 82, 45, 0.3),
        inset 0 2px 4px rgba(255, 248, 220, 0.4);
}

/* Map loading animation */
@keyframes mapFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.mauritius-svg.loading {
    animation: mapFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Interactive map features */
.map-container {
    position: relative;
    overflow: hidden;
}

.map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.map-container:hover::before {
    opacity: 1;
}

/* Datawrapper Map Styles */
.datawrapper-map {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* Atlas-style decorative elements */
.datawrapper-map::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.datawrapper-map::after {
    content: 'MAURITIUS';
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: 'Times New Roman', serif;
    font-size: 12px;
    font-weight: bold;
    color: #8B4513;
    text-shadow: 1px 1px 2px rgba(255, 248, 220, 0.8);
    letter-spacing: 2px;
    pointer-events: none;
    z-index: 2;
}

.datawrapper-map iframe {
    width: 100% !important;
    height: 500px !important;
    border: 2px solid #8B4513;
    border-radius: 4px;
    box-shadow: 
        0 4px 16px rgba(139, 69, 19, 0.2),
        inset 0 1px 2px rgba(255, 248, 220, 0.3);
    transition: all 0.3s ease;
    filter: sepia(0.3) contrast(1.1) brightness(1.05);
}

.datawrapper-map iframe:hover {
    box-shadow: 
        0 6px 20px rgba(139, 69, 19, 0.3),
        inset 0 1px 2px rgba(255, 248, 220, 0.4);
    transform: translateY(-2px);
    filter: sepia(0.4) contrast(1.15) brightness(1.1);
}

/* Custom Marker Styles */
.custom-marker {
    background: #1CA8CB;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(28, 168, 203, 0.4);
    animation: pulse 2s infinite;
}

.custom-marker.premium {
    background: #FFD700;
    border-color: #FFA500;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.custom-marker.standard {
    background: #4CAF50;
    border-color: #2E7D32;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.custom-marker.basic {
    background: #2196F3;
    border-color: #1565C0;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

/* District Overlay Styles */
.district-overlay {
    fill: rgba(28, 168, 203, 0.1);
    stroke: #1CA8CB;
    stroke-width: 2;
    stroke-opacity: 0.8;
    transition: all 0.3s ease;
}

.district-overlay:hover {
    fill: rgba(28, 168, 203, 0.3);
    stroke-width: 3;
    stroke-opacity: 1;
}

/* District Popup Styles */
.district-popup {
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.district-popup h3 {
    color: #1CA8CB;
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.district-popup p {
    color: #666;
    margin: 0 0 12px 0;
    font-size: 14px;
}

.btn-explore {
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-explore:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 168, 203, 0.3);
}

/* Location Popup Styles */
.location-popup {
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

.location-popup h3 {
    color: #1CA8CB;
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
}

.location-popup p {
    color: #666;
    margin: 0;
    font-size: 12px;
}

/* Mauritius SVG Map Styles */
.svg-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mauritius-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 500px;
    min-height: 500px;
    filter: 
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1))
        contrast(1.1)
        brightness(1.05);
    border-radius: 8px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mauritius-svg:hover {
    filter: 
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15))
        contrast(1.15)
        brightness(1.1);
    transform: translate(-50%, -50%) scale(1.02);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mauritius-svg:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(0.98);
    transition: transform 0.1s ease;
}

.markers-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

.markers-overlay * {
    pointer-events: all;
}

/* District Overlay Styles */
.district-overlay {
    pointer-events: all;
}

.district-path {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.district-path:hover {
    opacity: 0.7 !important;
    stroke-width: 0.3 !important;
    filter: 
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2))
        brightness(1.1);
    transform: scale(1.01);
    transform-origin: center;
}

.district-path:active {
    opacity: 0.8 !important;
    stroke-width: 0.4 !important;
    transform: scale(0.99);
}

/* Map Zoom Controls */
.map-zoom-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
}

/* Pin Management Panel */
.pin-management-panel {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 20;
    min-width: 200px;
}

.pin-management-panel h4 {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pin-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.pin-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.pin-btn.add-pin {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.pin-btn.manage-pins {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.pin-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #666;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.legend-color.premium {
    background: #FFD700;
    border-color: #FFA500;
}

.legend-color.standard {
    background: #4CAF50;
    border-color: #2E7D32;
}

.legend-color.basic {
    background: #2196F3;
    border-color: #1565C0;
}

/* Pin Management Modals */
.add-pin-modal, .manage-pins-modal {
    max-width: 500px;
    width: 90%;
}

.pins-list {
    max-height: 400px;
    overflow-y: auto;
}

.pin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #f9f9f9;
}

.pin-info {
    flex: 1;
}

.pin-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.pin-type {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pin-type.premium {
    background: #FFD700;
    color: #B8860B;
}

.pin-type.standard {
    background: #4CAF50;
    color: white;
}

.pin-type.basic {
    background: #2196F3;
    color: white;
}

.pin-header h4 {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.pin-info p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.pin-actions {
    display: flex;
    gap: 8px;
}

.btn-edit, .btn-delete {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-edit {
    background: #FF9800;
    color: white;
}

.btn-edit:hover {
    background: #F57C00;
}

.btn-delete {
    background: #F44336;
    color: white;
}

.btn-delete:hover {
    background: #D32F2F;
}

.zoom-btn {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #333;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.zoom-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.zoom-btn:hover {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 24px rgba(33, 150, 243, 0.3),
        0 4px 8px rgba(33, 150, 243, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.zoom-btn:hover::before {
    opacity: 1;
}

.zoom-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: transform 0.1s ease;
}

.city-marker, .attraction-marker {
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    stroke-width: 0.5;
}

.city-marker:hover, .attraction-marker:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    stroke-width: 1;
}

/* Client Pin Styles */
.client-pin {
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    stroke-width: 0.5;
    animation: pulse 2s infinite;
}

.client-pin:hover {
    transform: scale(1.4);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    stroke-width: 1;
    animation: none;
}

.client-pin.premium {
    fill: #FFD700;
    stroke: #FFA500;
    stroke-width: 0.8;
}

.client-pin.standard {
    fill: #4CAF50;
    stroke: #2E7D32;
    stroke-width: 0.6;
}

.client-pin.basic {
    fill: #2196F3;
    stroke: #1565C0;
    stroke-width: 0.4;
}

.beach-area, .mountain-area {
    cursor: pointer;
    transition: all 0.3s ease;
}

.beach-area:hover {
    fill: #A5D6A7;
    opacity: 1;
}

.mountain-area:hover {
    fill: #A1887F;
    opacity: 1;
}

.current-location {
    animation: pulse 2s infinite;
    filter: drop-shadow(0 4px 8px rgba(244, 67, 54, 0.4));
}

.city-label {
    pointer-events: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.city-label:hover {
    font-size: 14px;
    fill: #1976D2;
}

/* Map Tooltip */
.map-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.map-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

.map-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 10px;
}

.location-info, .popular-places {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.location-info h3, .popular-places h3 {
    color: #1E3A8A;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-info p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
}

.places-categories {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-section h4 {
    color: #1E3A8A;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.places-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 6px;
}

.place-btn {
    padding: 6px 10px;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    color: #1E3A8A;
    border: 1px solid rgba(30, 58, 138, 0.2);
    border-radius: 15px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
    white-space: nowrap;
}

.place-btn.beach {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: rgba(59, 130, 246, 0.3);
}

.place-btn.attraction {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: rgba(245, 158, 11, 0.3);
}

.place-btn.city {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border-color: rgba(168, 85, 247, 0.3);
}

.place-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(28, 168, 203, 0.3);
}

.place-btn.beach:hover {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}

.place-btn.attraction:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}

.place-btn.city:hover {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    color: white;
    box-shadow: 0 3px 8px rgba(168, 85, 247, 0.3);
}

/* Mobile responsive for GPS Map */
@media (max-width: 768px) {
    .gps-map-content {
        padding: 15px;
        gap: 15px;
    }
    
    .map-controls {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 10px;
        padding: 0 5px;
    }
    
    .gps-btn {
        padding: 8px 6px;
        font-size: 10px;
        min-height: 36px;
        gap: 4px;
    }
    
    .gps-btn span {
        display: none;
    }
    
    .map-container {
        min-height: 280px;
        border-radius: 8px;
    }
    
    .map-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .location-info, .popular-places {
        padding: 12px;
    }
    
    .location-info h3, .popular-places h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .places-categories {
        gap: 12px;
    }
    
    .category-section h4 {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .places-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    
    .place-btn {
        padding: 5px 8px;
        font-size: 9px;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .map-controls {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
    
    .gps-btn {
        padding: 6px 4px;
        font-size: 9px;
        min-height: 32px;
    }
    
    .map-container {
        min-height: 250px;
    }
    
    .places-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    
    .place-btn {
        padding: 4px 6px;
        font-size: 8px;
    }
}

/* Global Touch Improvements for All Devices */
@media (max-width: 1024px) {
    .ring-card {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-drag: none !important;
        min-height: 55px !important;
        min-width: 55px !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }
      
    .ring-card:active {
        transform: scale(0.9) !important;
        opacity: 0.7 !important;
        transition: all 0.1s ease !important;
    }
    
    .ring-card:hover {
        transform: scale(1.05) !important;
        transition: transform 0.2s ease !important;
    }
    
    /* Ultra-responsive GPS map widget */
    .ring-card.map-item {
        transition: all 0.1s ease !important;
        will-change: transform, opacity !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        position: relative !important;
    }
    
    /* Make the entire ring-card div fully touchable - complete area */
    .ring-card.map-item {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 80px !important;
        min-height: 80px !important;
        padding: 10px !important;
        margin: -10px !important;
        box-sizing: border-box !important;
    }
    
    
    /* Make only specific elements touchable - not the badge */
    .ring-card.map-item .ring-wrap,
    .ring-card.map-item .ring-bg,
    .ring-card.map-item .ring-progress {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Specifically make the white inner circle fully touchable */
    .ring-card.map-item .ring-inner {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Make the text elements in white circle touchable */
    .ring-card.map-item .ring-title,
    .ring-card.map-item .ring-subtitle {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 6 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Make ring-badge (icon) NOT touchable - like links item */
    .ring-card.map-item .ring-badge,
    .ring-card.map-item .ring-badge *,
    .ring-card.map-item .ring-badge i,
    .ring-card.map-item .ring-badge i::before {
        pointer-events: none !important;
        cursor: default !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Remove any blocking elements */
    .ring-card.map-item::before,
    .ring-card.map-item::after {
        display: none !important;
    }
    
    /* CLEAN GPS map item - ONLY ring-inner touchable */
    .ring-card.map-item .ring-inner {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Make GPS map item visually responsive to touch */
    .ring-card.map-item:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
        transition: all 0.1s ease !important;
    }
    
    .ring-card.map-item:active,
    .ring-card.map-item:focus {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
        outline: 2px solid #1CA8CB !important;
        outline-offset: 2px !important;
    }
    
    .ring-card.map-item:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 8px 25px rgba(28, 168, 203, 0.3) !important;
    }
    
    /* Ensure side panels are touchable */
    .side-panel, .right-side-panel {
        pointer-events: auto !important;
        z-index: 10000 !important;
    }
    
    .panel-content {
        pointer-events: auto !important;
    }
}

.tour-card {
    position: relative;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(28,168,203,0.2);
    box-shadow: 0 12px 28px rgba(2,6,23,0.08);
    transform-style: preserve-3d;
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(.2,.6,.2,1), box-shadow 0.4s ease;
}

.tour-card:hover {
    transform: translateY(-8px) rotateX(6deg) rotateY(-6deg);
    box-shadow: 0 20px 50px rgba(28,168,203,0.25);
}

.tour-card .layer {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* Themes */
.tour-card.beach .sky { background: linear-gradient(180deg, #93c5fd 0%, #ffffff 100%); }
.tour-card.beach .sun { position: absolute; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(#fde68a, #f59e0b); top: 18px; right: 18px; transform: translateZ(40px); filter: blur(0.2px); }
.tour-card.beach .sun.small { width: 48px; height: 48px; }
.tour-card.beach .cloud { position: absolute; width: 120px; height: 40px; background: #fff; border-radius: 40px; top: 28px; left: 18px; box-shadow: 30px 10px 0 10px #fff, 70px 0 0 0 #fff; opacity: 0.8; transform: translateZ(30px); }
.tour-card.beach .cloud-2 { top: 55px; left: 80px; opacity: 0.7; transform: translateZ(25px); }
.tour-card.beach .island { position: absolute; bottom: 36px; left: 12px; right: 12px; height: 60px; background: var(--land-gradient, linear-gradient(180deg, #bef264, #84cc16)); border-radius: 20px; transform: translateZ(20px); }
.tour-card.beach .wave { position: absolute; left: 0; right: 0; height: 20px; background: var(--water-gradient, linear-gradient(180deg, #67e8f9, #22d3ee)); opacity: 0.9; }
.tour-card.beach .wave-1 { bottom: 20px; transform: translateZ(30px); }
.tour-card.beach .wave-2 { bottom: 10px; transform: translateZ(35px); filter: blur(0.3px); }

.tour-card.flight .sky { background: linear-gradient(180deg, #93c5fd 0%, #e0f2fe 100%); }
.tour-card.flight .plane { position: absolute; width: 120px; height: 40px; background: var(--plane-gradient, linear-gradient(90deg, #1CA8CB, #1E3A8A)); top: 48px; left: 22px; border-radius: 8px; transform: translateZ(35px) rotate(5deg); box-shadow: 0 10px 20px rgba(28,168,203,0.35); }
.tour-card.flight .cloud { position: absolute; width: 100px; height: 34px; background: #fff; border-radius: 34px; top: 18px; right: 12px; box-shadow: 24px 8px 0 8px #fff, 54px 0 0 0 #fff; opacity: 0.85; transform: translateZ(25px); }
.tour-card.flight .sun.small { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(#fde68a, #f59e0b); top: 16px; left: 16px; transform: translateZ(40px); }

.tour-card.hotel .dusk { background: linear-gradient(180deg, #1E3A8A 0%, #0ea5e9 100%); }
.tour-card.hotel .stars { position: absolute; inset: 0; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px; opacity: 0.25; transform: translateZ(30px); }
.tour-card.hotel .building { position: absolute; bottom: 24px; left: 18px; width: calc(100% - 36px); height: 70px; background: var(--building-gradient, linear-gradient(180deg, #0ea5e9, #0284c7)); border-radius: 12px; transform: translateZ(20px); box-shadow: inset 0 0 0 6px rgba(255,255,255,0.15); }
.tour-card.hotel .palm { position: absolute; bottom: 18px; right: 24px; width: 18px; height: 90px; background: #166534; border-radius: 8px; transform: translateZ(35px) rotate(-6deg); }

.tour-card.mountain .sky { background: linear-gradient(180deg, #93c5fd 0%, #e0f2fe 100%); }
.tour-card.mountain .mountain-peak { position: absolute; bottom: 18px; left: 18px; right: 18px; height: 90px; background: var(--mountain-gradient, linear-gradient(180deg, #94a3b8, #475569)); clip-path: polygon(0% 100%, 50% 0%, 100% 100%); transform: translateZ(25px); }
.tour-card.mountain .bird { position: absolute; width: 22px; height: 12px; border-radius: 12px 12px 0 0; background: #0f172a; top: 24px; left: 28px; transform: translateZ(40px); }
.tour-card.mountain .bird-2 { top: 34px; left: 70px; width: 28px; }

.tour-card .card-content {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transform: translateZ(50px);
}

.tour-card .card-content .icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-gradient, linear-gradient(135deg, #1CA8CB, #1E3A8A));
    color: #fff;
    box-shadow: 0 10px 20px rgba(28,168,203,0.35);
}

.tour-card .card-content .icon i { font-size: 18px; }
.tour-card .card-content .counter-number { font-weight: 800; font-size: 1.8rem; color: #0F172A; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
.tour-card .card-content .label { font-size: 0.95rem; color: #334155; }

@media (max-width: 992px) {
    .ring-counters { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; overflow: visible; max-width: 360px; }
    .ring-wrap { width: 70px; height: 70px; }
    .ring-card { animation: boingFall 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, bounce 2s ease-in-out infinite 1s; opacity: 1; }
    .ring-card:nth-child(1) { animation-delay: 0s, 1s; }
    .ring-card:nth-child(2) { animation-delay: 0.15s, 1.15s; }
    .ring-card:nth-child(3) { animation-delay: 0.3s, 1.3s; }
    .ring-card:nth-child(4) { animation-delay: 0.45s, 1.45s; }
}
@media (max-width: 576px) {
    .ring-counters { display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap; overflow: visible; max-width: 320px; }
    .ring-wrap { width: 60px; height: 60px; }
    .ring-card { animation: boingFall 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, bounce 2s ease-in-out infinite 1s; opacity: 1; }
    .ring-card:nth-child(1) { animation-delay: 0s, 1s; }
    .ring-card:nth-child(2) { animation-delay: 0.15s, 1.15s; }
    .ring-card:nth-child(3) { animation-delay: 0.3s, 1.3s; }
    .ring-card:nth-child(4) { animation-delay: 0.45s, 1.45s; }
}

.counter-circle {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    box-shadow: 
        15px 15px 30px rgba(0, 0, 0, 0.08),
        -15px -15px 30px rgba(255, 255, 255, 0.9),
        inset 0 0 0 2px rgba(28, 168, 203, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    animation: counterFloat 6s ease-in-out infinite;
}


.counter-item:nth-child(2) .counter-circle {
    animation-delay: 1.5s;
}

.counter-item:nth-child(3) .counter-circle {
    animation-delay: 3s;
}

.counter-item:nth-child(4) .counter-circle {
    animation-delay: 4.5s;
}

.counter-circle:hover {
    transform: translateY(-20px) rotateX(10deg) rotateY(10deg) scale(1.05);
    box-shadow: 
        30px 30px 60px rgba(0, 0, 0, 0.15),
        -30px -30px 60px rgba(255, 255, 255, 0.9),
        inset 0 0 0 2px rgba(28, 168, 203, 0.2);
}

.counter-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #1CA8CB, #40E0D0);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(28, 168, 203, 0.6);
    animation: dotPulse 2s ease-in-out infinite;
}

.counter-item:nth-child(1) .counter-dot {
    top: 20px;
    right: 20px;
}

.counter-item:nth-child(2) .counter-dot {
    top: 30px;
    right: 15px;
}

.counter-item:nth-child(3) .counter-dot {
    bottom: 25px;
    right: 25px;
}

.counter-item:nth-child(4) .counter-dot {
    top: 25px;
    right: 30px;
}

.counter-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.counter-circle:hover .counter-number {
    transform: scale(1.1);
    color: #1CA8CB;
}

.counter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6B7280;
    text-align: center;
    line-height: 0.8;
    max-width: 100px;
    margin: -12px 0 0 0;
    transition: all 0.3s ease;
}

.counter-circle:hover .counter-label {
    color: white;
    transform: translateY(-2px);
}

/* Animations */
@keyframes counterFloat {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: translateY(-10px) rotateX(2deg) rotateY(2deg);
    }
    50% {
        transform: translateY(-5px) rotateX(-1deg) rotateY(-1deg);
    }
    75% {
        transform: translateY(-15px) rotateX(1deg) rotateY(-2deg);
    }
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(28, 168, 203, 0.6);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 30px rgba(28, 168, 203, 0.8);
    }
}

@keyframes floatBackground {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

/* Responsive Design - Always One Line */
@media (max-width: 1200px) {
    .counter-section {
        max-width: 350px;
    }
    
    .counter-grid {
        gap: 20px;
        max-width: 1000px;
    }
    
    .counter-circle {
        width: 150px;
        height: 150px;
    }
    
    .counter-number {
        font-size: 2.5rem;
    }
    
    .counter-label {
        font-size: 0.8rem;
        max-width: 100px;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 40px 0 100px 0;
    }
    
    .counter-section {
        padding: 12px 0 0 0;
        margin: 8px auto;
        border-radius: 12px;
        display: flex;
        justify-content: center;
    }
    
    .destination-slider {
        margin: -30px auto 0 auto;
    }
    
    .counter-grid {
        gap: 25px;
        max-width: 750px;
        padding: 0;
        flex-wrap: nowrap;
        margin: -30px auto 0 auto;
    }
    
    .counter-circle {
        width: 68px;
        height: 68px;
        box-shadow: 
            8px 8px 16px rgba(0, 0, 0, 0.1),
            -8px -8px 16px rgba(255, 255, 255, 0.8),
            inset 0 0 0 1px rgba(28, 168, 203, 0.1);
    }
    
    .counter-circle:hover {
        transform: translateY(-10px) rotateX(5deg) rotateY(5deg) scale(1.02);
        box-shadow: 
            25px 25px 50px rgba(0, 0, 0, 0.15),
            -25px -25px 50px rgba(255, 255, 255, 0.9),
            inset 0 0 0 2px rgba(28, 168, 203, 0.2);
    }
    
    .counter-number {
        font-size: 1.4rem;
    }
    
    .counter-label {
        font-size: 0.6rem;
        max-width: 60px;
        margin: -8px 0 0 0;
    }
    
    .counter-dot {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px rgba(28, 168, 203, 0.6);
    }
    
    .counter-item:nth-child(1) .counter-dot {
        top: 15px;
        right: 15px;
    }
    
    .counter-item:nth-child(2) .counter-dot {
        top: 20px;
        right: 10px;
    }
    
    .counter-item:nth-child(3) .counter-dot {
        bottom: 18px;
        right: 18px;
    }
    
    .counter-item:nth-child(4) .counter-dot {
        top: 18px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .counter-section {
        padding: 12px 0 0 0;
        margin: 8px 0;
        border-radius: 12px;
    }
    
    .counter-grid {
        gap: 25px;
        max-width: 750px;
        padding: 0;
        flex-wrap: nowrap;
        margin: -30px auto 0 auto;
    }
    
    .counter-circle {
        width: 50px;
        height: 50px;
        box-shadow: 
            6px 6px 12px rgba(0, 0, 0, 0.1),
            -6px -6px 12px rgba(255, 255, 255, 0.8),
            inset 0 0 0 1px rgba(28, 168, 203, 0.1);
    }
    
    .counter-circle:hover {
        transform: translateY(-5px) rotateX(3deg) rotateY(3deg) scale(1.01);
        box-shadow: 
            12px 12px 24px rgba(0, 0, 0, 0.15),
            -12px -12px 24px rgba(255, 255, 255, 0.9),
            inset 0 0 0 2px rgba(28, 168, 203, 0.2);
    }
    
    .counter-number {
        font-size: 1.1rem;
    }
    
    .counter-label {
        font-size: 0.5rem;
        max-width: 50px;
        margin: -6px 0 0 0;
    }
    
    .counter-dot {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 8px rgba(28, 168, 203, 0.6);
    }
    
    .counter-item:nth-child(1) .counter-dot {
        top: 12px;
        right: 12px;
    }
    
    .counter-item:nth-child(2) .counter-dot {
        top: 15px;
        right: 8px;
    }
    
    .counter-item:nth-child(3) .counter-dot {
        bottom: 14px;
        right: 14px;
    }
    
    .counter-item:nth-child(4) .counter-dot {
        top: 14px;
        right: 15px;
    }
}

@media (max-width: 360px) {
    .counter-section {
        padding: 12px 0 0 0;
        margin: 8px 0;
        border-radius: 12px;
    }
    
    .counter-grid {
        gap: 25px;
        max-width: 750px;
        padding: 0;
        flex-wrap: nowrap;
        margin: -30px auto 0 auto;
    }
    
    .destination-slider {
        margin: -20px auto 0 auto;
    }
    
    .counter-circle {
        width: 45px;
        height: 45px;
    }
    
    .counter-number {
        font-size: 0.9rem;
    }
    
    .counter-label {
        font-size: 0.45rem;
        max-width: 40px;
        margin: -3px 0 0 0;
    }
    
    .counter-dot {
        width: 5px;
        height: 5px;
    }
}

@keyframes textFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}


/* ============================= */
/* Modern Counter Cards (override) */
/* ============================= */
.counter-grid.modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 10px auto 0 auto;
}

.counter-grid.modern .counter-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(28, 168, 203, 0.2);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.counter-grid.modern .counter-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(28, 168, 203, 0.18);
}

.counter-grid.modern .counter-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: #fff;
    margin: 0 auto 10px auto;
    box-shadow: 0 8px 20px rgba(28,168,203,0.35);
}

.counter-grid.modern .counter-icon i {
    font-size: 20px;
}

.counter-grid.modern .counter-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: #0F172A;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.counter-grid.modern .counter-label {
    margin-top: 6px;
    font-size: 0.95rem;
    color: #334155;
}

@media (max-width: 992px) {
    .counter-grid.modern {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .counter-grid.modern {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .counter-grid.modern .counter-number {
        font-size: 1.6rem;
    }
}

.verified-banner {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: white;
    padding: 6px 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* Swiper Carousel Styles */
.destination-slider {
    padding: 0 0 20px 0;
    max-width: 1200px;
    margin: -20px auto 0 auto;
    position: relative;
    z-index: 1;
}

.destination-slider .swiper-slide {
    width: 320px;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.destination-slider .swiper-slide-active {
    transform: scale(1.05);
    z-index: 10;
}

.destination-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.destination-img {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.destination-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-content {
    position: absolute;
    bottom: 0%;
    left: 0;
    right: 0;
    background: linear-gradient(transparent);
    padding: 25px 25px 25px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 200px;
}

.destination-content .box-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.536);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.destination-content .box-title a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.destination-content .box-title a:hover {
    color: #1E3A8A;
}


.destination-content .subcategories {
    font-size: 0.85rem;
    color: #ffffff;
    margin-bottom: 12px;
    font-weight: 800;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: capitalize;
}

.destination-content .price {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.th-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0px 20px;
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    background-size: 200% 200%;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-shadow: none;
    min-width: 80px;
    max-width: 80px;
    height: 32.80px;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 5px 15px rgba(28, 168, 203, 0.3);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

/* Active slide button styling */
.swiper-slide-active .th-btn {
    background: linear-gradient(135deg, #1E3A8A, #1CA8CB);
    box-shadow: 0 8px 25px rgba(28, 168, 203, 0.5);
    transform: scale(1.05);
    min-width: 160px;
}

.th-btn:hover {
    background: linear-gradient(135deg, #1E3A8A, #1CA8CB);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(28, 168, 203, 0.4);
    color: white;
    text-decoration: none;
}

/* Swiper Navigation */
.destination-slider .swiper-button-next,
.destination-slider .swiper-button-prev {
    color: #1CA8CB;
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: -25px;
    transition: all 0.3s ease;
}

.destination-slider .swiper-button-next:hover,
.destination-slider .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}

.destination-slider .swiper-button-next:after,
.destination-slider .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

/* Swiper Pagination */
.destination-slider .swiper-pagination-bullet {
    background: rgba(30, 58, 138, 0.5);
    opacity: 1;
}

.destination-slider .swiper-pagination-bullet-active {
    background: #1E3A8A;
}

/* Swipe Hints */
.swipe-hints {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: auto;
    z-index: 10;
    padding: 0 20px;
}

.swipe-hint-left,
.swipe-hint-right {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    padding: 10px 16px;
    border-radius: 25px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    font-size: 13px;
    font-weight: 700;
    color: #1CA8CB;
    animation: swipeHintPulse 2s ease-in-out infinite;
    opacity: 1;
    border: 3px solid rgba(28, 168, 203, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.swipe-hint-left:hover,
.swipe-hint-right:hover {
    background: rgba(28, 168, 203, 0.1);
    border-color: rgba(28, 168, 203, 0.4);
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.swipe-hint-left {
    animation-delay: 0s;
}

.swipe-hint-right {
    animation-delay: 1s;
}

.swipe-hint-left i,
.swipe-hint-right i {
    font-size: 14px;
    animation: swipeHintBounce 1.5s ease-in-out infinite;
}

@keyframes swipeHintPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes swipeHintBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(3px);
    }
}

/* Show swipe hints on all screen sizes */
.swipe-hints {
    display: flex !important;
}


/* Modal swipe hints positioning */
.deals-swipe-hints {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: auto;
    z-index: 10;
    padding: 0 20px;
}

/* Responsive adjustments for swipe hints */
@media (max-width: 768px) {
    .swipe-hints {
        padding: 0 15px;
    }
    
    .swipe-hint-left,
    .swipe-hint-right {
        padding: 8px 12px;
        font-size: 11px;
        gap: 6px;
    }
    
    .swipe-hint-left i,
    .swipe-hint-right i {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .swipe-hints {
        padding: 0 10px;
    }
    
    .swipe-hint-left,
    .swipe-hint-right {
        padding: 6px 10px;
        font-size: 10px;
        gap: 4px;
    }
    
    .swipe-hint-left i,
    .swipe-hint-right i {
        font-size: 11px;
    }
}

@media (min-width: 1200px) {
    .swipe-hints {
        padding: 0 30px;
    }
    
    .swipe-hint-left,
    .swipe-hint-right {
        padding: 12px 20px;
        font-size: 14px;
        gap: 10px;
    }
    
    .swipe-hint-left i,
    .swipe-hint-right i {
        font-size: 16px;
    }
}

/* Button responsive adjustments */
@media (max-width: 1024px) {
    .th-btn {
        height: 32.80px;
        padding: 11px 18px;
    }
    
    .swiper-slide-active .th-btn {
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .th-btn {
        height: 32.80px;
        font-size: 0.7rem;
        margin-bottom: 4px;
        padding: 10px 16px;
    }
    
    .swiper-slide-active .th-btn {
        min-width: 140px;
    }
    
    .explore-btn, .book-btn {
        min-width: 150px;
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .th-btn {
        height: 32.80px;
        font-size: 0.65rem;
        padding: 8px 12px;
    }
    
    .swiper-slide-active .th-btn {
        min-width: 120px;
    }
    
    .explore-btn, .book-btn {
        min-width: 130px;
        padding: 10px 16px;
        font-size: 0.8rem;
    }
}

/* Ensure smooth transitions for dynamic changes */
.th-btn {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* Active slide button - visible */
.swiper-slide-active .th-btn {
    opacity: 1;
    visibility: visible;
    display: flex;
    transform: scale(1.05);
}

/* Active slide icon - visible */
.swiper-slide-active .button-icon {
    opacity: 0.75;
    visibility: visible;
    display: inline-block;
    width: 72px !important;
    height: 72px !important;
}

/* Ensure first slide button is visible by default */
.destination-slider .swiper-slide:first-child .th-btn {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* Ensure first slide icon is visible by default */
.destination-slider .swiper-slide:first-child .button-icon {
    opacity: 0.75;
    visibility: visible;
    display: inline-block;
    width: 72px !important;
    height: 72px !important;
}

/* Booking slider icon visibility - always visible since booking slider doesn't have slide transitions */
.booking-btn-container .button-icon {
    opacity: 0.75;
    visibility: visible;
    display: inline-block;
    width: 72px !important;
    height: 72px !important;
}

/* Button icon styling - now centered */
.button-icon {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: none;
    vertical-align: middle;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    border-radius: 35% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -ms-filter: none !important;
    -o-filter: none !important;
    image-rendering: auto !important;
    -webkit-image-rendering: auto !important;
    -moz-image-rendering: auto !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    position: relative;
    overflow: hidden;
}

/* Button icon when visible - reduced opacity by 25% */
.button-icon[style*="display: inline-block"],
.button-icon:not([style*="display: none"]) {
    opacity: 0.75 !important;
}

/* Button icon styling */
.button-icon {
    position: relative;
    display: inline-block;
}


/* Container for button and icon */
.button-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    width: 80px; /* Match icon width */
    height: 80px; /* Match icon height */
}

/* Zoom out animation for icon */
.button-icon {
    transition: transform 0.3s ease-in-out;
    animation: zoomOut 3s ease-in-out infinite;
}

/* Hover zoom in effect */
.button-with-icon:hover .button-icon {
    transform: scale(1.4);
    animation-play-state: paused;
}

@keyframes zoomOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(1);
    }
}


/* Booking slider icon positioning - move to bottom-right corner */
.booking-slider .step-box .booking-btn-container.button-with-icon {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    bottom: 5px !important;
    top: auto !important;
    transform: none !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 0 !important;
    text-align: left !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Force override for all booking button containers */
div[class*="booking-btn-container"] {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobile responsive for booking slider icons - same size as middle carousel */
@media (max-width: 768px) {
    .booking-slider .step-box .booking-btn-container.button-with-icon {
        right: 3px !important;
        bottom: 3px !important;
    }
    
    .booking-btn-container .button-icon {
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 480px) {
    .booking-slider .step-box .booking-btn-container.button-with-icon {
        right: 2px !important;
        bottom: 2px !important;
    }
    
    .booking-btn-container .button-icon {
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 320px) {
    .booking-slider .step-box .booking-btn-container.button-with-icon {
        right: 1px !important;
        bottom: 1px !important;
    }
    
    .booking-btn-container .button-icon {
        width: 60px !important;
        height: 60px !important;
    }
}

/* Booking button container styling */
.booking-btn-container {
    margin-top: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.booking-btn-container .th-btn {
    opacity: 1;
    visibility: visible;
    display: inline-flex;
    transform: scale(1.05);
    min-width: 160px;
    height: 32.80px;
    font-size: 0.8rem;
    padding: 0px 20px;
    background-size: 200% 200%;
}

/* Prevent text overflow */
.th-btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive booking buttons - matching main .th-btn proportions */
@media (max-width: 1024px) {
    .booking-btn-container .th-btn {
        height: 32.80px;
        padding: 11px 18px;
    }
    
    .booking-btn-container .th-btn-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .booking-btn-container .th-btn {
        height: 32.80px;
        font-size: 0.7rem;
        margin-bottom: 4px;
        padding: 10px 16px;
    }
    
    .booking-btn-container .th-btn-icon {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .booking-btn-container .th-btn {
        height: 32.80px;
        font-size: 0.65rem;
        padding: 8px 12px;
    }
    
    .booking-btn-container .th-btn-icon {
        width: 16px;
        height: 16px;
    }
}


/* Deals Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    padding-top: 80px; /* Add spacing to avoid navbar overlap */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal .modal-content {
    position: relative;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(100px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.modal.show .modal-content {
    transform: translateY(0);
}

/* Second Carousel Modal (Accommodations) - Same as other modals */



/* Modal entrance animation keyframes */
@keyframes modalSlideUp {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.9);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes modalFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

@keyframes modalFadeOut {
    0% {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

@keyframes modalSlideDown {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(50px) scale(0.95);
        opacity: 0;
    }
}



/* Apply animations when modals open */
.modal.animate-in {
    animation: modalFadeIn 0.4s ease-out;
}

.modal.animate-in .modal-content {
    animation: modalSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal.animate-out {
    animation: modalFadeOut 0.3s ease-in;
}

.modal.animate-out .modal-content {
    animation: modalSlideDown 0.3s ease-in;
}


.modal-content {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    margin: 2% auto; /* Reduced margin to account for padding-top */
    padding: 40px 0 0 0;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    height: calc(85vh - 80px); /* Adjust height to account for navbar spacing */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
}

.modal-header {
    background: transparent;
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.modal-header h2 {
    color: white !important;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* All modal h2 titles should be white */
.modal h2 {
    color: white !important;

    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

/* All Modals Standardized */

#thirdCarouselModal .modal-content,
#usefulLinksModal .modal-content {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    margin: 2% auto; /* Standard margin for all modals */
    position: relative; /* Standard positioning */
    width: 90%;
    max-width: 800px;
    height: calc(85vh - 80px); /* Standard height for all modals */
}

.close-bottom {
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
}

.close-bottom:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    transform: scale(1.1);
}

.close-top {
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
}

.close-top:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    transform: scale(1.1);
}

.close-useful {
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
}

.close-useful:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    transform: scale(1.1);
}

/* Useful Links Modal Styles */
.useful-links-content {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    position: relative;
}

/* Custom Scrollbar for Useful Links Modal */
.useful-links-content::-webkit-scrollbar {
    width: 8px;
}

.useful-links-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.useful-links-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #1CA8CB, #0EA5E9);
    border-radius: 4px;
}

.useful-links-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
}


.useful-links-content h2 {
    text-align: center;
    color: #1E3A8A;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.number-category {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.number-category h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.number-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.number-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: white;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 4px solid #1CA8CB;
}

.number-item:hover {
    background: white;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.number-item .service {
    font-weight: 500;
    color: #333333;
    font-size: 0.9rem;
}

.phone-number {
    color: #1CA8CB;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 6px 12px;
    background: rgba(28, 168, 203, 0.1);
    border-radius: 6px;
    transition: all 0.3s ease;
    border: 1px solid rgba(28, 168, 203, 0.3);
}

.phone-number:hover {
    background: #1CA8CB;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(28, 168, 203, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .numbers-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 10px;
    }
    
    .number-category {
        padding: 15px;
    }
    
    .number-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .phone-number {
        align-self: flex-end;
        font-size: 0.9rem;
    }
    
    .useful-links-content h2 {
        font-size: 1.5rem;
    }
}

@keyframes slideUpFromBottom {
    0% {
        transform: translateY(100vh);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownFromTop {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

/* Third Carousel Modal Content Styles */
.service-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.service-info h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E3A8A;
    margin: 0 0 12px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}


.service-info .service-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.service-info .service-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: #059669;
    margin: 0 0 20px 0;
}

.service-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-tag {
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.service-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 20px;
}

.explore-btn, .book-btn {
    padding: 14px 28px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    min-width: 180px;
}

.explore-btn {
    background: linear-gradient(135deg, #6B7280, #4B5563);
    color: white;
}

.explore-btn:hover {
    background: linear-gradient(135deg, #4B5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.book-btn {
    background: linear-gradient(135deg, #059669, #047857);
    color: white;
}

.book-btn:hover {
    background: linear-gradient(135deg, #047857, #065F46);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.close {
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
}

.close:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.modal-body {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* Deals Carousel */
.deals-carousel {
    padding: 0;
    height: 100%;
    margin: 0;
}

.deal-card {
    background: transparent;
    border-radius: 12px;
    padding: 0;
    margin: 0;
    border: none;
    transition: all 0.3s ease;
    text-align: center;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Regular deal cards with full-sized background images */
.deal-card .destination-content {
    position: absolute;
    bottom: 0%;
    left: 0;
    right: 0;
    background: linear-gradient(transparent);
    padding: 25px 25px 25px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

.deal-card .destination-content .media-left {
    text-align: center;
    width: 100%;
}

.deal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.deal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(255, 255, 255, 0.536);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deal-description {
    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 12px;
    font-weight: 800;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.3px;
    text-transform: capitalize;
    text-align: center;
    display: block;
    max-width: 100%;
}

/* Initial slide styling for modal carousels - matching carousel item format */
.deal-card.initial-slide {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.deal-card.initial-slide .destination-img {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.deal-card.initial-slide .destination-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.deal-card.initial-slide .destination-content {
    position: absolute;
    bottom: 0%;
    left: 0;
    right: 0;
    background: linear-gradient(transparent);
    padding: 25px 25px 25px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
}

/* Modal close button styling */
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.modal-close-btn:hover {
    background: rgba(255, 0, 0, 0.8);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}

.modal-close-btn:active {
    transform: scale(0.95);
}

/* Modal initial slide inherits exact same styling as carousel items */
.deal-card.initial-slide .destination-content .media-left {
    text-align: center !important;
    width: 100% !important;
}

.deal-card.initial-slide .destination-content .media-left .box-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    background: rgba(255, 255, 255, 0.536) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.deal-card.initial-slide .destination-content .media-left .box-title a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.deal-card.initial-slide .destination-content .media-left .box-title a:hover {
    color: #1E3A8A !important;
}

.deal-card.initial-slide .destination-content .media-left .subcategories {
    font-size: 0.85rem !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    font-weight: 800 !important;
    opacity: 0.9 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.3px !important;
    text-transform: capitalize !important;
    text-align: center !important;
    display: block !important;
}

/* Accommodations modal inherits general modal styling */
#accommodationsModal .modal-body {
    padding: 0 !important;
}

/* Accommodations Carousel - same as deals carousel */
.accommodations-carousel {
    padding: 0;
    height: 100%;
    margin: 0;
}

#accommodationsModal .accommodations-carousel {
    height: 500px !important;
}

#accommodationsModal .accommodations-carousel .swiper-slide {
    height: 500px !important;
}

/* Responsive title sizing to keep on one line */
@media (max-width: 768px) {
    .destination-content .box-title,
    .deal-card.initial-slide .destination-content .media-left .box-title {
        font-size: 1.2rem !important;
        padding: 3px 6px !important;
    }
}

@media (max-width: 480px) {
    .destination-content .box-title,
    .deal-card.initial-slide .destination-content .media-left .box-title {
        font-size: 1rem !important;
        padding: 2px 4px !important;
    }
}

@media (max-width: 320px) {
    .destination-content .box-title,
    .deal-card.initial-slide .destination-content .media-left .box-title {
        font-size: 0.9rem !important;
        padding: 2px 3px !important;
    }
}

/* Ensure image displays properly in accommodations modal */
#accommodationsModal .deal-card.initial-slide .destination-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#accommodationsModal .deal-card.initial-slide .destination-img {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.deal-card.initial-slide .button-with-icon {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    bottom: 5px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
}

.deal-card.initial-slide .button-icon {
    width: 103px !important;
    height: 103px !important;
    opacity: 0.75 !important;
}

.deal-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.deal-original-price {
    font-size: 1.2rem;
    color: #cccccc;
    text-decoration: line-through;
    margin-left: 12px;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.deal-discount {
    background: #ff4757;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin-left: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.deal-provider {
    color: #ffffff;
    font-size: 0.9rem;
    margin-bottom: 32px;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.deal-btn {
    background: #1a1a1a;
    color: #ffffff;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-block;
    border: 2px solid #1a1a1a;
}

.deal-btn:hover {
    background: #ffffff;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Deals Carousel Navigation */
.deals-next,
.deals-prev {
    display: none;
}

.deals-pagination .swiper-pagination-bullet {
    background: rgba(30, 58, 138, 0.5);
    opacity: 1;
    width: 8px;
    height: 8px;
}

.deals-pagination .swiper-pagination-bullet-active {
    background: #1E3A8A;
}

/* Accommodations Pagination */
.accommodations-pagination .swiper-pagination-bullet {
    background: rgba(30, 58, 138, 0.5);
    opacity: 1;
    width: 8px;
    height: 8px;
}

.accommodations-pagination .swiper-pagination-bullet-active {
    background: #1E3A8A;
}

/* Third Carousel Pagination */
.third-pagination .swiper-pagination-bullet {
    background: rgba(30, 58, 138, 0.5);
    opacity: 1;
    width: 8px;
    height: 8px;
}

.third-pagination .swiper-pagination-bullet-active {
    background: #1E3A8A;
}

.service-card {
    background: #4A90E2;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 260px;
    position: absolute;
    overflow: hidden;
    width: 280px;
    cursor: pointer;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 1;
}

.service-card > * {
    position: relative;
    z-index: 2;
}

/* Flights & Transfers */
.service-card:nth-child(1)::before {
    background-image: url('transfers.jpeg');
}

/* Hotels & Villas */
.service-card:nth-child(2)::before {
    background-image: url('accommodations.jpeg');
}

/* Car Rentals */
.service-card:nth-child(3)::before {
    background-image: url('rentals.jpeg');
}

/* Island Tours */
.service-card:nth-child(4)::before {
    background-image: url('island.jpeg');
}

/* Sea Activities */
.service-card:nth-child(5)::before {
    background-image: url('catamaran.jpeg');
}

/* Restaurants */
.service-card:nth-child(6)::before {
    background-image: url('restaurant.jpeg');
}

/* Shopping */
.service-card:nth-child(7)::before {
    background-image: url('shopping.jpeg');
}

/* Cultural Gems */
.service-card:nth-child(8)::before {
    background-image: url('gems.jpeg');
}

/* 3D Carousel Positioning - Left to Right sliding */
.service-card:nth-child(1) {
    background: #8B5CF6;
    transform: translateX(-360px) translateZ(-200px) rotateY(45deg);
    z-index: 0;
    opacity: 0.5;
    scale: 0.65;
}

.service-card:nth-child(2) {
    background: #8B5CF6;
    transform: translateX(-270px) translateZ(-150px) rotateY(35deg);
    z-index: 0;
    opacity: 0.7;
    scale: 0.75;
}

.service-card:nth-child(3) {
    background: #6B46C1;
    transform: translateX(-180px) translateZ(-100px) rotateY(25deg);
    z-index: 1;
    opacity: 0.9;
    scale: 0.85;
}

.service-card:nth-child(4) {
    background: #4A90E2;
    transform: translateX(-90px) translateZ(-50px) rotateY(15deg);
    z-index: 2;
    opacity: 0.95;
    scale: 0.9;
}

.service-card:nth-child(5) {
    background: #4A90E2;
    transform: translateX(0px) translateZ(0px) rotateY(0deg);
    z-index: 5;
    opacity: 1;
    scale: 1.0;
}

.service-card:nth-child(6) {
    background: #6B46C1;
    transform: translateX(90px) translateZ(-50px) rotateY(-15deg);
    z-index: 2;
    opacity: 0.95;
    scale: 0.9;
}

.service-card:nth-child(7) {
    background: #8B5CF6;
    transform: translateX(180px) translateZ(-100px) rotateY(-25deg);
    z-index: 1;
    opacity: 0.9;
    scale: 0.85;
}

.service-card:nth-child(8) {
    background: #8B5CF6;
    transform: translateX(270px) translateZ(-150px) rotateY(-35deg);
    z-index: 0;
    opacity: 0.7;
    scale: 0.75;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 10 !important;
    opacity: 1 !important;
}

.service-card:hover::before {
    opacity: 1;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.service-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(28, 168, 203, 0.7), rgba(14, 165, 233, 0.7));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 28px;
    box-shadow: 0 8px 25px rgba(28, 168, 203, 0.3);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(28, 168, 203, 0.4);
}

.service-card h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    display: inline-block;
}


.subcategories {
    font-size: 0.9rem;
    color: #ffffff;
    margin-bottom: 18px;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1CA8CB;
    margin-top: auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background:  rgba(255, 255, 255, 0.349);
    padding: 6px 12px;
    border-radius: 8px;
    display: inline-block;
}

/* Testimonials Section */
.testimonials {
    background: #F8FAFC url('category_bg_1.png?v=1') center/cover no-repeat fixed;
    padding: 100px 0;
    position: relative;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 250, 252, 0.3);
    z-index: 1;
}

.testimonials .container-fluid {
    position: relative;
    z-index: 2;
}

.title-area {
    margin-bottom: 50px;
}

.sub-title {
    color: #1CA8CB;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.sec-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0;
}

.slider-area {
    padding: 20px 0 60px 0;
}

.testiSlider1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.testi-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 35px;
    margin: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.testi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #1CA8CB, #40E0D0);
}

.testi-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.testi-card_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.testi-card_profile {
    flex: 1;
}

.box-title {
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.536);
    padding: 4px 8px;
    border-radius: 6px;
}

.testi-card_desig {
    color: #6B7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.testi-card_review {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

.testi-card_review i {
    color: #F59E0B;
    font-size: 1rem;
}

.testi-card_text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #374151;
    font-style: italic;
    margin-bottom: 25px;
    position: relative;
}

.testi-card-quote {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #1CA8CB;
    font-size: 2rem;
    opacity: 0.3;
}

.testi-card-quote i {
    color: #1CA8CB;
}

/* Pagination */
.slider-pagination .swiper-pagination-bullet {
    background: rgba(30, 58, 138, 0.3);
    opacity: 1;
    width: 12px;
    height: 12px;
    margin: 0 6px;
}

.slider-pagination .swiper-pagination-bullet-active {
    background: #1E3A8A;
    transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .testimonials {
        padding: 60px 0;
    }
    
    .sec-title {
        font-size: 2rem;
    }
    
    .testi-card {
        padding: 30px 25px;
        margin: 10px;
    }
    
    .testi-card_text {
        font-size: 1rem;
    }
    
    .box-title {
        font-size: 1.1rem;
    }
}

/* Gallery Section */
.gallery {
    background: #F8FAFC url('category_bg_1.png?v=1') center/cover no-repeat fixed;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 250, 252, 0.3);
    z-index: 1;
}

.gallery::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%231CA8CB" opacity="0.3"/><circle cx="80" cy="30" r="1.5" fill="%231CA8CB" opacity="0.2"/><circle cx="40" cy="70" r="1" fill="%231CA8CB" opacity="0.4"/><circle cx="90" cy="80" r="2.5" fill="%231CA8CB" opacity="0.2"/><circle cx="10" cy="90" r="1.5" fill="%231CA8CB" opacity="0.3"/></svg>'),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M20,50 Q50,20 80,50 Q50,80 20,50" fill="none" stroke="%231CA8CB" stroke-width="1" opacity="0.2"/><path d="M120,30 Q150,60 180,30 Q150,0 120,30" fill="none" stroke="%231CA8CB" stroke-width="1" opacity="0.15"/><path d="M30,120 Q60,90 90,120 Q60,150 30,120" fill="none" stroke="%231CA8CB" stroke-width="1" opacity="0.25"/></svg>');
    background-size: 100px 100px, 200px 200px;
    background-position: 0 0, 50px 50px;
    background-repeat: repeat;
    z-index: 1;
    animation: floatBackground 20s ease-in-out infinite;
}

@keyframes floatBackground {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

.gallery .container {
    position: relative;
    z-index: 2;
}

.gallery .title-area {
    margin-bottom: 60px;
}

.gallery .sub-title {
    color: #1CA8CB;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.gallery .sec-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0;
    font-family: 'Montez', cursive;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: 0.6fr 1fr 1fr 1fr 0.6fr;
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-item:first-child,
.gallery-item:last-child {
    align-self: center;
}

.gallery-item:first-child .gallery-card,
.gallery-item:last-child .gallery-card {
    max-height: 250px;
}

.gallery-item-large {
    grid-row: span 2;
}

.gallery-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    background: white;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.box-img {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-card:hover .box-img img {
    transform: scale(1.05);
}

.popup-image {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.icon-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(28, 168, 203, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

.gallery-card:hover .icon-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.icon-btn i {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
}

.popup-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.gallery-card:hover .popup-image::before {
    opacity: 1;
}

/* Gallery Pagination */
.gallery-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(28, 168, 203, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-dot.active {
    background: #1CA8CB;
    transform: scale(1.2);
}

.pagination-dot:hover {
    background: #1CA8CB;
    transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
    }
    
    .gallery-item-large {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .gallery {
        padding: 60px 0;
    }
    
    .gallery .sec-title {
        font-size: 2rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .gallery-item {
        gap: 15px;
    }
    
    .icon-btn {
        width: 50px;
        height: 50px;
    }
    
    .icon-btn i {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .gallery-item {
        gap: 15px;
    }
}

/* Booking Section */
.booking {
    background: white url('category_bg_1.png?v=1') center/cover no-repeat fixed;
    padding: 100px 0;
    position: relative;
}

/* Ultra-Thin Horizontal Rectangular Booking Carousel */
.booking-slider {
    max-width: 900px;
    height: 200px;
    margin: 3px auto;
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    
    
    animation: none;
}

.booking-slider .swiper-slide {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: none;
}

.booking-slider .swiper-slide-active {
    transform: scale(1);
    z-index: 10;
}

.step-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    border-radius: 20px;
    background: transparent;
    border: none;
}

.step-img {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.step-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1CA8CB 0%, #1E3A8A 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    z-index: 1;
}

.step-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    animation: none;
}

.step-bg::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: none;
    animation: none;
}

#service-1 .step-bg-1 { 
    background: url('transfers.jpeg') center/cover, linear-gradient(135deg, rgba(234, 40, 57, 0.8) 0%, rgba(185, 28, 28, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(234, 40, 57, 0.3);
}
#service-2 .step-bg-2 { 
    background: url('accommodations.jpeg') center/cover, linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(29, 78, 216, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(30, 58, 138, 0.3);
}
#service-3 .step-bg-3 { 
    background: url('rentals.jpeg') center/cover, linear-gradient(135deg, rgba(252, 211, 77, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(252, 211, 77, 0.3);
}
#service-4 .step-bg-4 { 
    background: url('island.jpeg') center/cover, linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(16, 185, 129, 0.3);
}
#service-5 .step-bg-1 { 
    background: url('catamaran.jpeg') center/cover, linear-gradient(135deg, rgba(234, 40, 57, 0.8) 0%, rgba(185, 28, 28, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(234, 40, 57, 0.3);
}
#service-6 .step-bg-2 { 
    background: url('restaurant.jpeg') center/cover, linear-gradient(135deg, rgba(30, 58, 138, 0.8) 0%, rgba(29, 78, 216, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(30, 58, 138, 0.3);
}
#service-7 .step-bg-3 { 
    background: url('shopping.jpeg') center/cover, linear-gradient(135deg, rgba(252, 211, 77, 0.8) 0%, rgba(245, 158, 11, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(252, 211, 77, 0.3);
}
#service-8 .step-bg-4 { 
    background: url('gems.jpeg') center/cover, linear-gradient(135deg, rgba(16, 185, 129, 0.8) 0%, rgba(5, 150, 105, 0.8) 100%);
    box-shadow: inset 0 0 100px rgba(16, 185, 129, 0.3);
}

.step-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: space-between;
    height: 100%;
    padding: 25px 25px 25px;
    color: white;
    gap: 20px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 200px;
}



.step-text-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    text-align: center !important;
}

.step-content .step-title {
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
    margin: 0;
    margin-top: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.536);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}

.step-content .step-desc {
    font-size: 0.85rem;
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    text-align: center !important;
   
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    margin: 0;
    opacity: 0.9;
}

/* Vertical Pagination for Booking Slider - Matching Destination Slider */
.booking-slider .swiper-pagination {
    position: absolute !important;
    left: 25px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}

.booking-slider .swiper-pagination-bullet {
    background: rgba(30, 58, 138, 0.5) !important;
    opacity: 1 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    float: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
}

.booking-slider .swiper-pagination-bullet-active {
    background: #1E3A8A !important;
    transform: scale(1.2) !important;
}

/* Force pagination visibility and positioning */
#bookingSlider .swiper-pagination {
    position: absolute !important;
    left: 25px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 999 !important;
}

/* Ultra-Modern Horizontal Navigation */
.booking-slider .swiper-button-next,
.booking-slider .swiper-button-prev {
    color: white;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(30, 58, 138, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: none;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    animation: none;
}

.booking-slider .swiper-button-next {
    right: 15px;
    left: auto;
}

.booking-slider .swiper-button-prev {
    left: 15px;
    right: auto;
}

.booking-slider .swiper-button-next:hover,
.booking-slider .swiper-button-prev:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.booking-slider .swiper-button-next:after,
.booking-slider .swiper-button-prev:after {
    font-size: 18px;
    font-weight: 900;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* Force same look across ALL screens */
@media (max-width: 1200px) {
    .booking-slider {
        max-width: 900px !important;
        height: 200px !important;
    }
}

@media (max-width: 992px) {
    .booking-slider {
        max-width: 900px !important;
        height: 200px !important;
    }
    .step-content {
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 25px 25px 25px !important;
        gap: 20px !important;
        align-items: center !important;
    }
    .step-content .step-title {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .step-content .step-desc {
        font-size: 0.85rem !important;
        text-align: center !important;
    }
}

@media (max-width: 768px) {
    .booking-slider {
        max-width: 900px !important;
        height: 200px !important;
    }
    .step-content {
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 25px 25px 25px !important;
        gap: 20px !important;
        align-items: center !important;
    }
    .step-content .step-title {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .step-content .step-desc {
        font-size: 0.85rem !important;
        text-align: center !important;
    }
}

@media (max-width: 576px) {
    .booking-slider {
        max-width: 900px !important;
        height: 200px !important;
    }
    .step-content {
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 25px 25px 25px !important;
        gap: 20px !important;
        align-items: center !important;
    }
    .step-content .step-title {
        font-size: 1.5rem !important;
        text-align: center !important;
    }
    .step-content .step-desc {
        font-size: 0.85rem !important;
        text-align: center !important;
    }
}

.booking::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    z-index: 1;
}

.booking .container {
    position: relative;
    z-index: 2;
}

.booking-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.step-card {
    background: #F8FAFC;
    border: 2px solid #E5E7EB;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.step-card:hover {
    border-color: #0F766E;
    transform: translateY(-5px);
}



.step-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.step-card p {
    color: #6B7280;
    font-size: 0.875rem;
}

.final-cta {
    background: linear-gradient(135deg, #0F766E, #14B8A6);
    color: white;
    border: none;
    padding: 20px 40px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
}

.final-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.4);
}

/* Footer */
.footer {
    background: #1E3A8A url('category_bg_1.png?v=1') center/cover no-repeat fixed;
    color: white;
    text-align: center;
    padding: 30px 0;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(30, 58, 138, 0.6);
    z-index: 1;
}

.footer .container {
    position: relative;
    z-index: 2;
}

.footer p {
    opacity: 0.8;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulsating + Gradient Wave Animation for Touch to Explore Buttons */
@keyframes pulseGradient {
    0%, 100% { 
        transform: scale(1);
        background-position: 0% 50%;
        box-shadow: 0 5px 15px rgba(28, 168, 203, 0.3);
    }
    50% { 
        transform: scale(1.12);
        background-position: 100% 50%;
        box-shadow: 0 10px 30px rgba(28, 168, 203, 0.7);
    }
}

/* Responsive Design */
@media (min-width: 1400px) {
    .services-grid {
        max-width: 1400px;
        gap: 30px;
    }
    
    .service-card {
        padding: 35px 25px;
        min-height: 280px;
    }
    
    .service-icon {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }
}

@media (max-width: 1200px) and (min-width: 769px) {
    .services {
        padding: 50px 0 100px 0;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        max-width: 1000px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        max-width: 900px;
    }
}

@media (max-width: 768px) {
    .header .container {
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 3px 15px !important;
    }
    
    .logo-section {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        max-width: none !important;
        width: auto !important;
        gap: 0 !important;
        min-height: 20px;
        align-items: center !important;
    }
    
    .logo-content {
        gap: 0 !important;
    }
    
    .flag-icon {
        margin: 0 !important;
    }
    
    .logo h1 {
        font-size: 16px !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .h11 {
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .logo-section .tagline {
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .partner-btn {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        padding: 3px 8px !important;
        font-size: 11px !important;
        min-height: 20px;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .partner-btn:hover {
        transform: translateY(-2px) !important;
    }
    
    .partner-btn i {
        font-size: 12px !important;
    }
    
    /* Navbar Responsive */
    .nav {
        display: none !important;
    }
    
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.3;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .mauritius-highlight {
        font-size: 1.1em;
    }
    
    .trust-badges {
        gap: 15px;
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: visible;
        padding: 5px 5px;
    }
    
    .badge {
        padding: 5px 12px;
        font-size: 0.8rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        max-width: 100%;
    }
    
    .stat-card {
        padding: 20px 15px;
    }
    
    .stat-card h3 {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
    }
    
    .booking-steps {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .section-header .experience-text {
        font-size: 2.9rem !important;
        margin: 0 0 0 0 !important;
    }
}

@media (max-width: 480px) {
    .header .container {
        padding: 3px 15px !important;
    }
    
    .logo-section {
        gap: 0 !important;
        min-height: 20px !important;
        align-items: center !important;
    }
    
    .logo-content {
        gap: 0 !important;
    }
    
    .flag-icon {
        margin: 0 !important;
    }
    
    .logo h1 {
        font-size: 14px !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .h11 {
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .logo-section .tagline {
        font-size: 0.75rem !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .partner-btn {
        padding: 2px 6px !important;
        font-size: 10px !important;
        min-height: 20px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        line-height: 0 !important;
    }
    
    .partner-btn i {
        font-size: 10px !important;
    }
    
    .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .destination-slider {
        margin: -20px auto 0 auto;
    }
    
    .trust-badges {
        gap: 10px;
        margin-bottom: 25px;
        flex-wrap: nowrap;
        justify-content: center;
        overflow-x: visible;
        padding: 0 5px;
    }
    
    .badge {
        padding: 4px 10px;
        font-size: 0.75rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .stat-card {
        padding: 15px 10px;
    }
    
    .stat-card h3 {
        font-size: 1.8rem;
    }
    
    /* Navbar Responsive */
    .nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0 !important;
        padding: 0 !important;
        flex-direction: row !important;
    }
    
    .cta-button, .hero-cta, .final-cta {
        padding: 15px 25px;
        font-size: 14px;
    }
    
    .section-header .experience-text {
        font-size: 2.25rem !important;
        margin: 0 0 0 0 !important;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0F766E, #14B8A6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #0D5D56, #0F766E);
}

/* ============================ */
/* Style swap overrides (h2 ↔ hero-subtitle) */
/* ============================ */

/* Apply hero-subtitle visual style to section header h2 */
.section-header h2 {
    font-size: 2.5rem;
    
    opacity: 0.95;
    animation: fadeInUp 1s ease-out 0.2s both;
    line-height: 1.1;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    color: #1E3A8A !important;
}

/* Apply section header h2 visual style to hero-subtitle */
.hero-subtitle {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 15px;
    line-height: 1.1;
    opacity: 1;
    animation: none;
    max-width: none;
}

/* Ensure the Unique & Exclusive line is centered */
.section-header .hero-subtitle {
    text-align: center !important;
    display: block;
    white-space: nowrap !important;
    width: 100%;
}

/* Force single-line by hiding manual line breaks inside the subtitle */
.section-header .hero-subtitle br { display: none !important; }

@media (max-width: 768px) {
    .section-header h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
    .hero-subtitle {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .section-header h2 {
        font-size: 2rem;
        line-height: 1.2;
    }
}

/* Heading utility: .h22 (bigger, same blue as headers) */
.h22 {
    color: #1E3A8A !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    
    
    text-align: center !important;
}

@media (max-width: 768px) {
    .h22 {
        font-size: 1.49rem !important;
    }
}

@media (max-width: 480px) {
    .h22 {
        font-size: 1.29rem !important;
    }
}

/* Force uniform .h22 size across all screens */
.h22 {
    font-size: 1.29rem !important;
}

/* Utility heading: .h11 with vertical padding */
.h11 {
    padding: 0rem 0 !important; /* top/bottom padding */
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ============================= */
/* Stunning Side Panel with Counters */
/* ============================= */
.side-panel {
    position: fixed;
    top: 50%;
    left: -100px;
    width: 80px;
    height: auto;
    min-height: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    z-index: 10000;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    transform: translateY(-50%);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
}

.side-panel.open {
    left: 20px;
}

.panel-header {
    position: absolute;
    top: 25%;
    right: -40px;
    transform: translateY(-50%);
    z-index: 10001;
}

.toggle-panel-btn {
    width: 30px;
    height: 60px;
    border: none;
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    border-radius: 0 15px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 5px 0 15px rgba(28, 168, 203, 0.3);
}

.toggle-panel-btn:hover {
    transform: scale(1.05) translateX(3px);
    box-shadow: 8px 0 20px rgba(28, 168, 203, 0.4);
}

.toggle-panel-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.side-panel.open .toggle-panel-btn i {
    transform: rotate(180deg);
}

.panel-content {
    padding: 20px 0;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-counters-panel {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 100%;
    align-items: center;
}

.ring-counters-panel .ring-card {
    animation: boingFall 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, bounce 2s ease-in-out infinite 1s;
    opacity: 1;
}

.ring-counters-panel .ring-card:nth-child(1) { animation-delay: 0.2s, 1.2s; }
.ring-counters-panel .ring-card:nth-child(2) { animation-delay: 0.35s, 1.35s; }
.ring-counters-panel .ring-card:nth-child(3) { animation-delay: 0.5s, 1.5s; }
.ring-counters-panel .ring-card:nth-child(4) { animation-delay: 0.65s, 1.65s; }

/* Panel Trigger Button */
.open-panel-btn {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 60px;
    height: 120px;
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    border: none;
    border-radius: 30px 0 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: -5px 0 15px rgba(28, 168, 203, 0.3);
    animation: panelPulse 3s ease-in-out infinite;
}

.open-panel-btn:hover {
    transform: translateY(-50%) translateX(-5px) scale(1.05);
    box-shadow: -10px 0 25px rgba(28, 168, 203, 0.4);
}

.open-panel-btn i {
    font-size: 20px;
}

.open-panel-btn span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

@keyframes panelPulse {
    0%, 100% {
        box-shadow: -5px 0 15px rgba(28, 168, 203, 0.3);
    }
    50% {
        box-shadow: -8px 0 20px rgba(28, 168, 203, 0.5);
    }
}

/* Force single vertical line on ALL screens */
@media (max-width: 1200px) {
    .ring-counters-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
}

@media (max-width: 992px) {
    .ring-counters-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
}

/* Responsive Design - All Screen Sizes */

/* Tablet and Medium Screens */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Modal spacing adjustments for tablet */
    .modal {
        padding-top: 80px !important; /* Tablet spacing */
    }
    
    .modal-content {
        margin: 2% auto !important; /* Tablet margin */
        height: calc(85vh - 80px) !important; /* Tablet height */
    }
    
    #thirdCarouselModal .modal-content,
    #usefulLinksModal .modal-content,
    #gpsMapModal .modal-content {
        margin: 2% auto !important; /* Standard margin for all modals on tablet */
        height: calc(85vh - 80px) !important; /* Standard height for all modals on tablet */
    }
    
    /* GPS Map specific tablet styles */
    .gps-map-content {
        padding: 20px;
        gap: 20px;
    }
    
    .map-controls {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }
    
    .gps-btn {
        padding: 10px 12px;
        font-size: 11px;
        min-height: 40px;
    }
    
    .map-container {
        min-height: 350px;
    }
    
    .map-info {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    /* Better touch interaction for tablets */
    .ring-card {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        touch-action: manipulation;
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
    }
    
    /* Make the entire ring-card div fully touchable on tablets - complete area */
    .ring-card.map-item {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 80px !important;
        min-height: 80px !important;
        padding: 10px !important;
        margin: -10px !important;
        box-sizing: border-box !important;
    }
    
    
    /* Make only specific elements touchable on tablets - not the badge */
    .ring-card.map-item .ring-wrap,
    .ring-card.map-item .ring-bg,
    .ring-card.map-item .ring-progress {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Specifically make the white inner circle fully touchable on tablets */
    .ring-card.map-item .ring-inner {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Make the text elements in white circle touchable on tablets */
    .ring-card.map-item .ring-title,
    .ring-card.map-item .ring-subtitle {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 6 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    
    /* Make ring-badge (icon) NOT touchable on tablets - like links item */
    .ring-card.map-item .ring-badge,
    .ring-card.map-item .ring-badge *,
    .ring-card.map-item .ring-badge i,
    .ring-card.map-item .ring-badge i::before {
        pointer-events: none !important;
        cursor: default !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Remove any blocking elements on tablets */
    .ring-card.map-item::before,
    .ring-card.map-item::after {
        display: none !important;
    }
    
    /* CLEAN GPS map item - ONLY ring-inner touchable */
    .ring-card.map-item .ring-inner {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Make GPS map item visually responsive to touch */
    .ring-card.map-item:active {
        transform: scale(0.95) !important;
        opacity: 0.8 !important;
        transition: all 0.1s ease !important;
    }
    
    .ring-card:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
    
    .ring-card:hover {
        transform: scale(1.05);
        transition: transform 0.2s ease;
    }
    
    /* Ensure proper z-index for touch events */
    .side-panel, .right-side-panel {
        z-index: 10000;
        pointer-events: auto;
    }
    
    .ring-card {
        pointer-events: auto;
        position: relative;
        z-index: 1;
        min-height: 60px;
        min-width: 60px;
    }
}

/* Mobile Screens */
@media (max-width: 768px) {
    /* Modal spacing adjustments for mobile - All modals standardized */
    .modal {
        padding-top: 70px !important; /* Reduced spacing for mobile */
    }
    
    .modal-content {
        margin: 1% auto !important; /* Reduced margin for mobile */
        height: calc(90vh - 70px) !important; /* Adjust height for mobile */
    }
    
    #thirdCarouselModal .modal-content,
    #usefulLinksModal .modal-content {
        margin: 1% auto !important; /* Standard margin for all modals on mobile */
        height: calc(90vh - 70px) !important; /* Standard height for all modals on mobile */
    }
}

/* Tablet and Medium Screens */
@media (min-width: 769px) and (max-width: 1024px) {
    .side-panel {
        width: 90px !important;
        left: -110px !important;
    }
    
    .side-panel.open {
        left: 25px !important;
    }
    
    .right-side-panel {
        width: 90px !important;
        right: -110px !important;
    }
    
    .right-side-panel.open {
        right: 25px !important;
    }
    
    .ring-counters-panel .ring-wrap {
        width: 70px !important;
        height: 70px !important;
    }
    
    /* Tablet - Holographic design adjustments */
    .side-panel .ring-card,
    .right-side-panel .ring-card {
        width: 80px !important;
        height: 80px !important;
        border-radius: 24px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    .side-panel .ring-wrap,
    .right-side-panel .ring-wrap {
        padding: 12px !important;
    }
    
    .side-panel .ring-title,
    .right-side-panel .ring-title {
        font-size: 8px !important;
        margin-bottom: 5px !important;
    }
    
    .side-panel .counter-number,
    .right-side-panel .counter-number {
        font-size: 15px !important;
    }
    
    .side-panel .ring-badge,
    .right-side-panel .ring-badge {
        width: 24px !important;
        height: 24px !important;
        top: -8px !important;
        right: -8px !important;
    }
    
    .side-panel .ring-badge i,
    .right-side-panel .ring-badge i {
        font-size: 10px !important;
    }
    
    .ring-counters-panel .ring-title {
        font-size: 9px !important;
    }
    
    .ring-counters-panel .ring-inner .counter-number {
        font-size: 14px !important;
    }
    
    .ring-counters-panel .ring-badge {
        width: 20px !important;
        height: 20px !important;
    }
    
    .ring-counters-panel .ring-badge i {
        font-size: 11px !important;
    }
}

/* Mobile Screens */
@media (max-width: 768px) {
    /* Left Side Panel - Mobile */
    .side-panel {
        position: fixed;
        top: 50%;
        left: -100px;
        width: 70px;
        height: auto;
        min-height: 280px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 15px;
        z-index: 10000;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: visible;
        transform: translateY(-50%);
        box-shadow: 0 6px 24px rgba(255, 255, 255, 0.1);
    }
    
    .side-panel.open {
        left: 15px;
    }
    
    .side-panel .panel-content {
        padding: 15px 0;
        height: auto;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .ring-counters-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
        padding: 8px 0 !important;
    }
    
    .ring-counters-panel .ring-card {
        animation: boingFall 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards, bounce 2s ease-in-out infinite 1s;
        opacity: 1;
    }
    
    .ring-counters-panel .ring-card:nth-child(1) { animation-delay: 0.2s, 1.2s; }
    .ring-counters-panel .ring-card:nth-child(2) { animation-delay: 0.35s, 1.35s; }
    .ring-counters-panel .ring-card:nth-child(3) { animation-delay: 0.5s, 1.5s; }
    .ring-counters-panel .ring-card:nth-child(4) { animation-delay: 0.65s, 1.65s; }
    
    .ring-counters-panel .ring-wrap {
        width: 55px;
        height: 55px;
        transition: transform 0.3s ease;
    }
    
    .ring-counters-panel .ring-wrap:hover {
        transform: scale(1.05) translateY(-2px);
    }
    
    .ring-counters-panel .ring-inner {
        position: absolute;
        inset: 3px;
        border-radius: 50%;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    }
    
    .ring-counters-panel .ring-title {
        font-size: 7px;
        font-weight: 700;
        color: var(--title-color, #ef4444);
        text-transform: uppercase;
        letter-spacing: .4px;
        line-height: 1.1;
        animation: fadeUp 0.8s ease both 0.3s;
    }
    
    .ring-counters-panel .ring-inner .counter-number {
        font-size: 11px;
        font-weight: 800;
        color: var(--value-color, #ef4444);
        margin-top: 1px;
        animation: fadeUp 0.8s ease both 0.5s;
    }
    
    .ring-counters-panel .ring-badge {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        top: -2px;
        left: -2px;
        background: var(--badge-gradient, linear-gradient(135deg, #ef4444, #b91c1c));
        box-shadow: 0 4px 6px rgba(0,0,0,0.15);
        animation: popIn 0.5s ease both 0.2s, badgeBounce 3s ease-in-out infinite 1s;
    }
    
    .ring-counters-panel .ring-badge i {
        font-size: 9px;
    }
    
    /* Right Side Panel - Mobile */
    .right-side-panel {
        position: fixed;
        top: 50%;
        right: -100px;
        width: 70px;
        height: auto;
        min-height: 280px;
        max-height: 85vh;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 15px;
        z-index: 10000;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: visible;
        transform: translateY(-50%);
        box-sizing: border-box;
        box-shadow: 0 6px 24px rgba(255, 255, 255, 0.1);
    }
    
    .right-side-panel.open {
        right: 15px !important;
    }
    
    .right-side-panel .panel-content {
        padding: 15px 0;
        height: auto;
        min-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile - Innovative Widget Design */
    .side-panel .ring-counters-panel,
    .right-side-panel .ring-counters-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        align-items: center !important;
        padding: 12px 0 !important;
    }
    
    .side-panel .ring-card,
    .right-side-panel .ring-card {
        width: 65px !important;
        height: 65px !important;
        border-radius: 18px !important;
    }
    
    /* Mobile - Holographic design adjustments */
    .side-panel .ring-card,
    .right-side-panel .ring-card {
        width: 70px !important;
        height: 70px !important;
        border-radius: 20px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }
    
    .side-panel .ring-wrap,
    .right-side-panel .ring-wrap {
        padding: 10px !important;
    }
    
    .side-panel .ring-title,
    .right-side-panel .ring-title {
        font-size: 7px !important;
        margin-bottom: 4px !important;
    }
    
    .side-panel .counter-number,
    .right-side-panel .counter-number {
        font-size: 13px !important;
    }
    
    .side-panel .ring-badge,
    .right-side-panel .ring-badge {
        width: 20px !important;
        height: 20px !important;
        top: -6px !important;
        right: -6px !important;
        border-width: 2px !important;
    }
    
    .side-panel .ring-badge i,
    .right-side-panel .ring-badge i {
        font-size: 9px !important;
    }
    
    .side-panel .ring-wrap,
    .right-side-panel .ring-wrap {
        padding: 8px !important;
    }
    
    .side-panel .ring-title,
    .right-side-panel .ring-title {
        font-size: 7px !important;
        margin-bottom: 3px !important;
    }
    
    .side-panel .counter-number,
    .right-side-panel .counter-number {
        font-size: 12px !important;
    }
    
    .side-panel .ring-badge,
    .right-side-panel .ring-badge {
        width: 18px !important;
        height: 18px !important;
        top: -6px !important;
        right: -6px !important;
    }
    
    .side-panel .ring-badge i,
    .right-side-panel .ring-badge i {
        font-size: 8px !important;
    }
    
    
    
    
    
    
    .right-side-panel .panel-header {
        position: absolute !important;
        top: 50% !important;
        left: -30px !important;
        transform: translateY(-50%) !important;
        z-index: 10001 !important;
    }
    
    .toggle-right-panel-btn {
        width: 22px !important;
        height: 45px !important;
        background: linear-gradient(135deg, #1CA8CB, #0EA5E9);
        border: none;
        border-radius: 12px 0 0 12px;
        color: white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 3px 10px rgba(28, 168, 203, 0.3);
    }
    
    .toggle-right-panel-btn:hover {
        background: linear-gradient(135deg, #0EA5E9, #0284C7);
        transform: scale(1.05);
        box-shadow: 0 4px 14px rgba(28, 168, 203, 0.4);
    }
    
    .toggle-right-panel-btn i {
        font-size: 11px;
        transition: transform 0.3s ease;
    }
    
    .right-side-panel.open .toggle-right-panel-btn i {
        transform: rotate(180deg);
    }
    
    /* Panel Items - Mobile */
    .panel-item {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }
    
    .panel-item:hover {
        transform: scale(1.1);
    }
    
    .panel-item .item-icon {
        color: white;
        font-size: 18px;
        margin-bottom: 2px;
    }
    
    .panel-item .item-label {
        color: white;
        font-size: 8px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
        line-height: 1;
    }
    
    /* Individual item colors - Mobile */
    .map-item {
        background: linear-gradient(135deg, #10B981, #059669);
        box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    }
    
    .map-item:hover {
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }
    
    .translator-item {
        background: linear-gradient(135deg, #8B5CF6, #7C3AED);
        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    }
    
    .translator-item:hover {
        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    }
    
    .links-item {
        background: linear-gradient(135deg, #F59E0B, #D97706);
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 10 !important;
        position: relative !important;
    }
    
    .links-item:hover {
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    }
    
    .esim-item {
        background: linear-gradient(135deg, #EF4444, #DC2626);
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    }
    
    .esim-item:hover {
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    }
}

@media (max-width: 576px) {
    .ring-counters-panel {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
}


/* Color themes via CSS variables */
.tour-card.red {
    --icon-gradient: linear-gradient(135deg, #ef4444, #b91c1c);
    --water-gradient: linear-gradient(180deg, #fecaca, #f87171);
    --land-gradient: linear-gradient(180deg, #fca5a5, #ef4444);
}

.tour-card.blue {
    --icon-gradient: linear-gradient(135deg, #60a5fa, #1d4ed8);
    --plane-gradient: linear-gradient(90deg, #38bdf8, #1e40af);
}

.tour-card.green {
    --icon-gradient: linear-gradient(135deg, #34d399, #065f46);
    --building-gradient: linear-gradient(180deg, #34d399, #10b981);
}

.tour-card.yellow {
    --icon-gradient: linear-gradient(135deg, #f59e0b, #b45309);
    --mountain-gradient: linear-gradient(180deg, #fde68a, #f59e0b);
}

/* Desktop Right Side Panel Styles - Base */
.right-side-panel {
    position: fixed;
    top: 50%;
    right: -100px;
    width: 80px;
    height: auto;
    min-height: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 15px;
    z-index: 10000;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    transform: translateY(-50%);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
}

.right-side-panel.open {
    right: 20px;
}

.right-side-panel .panel-header {
    position: absolute !important;
    top: 25% !important;
    left: -40px !important;
    transform: translateY(-50%) !important;
    z-index: 10001 !important;
}

.toggle-right-panel-btn {
    width: 30px !important;
    height: 60px !important;
    border: none !important;
    background: linear-gradient(135deg, #1E3A8A, #60a5fa) !important;
    color: white !important;
    border-radius: 15px 0 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: -5px 0 15px rgba(28, 168, 203, 0.3) !important;
}

.toggle-right-panel-btn:hover {
    transform: scale(1.05) translateX(-3px) !important;
    box-shadow: -8px 0 20px rgba(28, 168, 203, 0.4) !important;
}

.toggle-right-panel-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.right-side-panel.open .toggle-right-panel-btn i {
    transform: rotate(180deg);
}

.right-side-panel .panel-content {
    padding: 20px 0;
    height: auto;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-panel-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 100%;
    align-items: center;
}

.panel-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    position: relative;
}

.panel-item:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.panel-item .item-icon {
    color: white;
    font-size: 18px;
    margin-bottom: 2px;
}

.panel-item .item-label {
    color: white;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1;
}

/* Individual item colors */
.map-item {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.map-item:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.translator-item {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.translator-item:hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.links-item {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

.links-item:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.esim-item {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.esim-item:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* Universal fix for step elements - ensure no white backgrounds and uniform border radius */
.step-box,
.step-img,
.step-content,
.step-text-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 20px !important;
}

/* Ensure step backgrounds are visible with consistent border radius */
.step-bg,
[class*="step-bg-"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    border-radius: 20px !important;
}

/* CRITICAL: Force header text lines to show with transparent backgrounds */
.header-text-overlay .h22 .header-text-line,
.header-text-content .h22 .header-text-line,
.header-carousel-container .header-text-overlay .header-text-line {
    background: rgba(255, 255, 255, 0.536) !important;
    padding: 0px 2px !important;
    border-radius: 4px !important;
    margin: 0.5px !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
    display: inline-block !important;
}

/* Mobile responsive adjustments for header text lines */
@media (max-width: 768px) {
    .header-text-overlay .h22 .header-text-line,
    .header-text-content .h22 .header-text-line,
    .header-carousel-container .header-text-overlay .header-text-line {
        padding: 0px 2px !important;
        margin: 1px !important;
        border-radius: 3px !important;
        font-size: 1.08rem !important;
    }
    
    .header-text-overlay .h22 {
        line-height: 1.3 !important;
    }
    
    .header-text-overlay .experience-text.header-text-line {
        padding: 0px 3px !important;
        margin: 2px !important;
        font-size: 2rem !important;
    }
    
    .header-text-overlay .experience-text {
        font-size: 2rem !important;
    }
}

@media (max-width: 480px) {
    .header-text-overlay .h22 .header-text-line,
    .header-text-content .h22 .header-text-line,
    .header-carousel-container .header-text-overlay .header-text-line {
        padding: 0px 1px !important;
        margin: 0.5px !important;
        border-radius: 2px !important;
        line-height: 1.2 !important;
        font-size: 0.98rem !important;
    }
    
    .header-text-overlay .h22 {
        line-height: 1 !important;
    }
    
    .header-text-overlay .experience-text.header-text-line {
        padding: 0px 2px !important;
        margin: 1px !important;
        font-size: 1.5rem !important;
    }
    
    .header-text-overlay .experience-text {
        font-size: 1.5rem !important;
    }
    
    /* Stack text lines vertically on very small screens */
    .header-text-overlay .h22 {
        text-align: center !important;
    }
    
    .header-text-overlay .h22 .header-text-line {
        display: block !important;
        margin: 1px auto !important;
        width: fit-content !important;
    }
}

/* ============================= */
/* Partner Button & Modal */
/* ============================= */

.partner-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 20px;
}

.partner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(calc(-50% - 2px));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.partner-btn i {
    font-size: 16px;
}

/* Partner Modal */
.partner-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

.partner-modal-content {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    margin: 5% auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: slideIn 0.3s ease;
}

.partner-modal-header {
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    padding: 20px 30px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.partner-modal-header h2 {
    color: white !important;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.partner-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.partner-modal-body {
    padding: 30px;
}

.partner-modal-body p {
    color: #6B7280;
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.6;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #E5E7EB;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1CA8CB;
    box-shadow: 0 0 0 3px rgba(28, 168, 203, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
}

.btn-cancel,
.btn-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-cancel {
    background: #E5E7EB;
    color: #6B7280;
}

.btn-cancel:hover {
    background: #D1D5DB;
    color: #374151;
}

.btn-submit {
    background: linear-gradient(135deg, #1CA8CB, #1E3A8A);
    color: white;
    box-shadow: 0 4px 15px rgba(28, 168, 203, 0.3);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #1E3A8A, #1CA8CB);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(28, 168, 203, 0.4);
}

/* Modal Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Mobile Responsive for Partner Button - Styles moved to main breakpoints */

/* Mobile Responsive for Modal */
@media (max-width: 768px) {
    .partner-modal-content {
        margin: 10% auto;
        width: 95%;
    }
    
    .partner-modal-header {
        padding: 15px 20px;
    }
    
    .partner-modal-header h2 {
        font-size: 1.3rem;
    }
    
    .partner-modal-body {
        padding: 20px;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn-cancel,
    .btn-submit {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .partner-modal-content {
        margin: 5% auto;
        width: 98%;
        border-radius: 15px;
    }
    
    .partner-modal-header {
        border-radius: 15px 15px 0 0;
        padding: 12px 15px;
    }
    
    .partner-modal-header h2 {
        font-size: 1.2rem;
    }
    
    .partner-modal-body {
        padding: 15px;
    }
    
    /* Touch targets already handled above */
    
    /* Ensure proper spacing for small screens */
    .header-text-overlay {
        padding: 10px;
    }
    
    .header-text-content {
        max-width: 95%;
    }
}

/* Location Details Modal Styles */
.location-modal-content {
    max-width: 700px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.location-modal-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    padding: 30px;
}

.location-image {
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.location-details h3 {
    color: #1976D2;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 700;
}

.location-details p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 16px;
}

.location-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-item i {
    color: #2196F3;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.info-item span {
    color: #333;
    font-weight: 500;
    font-size: 14px;
}

.location-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.action-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.action-btn.primary {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
}

.action-btn.secondary {
    background: white;
    color: #666;
    border: 2px solid #e0e0e0;
}

.action-btn.secondary:hover {
    background: #f5f5f5;
    border-color: #2196F3;
    color: #2196F3;
    transform: translateY(-2px);
}

/* Responsive Location Modal */
@media (max-width: 768px) {
    .location-modal-content {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .location-modal-body {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    .location-info-grid {
        grid-template-columns: 1fr;
    }
    
    .location-actions {
        flex-direction: column;
    }
    
    .action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Currency Converter Modal Styles */
.currency-modal-content {
    max-width: 600px;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.currency-body {
    padding: 30px;
}

.currency-interface {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.conversion-section {
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(25px);
    border: none;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.currency-selectors {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.currency-selector {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.currency-selector label {
    font-weight: 600;
    color: white;
    font-size: 14px;
}

.currency-dropdown {
    padding: 12px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
}

.currency-dropdown:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.swap-currency-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    font-size: 16px;
}

.swap-currency-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: scale(1.1);
}

.currency-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.input-currency, .output-currency {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-currency label, .output-currency label {
    font-weight: 600;
    color: white;
    font-size: 14px;
}

#amountInput {
    padding: 12px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

#amountInput:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.conversion-result {
    padding: 12px 15px;
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #10b981;
    min-height: 20px;
    display: flex;
    align-items: center;
}

.currency-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.convert-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.convert-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.clear-currency-btn {
    background: #6b7280;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.clear-currency-btn:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

.exchange-rate-info {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.rate-display {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.last-updated {
    font-size: 12px;
    opacity: 0.9;
}


/* Mobile Responsive for Currency Converter */
@media (max-width: 768px) {
    .currency-modal-content {
        margin: 5px;
        max-width: calc(100% - 10px);
        max-height: 95vh;
        overflow-y: auto;
    }
    
    .currency-body {
        padding: 15px;
    }
    
    .currency-interface {
        gap: 20px;
    }
    
    .conversion-section {
        padding: 20px 15px;
    }
    
    .currency-selectors {
        flex-direction: column;
        gap: 15px;
    }
    
    .swap-currency-btn {
        align-self: center;
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
    
    .currency-inputs {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .currency-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .convert-btn, .clear-currency-btn {
        width: 100%;
        justify-content: center;
        padding: 15px 25px;
        font-size: 16px;
    }
    
    
    .exchange-rate-info {
        padding: 15px;
    }
    
    .rate-display {
        font-size: 16px;
    }
    
    .last-updated {
        font-size: 11px;
    }
    
    .popular-currencies {
        padding: 20px 15px;
    }
    
    .popular-currencies h4 {
        font-size: 15px;
        margin-bottom: 12px;
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    .currency-modal-content {
        margin: 2px;
        max-width: calc(100% - 4px);
        border-radius: 10px;
    }
    
    .currency-body {
        padding: 10px;
    }
    
    .conversion-section {
        padding: 15px 10px;
    }
    
    .currency-selector label {
        font-size: 13px;
    }
    
    .currency-dropdown {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .input-currency label, .output-currency label {
        font-size: 13px;
    }
    
    #amountInput {
        padding: 10px 12px;
        font-size: 15px;
    }
    
    .conversion-result {
        padding: 10px 12px;
        font-size: 15px;
    }
    
    
    .exchange-rate-info {
        padding: 12px;
    }
    
    .rate-display {
        font-size: 14px;
    }
    
    .last-updated {
        font-size: 10px;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .currency-modal-content {
        max-width: 700px;
        margin: 20px auto;
    }
    
    .currency-body {
        padding: 25px;
    }
    
    .currency-selectors {
        gap: 20px;
    }
    
    .currency-inputs {
        gap: 25px;
    }
    
    .currency-actions {
        gap: 20px;
    }
    
}

/* Large Desktop */
@media (min-width: 1200px) {
    .currency-modal-content {
        max-width: 800px;
    }
    
    .currency-body {
        padding: 40px;
    }
    
    .currency-interface {
        gap: 30px;
    }
    
    .conversion-section {
        padding: 30px;
    }
    
    .currency-selectors {
        gap: 25px;
    }
    
    .currency-inputs {
        gap: 30px;
    }
    
    .currency-actions {
        gap: 25px;
    }
    
}

/* FINAL OVERRIDE - Force booking button container to bottom-right corner */
.booking-btn-container.button-with-icon,
div.booking-btn-container.button-with-icon,
.booking-slider .booking-btn-container.button-with-icon,
.booking-slider .step-box .booking-btn-container.button-with-icon {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    bottom: 5px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
}

/* Double the size of icon.png in bottom carousel (reduced by 15% overall) */
.booking-btn-container .button-icon,
.booking-slider .button-icon {
    width: 103px !important;
    height: 103px !important;
}

/* Middle carousel (destination-slider) button positioning - bottom-right corner */
.destination-slider .button-with-icon,
.destination-box .button-with-icon {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    bottom: 5px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
}

/* Double the size of icon.png in middle carousel (reduced by 15% overall) */
.destination-slider .button-icon,
.destination-box .button-icon {
    width: 103px !important;
    height: 103px !important;
}

@media (max-width: 768px) {
    .booking-btn-container.button-with-icon,
    div.booking-btn-container.button-with-icon,
    .booking-slider .booking-btn-container.button-with-icon,
    .booking-slider .step-box .booking-btn-container.button-with-icon {
        right: 3px !important;
        bottom: 3px !important;
    }
    
    .destination-slider .button-with-icon,
    .destination-box .button-with-icon {
        right: 3px !important;
        bottom: 3px !important;
    }
    
    .destination-slider .button-icon,
    .destination-box .button-icon {
        width: 92px !important;
        height: 92px !important;
    }
    
    .booking-btn-container .button-icon,
    .booking-slider .button-icon {
        width: 92px !important;
        height: 92px !important;
    }
}

@media (max-width: 480px) {
    .booking-btn-container.button-with-icon,
    div.booking-btn-container.button-with-icon,
    .booking-slider .booking-btn-container.button-with-icon,
    .booking-slider .step-box .booking-btn-container.button-with-icon {
        right: 2px !important;
        bottom: 2px !important;
    }
    
    .destination-slider .button-with-icon,
    .destination-box .button-with-icon {
        right: 2px !important;
        bottom: 2px !important;
    }
    
    .destination-slider .button-icon,
    .destination-box .button-icon {
        width: 77px !important;
        height: 77px !important;
    }
    
    .booking-btn-container .button-icon,
    .booking-slider .button-icon {
        width: 77px !important;
        height: 77px !important;
    }
}

@media (max-width: 320px) {
    .booking-btn-container.button-with-icon,
    div.booking-btn-container.button-with-icon,
    .booking-slider .booking-btn-container.button-with-icon,
    .booking-slider .step-box .booking-btn-container.button-with-icon {
        right: 1px !important;
        bottom: 1px !important;
    }
    
    .destination-slider .button-with-icon,
    .destination-box .button-with-icon {
        right: 1px !important;
        bottom: 1px !important;
    }
    
    .destination-slider .button-icon,
    .destination-box .button-icon {
        width: 61px !important;
        height: 61px !important;
    }
    
    .booking-btn-container .button-icon,
    .booking-slider .button-icon {
        width: 61px !important;
        height: 61px !important;
    }
}

/* Custom Button Styling */
.button {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(to bottom, #1e5edb, #2f7cf5);
    border-radius: 20px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    color: white;
    font-family: 'Montez', cursive;
    font-size: 32px;
    text-align: center;
    text-decoration: none;
    border: none;
    outline: none;
}

/* CTA Button Styling */
.cta-button {
    font-family: 'Montez', cursive;
    font-size: 32px;
    color: white;
    background: linear-gradient(135deg, #012C7B, #0757C4);
    border: none;
    border-radius: 20px;
    padding: 18px 40px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
    0% {
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.5),
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 8px 16px rgba(0, 0, 0, 0.3),
            0 12px 24px rgba(0, 0, 0, 0.25),
            0 16px 32px rgba(0, 0, 0, 0.2),
            0 20px 40px rgba(0, 0, 0, 0.15),
            0 24px 48px rgba(0, 0, 0, 0.1),
            0 0 20px rgba(30, 94, 219, 0.4),
            0 0 40px rgba(30, 94, 219, 0.3),
            0 0 60px rgba(30, 94, 219, 0.2),
            0 0 80px rgba(30, 94, 219, 0.1),
            inset 0 3px 6px rgba(255, 255, 255, 0.4),
            inset 0 -3px 6px rgba(0, 0, 0, 0.3),
            inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.5),
            0 4px 8px rgba(0, 0, 0, 0.4),
            0 8px 16px rgba(0, 0, 0, 0.3),
            0 12px 24px rgba(0, 0, 0, 0.25),
            0 16px 32px rgba(0, 0, 0, 0.2),
            0 20px 40px rgba(0, 0, 0, 0.15),
            0 24px 48px rgba(0, 0, 0, 0.1),
            0 0 40px rgba(30, 94, 219, 0.7),
            0 0 80px rgba(30, 94, 219, 0.5),
            0 0 120px rgba(30, 94, 219, 0.4),
            0 0 160px rgba(30, 94, 219, 0.3),
            0 0 200px rgba(30, 94, 219, 0.2),
            inset 0 4px 8px rgba(255, 255, 255, 0.5),
            inset 0 -4px 8px rgba(0, 0, 0, 0.4),
            inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    }
}