/* East Oasis Premium Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;700;800&display=swap');

:root {
    /* Base Colors */
    --bg-body: #f8fafc;
    /* Slate 50 */
    --bg-white: #ffffff;
    --primary: #0ea5e9;
    /* Sky 500 */
    --primary-dark: #0284c7;
    /* Sky 600 */
    --accent: #06b6d4;
    /* Cyan 500 */

    /* Text Colors */
    --text-main: #0f172a;
    /* Slate 900 */
    --text-body: #334155;
    /* Slate 700 */
    --text-light: #64748b;
    /* Slate 500 */

    /* Borders & Shadows */
    --border: #e2e8f0;
    /* Slate 200 */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Layout */
    --container: 1200px;
    --header-height: 80px;
}

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

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-body);
    background: var(--bg-body);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.2;
}

a {
    text-decoration: none;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Utilities --- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    padding: 12px 28px;
    border-radius: 50px;
    /* Pill shape for premium feel */
    font-weight: 600;
    font-size: 1rem;
    border: none;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}



/* --- Header --- */
header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    /* Keep white for cleanliness, or use var(--primary) if user insists on color */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* If the user really wanted the logo COLOR (Blue) as background, use this: */
/* But typically 'logo color' in a request like this might mean they want it to MATCH the theme, not necessarily BE the color. 
   However, "خلي بدل لون اسود لون شعار يكون" literally means "Let (it) be logo color instead of black".
   Let's try a very subtle approach first, or the blue. 
   Let's use the Primary Blue but ensure text contrast. */

header.scrolled {
    background: var(--primary);
    /* Logo Color */
    border-bottom: none;
}

header.scrolled .nav-links a {
    color: #fff;
}

header.scrolled .logo {
    filter: brightness(0) invert(1);
    /* Make logo white if possible, or just keep it if it contrasts ok */
}

/* Wait, if the logo is blue on blue, it disappears. 
   I will use the nice White background (Premium) but with a bottom border of the logo color 
   OR just stick to the user's explicit instruction. 
   "Change black to logo color".
   I will go with Blue background + White text. */

header.scrolled {
    background: var(--primary);
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
    border-color: transparent;
}

header.scrolled .nav-links a {
    color: #ffffff;
}

header.scrolled .nav-links a:hover {
    color: var(--bg-body);
}

header.scrolled .btn-primary {
    background: #fff;
    color: var(--primary);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    height: 48px;
    display: flex;
    align-items: center;
}

.logo img {
    height: 100%;
    width: auto;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    color: var(--text-body);
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

/* Base Mobile Toggle Style (Hidden on Desktop) */
.mobile-toggle {
    display: none;
}

/* --- Hero Section --- */
.hero {
    padding-top: calc(var(--header-height) + 80px);
    padding-bottom: 100px;
    position: relative;
    /* Soft premium background gradient */
    background: radial-gradient(circle at 90% 10%, rgba(14, 165, 233, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 10% 90%, rgba(6, 182, 212, 0.1) 0%, transparent 60%);
}

.hero h1 {
    font-size: 3.5rem;
    /* Large and bold */
    margin-bottom: 24px;
    letter-spacing: -1px;
}

/* Gradient Text for impact */
.text-gradient {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-light);
    max-width: 600px;
    margin-bottom: 40px;
}

/* --- Hero Section with Slider --- */
.hero {
    position: relative;
    height: 90vh;
    /* Cinematic height */
    min-height: 600px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

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

.hero-slider .swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Zoom effect on active slide handled by JS or CSS animation */
    transition: transform 8s ease;
    /* Subtle zoom effect */
}

.hero-slider .swiper-slide-active {
    transform: scale(1.1);
    /* Slow zoom in effect */
}

/* Premium Dark Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(15, 23, 42, 0.4) 0%,
            rgba(15, 23, 42, 0.7) 50%,
            rgba(15, 23, 42, 0.9) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Content Positioning */
.hero-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    padding-top: 60px;
    /* Offset for header */
}

.hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
    background-clip: text;
    background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.5s;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #e2e8f0;
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.8s;
}

.nav-links li {
    position: relative;
    /* For dropdown positioning */
}

