/**
 * Mumbai RentaDolls - Premium Escort Theme
 * Soft Romantic Rose + Ivory Design
 *
 * NOTE: Google Fonts are loaded via <link> tags in main.php
 * for better performance (non-blocking)
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
    /* Rose Palette */
    --rose-dark: #8B4558;
    --rose-mid: #C77D8F;
    --rose-light: #E8B4BC;
    --rose-pale: #FCE4EC;
    --rose-blush: #FFF0F3;
    --rose-gradient: linear-gradient(135deg, #8B4558 0%, #C77D8F 100%);
    --rose-gradient-soft: linear-gradient(135deg, #E8B4BC 0%, #FCE4EC 100%);
    /* Ivory/Cream Palette */
    --ivory: #FFFDF7;
    --ivory-dark: #FFF8F0;
    --cream: #FFF5EC;
    --white: #FFFFFF;
    /* Dark (for process section only) */
    --dark: #1a1a2e;
    --dark-rose: #2D1F23;
    /* Text Colors */
    --text-dark: #2D2D2D;
    --text-medium: #555555;
    --text-light: #777777;
    --text-muted: #999999;
    /* Accent */
    --gold: #D4AF37;
    --gold-light: #F5E6A3;
    --success: #4CAF50;
    /* Fonts */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
    --font-elegant: 'Cormorant Garamond', serif;
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(139, 69, 88, 0.08);
    --shadow-md: 0 5px 20px rgba(139, 69, 88, 0.12);
    --shadow-lg: 0 10px 40px rgba(139, 69, 88, 0.15);
    --shadow-rose: 0 10px 30px rgba(139, 69, 88, 0.2);
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}


/* ============================================
   BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--ivory);
    color: var(--text-dark);
    line-height: 1.7;
    margin: 0;
    padding-top: 105px;
    /* Top bar (35px) + Navbar (70px) */
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 1023px) {
    body {
        padding-top: 70px;
        /* Only navbar on mobile */
        overflow-x: hidden;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--rose-dark);
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 1rem;
}

a {
    color: var(--rose-dark);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--rose-mid);
}

p {
    color: var(--text-medium);
    margin-bottom: 1rem;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}


/* Mobile container padding */

@media (max-width: 768px) {
    .container {
        padding: 0 10px !important;
    }
}


/* ============================================
   PREMIUM HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}


/* Top Bar */

.header-top-bar {
    background: var(--rose-dark);
    padding: 8px 0;
    transition: var(--transition);
    height: 35px;
}

.header-top-bar.hidden {
    height: 0;
    padding: 0;
    overflow: hidden;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 400;
}

.top-info i {
    margin-right: 6px;
    color: var(--rose-light);
}

.top-divider {
    color: rgba(255, 255, 255, 0.3);
}

.top-contact {
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-contact:hover {
    color: var(--rose-light);
}


/* Main Navbar */

.main-navbar {
    background: var(--white);
    box-shadow: var(--shadow-md);
    height: 70px;
    transition: var(--transition);
}

.site-header.scrolled .main-navbar {
    box-shadow: var(--shadow-lg);
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}


/* Logo */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: var(--rose-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
}

.logo-main {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rose-dark);
    line-height: 1.1;
}

.logo-tagline {
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .logo-tagline {
        display: none;
    }
}


/* Desktop Navigation */

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-dark);
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 8px;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 6px;
    cursor: pointer;
}

.nav-link:hover {
    color: var(--rose-dark);
    background: var(--rose-pale);
}

.nav-link i {
    font-size: 0.65rem;
    transition: var(--transition);
}


/* Desktop Dropdown */

.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    min-width: 400px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown:hover .nav-link i {
    transform: rotate(180deg);
}

.dropdown-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.dropdown-column {
    display: flex;
    flex-direction: column;
}

.dropdown-heading {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rose-dark);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--rose-pale);
}

.dropdown-column a {
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-medium);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.dropdown-column a i {
    color: var(--rose-mid);
    width: 18px;
    text-align: center;
}

.dropdown-column a:hover {
    background: var(--rose-pale);
    color: var(--rose-dark);
}


/* Header CTA Buttons */

.header-cta-buttons {
    display: flex;
    gap: 8px;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.header-btn i {
    font-size: 1rem;
}

.whatsapp-btn {
    background: #25D366;
    color: white;
}

.whatsapp-btn:hover {
    background: #128C7E;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.call-btn {
    background: var(--rose-gradient);
    color: white;
}

.call-btn:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-rose);
}


/* Mobile Menu Button */

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 45px;
    height: 45px;
    background: var(--rose-pale);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.mobile-menu-btn:hover {
    background: var(--rose-light);
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background: var(--rose-dark);
    transition: var(--transition);
}


/* Mobile Menu Overlay */

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-container {
    position: absolute;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 350px;
    height: auto;
    max-height: 100%;
    background: var(--white);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    transition: right 0.4s ease;
}

.mobile-menu-overlay.active .mobile-menu-container {
    right: 0;
}


/* Mobile Menu Header */

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rose-pale);
    background: var(--rose-blush);
}

.mobile-menu-header .logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-menu-header .logo-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
}

.mobile-menu-header .logo-main {
    font-size: 1.25rem;
}

.mobile-close-btn {
    width: 40px;
    height: 40px;
    background: var(--white);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--rose-dark);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.mobile-close-btn:hover {
    background: var(--rose-dark);
    color: white;
}


/* Mobile Menu Links */

.mobile-menu-links {
    padding: 1rem;
}

.mobile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    border-radius: 12px;
    transition: var(--transition);
}

.mobile-link i {
    color: var(--rose-mid);
    width: 20px;
    text-align: center;
}

.mobile-link:hover {
    background: var(--rose-pale);
    color: var(--rose-dark);
}


/* Mobile Accordion */

.mobile-accordion {
    margin-bottom: 4px;
}

.mobile-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-dark);
    cursor: pointer;
    border-radius: 12px;
    transition: var(--transition);
}

.mobile-accordion-btn:hover {
    background: var(--rose-pale);
}

.mobile-accordion-btn span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-accordion-btn span i {
    color: var(--rose-mid);
    width: 20px;
    text-align: center;
}

.accordion-icon {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: var(--transition);
}

.mobile-accordion.active .accordion-icon {
    transform: rotate(180deg);
}

.mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--rose-pale);
    border-radius: 12px;
    margin: 4px 0;
}

.mobile-accordion.active .mobile-accordion-content {
    max-height: 400px;
}

.mobile-accordion-content a {
    display: block;
    padding: 12px 16px 12px 48px;
    color: var(--text-medium);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
}

.mobile-accordion-content a:hover {
    color: var(--rose-dark);
    background: rgba(255, 255, 255, 0.5);
}


/* Mobile Menu CTA */

.mobile-menu-cta {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: row;
    gap: 10px;
    border-top: 1px solid var(--rose-pale);
}

.mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 15px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
}

.mobile-cta-btn.whatsapp {
    background: #25D366;
    color: white;
}

.mobile-cta-btn.whatsapp:hover {
    background: #128C7E;
}

.mobile-cta-btn.call {
    background: var(--rose-gradient);
    color: white;
}


/* Mobile Menu Footer */

.mobile-menu-footer {
    padding: 1rem 1.25rem;
    background: var(--rose-pale);
    text-align: center;
}

.mobile-menu-footer p {
    margin: 0.25rem 0;
    font-size: 0.8rem;
    color: var(--rose-dark);
}

.mobile-menu-footer p i {
    margin-right: 6px;
}


/* Desktop Only */

.desktop-only {
    display: flex;
}


/* Responsive */

@media (max-width: 1023px) {
    .header-top-bar {
        display: none;
    }
    .desktop-nav,
    .desktop-only {
        display: none;
    }
    .mobile-menu-btn {
        display: flex;
    }
    .logo-tagline {
        display: none;
    }
}

@media (max-width: 480px) {
    .logo-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .logo-main {
        font-size: 1.25rem;
    }
    .mobile-menu-container {
        width: 100%;
        max-width: none;
    }
}


/* ============================================
   HERO SECTION - Centered Elegant (New)
   ============================================ */

.hero-centered {
    background: linear-gradient(180deg, var(--rose-blush) 0%, var(--ivory) 50%, var(--cream) 100%);
    padding: 80px 0 70px;
    position: relative;
    overflow: hidden;
    text-align: center;
}


/* Decorative Orbs */

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    animation: float-orb 8s ease-in-out infinite;
}

.hero-orb-1 {
    width: 300px;
    height: 300px;
    background: var(--rose-pale);
    top: -100px;
    left: -50px;
    animation-delay: 0s;
}

.hero-orb-2 {
    width: 250px;
    height: 250px;
    background: var(--rose-light);
    bottom: -80px;
    right: -50px;
    animation-delay: -3s;
}

.hero-orb-3 {
    width: 200px;
    height: 200px;
    background: var(--rose-mid);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    animation-delay: -5s;
}

@keyframes float-orb {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-20px) scale(1.05);
    }
}


/* Decorative Lines */

.hero-line {
    position: absolute;
    width: 1px;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--rose-mid), transparent);
    opacity: 0.3;
}

.hero-line-left {
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
}

.hero-line-right {
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}


/* Content Container */

.hero-centered-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}


/* Label Badge */

.hero-label-center {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: white;
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(139, 69, 88, 0.1);
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--rose-dark);
    font-weight: 500;
}

.label-dot {
    width: 8px;
    height: 8px;
    background: var(--rose-mid);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}


/* Title */

.hero-title-center {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}


/* Description */

.hero-text-center {
    font-size: 1.15rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-text-center a {
    color: var(--rose-dark);
    text-decoration: underline;
}


/* Features */

.hero-features-center {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.feature-pill-center {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: white;
    color: var(--text-dark);
    padding: 0.7rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 2px 15px rgba(139, 69, 88, 0.08);
    transition: all 0.3s ease;
}

.feature-pill-center:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 69, 88, 0.15);
}

.feature-pill-center i {
    color: var(--rose-dark);
    font-size: 1rem;
}


/* CTA Buttons */

.hero-actions-center {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}


/* Trust Badge */

.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-medium);
}

.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hero-trust i {
    color: var(--rose-dark);
}

.trust-divider {
    width: 4px;
    height: 4px;
    background: var(--rose-mid);
    border-radius: 50%;
}


/* Hero Centered Responsive */

@media (max-width: 768px) {
    .hero-centered {
        padding: 60px 0 50px;
    }
    .hero-title-center {
        font-size: 2.2rem;
    }
    .hero-title-center br {
        display: none;
    }
    .hero-text-center {
        font-size: 1rem;
    }
    .hero-line {
        display: none;
    }
    .hero-trust {
        gap: 1rem;
    }
    .trust-divider {
        display: none;
    }
    .hero-trust span {
        background: white;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .hero-centered {
        padding: 50px 0 40px;
    }
    .hero-title-center {
        font-size: 1.8rem;
    }
    .hero-label-center {
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
    }
    .feature-pill-center {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }
    .btn-primary-rose,
    .btn-whatsapp-hero {
        width: 100%;
        justify-content: center;
    }
}


/* ============================================
   HERO SECTION - Stats Boxes (Option 5)
   ============================================ */

.hero-stats {
    background: var(--ivory);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

.hero-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-stats-content {
    position: relative;
    z-index: 2;
}

.hero-stats-title {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-stats-text {
    font-size: 1.1rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 500px;
}

.hero-stats-text a {
    color: var(--rose-dark);
    text-decoration: underline;
}

.hero-stats-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}


/* Stats Boxes Grid */

.hero-stats-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

.stat-box {
    background: white;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(139, 69, 88, 0.1);
    transition: all 0.4s ease;
}

.stat-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(139, 69, 88, 0.2);
}


/* Glow Effect */

.stat-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--rose-pale) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-box:hover .stat-glow {
    opacity: 0.6;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
    z-index: 1;
}

.stat-icon i {
    color: white;
    font-size: 1.2rem;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--rose-dark);
    line-height: 1;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-medium);
    font-weight: 500;
    position: relative;
    z-index: 1;
}


/* Individual box animations */

.stat-box-1 {
    animation: float-box 6s ease-in-out infinite;
}

.stat-box-2 {
    animation: float-box 6s ease-in-out infinite 1.5s;
}

.stat-box-3 {
    animation: float-box 6s ease-in-out infinite 3s;
}

.stat-box-4 {
    animation: float-box 6s ease-in-out infinite 4.5s;
}

@keyframes float-box {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


/* Stats Hero Responsive */

@media (max-width: 1024px) {
    .hero-stats-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .hero-stats-content {
        text-align: center;
    }
    .hero-stats-text {
        max-width: 100%;
    }
    .hero-features-center {
        justify-content: center;
    }
    .hero-stats-actions {
        justify-content: center;
    }
    .hero-stats-boxes {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero-stats {
        padding: 50px 0;
    }
    .hero-stats-title {
        font-size: 2rem;
    }
    /* 2x2 HORIZONTAL compact cards — icon LEFT, content RIGHT */
    .hero-stats-boxes {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    .stat-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 10px;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px;
        text-align: left;
        overflow: visible;
        border: 1px solid rgba(139, 69, 88, 0.08);
        min-height: auto;
        box-sizing: border-box;
    }
    .stat-glow {
        display: none;
    }
    .stat-icon {
        width: 36px;
        height: 36px;
        margin: 0;
        flex-shrink: 0;
    }
    .stat-icon i {
        font-size: 0.9rem;
    }
    .hero-stats-boxes .stat-content-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }
    .hero-stats-boxes .stat-number {
        font-size: 1.3rem;
        line-height: 1.1;
        margin: 0 0 2px 0;
        text-align: left;
        letter-spacing: -0.02em;
    }
    .hero-stats-boxes .stat-label {
        font-size: 0.72rem;
        line-height: 1.2;
        margin: 0;
        text-align: left;
        white-space: normal;
        color: var(--text-medium);
        font-weight: 500;
    }
    /* Remove floating animation on mobile */
    .stat-box-1,
    .stat-box-2,
    .stat-box-3,
    .stat-box-4 {
        animation: none;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        padding: 40px 0;
    }
    .hero-stats-title {
        font-size: 1.7rem;
    }
    /* Center buttons on mobile with proper width */
    .hero-stats-actions {
        flex-direction: column;
        align-items: center !important;
        justify-content: center;
        width: 100%;
    }
    .btn-primary-rose,
    .btn-whatsapp-hero {
        width: 100% !important;
        max-width: 320px;
        justify-content: center;
        margin: 0 auto;
    }
    /* Full-width stat cards on mobile */
    .hero-stats-boxes {
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .stat-box {
        padding: 11px 9px;
        gap: 9px;
        width: 100% !important;
        max-width: 100% !important;
    }
    .stat-icon {
        width: 34px;
        height: 34px;
    }
    .stat-icon i {
        font-size: 0.85rem;
    }
    .hero-stats-boxes .stat-number {
        font-size: 1.2rem;
    }
    .hero-stats-boxes .stat-label {
        font-size: 0.68rem;
    }
}

@media (max-width: 360px) {
    .stat-box {
        padding: 10px 8px;
        gap: 8px;
    }
    .stat-icon {
        width: 32px;
        height: 32px;
    }
    .hero-stats-boxes .stat-number {
        font-size: 1.1rem;
    }
    .hero-stats-boxes .stat-label {
        font-size: 0.65rem;
    }
}


/* ============================================
   HERO - LIGHT ROSE+IVORY ELEGANT (OLD)
   ============================================ */

.hero-elegant {
    background: linear-gradient(135deg, var(--rose-blush) 0%, var(--ivory) 50%, var(--cream) 100%);
    display: flex;
    align-items: center;
    padding: 35px 0 45px;
    position: relative;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .hero-elegant {
        padding: 30px 0 40px;
    }
}

.hero-decoration-left {
    position: absolute;
    top: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--rose-pale) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
}

.hero-decoration-right {
    position: absolute;
    bottom: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--rose-light) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.4;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    padding: 0.6rem 1.25rem;
    border-radius: 50px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--rose-dark);
    font-weight: 500;
}

.label-dot {
    width: 8px;
    height: 8px;
    background: var(--rose-mid);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.text-gradient {
    background: var(--rose-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text {
    font-size: 1.1rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    max-width: 500px;
}

.hero-features {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.feature-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--rose-pale);
    color: var(--rose-dark);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
}

.feature-pill i {
    color: var(--rose-mid);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary-rose {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--rose-gradient);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: var(--shadow-rose);
    transition: var(--transition);
}

.btn-primary-rose:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.3);
    color: white;
}

.btn-whatsapp-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #25D366;
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
    transition: var(--transition);
}

.btn-whatsapp-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(37, 211, 102, 0.4);
    color: white;
}


/* Hero Floating Cards */

.hero-image-side {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-card-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.floating-card {
    position: absolute;
    width: 200px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--white);
    transition: var(--transition-slow);
}

.floating-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.floating-card .card-label {
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.floating-card .name {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--rose-dark);
    font-weight: 600;
}

.floating-card .status {
    font-size: 0.75rem;
    color: var(--success);
}

.floating-card .status i {
    font-size: 0.5rem;
    margin-right: 4px;
}

.floating-card .badge-vip {
    background: linear-gradient(135deg, var(--gold), #F5D76E);
    color: #5D4E37;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.floating-card .rating {
    color: var(--gold);
    font-size: 0.85rem;
    font-weight: 500;
}

.card-1 {
    top: 0;
    left: 10%;
    z-index: 3;
    animation: float-1 4s ease-in-out infinite;
}

.card-2 {
    top: 60px;
    right: 5%;
    z-index: 2;
    animation: float-2 5s ease-in-out infinite;
}

.card-3 {
    bottom: 20px;
    left: 25%;
    z-index: 1;
    animation: float-3 4.5s ease-in-out infinite;
}

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

@keyframes float-2 {
    0%,
    100% {
        transform: translateY(0) rotate(3deg);
    }
    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

@keyframes float-3 {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}


/* Hero Single Image Design */

.hero-single-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.hero-image-frame {
    position: relative;
    width: 320px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(139, 69, 88, 0.3);
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.hero-image-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 16px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rose-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hero-image-badge .pulse-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-green 1.5s ease-in-out infinite;
}

@keyframes pulse-green {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.hero-image-accent {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--rose-mid);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.5;
}

@media (max-width: 1023px) {
    .hero-image-frame {
        width: 280px;
        height: 360px;
    }
}

@media (max-width: 768px) {
    .hero-single-image {
        margin-top: 30px;
    }
    .hero-image-frame {
        width: 260px;
        height: 340px;
    }
    .hero-image-accent {
        top: -15px;
        right: -15px;
    }
}

@media (max-width: 480px) {
    .hero-image-frame {
        width: 220px;
        height: 290px;
        border-radius: 15px;
    }
    .hero-image-badge {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
    .hero-image-accent {
        top: -10px;
        right: -10px;
        border-radius: 15px;
    }
}


/* ============================================
   STATS BAR
   ============================================ */

.stats-bar {
    background: var(--white);
    padding: 2rem 0;
    border-top: 1px solid var(--rose-pale);
    border-bottom: 1px solid var(--rose-pale);
}

.stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.stat-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-box>i {
    font-size: 2rem;
    color: var(--rose-mid);
}

.stat-content {
    text-align: left;
}

.stat-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--rose-dark);
    line-height: 1;
}

.stat-text {
    font-size: 0.85rem;
    color: var(--text-light);
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--rose-pale);
}


/* ============================================
   SECTION HEADERS
   ============================================ */

.section-head {
    text-align: center;
    margin-bottom: 3rem;
}

.head-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-elegant);
    font-size: 1rem;
    font-style: italic;
    color: var(--rose-mid);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.head-tag i {
    font-size: 0.9rem;
}

.section-head h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--rose-dark);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.section-head h2 span {
    color: var(--rose-mid);
}

.section-head p {
    color: var(--text-light);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}


/* Light variant for dark backgrounds */

.section-head.center-white h2 {
    color: white;
}

.section-head.center-white h2 span {
    color: var(--rose-light);
}

.section-head.center-white p {
    color: rgba(255, 255, 255, 0.8);
}

.section-head .head-tag.light {
    color: var(--rose-light);
}


/* ============================================
   PREMIUM ESCORT CARDS - LUXURY DESIGN
   ============================================ */

.section-profiles {
    background: var(--ivory);
    padding: 5rem 0;
}

.profiles-premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}


/* ============================================
   STUNNING PROFILE CARD - Tinder Inspired
   ============================================ */

.profile-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 3/4;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.profile-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.profile-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(139, 69, 88, 0.3), 0 0 100px rgba(139, 69, 88, 0.1);
}

.profile-card:hover::before {
    opacity: 1;
    background: linear-gradient(135deg, var(--rose-mid), var(--rose-light));
}


/* VIP Card Special Styling */

.profile-card.is-vip {
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.2);
}

.profile-card.is-vip::before {
    opacity: 1;
    background: linear-gradient(135deg, #D4AF37, #F5D76E, #D4AF37);
    background-size: 200% 200%;
    animation: vipGlow 3s ease-in-out infinite;
}

@keyframes vipGlow {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.profile-card.is-vip:hover {
    box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4), 0 0 80px rgba(212, 175, 55, 0.2);
}


/* Card Link */

.card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}


/* ============================================
   IMAGE GALLERY SYSTEM
   ============================================ */

.card-gallery {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.gallery-track {
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 8s ease;
}

.profile-card:hover .gallery-slide.is-active img {
    transform: scale(1.08);
}


/* Progress Bar Indicators (Instagram Stories Style) */

.gallery-progress {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 20;
}

.progress-segment {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.progress-segment.is-active .progress-fill {
    width: 100%;
}

.progress-segment.is-viewed .progress-fill {
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
}

.progress-fill {
    width: 0;
    height: 100%;
    background: white;
    border-radius: 3px;
    transition: width 0.3s ease;
}


/* Touch Zones for Navigation */

.touch-zone {
    position: absolute;
    top: 0;
    width: 40%;
    height: 70%;
    z-index: 15;
    cursor: pointer;
}

.touch-prev {
    left: 0;
}

.touch-next {
    right: 0;
}


/* ============================================
   CARD OVERLAYS
   ============================================ */

.card-overlays {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-overlays::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.4) 0%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.6) 75%, rgba(0, 0, 0, 0.9) 100%);
    z-index: -1;
}


