<!-- ================================ -->
<!-- styles.css -->
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #0066ff;
    --secondary: #00d4ff;
    --dark: #0a0a0a;
    --light: #ffffff;
    --gray: #f5f5f5;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--dark);
    overflow-x: hidden;
}

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

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
}

/* IMPORTANT: This was missing - centers the nav */
nav {
    display: flex;
    justify-content: center; /* Centers the navigation */
    align-items: center;
    padding: 1rem 5%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative; /* Important for positioning hamburger */
}

/* Desktop Navigation */
.desktop-nav {
    list-style: none;
    display: flex;
    gap: 2rem;
}

.desktop-nav a {
    color: var(--light);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    transition: width 0.3s ease;
}

.desktop-nav a:hover::after {
    width: 100%;
}

/* Mobile Hamburger Button */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: absolute;
    right: 5%;
    z-index: 1001;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-6px, 6px);
    background: #ff6b6b;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(-6px, -6px);
    background: #ff6b6b;
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

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

.mobile-nav-content {
    background: linear-gradient(135deg, 
        rgba(0, 102, 255, 0.1), 
        rgba(0, 212, 255, 0.1));
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    width: 90%;
    max-width: 400px;
    text-align: center;
    transform: translateY(-50px);
    transition: transform 0.4s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.mobile-nav-overlay.active .mobile-nav-content {
    transform: translateY(0);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.mobile-nav-header h3 {
    color: var(--light);
    font-size: 1.5rem;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-nav-close {
    background: none;
    border: none;
    color: var(--light);
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.mobile-nav-close:hover {
    background: rgba(255, 107, 107, 0.2);
    transform: rotate(90deg);
}

.mobile-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-menu li {
    margin: 1rem 0;
}

.mobile-nav-link {
    color: var(--light);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 500;
    padding: 1rem 1.5rem;
    border-radius: 15px;
    display: block;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.mobile-nav-link:hover {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.2), rgba(0, 212, 255, 0.2));
    border-color: rgba(0, 212, 255, 0.5);
    transform: translateX(10px);
    box-shadow: 0 5px 20px rgba(0, 102, 255, 0.3);
}

.mobile-nav-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    color: var(--light);
    opacity: 0.8;
}

.mobile-nav-footer p {
    margin: 0;
    font-weight: 600;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-nav-footer span {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Responsive */
@media (min-width: 769px) {
    .desktop-nav {
        display: flex;
    }
    .mobile-menu-toggle {
        display: none !important;
    }
    .mobile-nav-overlay {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex;
    }
}

/* Prevent body scroll when menu is open */
body.mobile-nav-open {
    overflow: hidden;
}


/* FIXED DUAL ARROWS - Clean Positioning */
.scroll-indicator {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: rgba(0, 212, 255, 0.25);
    border: 2px solid rgba(0, 212, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    opacity: 0.8;
    user-select: none;
    animation: subtlePulse 4s ease-in-out infinite;
}

/* Gentle pulse animation */
@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
        opacity: 0.9;
    }
}

/* Hover state */
.scroll-indicator:hover {
    animation: none;
    background: rgba(0, 212, 255, 0.35);
    border-color: rgba(0, 212, 255, 0.6);
    opacity: 1;
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
}
/* FIXED Dual Arrows Container - Increased spacing for better mobile/desktop usability */
.dual-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 14px; /* Increased from 8px to 14px for easier clicking */
}

/* FIXED Individual Arrow Styles - Enhanced click areas */
.arrow-up, .arrow-down {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    /* Larger click area for better mobile usability */
    padding: 8px; /* Increased from 6px to 8px */
}

/* Up arrow - triangle pointing up */
.arrow-up {
    border-bottom: 12px solid rgba(255, 255, 255, 0.9);
    border-top: none;
}

/* Down arrow - triangle pointing down */
.arrow-down {
    border-top: 12px solid rgba(255, 255, 255, 0.9);
    border-bottom: none;
}

/* Make click areas even larger with pseudo-elements */
.arrow-up::before, .arrow-down::before {
    content: '';
    position: absolute;
    top: -14px; /* Increased from -12px */
    left: -14px; /* Increased from -12px */
    right: -14px; /* Increased from -12px */
    bottom: -14px; /* Increased from -12px */
}

/* Better hover effects */
.arrow-up:hover {
    border-bottom-color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.arrow-down:hover {
    border-top-color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Active state for better feedback */
.arrow-up:active {
    transform: scale(1.1);
    border-bottom-color: rgba(0, 212, 255, 1);
}

.arrow-down:active {
    transform: scale(1.1);
    border-top-color: rgba(0, 212, 255, 1);
}

/* Mobile responsive - Enhanced for touch */
@media (max-width: 480px) {
    .dual-arrows {
        gap: 16px; /* Even more space on mobile for easier touch */
    }
    
    .arrow-up, .arrow-down {
        border-left-width: 7px;
        border-right-width: 7px;
        padding: 10px; /* Larger touch areas on mobile */
    }
    
    .arrow-up {
        border-bottom-width: 10px;
    }
    
    .arrow-down {
        border-top-width: 10px;
    }
    
    /* Even larger tap areas for mobile */
    .arrow-up::before, .arrow-down::before {
        top: -16px;
        left: -16px;
        right: -16px;
        bottom: -16px;
    }
}

/* Hero Section */

/* Background Logo in Hero */
.hero-background-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;  /* Large background size */
    height: auto;
    opacity: 0.08;  /* Very faded */
    z-index: 1;  /* Behind particles and content */
    filter: blur(1px) drop-shadow(0 0 50px rgba(0, 212, 255, 0.3));
    animation: logoFloat 15s ease-in-out infinite;
}

.hero {
    height: 100vh;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 212, 255, 0.1)),
                linear-gradient(rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.7)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%23222" width="1200" height="800"/><path fill="%23333" d="M0 400L50 375C100 350 200 300 300 275C400 250 500 250 600 275C700 300 800 350 900 375C1000 400 1100 400 1150 400L1200 400L1200 800L1150 800C1100 800 1000 800 900 800C800 800 700 800 600 800C500 800 400 800 300 800C200 800 100 800 50 800L0 800Z"/></svg>');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    z-index: 3;  /* Above particles */
    animation: fadeInUp 1s ease;
}
/* Subtle floating animation */
@keyframes logoFloat {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.08;
    }
    25% { 
        transform: translate(-48%, -52%) scale(1.02);
        opacity: 0.12;
    }
    50% { 
        transform: translate(-52%, -48%) scale(1.01);
        opacity: 0.15;
    }
    75% { 
        transform: translate(-49%, -51%) scale(1.03);
        opacity: 0.10;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-background-logo {
        width: 600px;
        opacity: 0.06;
    }
}

@media (max-width: 480px) {
    .hero-background-logo {
        width: 400px;
        opacity: 0.05;
    }
}

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

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--light), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}