/* Dropdown Styles */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    padding: 10px 0;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    margin: 0;
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-body);
    font-size: 0.95rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: #f8fafc;
    color: var(--primary);
    padding-left: 25px;
    /* Slight movement effect */
}

.hero-buttons {
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.1s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Specific Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

/* --- Services Section --- */
.section-padding {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.section-header p {
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
}

.service-card {
    background: var(--bg-white);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid var(--border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Clean look initially */
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 0.95rem;
    color: var(--text-light);
}

/* --- About Section --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.about-image {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-stats {
    list-style: none;
    margin: 32px 0;
    display: flex;
    gap: 24px;
}

.stats-item {
    border-left: 3px solid var(--primary);
    padding-left: 16px;
}

.stats-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
}

.stats-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* --- CTA Section --- */
.cta-box {
    background: var(--text-main);
    /* Dark contrast block */
    color: white;
    padding: 80px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-box h2 {
    color: white;
    margin-bottom: 16px;
    font-size: 2.5rem;
}

.cta-box p {
    color: #94a3b8;
    margin-bottom: 32px;
    max-width: 600px;
    margin-inline: auto;
}

.cta-box .btn-primary {
    background: white;
    color: var(--text-main);
}

.cta-box .btn-primary:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* --- Footer --- */
footer {
    background: var(--bg-white);
    border-top: 1px solid var(--border);
    padding: 80px 0 32px;
    margin-top: 80px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-brand p {
    color: var(--text-light);
    max-width: 280px;
    margin-top: 16px;
}

.footer-col h4 {
    font-size: 1.1rem;
    margin-bottom: 24px;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: var(--text-light);
    font-size: 0.95rem;
}

.footer-col ul li a:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    color: var(--text-light);
    font-size: 0.9rem;
}

/* --- Pricing Section --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    align-items: start;
}

.pricing-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.pricing-card.featured {
    border: 2px solid var(--primary);
    background: #fdfaff;
    /* Very subtle tint */
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

.pricing-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pricing-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.pricing-price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.pricing-features {
    margin-bottom: 40px;
    list-style: none;
    /* Reset again just in case */
    padding: 0;
}

.pricing-features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-body);
}

.pricing-features li i {
    color: var(--primary);
    /* Sky Blue Checkmarks */
    font-size: 1.1rem;
}

/* Outline Button Variant for Standard Plans */
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
}

@media(max-width: 768px) {
    .pricing-card.featured {
        transform: none;
    }
}

/* --- Mobile --- */
@media(max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .about-grid,
    .footer-top {
        grid-template-columns: 1fr;
    }

    /* Pricing Grid Styles End */
}

/* About Page Redesign */
.about-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.7));
}

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

.about-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: linear-gradient(to right, #fff, #94a3b8);
    background-clip: text;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-hero p {
    font-size: 1.25rem;
    color: #cbd5e1;
}

.stats-strip {
    background: var(--bg-color);
    padding: 60px 0;
    margin-top: -60px;
    position: relative;
    z-index: 3;
}

.stats-strip .container {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.stats-strip-item {
    text-align: center;
}

.stats-strip-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 10px;
}

.stats-strip-label {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 500;
}

.vision-section {
    padding: 100px 0;
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 991px) {
    .vision-grid {
        grid-template-columns: 1fr;
    }

    .about-hero h1 {
        font-size: 2.5rem;
    }
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.value-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
}

.value-icon {
    width: 60px;
    height: 60px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 25px;
}

/* Mobile Menu Styles */
@media(max-width: 768px) {
    .mobile-toggle {
        display: block;
        /* Show on mobile */
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--text-main);
        cursor: pointer;
        z-index: 101;
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        /* Hidden by default */
        width: 60%;
        max-width: 200px;
        /* Even smaller width */
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        padding: 60px 15px 15px;
        /* Tighter padding */
        transition: right 0.3s ease-in-out;
        z-index: 99;
    }

    .nav-links.active {
        right: 0;
        /* Slide in */
    }

    .nav-links li {
        width: 100%;
        margin-bottom: 0;
        border-bottom: 1px solid var(--border);
    }

    .nav-links a {
        display: block;
        padding: 10px 0;
        /* Tighter link spacing */
        font-size: 0.95rem;
        /* Slightly smaller text */
        color: var(--text-main) !important;
        /* Force visibility against white bg */
    }

    .dropdown-menu {
        position: static;
        /* Stack naturally on mobile */
        box-shadow: none;
        border: none;
        background: #f8fafc;
        display: none;
        /* JS toggle needed for submenus usually, or just show them */
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-left: 20px;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        /* Simple hover fix for mobile, or better: Make them always visible or clickable */
    }

    .cta-box {
        padding: 40px 24px;
    }
}