/* Top Row */

.overlay-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 16px 0;
    pointer-events: auto;
}


/* Badge Styles */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.badge-vip {
    background: linear-gradient(135deg, #D4AF37 0%, #F5D76E 50%, #D4AF37 100%);
    background-size: 200% 200%;
    animation: shimmer 2s ease-in-out infinite;
    color: #3D3319;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
}

.badge-vip i {
    font-size: 0.65rem;
}

.badge-online {
    background: rgba(0, 0, 0, 0.5);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px #4ADE80;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

@keyframes shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}


/* Bottom Info Panel */

.overlay-bottom {
    padding: 0 20px 20px;
    pointer-events: auto;
}

.profile-identity {
    margin-bottom: 8px;
}

.profile-name {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

.verified-tick {
    color: #3B82F6;
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.5));
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 400;
}

.meta-dot {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.profile-details {
    margin-bottom: 12px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}

.location i {
    color: var(--rose-light);
    font-size: 0.75rem;
}

.price {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.price small {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
}


/* Action Hints */

.action-hints {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.profile-card:hover .action-hints {
    opacity: 1;
    transform: translateY(0);
}

.hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hint i {
    font-size: 0.75rem;
    animation: tapBounce 1.5s ease-in-out infinite;
}

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


/* Card Glow Effect */

.card-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 50% 50%, var(--rose-mid), transparent 70%);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.profile-card:hover .card-glow {
    opacity: 0.15;
}

.profile-card.is-vip .card-glow {
    background: radial-gradient(circle at 50% 50%, #D4AF37, transparent 70%);
}


/* ============================================
   ID CARD STYLE - Bold Premium Design
   ============================================ */

.id-card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #5C1A2E 0%, #8B2D4A 30%, #6B2038 100%);
    text-decoration: none;
    box-shadow: 0 10px 40px rgba(92, 26, 46, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    aspect-ratio: 3/4.2;
}

.id-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(92, 26, 46, 0.5);
}


/* Topographic Pattern */

.id-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: repeating-radial-gradient( ellipse at 50% 0%, transparent 0px, transparent 8px, rgba(255, 255, 255, 0.03) 8px, rgba(255, 255, 255, 0.03) 10px);
    opacity: 0.8;
    z-index: 1;
}


/* Top Section */

.id-top {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px 15px 0;
}

.id-logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.id-logo span {
    font-family: var(--font-heading);
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
}

.id-vip-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #D4AF37, #F5D76E);
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5);
    z-index: 100;
}

.id-vip-badge i {
    color: #1a1a1a;
    font-size: 0.7rem;
}

.id-vip-badge span {
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.id-category {
    text-align: right;
}

.id-category small {
    display: block;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.id-category strong {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Vertical Code */

.id-code {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #E8A4B8;
    letter-spacing: 3px;
    z-index: 5;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(232, 164, 184, 0.5);
}


/* Decorative Stripes */

.id-stripes {
    position: absolute;
    right: 12px;
    top: 35%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;
}

.id-stripes span {
    width: 35px;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    transform: skewX(-15deg);
}

.id-stripes span:nth-child(2) {
    width: 28px;
}

.id-stripes span:nth-child(3) {
    width: 22px;
}

.id-stripes span:nth-child(4) {
    width: 16px;
}


/* Profile Photo */

.id-photo {
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    aspect-ratio: 3/4;
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.id-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0;
    transition: opacity 0.5s ease, transform 6s ease;
}

.id-photo img.active {
    opacity: 1;
    z-index: 1;
}

.id-card:hover .id-photo img.active {
    transform: scale(1.08);
}


/* Gallery Dots - Hidden (single image only) */

.id-gallery-dots {
    display: none;
}

/* Show only first image in profile cards */
.id-photo img:not(:first-child) {
    display: none;
}

.id-gallery-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.id-gallery-dots span.active {
    background: #fff;
    width: 18px;
    border-radius: 3px;
}


/* Online Indicator */

.id-online {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    z-index: 10;
}

.id-online .pulse {
    width: 6px;
    height: 6px;
    background: #4CAF50;
    border-radius: 50%;
    animation: onlinePulse 1.5s infinite;
}

@keyframes onlinePulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }
}


/* Name Section */

.id-name {
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 15;
    padding: 0 15px;
}

.id-name h3 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.id-name p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 5px 0 0;
    letter-spacing: 1px;
}


/* Bottom Section */

.id-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    padding: 20px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 12;
}

.id-location {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.id-location i {
    color: #E8A4B8;
    font-size: 0.6rem;
}

.id-dots {
    display: flex;
    gap: 4px;
}

.id-dots span {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.id-price {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: #E8A4B8;
    text-shadow: 0 0 10px rgba(232, 164, 184, 0.3);
}


/* Like Button */

.id-like {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.id-like .fas {
    display: none;
    color: #E91E63;
}

.id-like .far {
    display: block;
}

.id-like.liked {
    background: rgba(233, 30, 99, 0.2);
    border-color: #E91E63;
}

.id-like.liked .fas {
    display: block;
    animation: heartPop 0.4s ease;
}

.id-like.liked .far {
    display: none;
}

.id-like:hover {
    background: rgba(233, 30, 99, 0.2);
    border-color: #E91E63;
    color: #E91E63;
    transform: translateY(-50%) scale(1.1);
}


/* VIP Card Glow */

.id-card.is-vip {
    box-shadow: 0 10px 40px rgba(92, 26, 46, 0.4), 0 0 30px rgba(212, 175, 55, 0.2);
}

.id-card.is-vip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 3px;
    background: linear-gradient(135deg, #D4AF37, #F5D76E, #D4AF37);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
    background-size: 200% 200%;
    animation: vipGlow 3s ease-in-out infinite;
}

.profile-card-v2.is-vip:hover {
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.25);
}


/* ============================================
   RESPONSIVE CARD STYLES
   ============================================ */

@media (max-width: 1024px) {
    .profile-card {
        border-radius: 20px;
    }
    .profile-name {
        font-size: 1.4rem;
    }
    /* ID Card Tablet */
    .id-card {
        border-radius: 16px;
    }
    .id-name h3 {
        font-size: 1.4rem;
    }
    .id-code {
        font-size: 0.6rem;
    }
    .id-photo {
        width: 78%;
    }
}

@media (max-width: 768px) {
    .profiles-premium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .profile-card {
        border-radius: 18px;
    }
    .profile-name {
        font-size: 1.25rem;
    }
    .profile-meta {
        font-size: 0.8rem;
    }
    .price {
        font-size: 1.1rem;
    }
    /* ID Card Mobile */
    .id-card {
        border-radius: 14px;
    }
    .id-top {
        padding: 12px 12px 0;
    }
    .id-logo span {
        font-size: 0.5rem;
    }
    .id-category small {
        font-size: 0.45rem;
    }
    .id-category strong {
        font-size: 0.65rem;
    }
    .id-code {
        font-size: 0.55rem;
        left: 5px;
    }
    .id-stripes {
        right: 8px;
    }
    .id-stripes span {
        width: 25px;
        height: 3px;
    }
    .id-photo {
        width: 80%;
        bottom: 20%;
    }
    .id-name h3 {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }
    .id-name p {
        font-size: 0.65rem;
    }
    .id-bottom {
        padding: 15px 12px 12px;
    }
    .id-location {
        font-size: 0.55rem;
    }
    .id-price {
        font-size: 0.8rem;
    }
    .id-like {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }
    .id-vip-badge {
        padding: 4px 10px;
    }
    .id-vip-badge i,
    .id-vip-badge span {
        font-size: 0.55rem;
    }
    .badge {
        padding: 6px 10px;
        font-size: 0.6rem;
    }
    .gallery-progress {
        top: 10px;
        left: 10px;
        right: 10px;
    }
    .overlay-top {
        padding: 16px 12px 0;
    }
    .overlay-bottom {
        padding: 0 14px 16px;
    }
    .action-hints {
        display: none;
    }
}

@media (max-width: 480px) {
    .profiles-premium-grid {
        gap: 0.75rem;
    }
    .profile-card {
        border-radius: 16px;
    }
    .profile-name {
        font-size: 1.1rem;
    }
    .verified-tick {
        font-size: 0.85rem;
    }
    .profile-meta {
        font-size: 0.75rem;
        gap: 6px;
    }
    .location {
        font-size: 0.75rem;
    }
    .price {
        font-size: 1rem;
    }
    .badge {
        padding: 5px 8px;
        font-size: 0.55rem;
    }
    .badge-online {
        padding: 4px 8px;
    }
    .pulse-dot {
        width: 5px;
        height: 5px;
    }
    .overlay-top {
        padding: 12px 10px 0;
    }
    /* ID Card Small Mobile */
    .id-card {
        border-radius: 12px;
    }
    .id-top {
        padding: 10px 10px 0;
    }
    .id-code {
        font-size: 0.5rem;
        left: 3px;
    }
    .id-stripes {
        display: none;
    }
    .id-photo {
        width: 82%;
        bottom: 18%;
    }
    .id-gallery-dots span {
        width: 5px;
        height: 5px;
    }
    .id-gallery-dots span.active {
        width: 14px;
    }
    .id-online {
        padding: 3px 8px;
        font-size: 0.5rem;
    }
    .id-name {
        bottom: 10%;
    }
    .id-name h3 {
        font-size: 1rem;
    }
    .id-name p {
        font-size: 0.6rem;
    }
    .id-bottom {
        padding: 12px 10px 10px;
    }
    .id-dots {
        display: none;
    }
    .id-location {
        font-size: 0.5rem;
    }
    .id-price {
        font-size: 0.75rem;
    }
    .id-like {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
        right: 8px;
    }
    .id-vip-badge {
        padding: 3px 8px;
        top: 10px;
    }
    .id-category-tag {
        padding: 3px 8px;
        font-size: 0.55rem;
        bottom: 6px;
        left: 6px;
        border-radius: 4px;
    }
    .overlay-bottom {
        padding: 0 12px 14px;
    }
    .progress-segment {
        height: 2px;
    }
}


/* Section Bottom CTA */

.section-bottom-cta {
    text-align: center;
    margin-top: 2rem;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    border: 2px solid var(--rose-dark);
    border-radius: 50px;
    color: var(--rose-dark);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
}

.btn-view-all:hover {
    background: var(--rose-dark);
    color: white;
}


/* ============================================
   WHY CHOOSE US SECTION
   ============================================ */

.section-why-choose {
    background: var(--cream);
    padding: 5rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.benefit-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid transparent;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--rose-light);
}

.benefit-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;
    background: var(--rose-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--rose-dark);
    transition: var(--transition);
}

.benefit-card:hover .benefit-icon {
    background: var(--rose-gradient);
    color: white;
    transform: scale(1.1);
}

.benefit-card h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--rose-dark);
    margin-bottom: 0.75rem;
}

.benefit-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.6;
}


/* ============================================
   SERVICES SHOWCASE
   ============================================ */

.section-services-new {
    background: var(--ivory);
    padding: 5rem 0;
}

.services-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.service-item {
    display: flex;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.service-img {
    width: 180px;
    flex-shrink: 0;
}

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

.service-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-content h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--rose-dark);
    margin-bottom: 0.5rem;
}

.service-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.service-content a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rose-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.service-content a:hover {
    color: var(--rose-mid);
}


/* ============================================
   CATEGORIES BROWSE
   ============================================ */

.section-categories-browse {
    background: var(--cream);
    padding: 5rem 0;
}

.categories-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.category-box {
    background: var(--white);
    border-radius: 14px;
    padding: 1.75rem 1.25rem;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid transparent;
}

.category-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--rose-dark);
}

.cat-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 1rem;
    background: var(--rose-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--rose-dark);
    transition: var(--transition);
}

.category-box:hover .cat-icon {
    background: var(--rose-dark);
    color: white;
}

.category-box h3 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.category-box p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.cat-count {
    font-size: 0.75rem;
    color: var(--rose-mid);
    font-weight: 500;
}


/* ============================================
   HOW IT WORKS / PROCESS SECTION
   ============================================ */

.section-process {
    background: var(--rose-dark);
    padding: 5rem 0;
}

.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.step {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    width: 200px;
    position: relative;
}

.step-num {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #5D4E37;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.step-icon {
    font-size: 2rem;
    color: var(--rose-light);
    margin-bottom: 1rem;
}

.step h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: white;
    margin-bottom: 0.5rem;
}

.step p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.5;
}

.step-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
    padding-top: 3.5rem;
}


/* ============================================
   LOCATIONS COVERAGE
   ============================================ */

.section-locations-coverage {
    background: var(--ivory);
    padding: 5rem 0;
}

.locations-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.location-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--white);
    color: var(--text-dark);
    padding: 0.6rem 1.25rem;
    border-radius: 25px;
    font-size: 0.9rem;
    transition: var(--transition);
    border: 1px solid var(--rose-pale);
    box-shadow: var(--shadow-sm);
}

.location-tag:hover {
    background: var(--rose-dark);
    color: white;
    border-color: var(--rose-dark);
}

.location-tag i {
    color: var(--rose-mid);
    font-size: 0.8rem;
}

.location-tag:hover i {
    color: var(--rose-light);
}


/* ============================================
   REVIEWS / TESTIMONIALS
   ============================================ */

.section-reviews {
    background: var(--cream);
    padding: 5rem 0;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.review-card {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.review-stars {
    color: var(--gold);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.review-card>p {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 45px;
    height: 45px;
    background: var(--rose-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

.review-author>div strong {
    display: block;
    color: var(--rose-dark);
    font-size: 0.95rem;
}

.review-author>div span {
    font-size: 0.8rem;
    color: var(--text-muted);
}


/* ============================================
   AGENCY REVIEWS SECTION
   ============================================ */

.section-agency-reviews {
    background: linear-gradient(135deg, #2D1F23 0%, #1a1215 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.agency-reviews-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ar-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
}

.ar-shape-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--rose-mid), transparent 70%);
    top: -200px;
    right: -150px;
}

.ar-shape-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--rose-light), transparent 70%);
    bottom: -150px;
    left: -100px;
}

.section-agency-reviews .section-head.has-center {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.section-agency-reviews .section-head h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.section-agency-reviews .section-head h2 span {
    color: var(--rose-light);
}

.section-agency-reviews .section-head p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto;
}

.ar-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(199, 125, 143, 0.2);
    color: var(--rose-light);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid rgba(199, 125, 143, 0.3);
}

.ar-badge i {
    font-size: 0.9rem;
}


/* Reviews Grid */

.agency-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}


/* Review Card */

.ar-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.4s ease;
    position: relative;
}

.ar-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: rgba(199, 125, 143, 0.3);
}

.ar-quote-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.ar-quote-icon i {
    color: #fff;
    font-size: 1.1rem;
}

.ar-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    padding-right: 3rem;
}

.ar-text strong {
    color: var(--rose-light);
    font-weight: 600;
}

.ar-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ar-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ar-info {
    flex: 1;
}

.ar-name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 2px;
}

.ar-verified {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.ar-verified i {
    color: #4CAF50;
    font-size: 0.75rem;
}

.ar-stars {
    display: flex;
    gap: 3px;
}

.ar-stars i {
    color: #FFD700;
    font-size: 0.9rem;
}


/* Responsive - Agency Reviews */

@media (max-width: 900px) {
    .agency-reviews-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .ar-card {
        padding: 1.75rem;
    }
}

@media (max-width: 768px) {
    .section-agency-reviews {
        padding: 4rem 0;
    }
    .section-agency-reviews .section-head h2 {
        font-size: 2rem;
    }
    .ar-text {
        font-size: 1rem;
        padding-right: 2.5rem;
    }
    .ar-quote-icon {
        width: 40px;
        height: 40px;
        top: 1.25rem;
        right: 1.25rem;
    }
    .ar-quote-icon i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .section-agency-reviews {
        padding: 3rem 0;
    }
    .section-agency-reviews .section-head h2 {
        font-size: 1.6rem;
    }
    .ar-card {
        padding: 1.5rem;
        border-radius: 16px;
    }
    .ar-text {
        font-size: 0.95rem;
        line-height: 1.7;
        padding-right: 2rem;
    }
    .ar-quote-icon {
        width: 35px;
        height: 35px;
        top: 1rem;
        right: 1rem;
    }
    .ar-quote-icon i {
        font-size: 0.85rem;
    }
    .ar-avatar {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    .ar-name {
        font-size: 0.95rem;
    }
    .ar-footer {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .ar-stars {
        width: 100%;
        margin-top: 0.5rem;
    }
}


/* ============================================
   FAQ SECTION
   ============================================ */

.section-faq-new {
    background: var(--ivory);
    padding: 5rem 0;
}

.faq-list {
    max-width: 1100px;
    margin: 0 auto;
}

.faq-item {
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.faq-q:hover {
    background: var(--rose-pale);
}

.faq-q span {
    font-weight: 500;
    color: var(--rose-dark);
    font-size: 1rem;
}

.faq-q i {
    color: var(--rose-mid);
    transition: var(--transition);
}

.faq-item.active .faq-q i {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-a {
    max-height: 800px;
}

.faq-a p {
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    color: var(--text-medium);
    font-size: 0.95rem;
    line-height: 1.7;
}

.faq-a p strong {
    color: var(--rose-dark);
    font-weight: 600;
}


/* ============================================
   BLOG SECTION - Homepage
   ============================================ */

.section-blog-home {
    padding: 4rem 0;
    background: var(--ivory);
}

.blog-home-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.blog-home-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rose-pale);
    color: var(--rose-dark);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.blog-home-header h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 2.2rem;
    color: var(--text-dark);
    margin: 0;
}

.blog-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.blog-home-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(139, 69, 88, 0.08);
    transition: all 0.3s ease;
}

.blog-home-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(139, 69, 88, 0.15);
}

.blog-home-img {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.blog-home-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-home-card:hover .blog-home-img img {
    transform: scale(1.05);
}

.blog-home-content {
    padding: 1.2rem;
}

.blog-home-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.blog-home-date i {
    color: var(--rose-mid);
}

.blog-home-content h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 1.1rem;
    color: var(--text-dark);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-home-content p {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0 0 0.8rem 0;
    line-height: 1.5;
}

.blog-home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rose-dark);
    transition: gap 0.3s ease;
}

.blog-home-card:hover .blog-home-link {
    gap: 10px;
}

.blog-home-footer {
    text-align: center;
}

.blog-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.blog-home-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 69, 88, 0.3);
}


/* Blog Section Responsive */

@media (max-width: 992px) {
    .blog-home-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .section-blog-home {
        padding: 3rem 0;
    }
    .blog-home-header h2 {
        font-size: 1.8rem;
    }
    .blog-home-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .blog-home-img {
        height: 140px;
    }
    .blog-home-content {
        padding: 1rem;
    }
    .blog-home-content h3 {
        font-size: 1rem;
    }
}


/* ============================================
   FINAL CTA - Premium Design
   ============================================ */

.section-cta-final {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
    overflow: hidden;
}

.cta-final-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
}


/* Animated background orbs */

.cta-final-pattern::before,
.cta-final-pattern::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: ctaOrbFloat 8s ease-in-out infinite;
}

.cta-final-pattern::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 69, 88, 0.4) 0%, transparent 70%);
    top: -100px;
    left: -100px;
}

.cta-final-pattern::after {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(199, 125, 143, 0.3) 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation-delay: 4s;
}

@keyframes ctaOrbFloat {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, 20px) scale(1.1);
    }
}


/* Sparkle particles */

.cta-final-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cta-final-sparkles::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.8) 50%, transparent 50%), radial-gradient(2px 2px at 30% 60%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(2px 2px at 50% 30%, rgba(255, 255, 255, 0.7) 50%, transparent 50%), radial-gradient(2px 2px at 70% 80%, rgba(255, 255, 255, 0.5) 50%, transparent 50%), radial-gradient(2px 2px at 90% 40%, rgba(255, 255, 255, 0.8) 50%, transparent 50%), radial-gradient(2px 2px at 20% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 50%), radial-gradient(2px 2px at 80% 15%, rgba(255, 255, 255, 0.7) 50%, transparent 50%);
    animation: ctaSparkle 4s ease-in-out infinite;
}

@keyframes ctaSparkle {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

.cta-final-box {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem;
}


/* Profile stack images */

.cta-profile-stack {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.cta-profile-stack .stack-img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid #1a1a2e;
    object-fit: cover;
    margin-left: -18px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.cta-profile-stack .stack-img:first-child {
    margin-left: 0;
}

.cta-profile-stack .stack-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2a2a4e 0%, #1a1a2e 100%);
    color: var(--rose-mid);
    font-weight: 700;
    font-size: 1.4rem;
    font-family: var(--font-heading);
}

.cta-profile-stack .stack-img:hover {
    transform: translateY(-5px) scale(1.1);
    z-index: 10;
    border-color: var(--rose-mid);
}

.cta-profile-stack .stack-more {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid var(--rose-mid);
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    margin-left: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(139, 69, 88, 0.4);
}

.cta-final-decor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cta-final-decor .decor-line {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rose-mid));
}

.cta-final-decor .decor-line.right {
    background: linear-gradient(90deg, var(--rose-mid), transparent);
}

.cta-final-decor i {
    color: var(--rose-mid);
    font-size: 1rem;
    animation: ctaHeartPulse 1.5s ease-in-out infinite;
}

@keyframes ctaHeartPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.cta-final-box h2 {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    color: #fff;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cta-final-box h2 span {
    background: linear-gradient(135deg, var(--rose-mid), #f8a5c2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-final-box>p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
}

.cta-final-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.cta-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 200px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cta-final-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    z-index: 0;
}

.cta-final-btn:hover::before {
    left: 100%;
}

.cta-final-btn i {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: white !important;
    position: relative;
    z-index: 1;
}

.cta-final-btn .btn-info {
    text-align: left;
    position: relative;
    z-index: 1;
}

.cta-final-btn .btn-info small {
    display: block;
    font-size: 0.7rem;
    opacity: 0.9;
    margin-bottom: 1px;
}

.cta-final-btn .btn-info strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.cta-final-btn.call {
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: white;
    box-shadow: 0 8px 30px rgba(139, 69, 88, 0.5);
}

.cta-final-btn.call:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(139, 69, 88, 0.6);
    color: white;
}