.hero p {
    font-size: 1.5rem;
    color: var(--light);
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-button {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: var(--light);
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.cta-button::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;
}

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

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.5);
}


/*floating particles*/
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;  /* Above background logo, below content */
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--secondary);
    border-radius: 50%;
    opacity: 0.5;
    animation: float 10s infinite linear;
}

@keyframes float {
    from {
        transform: translateY(100vh) translateX(0);
    }
    to {
        transform: translateY(-100px) translateX(100px);
    }
}

/* About Section */
.about {
    padding: 5rem 5%;
    background: var(--light);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: linear-gradient(45deg, rgba(0, 102, 255, 0.05), rgba(0, 212, 255, 0.05));
    transform: rotate(-45deg);
    z-index: 0;
}

.about-content {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

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

.about-text h3 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #333;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.highlight {
    text-align: center;
    padding: 2rem;
    background: rgba(0, 102, 255, 0.05);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.highlight:hover {
    transform: translateY(-5px);
    background: rgba(0, 102, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.1);
}

.highlight-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.highlight h4 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

/* Reviews Section */
.reviews {
    padding: 5rem 5%;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.03), rgba(0, 212, 255, 0.03));
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.review-card {
    background: var(--light);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.review-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 100px;
    color: rgba(0, 102, 255, 0.1);
    font-family: Georgia, serif;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15);
}

.stars {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.review-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.reviewer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 1rem;
}

.reviewer strong {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.reviewer span {
    font-size: 0.9rem;
    color: #777;
}

/* Services Section */
.services {
    padding: 5rem 5%;
    background: var(--gray);
}

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

.section-title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
    width: 100%;
	colour: #333;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
background: linear-gradient(45deg, var(--primary), var(--secondary));
    border-radius: 2px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: var(--light);
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(0, 212, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 102, 255, 0.2);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--dark);
}