/* Hide toggle on desktop */


/* --- Form --- */
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95rem;
}

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* --- Animations --- */
[data-animate].visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   ADMIN PANEL STYLES (Unified)
   ========================================= */
.admin-body {
    padding-top: 0;
    display: block;
    background: var(--bg-color);
}

.admin-header {
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-layout {
    display: flex;
    min-height: calc(100vh - 80px);
}

/* Sidebar */
.admin-sidebar {
    width: 260px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    /* Slate 800-900 */
    border-right: 1px solid #334155;
    padding: 20px 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.admin-sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    color: #94a3b8;
    /* Slate 400 */
    border-radius: 8px;
    margin-bottom: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.admin-sidebar a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
    transform: translateX(3px);
}

.admin-sidebar a.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    /* Primary shadow */
}

.admin-sidebar .logout-link {
    margin-top: auto;
    color: #ef4444;
    border-top: 1px solid #334155;
    padding-top: 20px;
    border-radius: 0;
}

.admin-sidebar .logout-link:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* Main Content */
.admin-main {
    flex-grow: 1;
    padding: 40px;
    background: #f8fafc;
    /* Slate 50 */
    overflow-y: auto;
}

.admin-main h2 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-bottom: 25px;
    font-weight: 700;
}

.admin-main h3 {
    font-size: 1.4rem;
    color: #334155;
    margin-bottom: 15px;
    margin-top: 30px;
}

/* Cards & Containers */
.admin-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.stat-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

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

.stat-card h3 {
    font-size: 3rem;
    margin: 0 0 5px 0;
    color: #1e293b;
    font-weight: 800;
}

.stat-card p {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

/* Tables */
.admin-table-container {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background: #f1f5f9;
    padding: 18px 20px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.admin-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: #f8fafc;
}

/* Forms */
.admin-form-group {
    margin-bottom: 20px;
}

.admin-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #334155;
    font-size: 0.95rem;
}

.admin-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s;
    background: #ffffff;
}

.admin-form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Buttons */
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.admin-btn-primary {
    background: var(--primary);
    color: white;
}

.admin-btn-primary:hover {
    background: var(--primary-dark);
}

.admin-btn-danger {
    background: #ef4444;
    color: white;
}

.admin-btn-danger:hover {
    background: #dc2626;
}

.admin-btn-secondary {
    background: #e2e8f0;
    color: #334155;
}

.admin-btn-secondary:hover {
    background: #cbd5e1;
}

.admin-btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Admin Helper Classes */
.admin-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.admin-badge-primary {
    background: #e0f2fe;
    color: #0369a1;
}

.admin-badge-success {
    background: #dcfce7;
    color: #166534;
}

.admin-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.admin-badge-danger {
    background: #fee2e2;
    color: #991b1b;
}

.admin-badge-secondary {
    background: #f1f5f9;
    color: #475569;
}

.admin-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.admin-alert-success {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.admin-alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.admin-img-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.admin-img-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.admin-img-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.admin-img-actions {
    padding: 10px;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
}

.admin-text-primary {
    color: #0ea5e9;
}

.admin-text-info {
    color: #06b6d4;
}

.admin-text-danger {
    color: #ef4444;
}

.admin-text-success {
    color: #10b981;
}

/* Menu Manager Styles */
.admin-menu-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-menu-item {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-menu-item.child-item {
    margin-left: 40px;
    border-left: 3px solid var(--primary);
    background: #f8fafc;
}

.admin-menu-handle {
    color: #ccc;
    cursor: move;
    margin-right: 15px;
}

.admin-menu-details {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 100px;
    gap: 15px;
    align-items: center;
}

@media (max-width: 768px) {
    .admin-layout {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        padding: 10px;
        overflow-x: auto;
        white-space: nowrap;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .admin-sidebar a {
        display: inline-block;
        margin-right: 10px;
        width: auto;
    }
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.95);
    /* Dark Slate 900 overlay */
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

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

.search-container {
    width: 100%;
    max-width: 800px;
    padding: 20px;
    text-align: center;
}

.search-container form {
    position: relative;
}

.search-container input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 2.5rem;
    color: white;
    padding: 20px 60px 20px 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    outline: none;
}

.search-container input:focus {
    border-bottom-color: var(--primary);
}

.search-container input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.search-container .btn-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.2s;
}

.search-container .btn-search:hover {
    color: var(--primary);
}

.close-search {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: white;
    font-size: 3rem;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
}

.close-search:hover {
    transform: rotate(90deg);
    color: var(--primary);
}

/* Nav Icon Style */
.search-trigger {
    display: flex;
    align-items: center;
}

.search-trigger a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.1);
    color: var(--primary);
    transition: all 0.2s;
}