.cta-final-btn.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
}

.cta-final-btn.whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(37, 211, 102, 0.5);
    color: white;
}

.cta-final-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cta-final-note span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cta-final-note span i {
    color: var(--rose-mid);
}

.cta-final-note .dot {
    width: 4px;
    height: 4px;
    background: var(--rose-mid);
    border-radius: 50%;
}


/* Live indicator */

.cta-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.3);
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
}

.cta-live-badge .live-dot {
    width: 8px;
    height: 8px;
    background: #25D366;
    border-radius: 50%;
    animation: ctaLivePulse 1.5s ease-in-out infinite;
}

@keyframes ctaLivePulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
    }
}

.cta-live-badge span {
    color: #25D366;
    font-size: 0.8rem;
    font-weight: 500;
}


/* Responsive for Final CTA */

@media (max-width: 768px) {
    .section-cta-final {
        padding: 4rem 0;
    }
    .cta-final-box h2 {
        font-size: 2rem;
    }
    .cta-profile-stack .stack-img,
    .cta-profile-stack .stack-more {
        width: 55px;
        height: 55px;
        margin-left: -15px;
    }
    .cta-final-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-final-btn {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .section-cta-final {
        padding: 3rem 0;
    }
    .cta-final-box h2 {
        font-size: 1.6rem;
    }
    .cta-final-box>p {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    .cta-profile-stack .stack-img,
    .cta-profile-stack .stack-more {
        width: 48px;
        height: 48px;
        margin-left: -12px;
    }
    .cta-final-btn {
        padding: 0.85rem 1.25rem;
        min-width: 0;
    }
    .cta-final-btn i {
        font-size: 1.25rem;
    }
    .cta-final-btn .btn-info strong {
        font-size: 0.9rem;
    }
    .cta-final-decor .decor-line {
        width: 35px;
    }
    .cta-final-note {
        gap: 1rem;
    }
    .cta-final-note span {
        font-size: 0.8rem;
    }
}


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

.footer {
    background: var(--dark-rose);
    color: rgba(255, 255, 255, 0.8);
    padding: 3rem 1.5rem 1.5rem;
}

.footer a {
    color: rgba(255, 255, 255, 0.7);
}

.footer a:hover {
    color: white;
}

.footer .title {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}


/* ============================================
   WHATSAPP FLOAT BUTTON
   ============================================ */

.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
    z-index: 999;
    transition: var(--transition);
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}


/* ============================================
   LIGHTBOX
   ============================================ */

.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 10px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 35px;
    color: white;
    cursor: pointer;
}


/* ============================================
   BULMA OVERRIDES
   ============================================ */

.section-ivory {
    background: var(--ivory);
}

.section-ivory-alt {
    background: var(--cream);
}

.text-rose {
    color: var(--rose-dark) !important;
}

.bg-rose-pale {
    background: var(--rose-pale) !important;
}

.is-primary {
    background-color: var(--rose-dark) !important;
}

.is-primary:hover {
    background-color: var(--rose-mid) !important;
}

.tag.is-rose {
    background: var(--rose-pale);
    color: var(--rose-dark);
}

.tag.is-rose-dark {
    background: var(--rose-dark);
    color: white;
}


/* Profile Page Specific */

.profile-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.profile-card:hover .profile-image {
    transform: scale(1.05);
}

.profile-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1.5rem 1rem 1rem;
    color: white;
}

.profile-info .profile-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: white;
    margin-bottom: 0.25rem;
}

.profile-info .profile-category {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}


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

@media (max-width: 1200px) {
    .profiles-premium-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 1024px) {
    .profiles-premium-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .profiles-premium-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .profiles-premium-grid {
        gap: 0.75rem;
    }
}

@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.75rem;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-content {
        max-width: 600px;
        margin: 0 auto;
    }
    .hero-text {
        margin: 0 auto 1.5rem;
    }
    .hero-features {
        justify-content: center;
    }
    .hero-actions {
        justify-content: center;
    }
    .hero-image-side {
        display: none;
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-showcase {
        grid-template-columns: 1fr;
    }
    .service-item {
        flex-direction: column;
    }
    .service-img {
        width: 100%;
        height: 180px;
    }
    .categories-grid-new {
        grid-template-columns: repeat(3, 1fr);
    }
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.25rem;
    }
    .hero-text {
        font-size: 1rem;
    }
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .btn-primary-rose,
    .btn-whatsapp-hero {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    .stats-row {
        gap: 1.5rem;
    }
    .stat-divider {
        display: none;
    }
    .stat-box {
        width: calc(50% - 0.75rem);
    }
    .section-head h2 {
        font-size: 2rem;
    }
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    .categories-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }
    .reviews-grid {
        grid-template-columns: 1fr;
    }
    .process-steps {
        flex-direction: column;
        align-items: center;
    }
    .step-arrow {
        transform: rotate(90deg);
        padding: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .hero-elegant {
        padding: 20px 0 35px;
    }
    .hero-title {
        font-size: 1.85rem;
    }
    .hero-label {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
    .feature-pill {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
    .stat-num {
        font-size: 1.5rem;
    }
    .stat-text {
        font-size: 0.75rem;
    }
    .section-head h2 {
        font-size: 1.6rem;
    }
    .profiles-premium-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .categories-grid-new {
        grid-template-columns: 1fr 1fr;
    }
    .step {
        width: 100%;
        max-width: 280px;
    }
}


/* ============================================
   PROFILE PAGE STYLES
   ============================================ */


/* Profile Hero */

.profile-hero {
    background: linear-gradient(135deg, var(--ivory) 0%, var(--cream) 100%);
    padding: 2rem 0 4rem;
}

.profile-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.profile-breadcrumb a {
    color: var(--text-medium);
    transition: color 0.2s;
}

.profile-breadcrumb a:hover {
    color: var(--rose-dark);
}

.profile-breadcrumb i {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.profile-breadcrumb span {
    color: var(--rose-dark);
    font-weight: 500;
}

.profile-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}


/* Gallery Section */

.profile-gallery-section {
    position: sticky;
    top: 100px;
}

.main-gallery {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 3/4;
}

.gallery-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-slide.active {
    opacity: 1;
    z-index: 2;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--rose-dark);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.gallery-nav:hover {
    background: var(--rose-dark);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav.prev {
    left: 15px;
}

.gallery-nav.next {
    right: 15px;
}

.gallery-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 10;
}

.gallery-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.badge-vip {
    background: linear-gradient(135deg, #D4AF37, #F5D76E);
    color: #3D3319;
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.badge-verified {
    background: rgba(59, 130, 246, 0.9);
    color: white;
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Thumbnail Strip */

.thumbnail-strip {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    padding: 5px 0;
}

.thumb {
    flex-shrink: 0;
    width: 70px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.3s;
    border: 3px solid transparent;
}

.thumb:hover {
    opacity: 0.9;
}

.thumb.active {
    opacity: 1;
    border-color: var(--rose-dark);
}

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


/* Profile Info Section */

.profile-info-section {
    padding: 1rem 0;
}

.profile-header {
    margin-bottom: 1.5rem;
}

.name-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.profile-header h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.online-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #dcfce7;
    color: #166534;
    padding: 6px 14px;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 600;
}

.online-status .pulse {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.tagline {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-top: 0.5rem;
}


/* Quick Stats */

.quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-stats .stat {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 0.9rem;
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.quick-stats .stat i {
    color: var(--rose-mid);
}


/* Rates Card */

.rates-card {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}

.rates-card h3 {
    font-size: 1rem;
    color: var(--text-medium);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rates-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.rate-item {
    text-align: center;
    padding: 1rem;
    border-radius: 15px;
    background: var(--ivory);
    position: relative;
}

.rate-item.featured {
    background: linear-gradient(135deg, var(--rose-pale), #fff);
    border: 2px solid var(--rose-mid);
}

.rate-item .duration {
    display: block;
    font-size: 0.85rem;
    color: var(--text-medium);
    margin-bottom: 5px;
}

.rate-item .price {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rose-dark);
}

.rate-item .best-value {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--rose-dark);
    color: white;
    font-size: 0.65rem;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 600;
}


/* Booking Buttons */

.booking-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn-whatsapp,
.btn-call {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 1rem 1.5rem;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-whatsapp {
    background: #25D366;
    color: white;
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
}

.btn-call {
    background: var(--rose-dark);
    color: white;
}

.btn-call:hover {
    background: #6b3344;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(139, 69, 88, 0.4);
}


/* Trust Badges */

.trust-badges {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--ivory);
    border-radius: 15px;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.trust-item i {
    font-size: 1.25rem;
    color: var(--rose-mid);
}

.trust-item span {
    font-size: 0.75rem;
    color: var(--text-medium);
    font-weight: 500;
}


/* About Section */

.profile-about {
    background: white;
    padding: 4rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.about-card {
    background: var(--ivory);
    border-radius: 20px;
    padding: 2rem;
}

.about-card h2 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-card h2 i {
    color: var(--rose-mid);
}

.description-text p {
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.details-table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .label {
    color: var(--text-medium);
    font-size: 0.9rem;
}

.detail-row .value {
    color: var(--text-dark);
    font-weight: 500;
}


/* Services Section */

.profile-services {
    background: var(--cream);
    padding: 4rem 0;
}

.profile-services h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-services h2 i {
    color: var(--rose-mid);
}

.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.service-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    color: var(--text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.service-tag i {
    color: #22c55e;
    font-size: 0.8rem;
}


/* Profile CTA */

.profile-cta {
    background: linear-gradient(135deg, var(--rose-dark), #6b3344);
    padding: 4rem 0;
}

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: white;
    margin-bottom: 0.5rem;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
}

.btn-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-cta.whatsapp {
    background: #25D366;
    color: white;
}

.btn-cta.call {
    background: white;
    color: var(--rose-dark);
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


/* Related Profiles */

.profile-related {
    background: var(--ivory);
    padding: 4rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-header h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--text-dark);
}

.view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rose-dark);
    font-weight: 500;
    text-decoration: none;
}

.view-all:hover {
    gap: 12px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.related-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.related-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.2);
}

.related-image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.related-card:hover .related-image img {
    transform: scale(1.08);
}

.related-image .vip-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #D4AF37, #F5D76E);
    color: #3D3319;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.related-info {
    padding: 1.25rem;
}

.related-info h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.related-info p {
    font-size: 0.85rem;
    color: var(--text-medium);
    margin-bottom: 0.5rem;
}

.related-info .price {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--rose-dark);
    font-weight: 600;
}


/* Location Section */

.profile-location {
    background: white;
    padding: 4rem 0;
}

.location-card {
    background: linear-gradient(135deg, var(--rose-pale), var(--cream));
    border-radius: 25px;
    padding: 3rem;
    text-align: center;
}

.location-info h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.location-info h2 i {
    color: var(--rose-mid);
}

.location-info p {
    color: var(--text-medium);
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.btn-location {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--rose-dark);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-location:hover {
    background: #6b3344;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.3);
}


/* Lightbox */

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
}

.lightbox-nav:hover {
    background: var(--rose-dark);
}

.lightbox-nav.prev {
    left: 30px;
}

.lightbox-nav.next {
    right: 30px;
}

.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
}

.lightbox-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 20px;
    border-radius: 25px;
}


/* Profile Page Responsive */

@media (max-width: 1024px) {
    .profile-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .profile-gallery-section {
        position: relative;
        top: 0;
    }
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .cta-box {
        flex-direction: column;
        text-align: center;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-header h1 {
        font-size: 2rem;
    }
    .rates-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    .rate-item .price {
        font-size: 1.1rem;
    }
    .booking-buttons {
        flex-direction: column;
    }
    .trust-badges {
        flex-wrap: wrap;
        justify-content: center;
    }
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    .btn-cta {
        justify-content: center;
    }
    .lightbox-nav {
        width: 45px;
        height: 45px;
    }
    .lightbox-nav.prev {
        left: 15px;
    }
    .lightbox-nav.next {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .profile-hero {
        padding: 1rem 0 2rem;
    }
    .profile-header h1 {
        font-size: 1.75rem;
    }
    .name-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .quick-stats {
        gap: 0.5rem;
    }
    .quick-stats .stat {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    .rates-card {
        padding: 1rem;
    }
    .rate-item {
        padding: 0.75rem 0.5rem;
    }
    .rate-item .duration {
        font-size: 0.7rem;
    }
    .rate-item .price {
        font-size: 0.95rem;
    }
    .rate-item .best-value {
        font-size: 0.55rem;
        padding: 3px 6px;
    }
    .thumbnail-strip {
        gap: 8px;
    }
    .thumb {
        width: 55px;
        height: 70px;
    }
    .gallery-nav {
        width: 38px;
        height: 38px;
    }
    .about-card {
        padding: 1.5rem;
    }
    .location-card {
        padding: 2rem 1.5rem;
    }
    .section-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}


/* ============================================
   NEW HOMEPAGE SECTIONS - ELEGANT DESIGN
   ============================================ */


/* ---------- Elegant Stats Section ---------- */

.section-stats-elegant {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.section-stats-elegant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C9A86C' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.stats-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(201, 168, 108, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(201, 168, 108, 0.1) 0%, transparent 50%);
}

.stats-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.stats-label {
    font-family: var(--font-elegant);
    font-size: 1.2rem;
    color: #C9A86C;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: inline-block;
}

.stats-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A86C, transparent);
    margin: 1rem auto 0;
}

.stats-grid-elegant {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.stat-card-elegant {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(201, 168, 108, 0.2);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
}

.stat-card-elegant::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A86C, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card-elegant:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}

.stat-card-elegant:hover::before {
    opacity: 1;
}

.stat-card-elegant .stat-number {
    font-family: var(--font-elegant);
    font-size: 3.5rem;
    font-weight: 400;
    color: #C9A86C;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-card-elegant .stat-title {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #C9A86C;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}

.stat-card-elegant .stat-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin: 0;
}


/* ---------- Colorful Why Choose Cards ---------- */

.section-why-colorful {
    background: linear-gradient(135deg, #FFF9FB 0%, #FFF5F7 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.section-why-colorful::before,
.section-why-colorful::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    opacity: 0.3;
}

.section-why-colorful::before {
    background: linear-gradient(135deg, #FFB6C1, #FFC0CB);
    top: -50px;
    left: -50px;
}

.section-why-colorful::after {
    background: linear-gradient(135deg, #FFB6C1, #FFC0CB);
    bottom: -50px;
    right: -50px;
}

.section-why-colorful .section-head {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.section-why-colorful .section-head h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
}

.section-why-colorful .section-head h2 span {
    color: var(--rose-dark);
}

.section-why-colorful .section-head p {
    color: var(--text-medium);
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

.colorful-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.color-card {
    padding: 2rem;
    border-radius: 20px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.color-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.color-card.card-blue {
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
}

.color-card.card-green {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.color-card.card-pink {
    background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD9 100%);
}

.color-card.card-yellow {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFECB3 100%);
}

.color-card .card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.color-card h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.color-card p {
    color: var(--text-medium);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}


/* ---------- Available Tonight Section ---------- */

.section-available-tonight {
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--rose-dark) 0%, #5a2a3a 50%, #3d1a28 100%);
    overflow: hidden;
}

.tonight-bg-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.tonight-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
}

.tonight-glow.glow-1 {
    width: 400px;
    height: 400px;
    background: var(--rose-mid);
    top: -100px;
    right: -100px;
    animation: pulse-glow 4s ease-in-out infinite;
}

.tonight-glow.glow-2 {
    width: 300px;
    height: 300px;
    background: #E91E63;
    bottom: -50px;
    left: -50px;
    animation: pulse-glow 5s ease-in-out infinite reverse;
}

@keyframes pulse-glow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.5;
    }
}

.tonight-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.tonight-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.tonight-badge .pulse-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
}

@keyframes pulse-live {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }
}

.tonight-badge .badge-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tonight-header h2 {
    font-family: var(--font-heading);
    font-size: 2.75rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

.tonight-header h2 span {
    color: var(--rose-pale);
}

.tonight-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}

.tonight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.tonight-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
    text-decoration: none;
}

.tonight-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.tonight-card-image {
    position: relative;
    height: 320px;
    overflow: hidden;
}

.tonight-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}

.tonight-card:hover .tonight-card-image img {
    transform: scale(1.08);
}

.tonight-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
}

.tonight-live-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(74, 222, 128, 0.5);
}

.tonight-live-badge .live-pulse {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-live 1.5s ease-in-out infinite;
}

.tonight-live-badge span {
    color: #4ade80;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.tonight-time {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
}

.tonight-time i {
    color: var(--rose-pale);
}

.tonight-card-info {
    padding: 1.5rem;
}

.tonight-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.tonight-name-row h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
}

.tonight-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 193, 7, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
}

.tonight-rating i {
    color: #FFC107;
    font-size: 0.8rem;
}

.tonight-rating span {
    color: #FFC107;
    font-size: 0.85rem;
    font-weight: 600;
}

.tonight-tagline {
    color: var(--rose-pale);
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}

.tonight-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.tonight-location i {
    color: var(--rose-mid);
    font-size: 0.9rem;
}

.tonight-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--rose-mid), var(--rose-dark));
    padding: 0.875rem 1.25rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.tonight-cta span {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
}

.tonight-cta i {
    color: #fff;
    transition: transform 0.3s ease;
}

.tonight-card:hover .tonight-cta {
    background: linear-gradient(135deg, #E91E63, var(--rose-mid));
}

.tonight-card:hover .tonight-cta i {
    transform: translateX(5px);
}

.tonight-footer {
    text-align: center;
    margin-top: 2.5rem;
    position: relative;
    z-index: 2;
}

.tonight-footer p {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tonight-footer p i {
    color: #FFC107;
}


/* Tonight Section Responsive */

@media (max-width: 992px) {
    .tonight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tonight-grid .tonight-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .section-available-tonight {
        padding: 3.5rem 0;
    }
    .tonight-header h2 {
        font-size: 1.75rem;
    }
    .tonight-header p {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
    .tonight-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
    }
    .tonight-grid .tonight-card:last-child {
        grid-column: auto;
        max-width: none;
        margin: 0;
        width: 100%;
    }
    /* Horizontal card layout for mobile */
    .tonight-card {
        display: flex;
        flex-direction: row;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .tonight-card-image {
        width: 150px;
        min-width: 150px;
        height: 220px;
        border-radius: 16px 0 0 16px;
    }
    /* Available Now badge - just glowing dot */
    .tonight-live-badge {
        top: 10px;
        left: 10px;
        bottom: auto;
        right: auto;
        width: 14px;
        height: 14px;
        padding: 0;
        font-size: 0;
        border-radius: 50%;
        background: #00C853;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.3), 0 0 12px rgba(0, 200, 83, 0.6);
        animation: glowPulse 1.5s ease-in-out infinite;
    }
    .tonight-live-badge span {
        display: none;
    }
    .tonight-live-badge .live-pulse {
        display: none;
    }
    .tonight-live-badge::after {
        content: none;
    }
    @keyframes glowPulse {
        0%,
        100% {
            box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.3), 0 0 12px rgba(0, 200, 83, 0.6);
        }
        50% {
            box-shadow: 0 0 0 6px rgba(0, 200, 83, 0.2), 0 0 20px rgba(0, 200, 83, 0.8);
        }
    }
    /* Move time badge to top-right of the card (over info section) */
    .tonight-time {
        position: absolute;
        bottom: auto;
        top: 10px;
        left: auto;
        right: 10px;
        padding: 5px 10px;
        font-size: 0.65rem;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(139, 69, 88, 0.95), rgba(90, 42, 58, 0.95));
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 10;
    }
    /* Remove overlay completely on mobile */
    .tonight-overlay {
        display: none;
    }
    /* Card needs position relative for time badge positioning */
    .tonight-card {
        position: relative;
    }
    .tonight-card-info {
        flex: 1;
        padding: 2rem 1rem 1rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .tonight-name-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        margin-bottom: 0.5rem;
    }
    .tonight-name-row h3 {
        font-size: 1.15rem;
        font-weight: 600;
    }
    .tonight-rating {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.75rem;
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.1);
        color: #FFD700;
        border-radius: 20px;
        font-weight: 600;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }
    .tonight-rating i {
        font-size: 0.65rem;
        color: #FFD700;
    }
    .tonight-rating span {
        color: #fff;
        font-weight: 700;
    }
    .tonight-tagline {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 0.35rem;
    }
    .tonight-location {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
        color: rgba(255, 255, 255, 0.6);
    }
    .tonight-location i {
        color: #E91E63;
    }
    .tonight-cta {
        padding: 0.6rem 1.25rem;
        font-size: 0.8rem;
        border-radius: 25px;
        background: linear-gradient(135deg, #E91E63, #C2185B);
        align-self: flex-start;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
    }
    .tonight-footer {
        margin-top: 1.5rem;
    }
    .tonight-footer p {
        font-size: 0.85rem;
        background: rgba(255, 255, 255, 0.05);
        padding: 0.75rem 1.25rem;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 480px) {
    .tonight-header h2 {
        font-size: 1.5rem;
    }
    .tonight-card-image {
        width: 130px;
        min-width: 130px;
        height: 200px;
    }
    .tonight-card-info {
        padding: 1.75rem 0.75rem 0.75rem 0.75rem;
    }
    .tonight-name-row h3 {
        font-size: 0.95rem;
    }
    .tonight-tagline {
        font-size: 0.7rem;
    }
    .tonight-cta {
        padding: 0.45rem 0.9rem;
        font-size: 0.7rem;
    }
    .tonight-live-badge {
        width: 12px;
        height: 12px;
        top: 8px;
        left: 8px;
    }
    .tonight-rating {
        padding: 3px 8px;
        font-size: 0.7rem;
    }
    .tonight-rating i {
        font-size: 0.6rem;
    }
    .tonight-time {
        top: 8px;
        right: 8px;
        font-size: 0.6rem;
        padding: 4px 8px;
    }
}


/* ---------- Fresh Girls / New Arrivals Section ---------- */

.section-fresh-girls {
    background: #0a0a0a;
    padding: 4rem 0;
}

.fresh-girls-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
}

.hearts-left,
.hearts-right {
    display: flex;
    gap: 0.5rem;
}

.hearts-left i,
.hearts-right i {
    color: #E91E63;
    font-size: 1rem;
}

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

.header-content .sub-title {
    font-family: var(--font-elegant);
    font-size: 1.1rem;
    font-style: italic;
    color: #E91E63;
    display: block;
    margin-bottom: 0.25rem;
}

.header-content h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    letter-spacing: 0.1em;
    margin: 0;
}