/* Updated CSS to make pricing cards slim and properly aligned */

/* Make cards slimmer and more compact */
.pricing-card {
    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 30px 20px; /* Reduced padding for slimmer cards */
    width: 240px; /* Reduced from 280px to 240px */
    min-width: 240px; /* Reduced from 280px to 240px */
    height: 720px; /* Consistent height for all cards */
    position: relative;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Reduce container gap and max width for tighter layout */
.pricing-container {
    display: flex;
    gap: 15px; /* Reduced from 20px to 15px */
    min-width: fit-content;
    margin: 0 auto;
    justify-content: center;
    align-items: flex-start; /* Ensure all cards align at the top */
    padding: 0 15px; /* Reduced padding */
    max-width: 1100px; /* Add max-width to prevent cards from spreading too wide */
}

/* Adjust outer container for tighter layout */
.outer-container {
    width: 100%;
    max-width: 1200px; /* Reduced from 1400px */
    margin: 0 auto;
    overflow-x: auto;
    padding: 30px 0; /* Reduced padding */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Reduce font sizes slightly for better proportions */
.pricing-card .service-title {
    font-size: 20px; /* Reduced from 22px */
    font-weight: 600;
    margin-bottom: 25px; /* Reduced margin */
    text-align: center;
    color: #ffffff;
}

.pricing-card .price {
    font-size: 40px; /* Reduced from 44px */
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 12px; /* Reduced margin */
}

.pricing-card .from-text {
    display: block;
    font-size: 14px; /* Reduced from 16px */
    color: #888;
    margin-bottom: 4px; /* Reduced margin */
}

.pricing-card .size-pricing p {
    margin: 1px 0; /* Reduced margin */
    font-size: 12px; /* Reduced from 13px */
    color: #aaa;
    line-height: 1.2;
}

.pricing-card .subtitle {
    text-align: center;
    color: #888;
    font-size: 13px; /* Reduced from 14px */
    margin-bottom: 25px; /* Reduced margin */
    line-height: 1.3;
}

.pricing-card .feature-list {
    list-style: none;
    margin-bottom: 25px; /* Reduced margin */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.pricing-card .feature-list li {
    padding: 5px 0; /* Reduced from 6px */
    display: flex;
    align-items: flex-start;
    font-size: 13px; /* Reduced from 14px */
    color: #e0e0e0;
    line-height: 1.2; /* Tighter line height */
}

.pricing-card .feature-list li::before {
    content: "✓";
    color: #4ade80;
    font-weight: bold;
    margin-right: 10px; /* Reduced from 12px */
    font-size: 14px; /* Reduced from 16px */
    margin-top: 1px;
    flex-shrink: 0;
}

/* Adjust button size */
.pricing-card .book-button {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 14px 30px; /* Reduced padding */
    border-radius: 25px; /* Reduced border radius */
    font-size: 16px; /* Reduced from 18px */
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: auto;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1;
}

/* Badge adjustments */
.badge {
    position: absolute;
    top: -12px; /* Adjusted position */
    right: 15px; /* Adjusted position */
    padding: 4px 12px; /* Reduced padding */
    border-radius: 15px; /* Reduced border radius */
    font-size: 11px; /* Reduced from 12px */
    font-weight: 600;
    text-transform: uppercase;
    z-index: 1;
    background-color: #f59e0b;
    color: #000;
}

/* Mobile responsiveness for slim cards */
@media (max-width: 1200px) {
    .pricing-container {
        justify-content: flex-start;
        gap: 12px; /* Even smaller gap on smaller screens */
    }
}

@media (max-width: 768px) {
    .pricing-container {
        padding: 0 8px;
        gap: 10px;
    }
    
    .pricing-card {
        width: 220px; /* Even slimmer on mobile */
        min-width: 220px;
        height: 680px;
        padding: 25px 15px;
    }
    
    .pricing-card .service-title {
        font-size: 18px;
    }
    
    .pricing-card .price {
        font-size: 36px;
    }
}
/* Add this CSS for the pricing section layout and effects */

/* Pricing Section - Dark background and title */
.pricing {
    padding: 5rem 5%;
    background: #0a0a0a; /* Dark background for pricing section */
    position: relative;
}

.pricing .section-title {
    color: #ffffff; /* White text for dark background */
    text-align: center;
    font-size: 3rem;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
    width: 100%;
}

.pricing .section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(45deg, #3b82f6, #00d4ff);
    border-radius: 2px;
}

/* Container for pricing cards - HORIZONTAL LAYOUT */
.pricing-container {
    display: flex; /* THIS IS KEY - Makes cards horizontal */
    gap: 20px;
    min-width: fit-content;
    margin: 0 auto;
    justify-content: center;
    align-items: flex-start;
    padding: 0 20px;
}

/* Pricing card hover effects and glows */
/*
.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
*/
/* Essential Clean - Light Blue */
.pricing-card.essential {
    border: 2px solid rgba(96, 165, 250, 0.3); /* Subtle border only */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Basic shadow */
}

.pricing-card.essential:hover {
    transform: translateY(-15px); /* Increased movement */
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px #60a5fa, 0 0 50px #60a5fa, 0 20px 40px rgba(0,0,0,0.3);
    /* Stronger glow + more spread + bigger drop shadow */
}

/* Premium Detail - Blue */
.pricing-card.premium {
    border: 2px solid rgba(37, 99, 235, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pricing-card.premium:hover {
    transform: translateY(-15px);
    border-color: #2563eb;
    box-shadow: 0 0 0 3px #2563eb, 0 0 50px #2563eb, 0 20px 40px rgba(0,0,0,0.3);
}

/* Ultimate Detail - Orange */
.pricing-card.ultimate {
    border: 2px solid rgba(255, 128, 0, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pricing-card.ultimate:hover {
    transform: translateY(-15px);
    border-color: #ff8000;
    box-shadow: 0 0 0 3px #ff8000, 0 0 50px #ff8000, 0 20px 40px rgba(0,0,0,0.3);
}

/* 21 Point Restoration - Gold */
.pricing-card.gold {
    border: 2px solid rgba(245, 158, 11, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.pricing-card.gold:hover {
    transform: translateY(-15px);
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px #f59e0b, 0 0 60px #f59e0b, 0 20px 40px rgba(0,0,0,0.3);
}

/* Make sure general pricing card hover doesn't interfere */
.pricing-card:hover {
    /* Remove or comment out the general hover if it exists */
    /* transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3); */
}

/* Book button styling */
.pricing-card .book-button {
    background-color: #3b82f6;
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    margin-top: auto;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 1;
}

.pricing-card .book-button:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}

.pricing-card.gold .book-button {
    background-color: #f59e0b;
}

.pricing-card.gold .book-button:hover {
    background-color: #d97706;
}

/* Mobile responsiveness */
@media (max-width: 1200px) {
    .pricing-container {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .pricing-container {
        padding: 0 10px;
    }
}
/* Custom Scrollbar */
/*
.outer-container::-webkit-scrollbar {
    height: 8px;
}

.outer-container::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
}

.outer-container::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
}

.outer-container::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

@media (max-width: 1200px) {
    .outer-container {
        position: relative;
    }
    */
	/* OPTION 1: Hide scrollbar completely but keep scroll functionality */
.outer-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    padding: 40px 0;
    /* Hide scrollbar for Chrome, Safari and Opera */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.outer-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/*
    .outer-container::after {
        content: '→';
        position: fixed;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 30px;
        color: #3b82f6;
        opacity: 0.6;
        pointer-events: none;
        animation: bounce-right 2s infinite;
    } */
    
    @keyframes bounce-right {
        0%, 100% { transform: translateY(-50%) translateX(0); }
        50% { transform: translateY(-50%) translateX(5px); }
    }
    
    .pricing-container {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .pricing-container {
        padding: 0 10px;
    }
    
    .pricing-card {
        width: 260px;
        min-width: 260px;
        height: 650px;
        padding: 30px 20px;
    }
}
/* Contact Section */
.contact {
    padding: 5rem 5%;
    background: var(--gray);
}

.contact-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.contact-item {
    padding: 2rem;
    background: var(--light);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

.contact-item h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

/* Footer */
footer {
    background: var(--dark);
    color: var(--light);
    text-align: center;
    padding: 2rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    nav ul {
        display: none;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}