.search-trigger a:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

/* Luxury Intro Section */
.intro-luxury {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.intro-luxury::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.03) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.intro-container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Targeting dynamic content styling */
.intro-luxury h1,
.intro-luxury h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
}

/* Decorative Underline */
.intro-luxury h1::after,
.intro-luxury h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    margin: 20px auto 0;
    border-radius: 4px;
}

.intro-luxury p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Strong text emphasis */
.intro-luxury strong,
.intro-luxury b {
    color: var(--text-main);
    font-weight: 700;
}

@media (max-width: 768px) {
    .intro-luxury {
        padding: 60px 0;
    }

    .intro-luxury h1,
    .intro-luxury h2 {
        font-size: 2.2rem;
    }

    .intro-luxury p {
        font-size: 1.1rem;
    }
}

/* --- Luxury Contact Page Styles --- */
.contact-hero {
    position: relative;
    padding: 180px 0 100px;
    background: var(--bg-body);
    overflow: hidden;
}

.contact-hero-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
    animation: rotateBg 30s linear infinite;
    z-index: 0;
}

@keyframes rotateBg {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.contact-hero .container {
    position: relative;
    z-index: 1;
}

.contact-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}

.contact-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--text-main) 0%, #64748b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-desc {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-light);
}

.contact-cards-section {
    padding-bottom: 100px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 50px;
}

.contact-form-wrapper {
    background: white;
    padding: 50px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.form-intro {
    color: var(--text-light);
    margin-bottom: 30px;
}

/* Luxury Form Inputs */
.luxury-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.luxury-form .row {
    display: flex;
    gap: 20px;
}

.luxury-form .col-md-6 {
    flex: 1;
}

.form-group {
    position: relative;
}

.lux-input {
    width: 100%;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid #cbd5e1;
    background: transparent;
    font-size: 1rem;
    color: var(--text-main);
    transition: all 0.3s;
}

.lux-input:focus {
    outline: none;
    border-color: var(--primary);
}

.lux-input:placeholder-shown+label {
    top: 15px;
    font-size: 1rem;
    color: #94a3b8;
}

.lux-input:focus+label,
.lux-input:not(:placeholder-shown)+label {
    top: -5px;
    font-size: 0.8rem;
    color: var(--primary);
}

.form-group label {
    position: absolute;
    top: 15px;
    left: 0;
    transition: all 0.3s;
    pointer-events: none;
}

.lux-btn-submit {
    margin-top: 20px;
    padding: 15px 35px;
    background: var(--text-main);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lux-btn-submit:hover {
    background: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

/* Contact sidebar */
.contact-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--border);
    transition: transform 0.3s;
}

.info-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

.info-card .icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.info-card h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.info-card p {
    color: var(--text-light);
    font-size: 0.95rem;
}

.info-card p a {
    color: inherit;
    text-decoration: none;
}

.info-card p a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.social-connect {
    margin-top: 20px;
    text-align: center;
}

.social-connect h4 {
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: var(--text-light);
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    transition: all 0.3s;
}

.social-icons a:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.alert-success-lux {
    background: #ecfdf5;
    color: #059669;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #a7f3d0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error-lux {
    background: #fef2f2;
    color: #dc2626;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #fecaca;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero h1 {
        font-size: 2.5rem;
    }
}

/* Cookie Banner Styles */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    width: 90%;
    max-width: 600px;
    background: rgba(15, 23, 42, 0.85);
    /* Dark Glass */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    color: white;
}