.decorative-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: #E91E63;
}

.decorative-line svg {
    width: 80px;
    height: 15px;
}

.decorative-line .center-heart {
    font-size: 1.25rem;
}

.fresh-girls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.fresh-girl-card {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.fresh-girl-card:hover {
    transform: translateY(-10px);
}

.fresh-img {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.fresh-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.fresh-girl-card:hover .fresh-img img {
    transform: scale(1.08);
}

.fresh-img .new-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #E91E63, #FF4081);
    color: #fff;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.fresh-info {
    text-align: center;
}

.fresh-info h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: #fff;
    margin: 0 0 0.25rem 0;
}

.fresh-info span {
    font-size: 0.85rem;
    color: #E91E63;
}


/* ---------- 3D Category Carousel ---------- */


/* ---------- Category Slider with Pop-out Images ---------- */

.section-category-slider {
    background: var(--ivory);
    padding: 5rem 0 4rem;
    overflow: hidden;
}

.section-category-slider .section-head p {
    color: var(--text-light);
    margin-top: 0.5rem;
}

.category-slider-wrapper {
    position: relative;
    padding: 20px 60px 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.category-slider-container {
    position: relative;
    overflow: hidden;
    padding-top: 20px;
    margin-top: 0;
}


/* Fade edges overlay */

.category-slider-container::before,
.category-slider-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 20;
    pointer-events: none;
}

.category-slider-container::before {
    left: 0;
    background: linear-gradient(to right, var(--ivory) 0%, transparent 100%);
}

.category-slider-container::after {
    right: 0;
    background: linear-gradient(to left, var(--ivory) 0%, transparent 100%);
}

.category-slider-track {
    position: relative;
    height: 360px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.category-slider-track:active {
    cursor: grabbing;
}

.category-slider-track img {
    pointer-events: none;
    -webkit-user-drag: none;
}


/* Individual slide card */

.category-slide {
    position: absolute;
    width: 240px;
    height: 320px;
    left: 50%;
    bottom: 0;
    margin-left: -120px;
    background: var(--card-bg, #E91E63);
    border-radius: 20px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}


/* Card background image */

.category-slide-bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    z-index: 0;
}

.category-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    transition: all 0.4s ease;
}

.category-slide:hover .category-slide-bg img {
    opacity: 0.9;
    transform: scale(1.05);
}


/* Gradient overlay on card - lighter */

.category-slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.category-slide:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}


/* Pop-out image wrapper */

.slide-image-wrap {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 140px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 5;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.slide-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.4s ease;
}

.category-slide:hover .slide-image-wrap img {
    transform: scale(1.08) translateY(-5px);
}


/* Card content */

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    text-align: center;
    color: #fff;
    z-index: 2;
}

.slide-content h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.slide-btn i {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.category-slide:hover .slide-btn i {
    transform: translateX(4px);
}


/* Navigation arrows */

.slider-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--rose-light);
    color: var(--rose-dark);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: absolute;
    z-index: 30;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.slider-arrow:hover {
    background: var(--rose-dark);
    border-color: var(--rose-dark);
    color: #fff;
    box-shadow: 0 8px 25px rgba(139, 69, 88, 0.3);
}

.slider-arrow.prev {
    left: 0;
}

.slider-arrow.next {
    right: 0;
}


/* Dots indicator */

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rose-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.is-active {
    background: var(--rose-dark);
    width: 30px;
    border-radius: 5px;
}

.slider-dot:hover {
    background: var(--rose-mid);
}


/* ---------- Featured Spotlight Section ---------- */

.section-featured-spotlight {
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 50%, #880E4F 100%);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.spotlight-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.spotlight-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    position: relative;
    z-index: 1;
}

.spotlight-side {
    flex: 0 0 15%;
    padding: 2rem;
}

.spotlight-side .side-image {
    width: 100%;
    max-width: 180px;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0.7;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.spotlight-side .side-image:hover {
    opacity: 1;
    transform: scale(1);
}

.spotlight-side .side-image img {
    width: 100%;
    height: auto;
    display: block;
}

.spotlight-side.left .side-image {
    margin-left: auto;
}

.spotlight-main {
    flex: 0 0 70%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    overflow: hidden;
    margin: 2rem 0;
}

.spotlight-main .main-content {
    flex: 1;
    padding: 3rem;
    color: #fff;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.rating-badge .rating {
    color: #FFD700;
}

.rating-badge i {
    color: #FFD700;
    font-size: 0.8rem;
}

.content-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.8;
    margin-bottom: 0.5rem;
}

.content-meta .tag {
    background: #FFD700;
    color: #000;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

.spotlight-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    letter-spacing: 0.05em;
}

.nav-tabs {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
}

.nav-tabs span {
    font-size: 0.9rem;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.nav-tabs span.active,
.nav-tabs span:hover {
    opacity: 1;
}

.nav-tabs span.active {
    border-bottom: 2px solid #fff;
    padding-bottom: 0.5rem;
    margin-bottom: -1rem;
}

.spotlight-main .description {
    font-size: 0.95rem;
    line-height: 1.8;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.cta-row {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.btn-spotlight {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #E91E63;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-spotlight:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.stats-mini {
    display: flex;
    gap: 1.5rem;
}

.stats-mini .stat {
    text-align: center;
}

.stats-mini .stat strong {
    display: block;
    font-size: 1.5rem;
}

.stats-mini .stat span {
    font-size: 0.75rem;
    opacity: 0.7;
}

.spotlight-main .main-image {
    width: 350px;
    height: 100%;
    flex-shrink: 0;
}

.spotlight-main .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px;
}


/* ---------- Interactive Services Grid ---------- */

.section-services-interactive {
    background: var(--ivory);
    padding: 5rem 0;
}

.services-hexagon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.services-hexagon-grid.grid-4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
}


/* ---------- Book With Our Trusted Agency Section ---------- */

.section-trusted-agency {
    background: linear-gradient(135deg, #1a0a10 0%, #2d1520 50%, #1a0a10 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.trusted-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 30%, rgba(199, 125, 143, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(139, 69, 88, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.trusted-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.trusted-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.trusted-header h2 span {
    color: var(--rose-mid);
}

.trusted-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 650px;
    margin: 0 auto;
}

.trusted-header p strong {
    color: var(--rose-mid);
    font-weight: 600;
}

.trusted-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.trusted-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(199, 125, 143, 0.2);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.trusted-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
    border-color: var(--rose-mid);
}

.trusted-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.4rem;
    color: #fff;
}

.trusted-card h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.trusted-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.trusted-card p strong {
    color: var(--rose-mid);
    font-weight: 600;
}

@media (max-width: 768px) {
    .trusted-grid {
        grid-template-columns: 1fr;
    }
    .trusted-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .section-trusted-agency {
        padding: 3.5rem 0;
    }
    .trusted-header h2 {
        font-size: 1.6rem;
    }
    .trusted-header p {
        font-size: 1rem;
    }
}

.hex-service {
    background: #fff;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(139, 69, 88, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.hex-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E91E63, #FF4081);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.hex-service:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(233, 30, 99, 0.15);
}

.hex-service:hover::before {
    transform: scaleX(1);
}

.hex-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #FCE4EC, #F8BBD9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.4s ease;
}

.hex-icon i {
    font-size: 1.75rem;
    color: #E91E63;
}

.hex-service:hover .hex-icon {
    background: linear-gradient(135deg, #E91E63, #FF4081);
    transform: rotateY(180deg);
}

.hex-service:hover .hex-icon i {
    color: #fff;
}

.hex-service h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.hex-service p {
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}


/* ---------- Booking Banner ---------- */

.section-booking-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.banner-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23E91E63' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
    z-index: 1;
}

.banner-text h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.banner-text h2 span {
    color: #E91E63;
}

.banner-text p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.banner-actions {
    display: flex;
    gap: 1rem;
}

.btn-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-banner i {
    font-size: 1.75rem;
}

.btn-banner small {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.btn-banner strong {
    font-size: 1rem;
}

.btn-banner.whatsapp {
    background: #25D366;
    color: #fff;
}

.btn-banner.call {
    background: #E91E63;
    color: #fff;
}

.btn-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}


/* ---------- Testimonials Floating Style ---------- */

.section-testimonials-float {
    background: linear-gradient(135deg, #FFF5F7 0%, #FFF0F3 50%, #FFEEF2 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.testimonial-bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.2;
}

.testimonial-bg-shapes .shape-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #FFB6C1, transparent);
    top: -100px;
    right: 10%;
}

.testimonial-bg-shapes .shape-2 {
    width: 150px;
    height: 150px;
    background: #FFB6C1;
    bottom: 20%;
    left: 5%;
}

.testimonial-bg-shapes .shape-3 {
    width: 80px;
    height: 80px;
    background: #E91E63;
    top: 40%;
    left: 15%;
    opacity: 0.1;
}

.testimonial-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.testimonial-content .testi-label {
    font-family: var(--font-elegant);
    font-size: 1rem;
    color: #E91E63;
    font-style: italic;
}

.testimonial-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    margin: 0.5rem 0 2rem 0;
}

.testimonial-content h2 span {
    color: #E91E63;
}

.testimonial-quote {
    position: relative;
}

.testimonial-quote .quote-icon {
    font-size: 2rem;
    color: #E91E63;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.testimonial-quote p {
    font-size: 1.1rem;
    color: var(--text-medium);
    line-height: 1.8;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #E91E63, #FF4081);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
}

.author-info strong {
    display: block;
    color: var(--text-dark);
}

.author-info span {
    font-size: 0.85rem;
    color: var(--text-light);
}

.testimonial-images {
    position: relative;
    height: 450px;
}

.floating-img {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 4px solid #fff;
}

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

.floating-img.img-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    animation: float1 6s ease-in-out infinite;
}

.floating-img.img-2 {
    width: 70px;
    height: 70px;
    top: 5%;
    right: 20%;
    animation: float2 7s ease-in-out infinite;
}

.floating-img.img-3 {
    width: 60px;
    height: 60px;
    bottom: 20%;
    left: 5%;
    animation: float3 5s ease-in-out infinite;
}

.floating-img.img-main {
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-width: 6px;
    border-color: #fff;
    box-shadow: 0 20px 50px rgba(233, 30, 99, 0.2);
}

.floating-heart {
    position: absolute;
    color: #E91E63;
    animation: heartFloat 4s ease-in-out infinite;
}

.floating-heart.h1 {
    top: 30%;
    right: 10%;
    font-size: 1.5rem;
    animation-delay: 0s;
}

.floating-heart.h2 {
    bottom: 30%;
    right: 25%;
    font-size: 1rem;
    animation-delay: 1s;
}

.floating-heart.h3 {
    top: 60%;
    left: 20%;
    font-size: 1.25rem;
    animation-delay: 2s;
}

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

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

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

@keyframes heartFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 1;
    }
}


/* ---------- Girl Reviews Interactive Section ---------- */

.section-girl-reviews {
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF5F0 50%, #FFF0F5 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.girl-reviews-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gr-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
}

.gr-shape-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--rose-mid), transparent 70%);
    top: -150px;
    right: -100px;
}

.gr-shape-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--rose-light), transparent 70%);
    bottom: -100px;
    left: -50px;
}

.section-girl-reviews .section-head.has-center {
    text-align: center;
    margin-bottom: 3rem;
}

.section-girl-reviews .section-head p {
    color: var(--text-light);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0.5rem auto 0;
}

.girl-reviews-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}


/* Left Side - Reviews */

.gr-reviews-side {
    background: #fff;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 15px 50px rgba(139, 69, 88, 0.1);
}

.gr-active-girl-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0e6e8;
}

.gr-girl-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gr-badge-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rose-light);
}

.gr-badge-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-dark);
}

.gr-badge-rating {
    font-size: 0.85rem;
    color: var(--rose-dark);
}

.gr-badge-rating i {
    color: #FFD700;
}

.gr-review-count {
    background: var(--rose-lighter);
    color: var(--rose-dark);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gr-count-num {
    font-weight: 700;
}


/* Reviews Slider */

.gr-reviews-slider {
    position: relative;
}

.gr-reviews-track {
    position: relative;
    min-height: 220px;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.gr-reviews-track:active {
    cursor: grabbing;
}

.gr-review-card {
    display: none;
    animation: fadeInReview 0.4s ease;
}

.gr-review-card.active {
    display: block;
}

@keyframes fadeInReview {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gr-review-stars {
    margin-bottom: 1rem;
}

.gr-review-stars i {
    color: #FFD700;
    font-size: 1rem;
    margin-right: 2px;
}

.gr-review-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-medium);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.gr-review-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gr-author-avatar {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.gr-author-info strong {
    display: block;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.gr-author-info span {
    font-size: 0.8rem;
    color: var(--text-light);
}


/* Slider Navigation */

.gr-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0e6e8;
}

.gr-nav-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--rose-light);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rose-dark);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gr-nav-btn:hover {
    background: var(--rose-dark);
    border-color: var(--rose-dark);
    color: #fff;
}

.gr-slider-dots {
    display: flex;
    gap: 8px;
}

.gr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rose-lighter);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gr-dot.active {
    background: var(--rose-dark);
    transform: scale(1.2);
}

.gr-dot:hover {
    background: var(--rose-mid);
}


/* Right Side - Floating Circular Images */

.gr-girls-floating {
    position: relative;
    height: 480px;
}


/* Floating circular image base styles */

.gr-float-img {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.2);
    border: 4px solid #fff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gr-float-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gr-float-img:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.35);
    z-index: 10;
}

.gr-float-img:hover img {
    transform: scale(1.15);
}


/* Name label on hover */

.gr-float-name {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--rose-dark);
    color: #fff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
}

.gr-float-img:hover .gr-float-name {
    opacity: 1;
    bottom: -35px;
}


/* Active ring */

.gr-float-ring {
    position: absolute;
    inset: -6px;
    border: 3px solid var(--rose-dark);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
    animation: none;
}

.gr-float-img.active .gr-float-ring {
    opacity: 1;
    animation: pulseRing 2s ease-in-out infinite;
}

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


/* Main center image - largest */

.gr-float-img.gr-main {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-width: 6px;
    box-shadow: 0 20px 50px rgba(139, 69, 88, 0.3);
    z-index: 5;
}

.gr-float-img.gr-main:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

.gr-float-img.gr-main.active {
    box-shadow: 0 20px 60px rgba(139, 69, 88, 0.4);
}


/* Position 1 - Top left */

.gr-float-img.gr-pos-1 {
    width: 90px;
    height: 90px;
    top: 8%;
    left: 12%;
    animation: grFloat1 6s ease-in-out infinite;
}


/* Position 2 - Top right */

.gr-float-img.gr-pos-2 {
    width: 80px;
    height: 80px;
    top: 5%;
    right: 15%;
    animation: grFloat2 7s ease-in-out infinite;
}


/* Position 3 - Middle right */

.gr-float-img.gr-pos-3 {
    width: 85px;
    height: 85px;
    top: 45%;
    right: 5%;
    animation: grFloat3 5s ease-in-out infinite;
}


/* Position 4 - Bottom left */

.gr-float-img.gr-pos-4 {
    width: 75px;
    height: 75px;
    bottom: 15%;
    left: 8%;
    animation: grFloat4 6.5s ease-in-out infinite;
}


/* Position 5 - Bottom right */

.gr-float-img.gr-pos-5 {
    width: 70px;
    height: 70px;
    bottom: 10%;
    right: 20%;
    animation: grFloat5 5.5s ease-in-out infinite;
}


/* Floating animations */

@keyframes grFloat1 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(3deg);
    }
}

@keyframes grFloat2 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(-3deg);
    }
}

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

@keyframes grFloat4 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-18px) rotate(2deg);
    }
}

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


/* Floating hearts */

.gr-heart {
    position: absolute;
    color: var(--rose-mid);
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}

.gr-heart.gr-h1 {
    top: 20%;
    right: 8%;
    font-size: 1.5rem;
    animation: grHeartFloat 4s ease-in-out infinite;
}

.gr-heart.gr-h2 {
    bottom: 35%;
    right: 30%;
    font-size: 1rem;
    animation: grHeartFloat 4.5s ease-in-out infinite 0.5s;
}

.gr-heart.gr-h3 {
    top: 35%;
    left: 5%;
    font-size: 1.25rem;
    animation: grHeartFloat 5s ease-in-out infinite 1s;
}

.gr-heart.gr-h4 {
    bottom: 25%;
    left: 25%;
    font-size: 0.9rem;
    animation: grHeartFloat 4s ease-in-out infinite 1.5s;
}

@keyframes grHeartFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-12px) scale(1.15);
        opacity: 0.9;
    }
}


/* Hint text */

.gr-float-hint {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-light);
    font-size: 0.85rem;
    white-space: nowrap;
}

.gr-float-hint i {
    color: var(--rose-mid);
    margin-right: 6px;
}


/* Responsive for Girl Reviews */

@media (max-width: 992px) {
    .girl-reviews-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .gr-girls-floating {
        order: -1;
        height: 380px;
    }
    .gr-float-img.gr-main {
        width: 160px;
        height: 160px;
    }
    .gr-float-img.gr-pos-1 {
        width: 70px;
        height: 70px;
    }
    .gr-float-img.gr-pos-2 {
        width: 65px;
        height: 65px;
    }
    .gr-float-img.gr-pos-3 {
        width: 68px;
        height: 68px;
    }
    .gr-float-img.gr-pos-4 {
        width: 60px;
        height: 60px;
    }
    .gr-float-img.gr-pos-5 {
        width: 55px;
        height: 55px;
    }
}

@media (max-width: 768px) {
    .section-girl-reviews {
        padding: 3rem 0;
    }
    .gr-girls-floating {
        height: 320px;
    }
    .gr-float-img.gr-main {
        width: 130px;
        height: 130px;
    }
    .gr-float-img.gr-pos-1 {
        width: 60px;
        height: 60px;
        top: 5%;
        left: 8%;
    }
    .gr-float-img.gr-pos-2 {
        width: 55px;
        height: 55px;
    }
    .gr-float-img.gr-pos-3 {
        width: 58px;
        height: 58px;
        right: 3%;
    }
    .gr-float-img.gr-pos-4 {
        width: 52px;
        height: 52px;
    }
    .gr-float-img.gr-pos-5 {
        width: 50px;
        height: 50px;
    }
    .gr-reviews-side {
        padding: 1.5rem;
    }
    .gr-review-text {
        font-size: 1rem;
    }
    .gr-active-girl-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .gr-heart {
        display: none;
    }
}

@media (max-width: 480px) {
    .gr-girls-floating {
        height: 280px;
    }
    .gr-float-img.gr-main {
        width: 110px;
        height: 110px;
    }
    .gr-float-img.gr-pos-1 {
        width: 50px;
        height: 50px;
    }
    .gr-float-img.gr-pos-2 {
        width: 45px;
        height: 45px;
    }
    .gr-float-img.gr-pos-3 {
        width: 48px;
        height: 48px;
    }
    .gr-float-img.gr-pos-4 {
        width: 42px;
        height: 42px;
    }
    .gr-float-img.gr-pos-5 {
        width: 40px;
        height: 40px;
    }
    .gr-float-name {
        font-size: 0.65rem;
        padding: 3px 8px;
    }
    .gr-badge-img {
        width: 50px;
        height: 50px;
    }
    .gr-badge-name {
        font-size: 1.2rem;
    }
    .gr-float-hint {
        font-size: 0.75rem;
    }
}


/* ---------- Reviews Slider Section (Database Reviews) ---------- */

.section-reviews-slider {
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF5F0 50%, #FFF0F5 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.reviews-slider-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 20%, rgba(199, 125, 143, 0.08) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(232, 180, 188, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.section-reviews-slider .section-head {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
}

.section-reviews-slider .section-head.has-center {
    text-align: center;
}

.section-reviews-slider .head-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.section-reviews-slider .head-tag i {
    color: #FFD700;
}

.section-reviews-slider .section-head h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.section-reviews-slider .section-head h2 span {
    color: var(--rose-dark);
}

.section-reviews-slider .section-head p {
    color: var(--text-light);
    font-size: 1.05rem;
    max-width: 500px;
    margin: 0 auto;
}


/* Reviews Slider Wrapper - Two Column Layout */

.reviews-slider-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}


/* Reviews Slider (Left Side) */

.rs-slider {
    background: #fff;
    border-radius: 24px;
    padding: 2rem 2.5rem;
    box-shadow: 0 15px 50px rgba(139, 69, 88, 0.1);
}

.rs-track {
    position: relative;
    min-height: 250px;
}

.rs-slide {
    display: none;
    animation: rsSlideIn 0.4s ease;
}

.rs-slide.active {
    display: block;
}

@keyframes rsSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Review Card */

.rs-review-card {
    padding: 1rem 0;
}

.rs-stars {
    margin-bottom: 1.25rem;
}

.rs-stars i {
    color: #ddd;
    font-size: 1.1rem;
    margin-right: 3px;
}

.rs-stars i.filled {
    color: #FFD700;
}

.rs-review-text {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--text-medium);
    font-style: italic;
    margin-bottom: 1.75rem;
    position: relative;
}

.rs-reviewer {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rs-reviewer-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.rs-reviewer-info strong {
    display: block;
    color: var(--text-dark);
    font-size: 1rem;
    margin-bottom: 2px;
}

.rs-reviewer-info span {
    font-size: 0.85rem;
    color: var(--text-light);
}


/* Slider Controls */

.rs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0e6e8;
}

.rs-btn {
    width: 44px;
    height: 44px;
    border: 2px solid var(--rose-light);
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rose-dark);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.rs-btn:hover {
    background: var(--rose-dark);
    border-color: var(--rose-dark);
    color: #fff;
}

.rs-dots {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 200px;
}

.rs-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rose-pale);
    cursor: pointer;
    transition: all 0.3s ease;
}

.rs-dot.active {
    background: var(--rose-dark);
    transform: scale(1.2);
}

.rs-dot:hover {
    background: var(--rose-mid);
}


/* Profile Display (Right Side) - Floating Circles */

.rs-profile-display {
    position: relative;
    min-height: 420px;
    width: 100%;
}


/* Base Floating Circle Styles */

.rs-float-circle {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.2);
    border: 4px solid #fff;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.rs-float-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rs-float-circle:hover {
    z-index: 10;
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.35);
}

.rs-float-circle:hover img {
    transform: scale(1.1);
}


/* Animated Ring */

.rs-float-ring {
    position: absolute;
    inset: -6px;
    border: 3px solid var(--rose-dark);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.rs-float-circle.rs-main .rs-float-ring {
    opacity: 1;
    animation: rsRingPulse 2.5s ease-in-out infinite;
}

@keyframes rsRingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.5;
    }
}


/* Main Center Circle - Largest */

.rs-float-circle.rs-main {
    width: 220px;
    height: 220px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-width: 6px;
    box-shadow: 0 20px 50px rgba(139, 69, 88, 0.3);
    z-index: 5;
}

.rs-float-circle.rs-main:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.rs-float-circle.rs-main.active {
    box-shadow: 0 25px 60px rgba(139, 69, 88, 0.35);
}


/* Small Floating Positions with Animations */

.rs-float-circle.rs-pos-1 {
    width: 75px;
    height: 75px;
    top: 8%;
    left: 15%;
    animation: rsFloat1 5s ease-in-out infinite;
}

.rs-float-circle.rs-pos-2 {
    width: 65px;
    height: 65px;
    top: 5%;
    right: 18%;
    animation: rsFloat2 6s ease-in-out infinite;
}

.rs-float-circle.rs-pos-3 {
    width: 70px;
    height: 70px;
    top: 55%;
    right: 5%;
    animation: rsFloat3 5.5s ease-in-out infinite;
}

.rs-float-circle.rs-pos-4 {
    width: 60px;
    height: 60px;
    bottom: 12%;
    left: 10%;
    animation: rsFloat4 6.5s ease-in-out infinite;
}

.rs-float-circle.rs-pos-5 {
    width: 55px;
    height: 55px;
    bottom: 8%;
    right: 22%;
    animation: rsFloat5 5s ease-in-out infinite;
}


/* Floating Animations */

@keyframes rsFloat1 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(3deg);
    }
}

@keyframes rsFloat2 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(-2deg);
    }
}

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

@keyframes rsFloat4 {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

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


/* Swapping Animation Class */

.rs-float-circle.rs-swapping {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 20 !important;
}


/* Floating Hearts */

.rs-heart {
    position: absolute;
    color: var(--rose-mid);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.rs-heart.rs-h1 {
    top: 25%;
    left: 5%;
    font-size: 1.2rem;
    animation: rsHeartFloat 4s ease-in-out infinite;
}

.rs-heart.rs-h2 {
    bottom: 30%;
    right: 8%;
    font-size: 0.9rem;
    animation: rsHeartFloat 4.5s ease-in-out infinite 0.5s;
}

@keyframes rsHeartFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-12px) scale(1.15);
        opacity: 0.7;
    }
}


/* Responsive - Reviews Slider */

@media (max-width: 1024px) {
    .reviews-slider-wrapper {
        grid-template-columns: 1fr 320px;
        gap: 2rem;
    }
    .rs-profile-display {
        min-height: 380px;
    }
    .rs-float-circle.rs-main {
        width: 180px;
        height: 180px;
    }
    .rs-float-circle.rs-pos-1 {
        width: 65px;
        height: 65px;
    }
    .rs-float-circle.rs-pos-2 {
        width: 55px;
        height: 55px;
    }
    .rs-float-circle.rs-pos-3 {
        width: 60px;
        height: 60px;
    }
    .rs-float-circle.rs-pos-4 {
        width: 50px;
        height: 50px;
    }
    .rs-float-circle.rs-pos-5 {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 900px) {
    .reviews-slider-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .rs-profile-display {
        order: -1;
        min-height: 320px;
    }
    .rs-float-circle.rs-main {
        width: 160px;
        height: 160px;
    }
    .rs-float-circle.rs-pos-1 {
        width: 55px;
        height: 55px;
        top: 5%;
        left: 12%;
    }
    .rs-float-circle.rs-pos-2 {
        width: 50px;
        height: 50px;
        top: 3%;
        right: 15%;
    }
    .rs-float-circle.rs-pos-3 {
        width: 52px;
        height: 52px;
        top: 50%;
        right: 3%;
    }
    .rs-float-circle.rs-pos-4 {
        width: 48px;
        height: 48px;
        bottom: 10%;
        left: 8%;
    }
    .rs-float-circle.rs-pos-5 {
        width: 45px;
        height: 45px;
        bottom: 5%;
        right: 18%;
    }
    .rs-heart {
        display: none;
    }
}

@media (max-width: 768px) {
    .section-reviews-slider {
        padding: 3.5rem 0;
    }
    .section-reviews-slider .section-head h2 {
        font-size: 2rem;
    }
    .rs-slider {
        padding: 1.5rem;
    }
    .rs-track {
        min-height: 220px;
    }
    .rs-review-text {
        font-size: 1.05rem;
        line-height: 1.8;
    }
    .rs-dots {
        max-width: 150px;
    }
    .rs-profile-display {
        min-height: 280px;
    }
    .rs-float-circle.rs-main {
        width: 140px;
        height: 140px;
        border-width: 5px;
    }
    .rs-float-circle.rs-pos-1,
    .rs-float-circle.rs-pos-2,
    .rs-float-circle.rs-pos-3,
    .rs-float-circle.rs-pos-4,
    .rs-float-circle.rs-pos-5 {
        width: 45px;
        height: 45px;
        border-width: 3px;
    }
    .rs-float-ring {
        inset: -4px;
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    .section-reviews-slider {
        padding: 3rem 0;
    }
    .section-reviews-slider .section-head h2 {
        font-size: 1.6rem;
    }
    .rs-slider {
        padding: 1.25rem;
        border-radius: 18px;
    }
    .rs-review-text {
        font-size: 0.95rem;
    }
    .rs-reviewer-avatar {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    .rs-btn {
        width: 38px;
        height: 38px;
    }
    .rs-dot {
        width: 8px;
        height: 8px;
    }
    .rs-profile-display {
        min-height: 240px;
    }
    .rs-float-circle.rs-main {
        width: 120px;
        height: 120px;
        border-width: 4px;
    }
    .rs-float-circle.rs-pos-1,
    .rs-float-circle.rs-pos-2,
    .rs-float-circle.rs-pos-3,
    .rs-float-circle.rs-pos-4,
    .rs-float-circle.rs-pos-5 {
        width: 38px;
        height: 38px;
        border-width: 2px;
    }
    .rs-float-ring {
        inset: -3px;
        border-width: 2px;
    }
}


/* ---------- About Agency Section ---------- */

.section-about-agency {
    background: var(--ivory);
    padding: 6rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image .image-frame {
    position: relative;
    display: inline-block;
}

.about-image .image-frame img {
    width: 100%;
    max-width: 450px;
    height: auto;
    display: block;
    box-shadow: 20px 20px 60px rgba(139, 69, 88, 0.15);
}

.about-image .frame-accent {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--rose-mid);
    z-index: -1;
}

.experience-badge {
    position: absolute;
    bottom: 30px;
    right: -30px;
    background: var(--rose-dark);
    color: #fff;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.3);
}

.experience-badge .years {
    display: block;
    font-family: var(--font-elegant);
    font-size: 2.5rem;
    line-height: 1;
    color: #C9A86C;
}

.experience-badge .text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-top: 0.5rem;
    display: block;
}

.about-content .about-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #222;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}

.about-content .label-line {
    width: 50px;
    height: 2px;
    background: var(--rose-mid);
    margin: 0.75rem 0 1.5rem;
}

.about-content h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.about-content h2 span {
    color: var(--rose-dark);
}

.about-content .lead {
    font-size: 1.05rem;
    color: #555;
    font-weight: 400;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-content p {
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-contact {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(139, 69, 88, 0.1);
    border-bottom: 1px solid rgba(139, 69, 88, 0.1);
}

.about-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about-contact .contact-item i {
    font-size: 1.5rem;
    color: var(--rose-dark);
}

.about-contact .contact-item span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
}

.about-contact .contact-item a {
    font-weight: 600;
    color: var(--rose-dark);
    text-decoration: none;
}

.btn-about-more {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--rose-dark);
    color: #fff;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-about-more:hover {
    background: var(--rose-mid);
    color: #fff;
    transform: translateX(5px);
}


/* ---------- History Section ---------- */

.section-history {
    background: linear-gradient(135deg, #1a0a10 0%, #2d1520 50%, #1a0a10 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.history-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(199, 125, 143, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(139, 69, 88, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.history-wrapper {
    position: relative;
    z-index: 1;
}

.history-header {
    text-align: center;
    margin-bottom: 3rem;
}

.history-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: #fff;
    padding: 0.5rem 1.25rem;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.history-badge i {
    font-size: 0.8rem;
}

.history-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin: 0;
}

.history-header h2 span {
    color: var(--rose-mid);
}

.history-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.history-timeline {
    position: relative;
    padding-left: 2rem;
}

.history-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--rose-mid), var(--rose-dark));
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-year {
    display: inline-block;
    background: var(--rose-dark);
    color: #fff;
    padding: 0.35rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.timeline-dot {
    position: absolute;
    left: -2.55rem;
    top: 0.5rem;
    width: 12px;
    height: 12px;
    background: var(--rose-mid);
    border-radius: 50%;
    border: 3px solid #1a0a10;
    box-shadow: 0 0 0 2px var(--rose-mid);
}

.timeline-text {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(199, 125, 143, 0.15);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-left: 1rem;
}

.timeline-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.history-summary {
    background: linear-gradient(135deg, rgba(139, 69, 88, 0.2), rgba(199, 125, 143, 0.1));
    border: 1px solid rgba(199, 125, 143, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
}

.summary-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.75rem;
    color: #fff;
}

.history-summary p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 968px) {
    .history-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .history-header h2 {
        font-size: 2rem;
    }
    .timeline-dot {
        display: none;
    }
    .history-timeline {
        padding-left: 0;
    }
    .history-timeline::before {
        display: none;
    }
    .timeline-text {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .section-history {
        padding: 3rem 0;
    }
    .history-header h2 {
        font-size: 1.6rem;
    }
    .history-summary {
        padding: 1.5rem;
    }
    .history-summary p {
        font-size: 1rem;
    }
}


/* ---------- How It Works Section ---------- */

.section-how-works {
    background: linear-gradient(135deg, #FFF5F7 0%, #FFF0F3 50%, #FFEEF2 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.how-works-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23C77D8F' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.section-how-works .section-head {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

.head-tag-light {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--rose-pale);
    color: var(--rose-dark);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.section-how-works .section-head h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.section-how-works .section-head h2 span {
    color: var(--rose-dark);
}

.section-how-works .section-head p {
    color: var(--text-medium);
    font-size: 1.1rem;
}

.steps-flow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.step-card {
    background: #fff;
    padding: 2.5rem 2rem;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(139, 69, 88, 0.1);
    max-width: 280px;
    position: relative;
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(139, 69, 88, 0.15);
}

.step-icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.step-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--rose-pale) 0%, #fff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--rose-light);
}

.step-icon i {
    font-size: 1.75rem;
    color: var(--rose-dark);
}

.step-icon-wrap .step-num {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 28px;
    height: 28px;
    background: var(--rose-dark);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.step-card p {
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin: 0;
}

.step-connector {
    width: 60px;
    color: var(--rose-light);
    margin-top: 60px;
    flex-shrink: 0;
}

.step-connector svg {
    width: 100%;
    height: 20px;
}


/* 4 Cards Grid for How It Works */

.steps-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.steps-grid-4 .step-card {
    max-width: 100%;
}

.how-works-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
}

.btn-join-agency {
    background: var(--rose-dark);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-join-agency:hover {
    background: var(--rose-mid);
    color: #fff;
    transform: translateY(-2px);
}

.btn-learn-book {
    background: transparent;
    color: var(--rose-dark);
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--rose-dark);
    transition: all 0.3s ease;
}

.btn-learn-book:hover {
    background: var(--rose-dark);
    color: #fff;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .steps-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .steps-grid-4 {
        grid-template-columns: 1fr;
    }
    .how-works-buttons {
        flex-direction: column;
        align-items: center;
    }
    .btn-join-agency,
    .btn-learn-book {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
}


/* ---------- How Payments Work Section ---------- */

.section-payments {
    background: linear-gradient(135deg, #1a0a10 0%, #2d1520 50%, #1a0a10 100%);
    padding: 5rem 0;
    position: relative;
}

.payments-header {
    text-align: center;
    margin-bottom: 3rem;
}

.payments-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.payments-header h2 span {
    color: var(--rose-mid);
}

.payments-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.payments-header p strong {
    color: #fff;
    font-weight: 600;
}

.payments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.payment-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(199, 125, 143, 0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.payment-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
    border-color: var(--rose-mid);
}

.payment-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: #fff;
}

.payment-card h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.payment-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.payments-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.btn-learn-fees {
    display: inline-block;
    background: transparent;
    color: var(--rose-mid);
    padding: 1rem 2rem;
    border: 2px solid var(--rose-mid);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-learn-fees:hover {
    background: var(--rose-mid);
    color: #fff;
}

@media (max-width: 968px) {
    .payments-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .payments-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .section-payments {
        padding: 3.5rem 0;
    }
    .payments-header h2 {
        font-size: 1.6rem;
    }
    .payments-header p {
        font-size: 1rem;
    }
}


/* ---------- Locations Visual Section ---------- */

.section-locations-visual {
    background: var(--ivory);
    padding: 6rem 0;
}

.locations-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.locations-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.locations-images-grid .location-image-card:first-child {
    grid-row: span 2;
}

.location-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    display: block;
}

.location-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.location-image-card:hover img {
    transform: scale(1.1);
}

.location-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.location-overlay .location-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* Location card without image - icon placeholder */

.location-image-card.no-image {
    background: linear-gradient(135deg, var(--rose-dark) 0%, var(--rose-mid) 100%);
}

.location-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.location-icon-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.location-image-card.no-image:hover .location-icon-placeholder i {
    color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.locations-info .locations-label {
    font-family: var(--font-elegant);
    font-size: 1rem;
    color: var(--rose-mid);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

.locations-info h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.locations-info h2 span {
    color: var(--rose-dark);
}

.locations-info>p {
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.all-locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid var(--rose-light);
    color: var(--text-medium);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.loc-chip:hover {
    background: var(--rose-dark);
    border-color: var(--rose-dark);
    color: #fff;
}

.loc-chip i {
    font-size: 0.75rem;
    color: var(--rose-mid);
}

.loc-chip:hover i {
    color: #fff;
}

.btn-find-location {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--rose-dark);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-find-location:hover {
    background: var(--rose-mid);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(139, 69, 88, 0.3);
}


/* ---------- Responsive for New Sections ---------- */

@media (max-width: 1024px) {
    .stats-grid-elegant {
        grid-template-columns: repeat(2, 1fr);
    }
    .colorful-cards-grid {
        grid-template-columns: 1fr;
    }
    .fresh-girls-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Category Slider - Tablet */
    .category-slider-wrapper {
        padding: 20px 50px 20px;
    }
    .category-slider-container {
        padding-top: 15px;
        margin-top: 0;
    }
    .category-slider-container::before,
    .category-slider-container::after {
        width: 60px;
    }
    .category-slider-track {
        height: 300px;
    }
    .category-slide {
        width: 200px;
        height: 260px;
        margin-left: -100px;
    }
    .slide-content {
        padding: 1.25rem;
    }
    .slide-content h3 {
        font-size: 1.1rem;
    }
    .spotlight-side {
        display: none;
    }
    .spotlight-main {
        flex: 1;
        flex-direction: column;
    }
    .spotlight-main .main-image {
        width: 100%;
        height: 250px;
    }
    .services-hexagon-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .banner-content {
        flex-direction: column;
        text-align: center;
    }
    .testimonial-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .testimonial-images {
        height: 350px;
    }
    .floating-img.img-main {
        width: 200px;
        height: 200px;
    }
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .about-image {
        text-align: center;
    }
    .experience-badge {
        right: 20px;
    }
    .steps-flow {
        flex-wrap: wrap;
        gap: 2rem;
    }
    .step-connector {
        display: none;
    }
    .locations-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    /* Keep 1 big + 2 small layout on tablet */
    .locations-images-grid {
        gap: 0.75rem;
    }
    .locations-images-grid .location-image-card:first-child {
        grid-row: span 2;
    }
    .locations-images-grid .location-image-card {
        height: 120px;
    }
    .locations-images-grid .location-image-card:first-child {
        height: auto;
        min-height: 248px;
    }
}

@media (max-width: 768px) {
    .section-stats-elegant {
        padding: 3rem 0;
    }
    .stats-grid-elegant {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .stat-card-elegant {
        padding: 2rem 1.5rem;
    }
    .stat-card-elegant .stat-number {
        font-size: 2.5rem;
    }
    .section-why-colorful {
        padding: 3rem 0;
    }
    .section-why-colorful .section-head h2 {
        font-size: 1.75rem;
    }
    .color-card {
        padding: 1.5rem;
    }
    .section-fresh-girls {
        padding: 3rem 0;
    }
    .fresh-girls-header {
        gap: 1rem;
    }
    .header-content h2 {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
    }
    .fresh-girls-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .fresh-info h3 {
        font-size: 1rem;
    }
    .section-services-showcase {
        padding: 3rem 0;
    }
    .service-card-item {
        flex-direction: column;
    }
    .service-thumb {
        width: 100%;
        height: 120px;
    }
    .section-testimonials-float {
        padding: 3rem 0;
    }
    .testimonial-content h2 {
        font-size: 1.75rem;
    }
    .testimonial-images {
        height: 300px;
    }
    .floating-img.img-main {
        width: 150px;
        height: 150px;
    }
    .floating-img.img-1,
    .floating-img.img-2,
    .floating-img.img-3 {
        width: 50px;
        height: 50px;
    }
    .section-about-agency {
        padding: 4rem 0;
    }
    .about-content h2 {
        font-size: 2rem;
    }
    .about-contact {
        flex-direction: column;
        gap: 1rem;
    }
    .section-how-works {
        padding: 4rem 0;
    }
    .section-how-works .section-head h2 {
        font-size: 2rem;
    }
    .step-card {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }
    .locations-images-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    /* Keep desktop layout on mobile - 1 big left, 2 small right */
    .locations-images-grid .location-image-card:first-child {
        grid-row: span 2;
    }
    .locations-images-grid .location-image-card {
        height: 100px;
    }
    .locations-images-grid .location-image-card:first-child {
        height: auto;
        min-height: 208px;
    }
    .location-overlay {
        padding: 0.75rem;
    }
    .location-name {
        font-size: 0.9rem;
    }
    .locations-info h2 {
        font-size: 1.75rem;
    }
    /* New Sections Mobile */
    /* Category Slider - Mobile */
    .section-category-slider {
        padding: 3rem 0 2rem;
    }
    .category-slider-wrapper {
        padding: 10px 0 15px;
        max-width: 100%;
        overflow: visible;
    }
    .category-slider-container {
        padding-top: 10px;
        margin-top: 0;
        overflow: visible;
    }
    /* Remove fade edges on mobile - show partial cards */
    .category-slider-container::before,
    .category-slider-container::after {
        display: none;
    }
    .category-slider-track {
        height: 260px;
        overflow: visible;
    }
    /* Bigger center card */
    .category-slide {
        width: 180px;
        height: 230px;
        margin-left: -90px;
        border-radius: 16px;
    }
    /* Side cards visible - handled by JS transforms */
    .category-slide[style*="translateX"] {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .slide-content {
        padding: 1rem;
    }
    .slide-content h3 {
        font-size: 1rem;
    }
    .slide-btn {
        font-size: 0.75rem;
    }
    /* Mobile arrows - smaller and positioned at edges */
    .slider-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    .slider-arrow.prev {
        left: 5px;
    }
    .slider-arrow.next {
        right: 5px;
    }
    .slider-dots {
        margin-top: 1.25rem;
    }
    .slider-dot {
        width: 8px;
        height: 8px;
    }
    .slider-dot.is-active {
        width: 24px;
    }
    .section-featured-spotlight {
        padding: 2rem 0;
    }
    .spotlight-side {
        display: none;
    }
    .spotlight-main {
        margin: 1rem;
        border-radius: 20px;
        flex-direction: column;
    }
    .spotlight-main .main-content {
        padding: 1.5rem;
    }
    .spotlight-title {
        font-size: 1.5rem;
    }
    .nav-tabs {
        gap: 0.75rem;
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
    .cta-row {
        flex-direction: column;
        gap: 1rem;
    }
    .spotlight-main .main-image {
        width: 100%;
        height: 250px;
    }
    .services-hexagon-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .hex-service {
        padding: 2rem 1.5rem;
    }
    .banner-text h2 {
        font-size: 1.5rem;
    }
    .banner-content {
        flex-direction: column;
        text-align: center;
    }
    .banner-actions {
        flex-direction: row;
        width: 100%;
        gap: 0.75rem;
    }
    .btn-banner {
        justify-content: center;
        padding: 0.75rem 1rem;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
    }
    .btn-banner i {
        font-size: 1.25rem;
    }
    .btn-banner small {
        font-size: 0.65rem;
    }
    .btn-banner strong {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .section-booking-banner {
        padding: 2.5rem 0;
    }
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .banner-text h2 {
        font-size: 1.5rem;
    }
    .banner-text p {
        font-size: 0.9rem;
    }
    .btn-banner {
        padding: 0.65rem 0.75rem;
        gap: 0.4rem;
        border-radius: 10px;
    }
    .btn-banner i {
        font-size: 1.1rem;
    }
    .btn-banner small {
        display: none;
    }
    .btn-banner strong {
        font-size: 0.75rem;
    }
}


/* ============================================
   EROTIC SECTIONS - NEW ADDITIONS
   ============================================ */


/* ============================================
   SECTION 4: Your Fantasy, Her Pleasure
   Interactive Scenario Picker
   ============================================ */

.section-scenario-picker {
    padding: 5rem 0;
    background: linear-gradient(180deg, var(--ivory) 0%, var(--rose-blush) 50%, var(--ivory) 100%);
    position: relative;
    overflow: hidden;
}

.scenario-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(139, 69, 88, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(199, 125, 143, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.scenario-header {
    text-align: center;
    margin-bottom: 3rem;
}

.scenario-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--rose-gradient);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.scenario-badge i {
    font-size: 1rem;
}

.scenario-header h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.scenario-header h2 span {
    color: var(--rose-dark);
    font-style: italic;
}

.scenario-header p {
    font-size: 1.1rem;
    color: var(--text-medium);
    max-width: 500px;
    margin: 0 auto;
}

.scenario-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.scenario-card {
    background: white;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 2px solid transparent;
}

.scenario-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--rose-light);
}

.scenario-card[data-scenario="romantic"] {
    --scenario-color: #E91E63;
}

.scenario-card[data-scenario="wild"] {
    --scenario-color: #FF5722;
}

.scenario-card[data-scenario="submissive"] {
    --scenario-color: #FF9800;
}

.scenario-card[data-scenario="dominant"] {
    --scenario-color: #9C27B0;
}

.scenario-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--scenario-color), color-mix(in srgb, var(--scenario-color) 70%, white));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: white;
    font-size: 1.75rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--scenario-color) 30%, transparent);
}

.scenario-glow {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, color-mix(in srgb, var(--scenario-color) 15%, transparent), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: var(--transition);
}

.scenario-card:hover .scenario-glow {
    opacity: 1;
}

.scenario-card h3 {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.scenario-card>p {
    font-size: 0.9rem;
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.scenario-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;
}

.scenario-includes li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-medium);
    padding: 6px 0;
    border-bottom: 1px dashed var(--rose-pale);
}

.scenario-includes li:last-child {
    border-bottom: none;
}

.scenario-includes li i {
    color: var(--scenario-color);
    font-size: 0.75rem;
}

.scenario-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--scenario-color);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.scenario-btn:hover {
    color: white;
    transform: scale(1.05);
    box-shadow: 0 5px 20px color-mix(in srgb, var(--scenario-color) 40%, transparent);
}