.cookie-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.cookie-banner.hide {
    transform: translateX(-50%) translateY(50px);
    opacity: 0;
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.cookie-icon {
    font-size: 2rem;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.1);
    padding: 12px;
    border-radius: 12px;
}

.cookie-text {
    flex: 1;
}

.cookie-text h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.cookie-text p {
    margin: 0;
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.4;
}

.cookie-actions {
    display: flex;
    gap: 10px;
}

.btn-accept,
.btn-decline {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 0.9rem;
}

.btn-accept {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.btn-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}

.btn-decline {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-decline:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cookie-actions {
        width: 100%;
        justify-content: center;
    }

    .cookie-banner {
        bottom: 10px;
        width: 95%;
    }
}
/* --- Luxury Blog & Article Styles --- */
.content-box img { max-width: 100% !important; height: auto !important; border-radius: 12px; margin: 20px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.content-box h2, .content-box h3 { color: var(--text-main); font-weight: 700; margin-top: 40px; }
.content-box p { margin-bottom: 20px; font-size: 1.15rem; color: #334155; line-height: 1.9; }

.blog-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.4s ease; border: 1px solid rgba(226, 232, 240, 0.6); }
.blog-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--primary); }
.blog-card-image { height: 240px; overflow: hidden; position: relative; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.1); }
.blog-category { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.95); padding: 5px 15px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; color: var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.blog-card-body { padding: 30px; }
.blog-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; line-height: 1.4; }
.blog-title a { color: var(--text-main); text-decoration: none; transition: 0.3s; }
.blog-title a:hover { color: var(--primary); }
.blog-meta { display: flex; gap: 15px; font-size: 0.9rem; color: #64748b; margin-bottom: 20px; border-bottom: 1px solid #f1f5f9; padding-bottom: 20px; }
.read-more-link { font-weight: 600; color: var(--primary); text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; }
.read-more-link:hover { gap: 12px; }

/* Fix Blog Header Overlap */
.blog-header-section { padding-top: calc(var(--header-height) + 60px); padding-bottom: 60px; background: #fff; text-align: center; }
.page-header { padding-top: calc(var(--header-height) + 80px) !important; }

/* --- Missing Luxury Slider Styles --- */
.blog-subtitle { display: block; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; font-size: 0.9rem; }
.blog-header-section h1 { font-size: 3rem; margin-bottom: 0; color: var(--text-main); }
.blog-slider-section { padding-bottom: 80px; }
.blog-hero-swiper { width: 100%; height: 500px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.blog-slide { position: relative; width: 100%; height: 100%; display: flex; align-items: flex-end; padding: 60px; box-sizing: border-box; }
.blog-slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.8s ease; z-index: 1; }
.blog-slide:hover .blog-slide-bg { transform: scale(1.05); }
.blog-slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 60%, rgba(15, 23, 42, 0) 100%); z-index: 2; pointer-events: none; }
.blog-slide-content { position: relative; z-index: 3; max-width: 800px; color: #fff; }
.slide-meta { display: flex; gap: 20px; margin-bottom: 15px; font-size: 0.95rem; opacity: 0.9; }
.slide-meta i { color: var(--primary); }
.blog-slide-content h2 { font-size: 2.8rem; margin-bottom: 15px; line-height: 1.2; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.blog-slide-content h2 a { color: #fff; transition: 0.3s; }
.blog-slide-content h2 a:hover { color: var(--primary); }
.blog-slide-content p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 25px; opacity: 0.9; max-width: 600px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slide-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--primary); color: #fff; padding: 12px 28px; border-radius: 50px; font-weight: 600; transition: 0.3s; text-decoration: none; }
.slide-btn:hover { background: #fff; color: var(--primary); transform: translateY(-3px); }
.swiper-button-next, .swiper-button-prev { color: #fff !important; background: rgba(255,255,255,0.1); width: 50px !important; height: 50px !important; border-radius: 50%; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); transition: 0.3s; }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--primary); border-color: var(--primary); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1.2rem !important; font-weight: bold; }
.swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(255,255,255,0.5); opacity: 1; margin: 0 6px !important; }
.swiper-pagination-bullet-active { background: var(--primary); width: 30px; border-radius: 5px; }