.scenario-btn i {
    transition: var(--transition);
}

.scenario-btn:hover i {
    transform: translateX(3px);
}


/* Custom Fantasy Box */

.scenario-custom {
    margin-top: 2rem;
}

.custom-fantasy-box {
    background: linear-gradient(135deg, var(--dark-rose) 0%, #1a1a2e 100%);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
}

.custom-fantasy-box>i {
    font-size: 3rem;
    color: var(--rose-light);
    opacity: 0.8;
}

.custom-text {
    flex: 1;
}

.custom-text h4 {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 0.25rem;
}

.custom-text p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
}

.btn-custom-fantasy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-custom-fantasy:hover {
    color: white;
    background: #128C7E;
    transform: scale(1.05);
}


/* ============================================
   SECTION 1: Fulfill Your Fantasies
   Dark Seductive Category Grid
   ============================================ */

.section-fantasies {
    padding: 5rem 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #2D1F23 50%, #1a1a2e 100%);
    position: relative;
    overflow: hidden;
}

.fantasies-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fantasy-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.fantasy-glow.glow-1 {
    width: 400px;
    height: 400px;
    background: rgba(139, 69, 88, 0.3);
    top: -100px;
    left: -100px;
}

.fantasy-glow.glow-2 {
    width: 300px;
    height: 300px;
    background: rgba(156, 39, 176, 0.2);
    bottom: -50px;
    right: -50px;
}

.fantasies-header {
    text-align: center;
    margin-bottom: 3rem;
}

.fantasy-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--rose-light);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.fantasy-label i {
    color: #FF5722;
}

.fantasies-header h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.fantasies-header h2 span {
    background: linear-gradient(135deg, var(--rose-light), #FF5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fantasies-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}

.fantasies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.fantasy-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    display: block;
    text-decoration: none;
}

.fantasy-image {
    position: absolute;
    inset: 0;
}

.fantasy-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.fantasy-card:hover .fantasy-image img {
    transform: scale(1.1);
}

.fantasy-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.9) 100%);
    transition: var(--transition);
}

.fantasy-card:hover .fantasy-overlay {
    background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 20%, transparent) 0%, color-mix(in srgb, var(--card-accent) 40%, transparent) 50%, rgba(0, 0, 0, 0.95) 100%);
}

.fantasy-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 2;
}

.fantasy-icon {
    width: 50px;
    height: 50px;
    background: var(--card-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--card-accent) 50%, transparent);
}

.fantasy-content h3 {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 0.5rem;
}

.fantasy-content p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.fantasy-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--card-accent);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: var(--transition);
}

.fantasy-card:hover .fantasy-cta {
    opacity: 1;
    transform: translateY(0);
}

.fantasy-cta i {
    transition: var(--transition);
}

.fantasy-card:hover .fantasy-cta i {
    transform: translateX(5px);
}

.fantasy-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.fantasy-card:hover .fantasy-shine {
    left: 150%;
}

.fantasies-footer {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fantasies-footer p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.fantasies-footer i {
    color: var(--rose-light);
}


/* ============================================
   SECTION 2: Private Gallery Peek
   Blurred Teaser Images
   ============================================ */

.section-private-gallery {
    padding: 5rem 0;
    background: linear-gradient(180deg, #2D1F23 0%, #1a1a2e 100%);
    position: relative;
}

.private-gallery-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(139, 69, 88, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(233, 30, 99, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

.private-header {
    text-align: center;
    margin-bottom: 3rem;
}

.private-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--rose-light);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.private-header h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.private-header h2 span {
    color: var(--rose-mid);
}

.private-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
}

.private-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.private-card {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
}

.private-image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.private-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.private-card:hover .private-image img {
    transform: scale(1.1);
}

.private-blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(20px);
    background: rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.private-card:hover .private-blur {
    backdrop-filter: blur(15px);
}

.private-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(139, 69, 88, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    z-index: 2;
    transition: var(--transition);
}

.private-card:hover .private-lock {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--rose-dark);
}

.private-tease {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-size: 0.75rem;
    z-index: 2;
}

.private-tease i {
    color: var(--rose-light);
}

.private-info {
    padding: 1rem;
    text-align: center;
}

.private-info h4 {
    color: white;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}


/* Unique Unlock Button - Animated & Eye-catching */

.private-unlock {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    color: #fff;
    z-index: 1;
}

.private-unlock .unlock-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    z-index: -2;
    border-radius: 8px;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.private-unlock .unlock-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    z-index: -1;
    animation: shineSlide 2.5s ease-in-out infinite;
}

@keyframes shineSlide {
    0% {
        left: -100%;
    }
    50%,
    100% {
        left: 100%;
    }
}

.private-unlock .unlock-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.private-unlock .unlock-icon i {
    position: absolute;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.private-unlock .unlock-icon .fa-lock {
    opacity: 1;
    transform: scale(1);
}

.private-unlock .unlock-icon .fa-unlock {
    opacity: 0;
    transform: scale(0.5) rotate(-20deg);
}

.private-unlock:hover .unlock-icon .fa-lock {
    opacity: 0;
    transform: scale(0.5) rotate(20deg);
}

.private-unlock:hover .unlock-icon .fa-unlock {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.private-unlock .unlock-text {
    position: relative;
    font-size: 0.75rem;
}

.private-unlock:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5), 0 0 20px rgba(240, 147, 251, 0.3);
}

.private-unlock::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #667eea, #764ba2, #f093fb, #667eea);
    background-size: 300% 300%;
    border-radius: 10px;
    z-index: -3;
    animation: borderGlow 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes borderGlow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 300% 50%;
    }
}

.private-unlock:hover::before {
    opacity: 1;
}

.private-cta {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(139, 69, 88, 0.2), rgba(233, 30, 99, 0.1));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.private-cta p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.private-cta i {
    color: #FF5722;
}

.btn-private-access {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.btn-private-access:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}


/* ============================================
   SECTION 3: Tonight's Temptations
   Hot Urgency Section with Countdown
   ============================================ */

.section-temptations {
    padding: 5rem 0;
    background: linear-gradient(135deg, #1a0a0e 0%, #2D1F23 50%, #1a0a0e 100%);
    position: relative;
    overflow: hidden;
}

.temptations-fire-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fire-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FF5722;
    border-radius: 50%;
    animation: fireFloat 3s ease-in-out infinite;
}

.fire-particle.p1 {
    left: 10%;
    animation-delay: 0s;
}

.fire-particle.p2 {
    left: 25%;
    animation-delay: 0.5s;
}

.fire-particle.p3 {
    left: 50%;
    animation-delay: 1s;
}

.fire-particle.p4 {
    left: 75%;
    animation-delay: 1.5s;
}

.fire-particle.p5 {
    left: 90%;
    animation-delay: 2s;
}

@keyframes fireFloat {
    0%,
    100% {
        bottom: -10px;
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        bottom: 100%;
        opacity: 0;
        transform: scale(0.5);
    }
}

.temptations-header {
    text-align: center;
    margin-bottom: 3rem;
}

.temptations-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FF0000;
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
}

.live-dot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.temptations-header h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 0.5rem;
}

.temptations-header h2 span {
    background: linear-gradient(135deg, #FF5722, #FF9800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.temptations-header>p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
}


/* Countdown Timer */

.temptations-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.countdown-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 87, 34, 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    min-width: 80px;
    text-align: center;
}

.countdown-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: #FF5722;
    line-height: 1;
}

.countdown-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.countdown-sep {
    font-size: 2rem;
    color: #FF5722;
    font-weight: 700;
}

.countdown-note {
    color: #FF9800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.countdown-note i {
    animation: flameWave 0.5s ease-in-out infinite alternate;
}

@keyframes flameWave {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

.temptations-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.temptation-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: var(--transition);
}

.temptation-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 87, 34, 0.5);
    box-shadow: 0 20px 40px rgba(255, 87, 34, 0.2);
}

.temptation-image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.temptation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.temptation-card:hover .temptation-image img {
    transform: scale(1.1);
}

.temptation-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
}

.temptation-discount {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #FF5722, #FF9800);
    color: white;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    animation: discountPulse 2s ease-in-out infinite;
}

@keyframes discountPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.temptation-hot {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 2px;
}

.temptation-hot i {
    color: #FF5722;
    font-size: 0.9rem;
    text-shadow: 0 0 10px rgba(255, 87, 34, 0.8);
    animation: fireGlow 0.8s ease-in-out infinite alternate;
}

.temptation-hot i:nth-child(2) {
    animation-delay: 0.1s;
}

.temptation-hot i:nth-child(3) {
    animation-delay: 0.2s;
}

.temptation-hot i:nth-child(4) {
    animation-delay: 0.3s;
}

.temptation-hot i:nth-child(5) {
    animation-delay: 0.4s;
}

@keyframes fireGlow {
    from {
        opacity: 0.7;
        transform: scale(1);
    }
    to {
        opacity: 1;
        transform: scale(1.2);
    }
}

.temptation-info {
    padding: 1.25rem;
}

.temptation-name h3 {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 0.25rem;
}

.temptation-tagline {
    color: var(--rose-light);
    font-size: 0.85rem;
    font-weight: 500;
}

.temptation-specialty {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.temptation-specialty i {
    color: #FF9800;
    font-size: 0.75rem;
}

.temptation-action {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #FF5722;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
    position: relative;
}

.pulse-ring {
    position: absolute;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 2px solid #FF5722;
    border-radius: 50%;
    animation: pulseRing 1.5s ease-out infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.temptation-action i {
    transition: var(--transition);
}

.temptation-card:hover .temptation-action i {
    transform: translateX(5px);
}

.temptations-cta {
    text-align: center;
}

.btn-temptations {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #FF5722, #FF9800);
    color: white;
    padding: 16px 35px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.btn-temptations::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-temptations:hover::before {
    left: 100%;
}

.btn-temptations:hover {
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 87, 34, 0.4);
}


/* ============================================
   RESPONSIVE: Erotic Sections
   ============================================ */

@media (max-width: 1024px) {
    .scenario-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .fantasies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .private-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .temptations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-scenario-picker,
    .section-fantasies,
    .section-private-gallery,
    .section-temptations {
        padding: 3.5rem 0;
    }
    .scenario-header h2,
    .fantasies-header h2,
    .private-header h2,
    .temptations-header h2 {
        font-size: 1.8rem;
    }
    .scenario-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .scenario-card {
        padding: 1.5rem;
    }
    .fantasies-grid {
        grid-template-columns: 1fr;
    }
    .fantasy-card {
        aspect-ratio: 4/3;
    }
    .private-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .private-lock {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .temptations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .temptation-card {
        border-radius: 12px;
    }
    .temptation-info {
        padding: 0.75rem;
    }
    .temptation-name h3 {
        font-size: 0.9rem;
    }
    .temptation-tagline {
        font-size: 0.7rem;
    }
    .temptation-specialty {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
    }
    .temptation-action {
        padding: 0.4rem 0.75rem;
        font-size: 0.7rem;
    }
    .temptation-discount {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
    .temptation-hot {
        font-size: 0.6rem;
    }
    .countdown-item {
        padding: 0.75rem 1rem;
        min-width: 65px;
    }
    .countdown-num {
        font-size: 1.75rem;
    }
    .custom-fantasy-box {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    .custom-fantasy-box>i {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .private-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .private-info h4 {
        font-size: 0.9rem;
    }
    .private-unlock {
        padding: 8px 14px;
        gap: 6px;
    }
    .private-unlock .unlock-text {
        font-size: 0.7rem;
    }
    .private-unlock .unlock-icon {
        width: 14px;
        height: 14px;
    }
    .private-unlock .unlock-icon i {
        font-size: 0.75rem;
    }
    .temptations-countdown {
        gap: 0.5rem;
    }
    .countdown-item {
        padding: 0.5rem 0.75rem;
        min-width: 55px;
    }
    .countdown-num {
        font-size: 1.5rem;
    }
    .countdown-sep {
        font-size: 1.5rem;
    }
}


/* ============================================
   LISTING PAGES (Categories & Locations)
   ============================================ */


/* Mini Page Hero */

.page-hero-mini {
    background: linear-gradient(135deg, var(--rose-dark) 0%, #5a2d3a 100%);
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.page-hero-mini::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.page-hero-mini .container {
    position: relative;
    z-index: 1;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.breadcrumb-nav a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-nav a:hover {
    color: var(--gold);
}

.breadcrumb-nav i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
}

.breadcrumb-nav span {
    color: var(--gold);
}

.page-hero-mini h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.page-hero-mini h1 span {
    color: var(--gold);
}

.page-hero-mini p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}


/* Listing Page Section */

.section-listing-page {
    background: var(--ivory);
    padding: 4rem 0;
}

.listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.listing-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(139, 69, 88, 0.08);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid transparent;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(139, 69, 88, 0.15);
    border-color: var(--rose-light);
}

.listing-card-icon {
    width: 50px;
    height: 50px;
    background: var(--rose-gradient);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.listing-card:hover .listing-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.location-card .listing-card-icon {
    background: linear-gradient(135deg, #1565C0, #42A5F5);
}

.listing-card-content {
    flex: 1;
    min-width: 0;
}

.listing-card-content h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-card-content p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-card-arrow {
    width: 32px;
    height: 32px;
    background: var(--rose-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rose-dark);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.listing-card:hover .listing-card-arrow {
    background: var(--rose-dark);
    color: #fff;
    transform: translateX(3px);
}


/* Responsive for Listing Pages */

@media (max-width: 1200px) {
    .listing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .listing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .page-hero-mini h1 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .listing-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .page-hero-mini {
        padding: 2rem 0;
    }
    .page-hero-mini h1 {
        font-size: 1.75rem;
    }
    .section-listing-page {
        padding: 2.5rem 0;
    }
    .listing-card {
        padding: 1rem 1.25rem;
    }
    .listing-card-icon {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    .listing-card-content h3 {
        font-size: 1rem;
    }
}


/* ============================================
   CATEGORY PAGE STYLES - PREMIUM DESIGN
   ============================================ */


/* ---- Category Hero Section (Rose + Ivory Theme) ---- */

.category-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2.5rem 0 3rem;
    overflow: hidden;
    background: var(--ivory);
}


/* Hero with Background Image */

.category-hero.has-bg-image {
    min-height: 450px;
    padding: 3rem 0;
}

.category-hero.has-bg-image .hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.category-hero.has-bg-image .hero-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.category-hero.has-bg-image .hero-bg-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 15, 35, 0.85) 0%, rgba(15, 15, 35, 0.5) 40%, rgba(15, 15, 35, 0.15) 70%, rgba(15, 15, 35, 0.05) 100%);
}

.category-hero.has-bg-image .container {
    position: relative;
    z-index: 1;
}

.category-hero.has-bg-image .category-breadcrumb a,
.category-hero.has-bg-image .category-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.7);
}

.category-hero.has-bg-image .category-breadcrumb a:hover {
    color: white;
}

.category-hero.has-bg-image .category-breadcrumb .current {
    color: white;
}

.category-hero.has-bg-image .category-title {
    color: white;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.category-hero.has-bg-image .category-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.category-hero.has-bg-image .category-quick-stats .stat-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.category-hero.has-bg-image .category-quick-stats .stat-icon {
    background: rgba(199, 125, 143, 0.3);
    color: white;
}

.category-hero.has-bg-image .category-quick-stats .stat-number {
    color: white;
}

.category-hero.has-bg-image .category-quick-stats .stat-label {
    color: rgba(255, 255, 255, 0.7);
}

.category-hero.has-bg-image .category-badge-large {
    background: linear-gradient(135deg, rgba(199, 125, 143, 0.4), rgba(139, 69, 88, 0.5));
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.category-hero.has-bg-image .scroll-indicator span {
    color: rgba(255, 255, 255, 0.6);
}

.category-hero.has-bg-image .scroll-indicator .mouse {
    border-color: rgba(255, 255, 255, 0.4);
}

.category-hero.has-bg-image .scroll-indicator .wheel {
    background: rgba(255, 255, 255, 0.6);
}


/* Elegant Background Design */

.category-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}


/* Large decorative rose circle - top right */

.category-hero-bg::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rose-light) 0%, transparent 70%);
    top: -250px;
    right: -150px;
    opacity: 0.6;
}


/* Decorative line pattern - bottom */

.category-hero-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--rose-light) 0%, transparent 100%);
    opacity: 0.3;
}


/* Hide old blob elements */

.hero-blob,
.floating-shapes,
.shape,
.hero-pattern {
    display: none;
}


/* Elegant decorative hearts */

.category-hero .hero-decor-hearts {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.category-hero .decor-heart {
    position: absolute;
    color: var(--rose-mid);
    opacity: 0.08;
    font-size: 2rem;
}

.category-hero .decor-heart:nth-child(1) {
    top: 15%;
    left: 8%;
    font-size: 1.5rem;
    transform: rotate(-15deg);
}

.category-hero .decor-heart:nth-child(2) {
    top: 60%;
    left: 15%;
    font-size: 2.5rem;
    transform: rotate(20deg);
}

.category-hero .decor-heart:nth-child(3) {
    top: 25%;
    right: 20%;
    font-size: 1.8rem;
    transform: rotate(-25deg);
}

.category-hero .decor-heart:nth-child(4) {
    bottom: 20%;
    right: 10%;
    font-size: 3rem;
    transform: rotate(15deg);
}


/* Diagonal stripe accent */

.category-hero .hero-stripe {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, var(--rose-light) 50%, transparent 100%);
    opacity: 0.15;
    transform: skewX(-15deg);
    transform-origin: top right;
}


/* Top rose border */

.category-hero .hero-top-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--rose-gradient);
}


/* Decorative circles */

.category-hero .hero-circles {
    position: absolute;
    bottom: 30px;
    left: 50px;
    display: flex;
    gap: 8px;
}

.category-hero .hero-circles span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rose-mid);
    opacity: 0.3;
}

.category-hero .hero-circles span:nth-child(2) {
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

.category-hero .hero-circles span:nth-child(3) {
    opacity: 0.2;
}


/* Breadcrumb */

.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.category-breadcrumb a {
    color: var(--text-medium);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.category-breadcrumb a:hover {
    color: var(--rose-dark);
}

.category-breadcrumb .separator {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.category-breadcrumb .current {
    color: var(--rose-dark);
    font-weight: 600;
}


/* Hero Content Grid */

.category-hero-content {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-left {
    max-width: 550px;
}


/* Category Badge */

.category-badge-large {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 1.25rem;
}

.category-badge-large .badge-icon {
    width: 70px;
    height: 70px;
    background: var(--rose-gradient);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.25);
    position: relative;
    z-index: 2;
    border: 3px solid white;
}

.category-badge-large .badge-glow {
    position: absolute;
    inset: -8px;
    background: var(--rose-mid);
    border-radius: 28px;
    opacity: 0.2;
    filter: blur(15px);
    z-index: 1;
}


/* Category Title */

.category-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--rose-dark);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.category-subtitle {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.7;
    margin-bottom: 2rem;
    max-width: 500px;
}


/* Quick Stats */

.category-quick-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.category-quick-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.category-quick-stats .stat-icon {
    width: 40px;
    height: 40px;
    background: var(--rose-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rose-dark);
    font-size: 1rem;
}

.category-quick-stats .stat-info {
    display: flex;
    flex-direction: column;
}

.category-quick-stats .stat-number {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.1;
}

.category-quick-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Hero Actions */

.category-hero .hero-actions {
    display: flex;
    gap: 1rem;
}

.btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--rose-dark);
    color: white;
    font-weight: 600;
    border-radius: 50px;
    font-size: 1rem;
    box-shadow: 0 8px 25px rgba(139, 69, 88, 0.25);
    transition: var(--transition);
    border: 2px solid var(--rose-dark);
}

.btn-explore:hover {
    background: var(--rose-mid);
    border-color: var(--rose-mid);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(139, 69, 88, 0.35);
    color: white;
}

.btn-whatsapp-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: #25D366;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    font-size: 1rem;
    transition: var(--transition);
}

.btn-whatsapp-cat:hover {
    background: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    color: white;
}


/* Hero Preview Cards */

.hero-right {
    position: relative;
    height: 450px;
}

.preview-cards-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.preview-card {
    position: absolute;
    width: 220px;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: all 0.5s ease;
}

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

.preview-card.card-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    z-index: 3;
}

.preview-card.card-2 {
    top: 40px;
    left: 20%;
    transform: rotate(8deg);
    z-index: 2;
}

.preview-card.card-3 {
    top: 80px;
    right: 10%;
    transform: rotate(-3deg);
    z-index: 1;
}

.preview-card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.05);
    z-index: 10;
}

.preview-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.preview-vip {
    color: var(--gold);
    font-size: 1rem;
}

.placeholder-card {
    width: 100%;
    height: 100%;
    background: var(--rose-gradient-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--rose-mid);
}


/* Category Showcase Image (Hero) */

.category-showcase-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-showcase-image .showcase-frame {
    position: relative;
    width: 350px;
    height: 420px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(139, 69, 88, 0.3);
    border: 4px solid white;
    transform: rotate(-3deg);
    transition: all 0.4s ease;
}

.category-showcase-image .showcase-frame:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 30px 70px rgba(139, 69, 88, 0.4);
}

.category-showcase-image .showcase-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-showcase-image .showcase-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, rgba(199, 125, 143, 0.3) 0%, transparent 70%);
    z-index: -1;
    filter: blur(20px);
}

.category-showcase-image .showcase-badge {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.4);
}

.category-showcase-image .showcase-badge i {
    font-size: 0.9rem;
}


/* Scroll Indicator */

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator .mouse {
    width: 26px;
    height: 40px;
    border: 2px solid var(--rose-mid);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-indicator .wheel {
    width: 4px;
    height: 8px;
    background: var(--rose-dark);
    border-radius: 2px;
    animation: scrollWheel 1.5s ease-in-out infinite;
}

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

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

.scroll-indicator span {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ---- Filter Bar ---- */

.category-filter-bar {
    background: white;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rose-pale);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 1023px) {
    .category-filter-bar {
        top: 70px;
    }
}

.filter-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.filter-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.results-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-medium);
}

.results-count i {
    color: var(--rose-mid);
}

.results-count strong {
    color: var(--rose-dark);
    font-weight: 600;
}

.filter-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}


/* View Toggle */

.view-toggle {
    display: flex;
    background: var(--ivory);
    border-radius: 10px;
    padding: 4px;
}

.view-btn {
    width: 40px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-btn:hover {
    color: var(--rose-dark);
}

.view-btn.active {
    background: white;
    color: var(--rose-dark);
    box-shadow: var(--shadow-sm);
}


/* Sort Dropdown */

.sort-dropdown {
    position: relative;
}

.sort-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--ivory);
    border: 1px solid var(--rose-pale);
    border-radius: 10px;
    color: var(--text-dark);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.sort-btn:hover {
    border-color: var(--rose-mid);
}

.sort-btn i:last-child {
    font-size: 0.7rem;
    transition: var(--transition);
}

.sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 100;
}

.sort-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sort-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-medium);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.sort-option:hover {
    background: var(--rose-pale);
    color: var(--rose-dark);
}

.sort-option.active {
    background: var(--rose-gradient);
    color: white;
}

.sort-option i {
    width: 16px;
    text-align: center;
}


/* ---- Main Content Grid ---- */

.category-main-content {
    padding: 3rem 0;
    background: var(--ivory);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}


/* Profiles Area */

.profiles-area {
    min-height: 500px;
}


/* Category Profiles Grid */

.category-profiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.category-profiles-grid {
    transition: opacity 0.3s ease;
}

.category-profiles-grid.list-view {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.category-profiles-grid.list-view .category-profile-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-radius: 16px;
}

.category-profiles-grid.list-view .card-gallery {
    border-radius: 16px 0 0 16px;
    height: 220px;
}

.category-profiles-grid.list-view .card-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.category-profiles-grid.list-view .card-overlay {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 1rem;
    gap: 0.5rem;
}

.category-profiles-grid.list-view .profile-footer {
    margin-top: auto;
}


/* List view on tablet */

@media (max-width: 1023px) {
    .category-profiles-grid.list-view .category-profile-card {
        grid-template-columns: 180px 1fr;
    }
    .category-profiles-grid.list-view .card-gallery {
        height: 180px;
    }
}


/* List view on mobile */

@media (max-width: 768px) {
    .category-profiles-grid.list-view {
        gap: 0.75rem;
    }
    .category-profiles-grid.list-view .category-profile-card {
        grid-template-columns: 130px 1fr;
    }
    .category-profiles-grid.list-view .card-gallery {
        height: 160px;
    }
    .category-profiles-grid.list-view .card-info {
        padding: 0.85rem;
    }
    .category-profiles-grid.list-view .profile-tagline {
        display: none;
    }
    .category-profiles-grid.list-view .profile-meta {
        margin-bottom: 0.5rem;
    }
}


/* Profile Card */

a.category-profile-card {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.category-profile-card {
    position: relative;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-profile-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.2);
}

.category-profile-card.is-vip {
    border: 2px solid var(--gold);
}

.category-profile-card.is-vip .card-glow {
    background: linear-gradient(135deg, var(--gold), #FFD700);
}


/* Card Glow Effect */

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(135deg, var(--rose-mid), var(--rose-light));
    opacity: 0;
    transform: rotate(45deg);
    transition: var(--transition);
    pointer-events: none;
    z-index: 0;
}

.category-profile-card:hover .card-glow {
    opacity: 0.1;
}


/* Card Gallery */

.card-gallery {
    position: relative;
    height: 340px;
    overflow: hidden;
}

.gallery-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gallery-image.active {
    opacity: 1;
}

/* Show only first image, hide rotation elements */
.gallery-image:not(:first-child) {
    display: none;
}

.gallery-image:first-child {
    opacity: 1;
}

.gallery-dots {
    display: none;
}

.image-counter {
    display: none;
}


/* Image Counter (hidden - single image only) */

.image-counter-old {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: white;
    z-index: 5;
}


/* Gallery Dots */

.gallery-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.gallery-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.gallery-dots .dot.active {
    background: white;
    transform: scale(1.2);
}

.gallery-dots .dot:hover {
    background: white;
}


/* Card Badges */

.card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 5;
}

.card-badges .badge {
    padding: 0.25rem 0.6rem;
    border-radius: 15px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-vip {
    background: linear-gradient(135deg, var(--gold), #FFD700);
    color: #333;
}

.badge-featured {
    background: var(--rose-gradient);
    color: white;
}


/* Availability Badge */

.availability-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    padding: 0.3rem 0.6rem;
    border-radius: 15px;
    z-index: 5;
}

.availability-badge .pulse {
    width: 6px;
    height: 6px;
    background: #4CAF50;
    border-radius: 50%;
    animation: availPulse 2s ease-in-out infinite;
}

@keyframes availPulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
    }
}

.availability-badge .text {
    font-size: 0.7rem;
    font-weight: 600;
    color: #4CAF50;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Card Info */

.card-info {
    padding: 1rem;
    position: relative;
    z-index: 1;
    background: white;
}

.info-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.card-info .profile-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: var(--transition);
}

.card-info .profile-name:hover {
    color: var(--rose-dark);
}

.profile-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--rose-pale);
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--rose-dark);
}

.profile-rating i {
    color: var(--gold);
    font-size: 0.65rem;
}

.profile-tagline {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-medium);
}

.meta-item i {
    color: var(--rose-mid);
    font-size: 0.7rem;
}

.profile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rose-pale);
}

.profile-price {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.price-value {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--rose-dark);
}

.btn-book {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    background: var(--rose-gradient);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
}

.btn-book:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-rose);
    color: white;
}

.btn-book i {
    font-size: 0.7rem;
    transition: var(--transition);
}

.btn-book:hover i {
    transform: translateX(3px);
}


/* No Profiles Found */

.no-profiles-found {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.no-profiles-icon {
    width: 100px;
    height: 100px;
    background: var(--rose-pale);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--rose-mid);
    margin: 0 auto 1.5rem;
}

.no-profiles-found h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.no-profiles-found p {
    color: var(--text-medium);
    margin-bottom: 1.5rem;
}

.btn-explore-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--rose-gradient);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-explore-home:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-rose);
    color: white;
}


/* ---- Sidebar ---- */

.category-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    align-self: start;
    height: fit-content;
}

.sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* Sidebar Cards */

.sidebar-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.sidebar-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--rose-pale);
}

.sidebar-card-title i {
    color: var(--rose-mid);
}


/* Contact Card */

.contact-card {
    background: linear-gradient(135deg, var(--rose-blush), var(--cream));
    border: 1px solid var(--rose-pale);
}

.contact-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--rose-dark);
    margin-bottom: 0.75rem;
}

.contact-card-header i {
    font-size: 1.2rem;
}

.contact-card p {
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 1rem;
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.contact-btn.call {
    background: var(--rose-gradient);
    color: white;
}

.contact-btn.call:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-rose);
    color: white;
}

.contact-btn.whatsapp {
    background: #25D366;
    color: white;
}

.contact-btn.whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
    color: white;
}


/* Category Links */

.category-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 280px;
    overflow-y: auto;
    padding-right: 0.5rem;
}


/* Custom scrollbar for category links */

.category-links::-webkit-scrollbar {
    width: 4px;
}

.category-links::-webkit-scrollbar-track {
    background: var(--rose-pale);
    border-radius: 2px;
}

.category-links::-webkit-scrollbar-thumb {
    background: var(--rose-mid);
    border-radius: 2px;
}

.category-links::-webkit-scrollbar-thumb:hover {
    background: var(--rose-dark);
}

.category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    color: var(--text-medium);
    font-size: 0.9rem;
    transition: var(--transition);
}

.category-link:hover {
    background: var(--rose-pale);
    color: var(--rose-dark);
}

.category-link.active {
    background: var(--rose-gradient);
    color: white;
}

.category-link i {
    font-size: 0.7rem;
    opacity: 0;
    transform: translateX(-5px);
    transition: var(--transition);
}

.category-link:hover i,
.category-link.active i {
    opacity: 1;
    transform: translateX(0);
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rose-dark);
    font-weight: 600;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rose-pale);
    transition: var(--transition);
}

.view-all-link:hover {
    color: var(--rose-mid);
}

.view-all-link i {
    font-size: 0.7rem;
    transition: var(--transition);
}

.view-all-link:hover i {
    transform: translateX(3px);
}


/* Location Tags */

.location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.location-tag {
    padding: 0.5rem 1rem;
    background: var(--rose-pale);
    color: var(--rose-dark);
    font-size: 0.85rem;
    border-radius: 50px;
    transition: var(--transition);
}

.location-tag:hover {
    background: var(--rose-gradient);
    color: white;
}


/* Trust Badges Grid */

.trust-badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem;
    background: var(--rose-pale);
    border-radius: 12px;
    text-align: center;
}

.trust-item i {
    font-size: 1.5rem;
    color: var(--rose-dark);
}

.trust-item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ---- About Category Section ---- */

.category-about-section {
    padding: 5rem 0;
    background: white;
}

@media (max-width: 768px) {
    .category-about-section {
        padding: 0;
    }
}

.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 4rem;
    align-items: center;
}

.about-text .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--rose-pale);
    color: var(--rose-dark);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.about-text h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
}

.about-text h2 span {
    color: var(--rose-dark);
}

.about-description {
    font-size: 1.05rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.about-features .feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.about-features .feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: var(--rose-gradient);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.about-features .feature-text h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.about-features .feature-text p {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}


/* About Visual */

.about-visual {
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 2rem;
}

.visual-card {
    position: relative;
    width: 200px;
    height: 200px;
    background: var(--rose-gradient);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    box-shadow: 0 15px 50px rgba(139, 69, 88, 0.35);
}

.visual-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.visual-label {
    font-size: 0.85rem;
    opacity: 0.9;
    max-width: 130px;
    line-height: 1.3;
}

.visual-decoration {
    position: absolute;
    inset: 0;
}

.deco-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(139, 69, 88, 0.15);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite;
}

.deco-ring.ring-1 {
    width: 240px;
    height: 240px;
    animation-delay: 0s;
}

.deco-ring.ring-2 {
    width: 280px;
    height: 280px;
    animation-delay: 1s;
}

.deco-ring.ring-3 {
    width: 320px;
    height: 320px;
    animation-delay: 2s;
}

@keyframes ringPulse {
    0%,
    100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1.05);
    }
}


/* About Category Image (When category has image 2) */

.about-category-image {
    position: relative;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-image-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(139, 69, 88, 0.25);
    border: 4px solid white;
}

.category-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.category-image-frame:hover img {
    transform: scale(1.03);
}

.category-image-frame .image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(139, 69, 88, 0.3) 0%, transparent 40%);
    pointer-events: none;
}

.about-category-image .image-badge {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: 20px auto 0;
    background: linear-gradient(135deg, var(--rose-dark), var(--rose-mid));
    color: white;
    padding: 14px 28px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(139, 69, 88, 0.4);
    white-space: nowrap;
    width: fit-content;
}

.about-category-image .badge-count {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.about-category-image .badge-text {
    font-size: 0.85rem;
    opacity: 0.9;
}


/* Adjust grid when has category image */

.category-about-section.has-category-image .about-content-grid {
    grid-template-columns: 1fr 550px;
}

@media (max-width: 1200px) {
    .category-about-section.has-category-image .about-content-grid {
        grid-template-columns: 1fr 480px;
    }
}

@media (max-width: 992px) {
    .category-about-section.has-category-image .about-content-grid {
        grid-template-columns: 1fr 380px;
    }
}

@media (max-width: 768px) {
    .category-about-section.has-category-image .about-content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-category-image {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
    }
    .about-category-image .image-badge {
        bottom: -10px;
        padding: 10px 18px;
    }
    .about-category-image .badge-count {
        font-size: 1.25rem;
    }
    .about-category-image .badge-text {
        font-size: 0.8rem;
    }
}


/* ---- Related Categories Section ---- */

.related-categories-section {
    padding: 4rem 0;
    background: var(--ivory);
}

.section-header-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.section-header-cat h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.section-header-cat h2 i {
    color: var(--rose-mid);
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rose-dark);
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition);
}

.view-all-btn:hover {
    color: var(--rose-mid);
}

.view-all-btn i {
    font-size: 0.8rem;
    transition: var(--transition);
}

.view-all-btn:hover i {
    transform: translateX(3px);
}


/* Related Categories Slider */

.related-categories-slider {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}

.related-cat-card {
    position: relative;
    padding: 2rem 1.5rem;
    background: white;
    border: 2px solid var(--rose-pale);
    border-radius: 20px;
    text-align: center;
    overflow: hidden;
    transition: all 0.4s ease;
}

.related-cat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.15);
    border-color: var(--rose-mid);
    background: var(--rose-light);
}

.related-cat-icon {
    width: 60px;
    height: 60px;
    background: var(--rose-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--rose-dark);
    margin: 0 auto 1rem;
    transition: var(--transition);
}

.related-cat-card:hover .related-cat-icon {
    background: var(--rose-dark);
    color: white;
}

.related-cat-card h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.related-cat-card .explore-link {
    font-size: 0.8rem;
    color: var(--rose-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: var(--transition);
}

.related-cat-card:hover .explore-link {
    color: var(--rose-dark);
}

.related-cat-card:hover .explore-link i {
    transform: translateX(3px);
}

.card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.related-cat-card:hover .card-shine {
    left: 100%;
}


/* ---- Explore Categories UNIQUE Design ---- */

.explore-categories-unique {
    padding: 3rem 0;
    background: linear-gradient(180deg, var(--ivory) 0%, #FFF5F7 50%, var(--ivory) 100%);
    overflow: hidden;
}

.explore-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}

.explore-header .header-left {
    flex: 1;
}

.explore-header .header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    margin-bottom: 0.75rem;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
    }
}

.explore-header h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-dark);
    margin: 0 0 0.35rem 0;
    line-height: 1.2;
}

.explore-header h2 span {
    color: var(--rose-dark);
}

.explore-header p {
    font-size: 0.95rem;
    color: var(--text-medium);
    margin: 0;
}

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--rose-dark);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 50px;
    border: 2px solid var(--rose-pale);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.view-all-link:hover {
    background: var(--rose-dark);
    color: white;
    border-color: var(--rose-dark);
}

.view-all-link .link-arrow {
    width: 24px;
    height: 24px;
    background: var(--rose-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.view-all-link:hover .link-arrow {
    background: white;
    color: var(--rose-dark);
    transform: translateX(3px);
}


/* Categories Horizontal Scroll */

.categories-scroll-wrapper {
    position: relative;
}

.categories-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem 0 1.5rem;
    margin: 0 -10px;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-overflow-scrolling: touch;
}

.categories-scroll::-webkit-scrollbar {
    height: 6px;
}

.categories-scroll::-webkit-scrollbar-track {
    background: var(--rose-light);
    border-radius: 10px;
}

.categories-scroll::-webkit-scrollbar-thumb {
    background: var(--rose-mid);
    border-radius: 10px;
}


/* Individual Category Card */

.explore-cat-card {
    position: relative;
    flex: 0 0 150px;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.explore-cat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.explore-cat-card .card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.explore-cat-card .card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.5) 100%);
}


/* Floating Shapes */

.explore-cat-card .card-shapes {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

.explore-cat-card .shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.explore-cat-card .shape-1 {
    width: 100px;
    height: 100px;
    top: -30px;
    right: -30px;
    animation: floatShape 6s ease-in-out infinite;
}

.explore-cat-card .shape-2 {
    width: 60px;
    height: 60px;
    bottom: 30px;
    left: -20px;
    animation: floatShape 5s ease-in-out infinite reverse;
}

.explore-cat-card .shape-3 {
    width: 40px;
    height: 40px;
    bottom: -10px;
    right: 30px;
    animation: floatShape 7s ease-in-out infinite;
}

@keyframes floatShape {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(10px, -10px);
    }
}


/* Hot Badge */

.explore-cat-card .hot-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    background: linear-gradient(135deg, #FF416C, #FF4B2B);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
    animation: hotPulse 1.5s ease-in-out infinite;
}

@keyframes hotPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* Card Content */

.explore-cat-card .card-content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: white;
    text-align: center;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 100%);
}

.explore-cat-card .cat-icon-wrap {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.explore-cat-card:hover .cat-icon-wrap {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.explore-cat-card h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.25;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.3px;
}

.explore-cat-card .cat-stats {
    margin-bottom: 0.75rem;
}

.explore-cat-card .cat-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 500;
}

.explore-cat-card .explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: white;
    color: #333;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
}

.explore-cat-card:hover .explore-btn {
    opacity: 1;
    transform: translateY(0);
}

.explore-cat-card .explore-btn i {
    font-size: 0.65rem;
    transition: transform 0.3s ease;
}

.explore-cat-card:hover .explore-btn i {
    transform: translateX(3px);
}


/* Shine Effect */

.explore-cat-card .card-shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    z-index: 8;
    transition: left 0.6s ease;
}

.explore-cat-card:hover .card-shine-effect {
    left: 100%;
}


/* Scroll Hint */

.scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-light);
    animation: scrollHintPulse 2s ease-in-out infinite;
}

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

.scroll-hint i {
    animation: scrollArrow 1.5s ease-in-out infinite;
}

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


/* Desktop: Grid Layout */

@media (min-width: 1024px) {
    .categories-scroll {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        overflow: visible;
        padding: 1rem 0;
        margin: 0;
    }
    .explore-cat-card {
        flex: none;
        height: 180px;
    }
}


/* Tablet */

@media (max-width: 1023px) {
    .explore-header h2 {
        font-size: 1.5rem;
    }
    .explore-cat-card {
        flex: 0 0 140px;
        height: 170px;
    }
    .scroll-hint {
        display: flex;
    }
}


/* Mobile */

@media (max-width: 768px) {
    .explore-categories-unique {
        padding: 1.5rem 0;
    }
    .explore-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }
    .explore-header h2 {
        font-size: 1.3rem;
    }
    .explore-header p {
        font-size: 0.8rem;
    }
    .view-all-link {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    .explore-cat-card {
        flex: 0 0 130px;
        height: 160px;
    }
    .explore-cat-card .cat-icon-wrap {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    .explore-cat-card h4 {
        font-size: 0.8rem;
    }
    .explore-cat-card .cat-stats .stat {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }
    .explore-cat-card .explore-btn {
        opacity: 1;
        transform: translateY(0);
        padding: 0.35rem 0.7rem;
        font-size: 0.65rem;
    }
    .explore-cat-card .hot-badge {
        font-size: 0.55rem;
        padding: 0.2rem 0.5rem;
        top: 8px;
        left: 8px;
    }
}


/* ---- Category CTA Section ---- */

.category-cta-section {
    padding: 4rem 0 5rem;
    background: var(--ivory);
}

.category-cta-section .cta-card {
    position: relative;
    background: white;
    border-radius: 30px;
    padding: 4rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--rose-pale);
    overflow: hidden;
}

.cta-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cta-heart {
    position: absolute;
    color: var(--rose-pale);
    opacity: 0.5;
    animation: heartFloat 6s ease-in-out infinite;
}

.cta-heart-1 {
    top: 10%;
    left: 10%;
    font-size: 2rem;
    animation-delay: 0s;
}

.cta-heart-2 {
    top: 20%;
    right: 15%;
    font-size: 1.5rem;
    animation-delay: -2s;
}

.cta-heart-3 {
    bottom: 15%;
    left: 20%;
    font-size: 1.75rem;
    animation-delay: -4s;
}

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

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.cta-content>p {
    font-size: 1.1rem;
    color: var(--text-medium);
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
}

.cta-btn-primary {
    background: var(--rose-gradient);
    color: white;
    box-shadow: var(--shadow-rose);
}

.cta-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.4);
    color: white;
}

.cta-btn-whatsapp {
    background: #25D366;
    color: white;
}

.cta-btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    color: white;
}

.cta-trust-badges {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.cta-trust-badges span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-medium);
}

.cta-trust-badges i {
    color: #4CAF50;
}


/* ---- Category Page Responsive ---- */

@media (max-width: 1200px) {
    .category-hero-content {
        grid-template-columns: 1fr 350px;
        gap: 3rem;
    }
    .category-title {
        font-size: 2.75rem;
    }
    .content-grid {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
    .category-profiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-profiles-grid .card-gallery {
        height: 380px;
    }
    .related-categories-slider {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1023px) {
    .category-hero {
        padding: 2rem 0 2.5rem;
    }
    .category-hero.has-bg-image {
        min-height: 380px;
        padding: 2.5rem 0;
    }
    .category-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-left {
        max-width: none;
    }
    .category-badge-large {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
    }
    .category-badge-large .badge-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        border-radius: 18px;
    }
    .category-title {
        font-size: 2rem;
    }
    .category-subtitle {
        max-width: none;
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }
    .category-quick-stats {
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 1.25rem;
    }
    .category-hero .hero-actions {
        justify-content: center;
    }
    .hero-right {
        display: none;
    }
    /* Show category showcase image on mobile */
    .hero-right:has(.category-showcase-image) {
        display: flex;
        height: auto;
        margin-top: 2rem;
    }
    .category-showcase-image .showcase-frame {
        width: 220px;
        height: 280px;
        transform: rotate(0deg);
    }
    .category-showcase-image .showcase-badge {
        bottom: 15px;
        padding: 8px 16px;
        font-size: 0.75rem;
    }
    .scroll-indicator {
        display: none;
    }
    .content-grid {
        grid-template-columns: 1fr;
    }
    /* IMPORTANT: Sidebar comes AFTER profiles on mobile */
    .category-sidebar {
        order: 1;
        position: relative;
        top: 0;
    }
    .profiles-area {
        order: 0;
    }
    /* Hide categories and locations cards on mobile - show only contact and trust */
    .sidebar-sticky .categories-card,
    .sidebar-sticky .locations-card {
        display: none;
    }
    .sidebar-sticky {
        position: relative;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: none;
        overflow-y: visible;
    }
    .sidebar-sticky .contact-card {
        order: 1;
    }
    .sidebar-sticky .trust-card {
        order: 2;
    }
    .about-content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-visual {
        order: -1;
    }
    .related-categories-slider {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .category-hero {
        padding: 1.5rem 0 2rem;
    }
    .category-breadcrumb {
        margin-bottom: 1rem;
        font-size: 0.8rem;
        justify-content: center;
    }
    .category-badge-large {
        width: 50px;
        height: 50px;
        margin-bottom: 0.75rem;
    }
    .category-badge-large .badge-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        border-radius: 14px;
    }
    .category-title {
        font-size: 1.65rem;
        margin-bottom: 0.5rem;
    }
    .category-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }
    .category-quick-stats {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    .category-quick-stats .stat-item {
        padding: 0.4rem 0.6rem;
    }
    .category-quick-stats .stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        border-radius: 8px;
    }
    .category-quick-stats .stat-number {
        font-size: 0.9rem;
    }
    .category-quick-stats .stat-label {
        font-size: 0.65rem;
    }
    .category-hero .hero-actions {
        flex-direction: row;
        gap: 0.75rem;
    }
    .btn-explore,
    .btn-whatsapp-cat {
        padding: 0.7rem 1rem;
        font-size: 0.8rem;
        flex: 1;
        justify-content: center;
        gap: 0.5rem;
    }
    .btn-explore span,
    .btn-whatsapp-cat span {
        display: inline;
    }
    .btn-explore i,
    .btn-whatsapp-cat i {
        font-size: 0.9rem;
    }
    /* Filter bar mobile */
    .filter-bar-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .filter-left {
        flex: 1;
    }
    .results-count {
        font-size: 0.85rem;
    }
    .filter-right {
        gap: 0.5rem;
    }
    /* Grid/List toggle - always visible */
    .view-toggle {
        display: flex;
        padding: 3px;
    }
    .view-btn {
        width: 34px;
        height: 30px;
    }
    .sort-btn span {
        display: none;
    }
    .sort-btn {
        padding: 0.5rem 0.75rem;
    }
    .category-profiles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .category-profiles-grid .card-gallery {
        height: 280px;
    }
    .card-info {
        padding: 0.85rem;
    }
    .card-info .profile-name {
        font-size: 1rem;
    }
    .profile-tagline {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .profile-meta {
        gap: 0.5rem;
        margin-bottom: 0.65rem;
    }
    .meta-item {
        font-size: 0.7rem;
    }
    .profile-footer {
        padding-top: 0.5rem;
    }
    .price-value {
        font-size: 0.95rem;
    }
    .btn-book {
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
    }
    .about-text h2 {
        font-size: 1.5rem;
    }
    .about-features .feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 1rem;
    }
    .about-visual {
        padding: 1.5rem;
    }
    .visual-card {
        width: 150px;
        height: 150px;
    }
    .visual-number {
        font-size: 2.5rem;
    }
    .visual-label {
        font-size: 0.75rem;
        max-width: 100px;
    }
    .deco-ring.ring-1 {
        width: 180px;
        height: 180px;
    }
    .deco-ring.ring-2 {
        width: 210px;
        height: 210px;
    }
    .deco-ring.ring-3 {
        width: 240px;
        height: 240px;
    }
    /* Related Categories Section - Mobile */
    .related-categories-section {
        padding: 2.5rem 0;
    }
    .related-categories-section .container {
        padding: 0 10px !important;
    }
    .section-header-cat {
        margin-bottom: 1.25rem;
    }
    .section-header-cat h2 {
        font-size: 1.35rem;
        gap: 0.5rem;
    }
    .section-header-cat h2 i {
        font-size: 1rem;
    }
    .view-all-btn {
        white-space: nowrap;
        font-size: 0.85rem;
        gap: 0.35rem;
    }
    .related-categories-slider {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .related-cat-card {
        padding: 1.25rem 0.75rem;
    }
    .related-cat-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    .related-cat-card h4 {
        font-size: 0.85rem;
    }
    .explore-link {
        font-size: 0.75rem;
    }
    .category-cta-section .cta-card {
        padding: 2rem 1.25rem;
    }
    .cta-content h2 {
        font-size: 1.5rem;
    }
    .cta-buttons {
        flex-direction: column;
    }
    .cta-btn {
        width: 100%;
        justify-content: center;
    }
    .cta-trust-badges {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .category-profiles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .category-profiles-grid .category-profile-card {
        border-radius: 14px;
    }
    .category-profiles-grid .card-gallery {
        height: 240px;
    }
    .category-profiles-grid .card-info {
        padding: 0.6rem;
    }
    .category-profiles-grid .profile-name {
        font-size: 0.9rem;
    }
    .category-profiles-grid .profile-tagline {
        font-size: 0.7rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0.3rem;
    }
    .category-profiles-grid .profile-meta {
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }
    .category-profiles-grid .profile-meta .meta-item {
        font-size: 0.65rem;
    }
    .category-profiles-grid .profile-footer {
        flex-direction: column;
        gap: 0.4rem;
        align-items: stretch;
    }
    .category-profiles-grid .profile-price .price-label {
        font-size: 0.6rem;
    }
    .category-profiles-grid .profile-price .price-value {
        font-size: 0.8rem;
    }
    .category-profiles-grid .btn-book {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        justify-content: center;
    }
    .category-profiles-grid .card-badges {
        top: 6px;
        left: 6px;
        gap: 3px;
    }
    .category-profiles-grid .card-badges .badge {
        padding: 0.2rem 0.4rem;
        font-size: 0.55rem;
    }
    .category-profiles-grid .availability-badge {
        bottom: 6px;
        left: 6px;
        padding: 0.2rem 0.4rem;
    }
    .category-profiles-grid .availability-badge .text {
        font-size: 0.55rem;
    }
    .category-profiles-grid .image-counter {
        top: 6px;
        right: 6px;
        padding: 0.2rem 0.5rem;
        font-size: 0.6rem;
    }
    .category-profiles-grid .gallery-dots {
        bottom: 6px;
    }
    .category-profiles-grid .gallery-dots .dot {
        width: 5px;
        height: 5px;
    }
    /* List view on small mobile - horizontal card */
    .category-profiles-grid.list-view .category-profile-card {
        grid-template-columns: 130px 1fr;
    }
    .category-profiles-grid.list-view .card-gallery {
        border-radius: 16px 0 0 16px;
        height: 160px;
    }
    .category-profiles-grid.list-view .card-info {
        padding: 0.6rem 0.75rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .category-profiles-grid.list-view .card-info .profile-name {
        font-size: 1rem;
        margin-bottom: 0.15rem;
    }
    .category-profiles-grid.list-view .profile-tagline {
        font-size: 0.75rem;
        margin-bottom: 0.35rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .category-profiles-grid.list-view .profile-meta {
        flex-direction: row;
        gap: 0.75rem;
        margin-bottom: 0.4rem;
    }
    .category-profiles-grid.list-view .profile-meta .meta-item {
        font-size: 0.75rem;
    }
    .category-profiles-grid.list-view .profile-footer {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
    }
    .category-profiles-grid.list-view .profile-price {
        display: flex;
        align-items: baseline;
        gap: 0.25rem;
    }
    .category-profiles-grid.list-view .profile-price .price-label {
        font-size: 0.65rem;
    }
    .category-profiles-grid.list-view .profile-price .price-value {
        font-size: 0.85rem;
    }
    .category-profiles-grid.list-view .btn-book {
        padding: 0.4rem 0.6rem;
        font-size: 0.7rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .category-profiles-grid.list-view .btn-book span {
        display: inline;
    }
    .category-profiles-grid.list-view .btn-book i {
        display: none;
    }
    .category-profiles-grid.list-view .card-badges {
        top: 8px;
        left: 8px;
    }
    .category-profiles-grid.list-view .card-badges .badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.6rem;
    }
    .category-profiles-grid.list-view .availability-badge {
        bottom: 8px;
        left: 8px;
        padding: 0.25rem 0.5rem;
    }
    .category-profiles-grid.list-view .availability-badge .text {
        font-size: 0.6rem;
    }
    .category-profiles-grid.list-view .gallery-dots {
        display: none;
    }
    .category-profiles-grid.list-view .image-counter {
        display: none;
    }
    .trust-badges-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
    .trust-item {
        padding: 0.75rem 0.5rem;
    }
    .trust-item i {
        font-size: 1.25rem;
    }
    .trust-item span {
        font-size: 0.65rem;
    }
}


/* ---- Mobile Quick Links (Categories & Locations after profiles) ---- */

.mobile-quick-links {
    display: none;
    margin-top: 1.5rem;
    margin-bottom: 0;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--rose-blush) 0%, white 50%, var(--cream) 100%);
    border-radius: 16px;
    border: 1px solid var(--rose-pale);
}

@media (max-width: 1023px) {
    .mobile-quick-links {
        display: block;
        margin-top: 1rem;
        margin-bottom: 0 !important;
    }
    /* Reduce gap in main content on mobile */
    .category-main-content {
        padding: 1.5rem 0;
    }
    .content-grid {
        gap: 0 !important;
    }
    .profiles-area {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
    }
    /* Sidebar spacing on mobile - tighter spacing */
    .category-sidebar {
        position: relative !important;
        top: 0 !important;
        margin-top: 0.5rem !important;
        padding-top: 0 !important;
    }
    .sidebar-sticky {
        position: static !important;
        top: auto !important;
        gap: 0.75rem;
        padding-top: 0 !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    .sidebar-sticky .contact-card {
        margin-top: 0 !important;
    }
}

.quick-links-section {
    margin-bottom: 1.25rem;
}

.quick-links-section:last-child {
    margin-bottom: 0;
}

.quick-links-section h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.quick-links-section h4 i {
    color: var(--rose-mid);
    font-size: 0.85rem;
}

.quick-links-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-link-pill {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: white;
    color: var(--text-dark);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid var(--rose-pale);
    transition: var(--transition);
    white-space: nowrap;
}

.quick-link-pill:hover {
    background: var(--rose-gradient);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-rose);
}

.quick-link-pill.location {
    background: var(--rose-pale);
    border-color: transparent;
}

.quick-link-pill.location:hover {
    background: var(--rose-dark);
}


/* ---- Enhanced Sexy Profile Card Effects ---- */

.category-profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rose-mid), var(--gold), var(--rose-mid));
    background-size: 200% 100%;
    opacity: 0;
    transition: var(--transition);
    z-index: 10;
}

.category-profile-card:hover::before {
    opacity: 1;
    animation: shimmerLine 2s ease-in-out infinite;
}

@keyframes shimmerLine {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}


/* Sexy hover glow for VIP cards */

.category-profile-card.is-vip::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, var(--gold), transparent, var(--gold));
    border-radius: 22px;
    z-index: -1;
    opacity: 0;
    transition: var(--transition);
}

.category-profile-card.is-vip:hover::after {
    opacity: 0.6;
    animation: vipGlow 2s ease-in-out infinite;
}

@keyframes vipGlow {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}


/* Enhanced availability pulse */

.availability-badge {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

.availability-badge .pulse {
    position: relative;
}

.availability-badge .pulse::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: #4CAF50;
    border-radius: 50%;
    animation: pulseRing 1.5s ease-out infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


/* Image hover zoom effect */

.card-gallery .gallery-image {
    transition: transform 0.6s ease, opacity 0.5s ease;
}

.category-profile-card:hover .card-gallery .gallery-image.active {
    transform: scale(1.08);
}


/* Sexy gradient border on hover */

.category-profile-card:hover {
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--rose-mid), var(--gold), var(--rose-mid)) border-box;
}

.category-profile-card.is-vip:hover {
    background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--gold), #FFD700, var(--gold)) border-box;
}


/* Book Now button glow */

.btn-book {
    position: relative;
    overflow: hidden;
}

.btn-book::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-book:hover::before {
    width: 200px;
    height: 200px;
}


/* Rating star sparkle */

.profile-rating i {
    animation: starSparkle 3s ease-in-out infinite;
}

@keyframes starSparkle {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}


/* Hero section enhancements */

.category-badge-large .badge-icon {
    position: relative;
    overflow: hidden;
}

.category-badge-large .badge-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeShine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    50%,
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}


/* Filter bar sexy styling */

.view-btn.active {
    background: var(--rose-gradient);
    color: white;
}


/* Sort menu sexy hover */

.sort-option:hover i {
    transform: scale(1.2);
    transition: var(--transition);
}


/* Related category cards sexy hover */

.related-cat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.related-cat-card:hover::before {
    opacity: 1;
    animation: cardShine 0.6s ease-out;
}

@keyframes cardShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/* ---- Category Intro Section (BEFORE Cards) ---- */

.category-intro-section {
    padding: 3rem 0;
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF5EC 100%);
    border-bottom: 1px solid var(--rose-pale);
}

.intro-content-box {
    max-width: 950px;
    margin: 0 auto;
    background: white;
    padding: 2.5rem 3rem;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(139, 69, 88, 0.08);
    border: 1px solid rgba(139, 69, 88, 0.08);
    position: relative;
    overflow: hidden;
}


/* 2-column layout when has image */

.intro-content-box.has-image {
    max-width: 1100px;
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.intro-content-box.has-image .intro-text-side {
    flex: 1;
}

.intro-content-box.has-image .intro-text-side h2 {
    text-align: left;
}

.intro-content-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--rose-gradient);
}

.intro-content-box h2 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    color: var(--rose-dark);
    margin-bottom: 1.25rem;
    text-align: center;
}

.intro-content-box .intro-text {
    max-width: 100%;
}

.intro-content-box .intro-text p {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.85;
    margin-bottom: 1rem;
    text-align: justify;
}

.intro-content-box .intro-text p:last-child {
    margin-bottom: 0;
}

.intro-content-box .intro-text strong {
    color: var(--rose-dark);
    font-weight: 600;
}


/* Intro Image Side (Second Category Image) */

.intro-image-side {
    flex-shrink: 0;
    width: 280px;
}

.intro-image-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(139, 69, 88, 0.2);
    border: 3px solid var(--rose-pale);
}

.intro-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.intro-image-frame:hover img {
    transform: scale(1.05);
}

.intro-image-frame .intro-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(139, 69, 88, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .category-intro-section {
        padding: 2rem 0;
    }
    .intro-content-box {
        padding: 1.5rem;
        margin: 0 0.5rem;
        border-radius: 16px;
    }
    .intro-content-box.has-image {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }
    .intro-content-box.has-image .intro-text-side h2 {
        text-align: center;
    }
    .intro-image-side {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    .intro-content-box h2 {
        font-size: 1.35rem;
        margin-bottom: 1rem;
    }
    .intro-content-box .intro-text p {
        font-size: 0.95rem;
        line-height: 1.75;
        text-align: left;
    }
}


/* ---- Category Pagination ---- */

.pagination-wrapper {
    margin-top: 3rem;
    padding: 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(139, 69, 88, 0.08);
    border: 1px solid var(--rose-pale);
}

.pagination-info {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-medium);
    margin-bottom: 1.25rem;
}

.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 0.75rem;
    background: white;
    border: 2px solid var(--rose-pale);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
    text-decoration: none;
    transition: all 0.3s ease;
}

.page-link:hover {
    border-color: var(--rose-mid);
    background: var(--rose-light);
    color: var(--rose-dark);
    transform: translateY(-2px);
}

.page-link.active {
    background: var(--rose-gradient);
    border-color: var(--rose-dark);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 69, 88, 0.3);
}

.page-link.page-prev,
.page-link.page-next {
    gap: 0.5rem;
    padding: 0 1rem;
    background: var(--rose-light);
    border-color: var(--rose-mid);
    color: var(--rose-dark);
}

.page-link.page-prev:hover,
.page-link.page-next:hover {
    background: var(--rose-dark);
    border-color: var(--rose-dark);
    color: white;
}

.page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 42px;
    color: var(--text-light);
    font-weight: 600;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    .pagination-wrapper {
        margin-top: 2rem;
        padding: 1.25rem;
    }
    .pagination-info {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    .pagination-nav {
        gap: 0.35rem;
    }
    .page-link {
        min-width: 38px;
        height: 38px;
        font-size: 0.9rem;
        padding: 0 0.5rem;
        border-radius: 8px;
    }
    .page-link.page-prev span,
    .page-link.page-next span {
        display: none;
    }
    .page-link.page-prev,
    .page-link.page-next {
        min-width: 42px;
        padding: 0;
    }
    .page-dots {
        width: 24px;
    }
}


/* ---- Category SEO Content Section (500-700 words) ---- */

.category-seo-content {
    padding: 4rem 0;
    background: linear-gradient(135deg, #FFFDF7 0%, #FFF5EC 50%, #FCE4EC 100%);
    position: relative;
    overflow: hidden;
}

.category-seo-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--rose-gradient);
}

.seo-content-box {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    padding: 3rem 3.5rem;
    border-radius: 24px;
    box-shadow: 0 10px 60px rgba(139, 69, 88, 0.1);
    border: 1px solid rgba(139, 69, 88, 0.1);
    position: relative;
}

.seo-content-box::before {
    content: '\201C';
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 6rem;
    font-family: var(--font-heading);
    color: var(--rose-pale);
    line-height: 1;
    opacity: 0.5;
}

.seo-content-box h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--rose-dark);
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 3px solid var(--rose-pale);
    text-align: center;
    position: relative;
}

.seo-content-box h2::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--rose-gradient);
}

.seo-content-text {
    columns: 1;
    column-gap: 3rem;
}

.seo-content-text h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--rose-dark);
    margin: 2rem 0 1rem;
    padding-left: 1rem;
    border-left: 4px solid var(--rose-mid);
    break-after: avoid;
}

.seo-content-text h3:first-child {
    margin-top: 0;
}

.seo-content-text p {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.9;
    margin-bottom: 1.25rem;
    text-align: justify;
}

.seo-content-text p:last-child {
    margin-bottom: 0;
}

.seo-content-text p:first-of-type::first-letter {
    font-size: 3.5rem;
    font-family: var(--font-heading);
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    margin-top: 0.1rem;
    color: var(--rose-dark);
}


/* Lists in SEO content */

.seo-content-text ul,
.seo-content-text ol {
    margin: 1.25rem 0;
    padding-left: 1.5rem;
}

.seo-content-text li {
    font-size: 1rem;
    color: var(--text-medium);
    line-height: 1.8;
    margin-bottom: 0.5rem;
    position: relative;
}

.seo-content-text ul li::marker {
    color: var(--rose-dark);
}

.seo-content-text ol li::marker {
    color: var(--rose-dark);
    font-weight: 600;
}


/* Strong/Bold text */

.seo-content-text strong {
    color: var(--text-dark);
    font-weight: 600;
}


/* Links in content */

.seo-content-text a {
    color: var(--rose-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition);
}

.seo-content-text a:hover {
    color: var(--rose-mid);
}


/* Two column layout for longer content */

@media (min-width: 900px) {
    .seo-content-text.two-column {
        columns: 2;
    }
}


/* Responsive */

@media (max-width: 768px) {
    .category-seo-content {
        padding: 2.5rem 0;
    }
    .seo-content-box {
        padding: 2rem 1.5rem;
        border-radius: 16px;
        margin: 0 0.5rem;
    }
    .seo-content-box::before {
        font-size: 4rem;
        top: 10px;
        left: 15px;
    }
    .seo-content-box h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }
    .seo-content-text {
        columns: 1 !important;
    }
    .seo-content-text h3 {
        font-size: 1.15rem;
        margin: 1.5rem 0 0.75rem;
        padding-left: 0.75rem;
    }
    .seo-content-text p {
        font-size: 0.95rem;
        line-height: 1.75;
        text-align: left;
    }
    .seo-content-text p:first-of-type::first-letter {
        font-size: 2.5rem;
    }
    .seo-content-text li {
        font-size: 0.95rem;
    }
}


/* ============================================
   TRUST ALERT STRIP - No Advance Payment
   ============================================ */

.trust-alert-strip {
    background: linear-gradient(135deg, #8B4558 0%, #A85B6E 100%);
    padding: 12px 0;
    position: relative;
    overflow: hidden;
}

.trust-alert-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M10 0l10 10-10 10L0 10z' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.trust-alert-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    position: relative;
    z-index: 1;
}

.trust-alert-content i {
    font-size: 1.2rem;
    color: #FFD700;
    animation: shieldPulse 2s ease-in-out infinite;
}

.trust-alert-content strong {
    color: #FFD700;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

@media (max-width: 768px) {
    .trust-alert-strip {
        padding: 10px 15px;
    }
    .trust-alert-content {
        font-size: 0.85rem;
        gap: 10px;
    }
    .trust-alert-content i {
        font-size: 1rem;
    }
}