/* ========================================
   MAHESHWARI DIGITECH - MAIN STYLESHEET
   ========================================
   
   TABLE OF CONTENTS:
   ==================
   1. GLOBAL RESET & BASE STYLES
   2. CSS CUSTOM PROPERTIES (VARIABLES)
   3. HTML & BODY BASE STYLES
   4. LOADING SCREEN SECTION
   5. CUSTOM SCROLLBAR STYLES
   6. LAYOUT CONTAINERS
   7. TYPOGRAPHY SYSTEM
   8. HEADER SECTION
   9. NAVIGATION STYLES
   10. HERO SECTION
   11. SERVICES SECTION
   12. ABOUT SECTION
   13. PORTFOLIO SECTION
   14. TESTIMONIALS SECTION
   15. CONTACT SECTION - MODERN DESIGN
   16. FOOTER SECTION
   17. FLOATING BUTTONS
   18. ANIMATIONS & KEYFRAMES
   19. RESPONSIVE DESIGN
   20. UTILITY CLASSES
   21. FORM STYLES
   22. MODAL & POPUP STYLES
   23. ACCESSIBILITY ENHANCEMENTS
   24. BROWSER-SPECIFIC FIXES
   
   ======================================== */

/* ========================================
   1. GLOBAL RESET & BASE STYLES
   ======================================== */

/* Universal reset for consistent styling across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */

:root {
    /* ===== COLOR PALETTE ===== */
    /* Dark theme color scheme inspired by modern design trends */
    --bg-darker: #0a0a0b;
    /* Darkest background for main sections */
    --bg-dark: #1c1d1f;
    /* Secondary dark background */
    --bg-base: #232426;
    /* Base background color */
    --white: #ffffff;
    /* Pure white for text and accents */
    --primary-color: #4b88ff;
    /* Main brand color - blue */
    --primary-light: #d9e6ff;
    /* Light variant of primary color */
    --primary-dark: #1133b6;
    /* Dark variant of primary color */
    --accent-color: #d3d703;
    /* Secondary accent color - yellow-green */
    --text-primary: #ffffff;
    /* Primary text color */
    --text-secondary: #ffffffb5;
    /* Secondary text with transparency */
    --text-muted: #ffffff80;
    /* Muted text with more transparency */
    --line-color: #ffffff21;
    /* Subtle line/border color */
    --emphasis: #a0c0ff;
    /* Emphasis color for highlights */

    /* ===== SPACING SYSTEM ===== */
    /* Consistent spacing scale for padding and margins */
    --padding-xs: 8px;
    /* Extra small padding */
    --padding-s: 16px;
    /* Small padding */
    --padding-m: 24px;
    /* Medium padding */
    --padding-l: 40px;
    /* Large padding */
    --padding-xl: 60px;
    /* Extra large padding */
    --padding-2xl: 80px;
    /* Double extra large padding */
    --gap-s: 12px;
    /* Small gap for flexbox/grid */
    --gap-m: 24px;
    /* Medium gap for flexbox/grid */
    --gap-l: 40px;
    /* Large gap for flexbox/grid */
    --gap-xl: 60px;
    /* Extra large gap */
    --gap-2xl: 80px;
    /* Double extra large gap */

    /* ===== BORDER RADIUS SYSTEM ===== */
    /* Consistent border radius scale for rounded corners */
    --radius-s: 8px;
    /* Small border radius */
    --radius-m: 12px;
    /* Medium border radius */
    --radius-l: 20px;
    /* Large border radius */
    --radius-xl: 30px;
    /* Extra large border radius */

    /* ===== SHADOW SYSTEM ===== */
    /* Elevation system using box-shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Small shadow */
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.15);
    /* Medium shadow */
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.2);
    /* Large shadow */
    --shadow-glow: 0 0 30px rgba(75, 136, 255, 0.3);
    /* Glow effect */

    /* ===== GRADIENT SYSTEM ===== */
    /* Predefined gradients for consistent styling */
    --gradient-primary: linear-gradient(135deg, #4b88ff 0%, #1133b6 100%);
    --gradient-accent: linear-gradient(135deg, #d3d703 0%, #a0c0ff 100%);
    --gradient-dark: linear-gradient(135deg, #232426 0%, #1c1d1f 100%);
    --gradient-hero: linear-gradient(135deg, #0a0a0b 0%, #232426 50%, #1c1d1f 100%);
}

/* ========================================
   HTML & BODY BASE STYLES
   ======================================== */

/* Enable smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Main body styling with dark theme */
body {
    font-family: 'Inter', sans-serif;
    /* Primary font family */
    line-height: 1.6;
    /* Comfortable line height for readability */
    color: var(--text-primary);
    /* Default text color */
    background-color: var(--bg-darker);
    /* Dark background */
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    transition: all 0.3s ease;
    /* Smooth transitions */
}

/* Ensure vertical scroll is always available unless explicitly disabled */
html,
body {
    overflow-y: auto;
}

/* ========================================
   LOADING SCREEN SECTION
   ======================================== */

/* Main loading screen overlay - covers entire viewport during page load */
.loading-screen {
    position: fixed;
    /* Fixed positioning to cover viewport */
    top: 0;
    left: 0;
    width: 100%;
    /* Full width coverage */
    height: 100vh;
    /* Full viewport height */
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 50%, var(--bg-base) 100%);
    display: flex;
    /* Flexbox for centering content */
    align-items: center;
    /* Vertical centering */
    justify-content: center;
    /* Horizontal centering */
    z-index: 9999;
    /* Highest z-index to appear above all content */
    transition: opacity 0.8s ease, visibility 0.8s ease;
    /* Smooth fade out transition */
}

/* Fade out state when loading is complete */
.loading-screen.fade-out {
    opacity: 0;
    /* Transparent */
    visibility: hidden;
    /* Hidden from screen readers */
}

/* Loading screen container - centers and constrains loading content */
.loading-container {
    text-align: center;
    /* Center align all text content */
    max-width: 400px;
    /* Maximum width for loading content */
    width: 90%;
    /* Responsive width with padding */
}

/* ===== LOADING LOGO STYLES ===== */
/* Main logo text with gradient effect */
.loading-logo h1 {
    font-family: 'Space Grotesk', sans-serif;
    /* Display font for logo */
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Responsive font size */
    font-weight: 700;
    /* Bold weight */
    margin-bottom: var(--gap-xl);
    /* Space below logo */
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    /* Webkit prefix for gradient text */
    -webkit-text-fill-color: transparent;
    /* Make text transparent to show gradient */
    background-clip: text;
    /* Standard property */
    position: relative;
    /* For pseudo-element positioning */
}

/* Animated underline effect for logo */
.loading-logo h1::after {
    content: '';
    /* Empty content for pseudo-element */
    position: absolute;
    /* Absolute positioning */
    bottom: -10px;
    /* Position below text */
    left: 0;
    /* Start from left */
    height: 3px;
    /* Underline thickness */
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 2px;
    /* Rounded corners */
    animation: textFill 3s ease-in-out forwards;
    /* Fill animation */
    width: 0;
    /* Start with zero width */
}

/* ===== LOADING PROGRESS STYLES ===== */
/* Progress section container */
.loading-progress {
    margin-bottom: var(--gap-xl);
    /* Space below progress section */
}

/* Progress bar background */
.progress-bar {
    width: 100%;
    /* Full width */
    height: 6px;
    /* Progress bar height */
    background: rgba(255, 255, 255, 0.1);
    /* Semi-transparent background */
    border-radius: 3px;
    /* Rounded corners */
    overflow: hidden;
    /* Hide overflow for smooth animation */
    margin-bottom: var(--gap-m);
    /* Space below progress bar */
    position: relative;
    /* For pseudo-element positioning */
}

/* Progress bar fill - animated width */
.progress-fill {
    height: 100%;
    /* Full height of progress bar */
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    border-radius: 3px;
    /* Rounded corners */
    width: 0%;
    /* Start with zero width */
    transition: width 0.3s ease;
    /* Smooth width transition */
    position: relative;
    /* For pseudo-element positioning */
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    animation: shimmer 1.5s ease-in-out infinite;
}

.loading-percentage {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 600;
    font-family: 'Space Grotesk', sans-serif;
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-circle {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(75, 136, 255, 0.2);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes textFill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(20px);
        opacity: 0;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes loadingPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes logoGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(75, 136, 255, 0.3));
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(75, 136, 255, 0.6));
    }
}

@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes progressFill {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

/* ========================================
   LENIS SMOOTH SCROLLING ENHANCEMENTS
   ======================================== */

/* Main Lenis container */
.lenis.lenis-smooth {
    scroll-behavior: auto;
    /* Let Lenis handle scrolling */
}

/* Prevent smooth scrolling on specific elements */
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* When Lenis is stopped (e.g., during modals) */
.lenis.lenis-stopped {
    overflow: hidden;
}

/* Enhanced scrolling performance */
html.lenis {
    height: auto;
}

html.lenis body {
    height: auto;
}

/* Smooth scrolling for touch devices */
@media (hover: none) and (pointer: coarse) {
    .lenis.lenis-smooth {
        scroll-behavior: smooth;
        /* Fallback for touch devices */
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .lenis.lenis-smooth {
        scroll-behavior: auto;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Optimize scrolling performance */
.lenis-smooth {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
}

/* ========================================
   CUSTOM SCROLLBAR STYLES
   ======================================== */

/* Webkit browsers scrollbar customization */
::-webkit-scrollbar {
    width: 6px;
    /* Scrollbar width */
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
    background: var(--bg-dark);
    /* Dark background for track */
}

/* Scrollbar thumb (draggable part) */
::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    /* Primary color for thumb */
    border-radius: 3px;
    /* Rounded corners */
}

/* Scrollbar thumb hover state */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-light);
    /* Lighter color on hover */
}

/* ========================================
   LAYOUT CONTAINERS
   ======================================== */

/* Main content container - constrains max width and centers content */
.container {
    max-width: 1400px;
    /* Maximum width for large screens */
    margin: 0 auto;
    /* Center horizontally */
    padding: 0 var(--padding-m);
    /* Horizontal padding */
    position: relative;
    /* For absolute positioned children */
}

/* Smaller container variant for specific sections */
.container-small {
    max-width: 1200px;
    /* Smaller maximum width */
    margin: 0 auto;
    /* Center horizontally */
    padding: 0 var(--padding-m);
    /* Horizontal padding */
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

/* ===== HEADING STYLES ===== */
/* Base styles for all heading elements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Space Grotesk', sans-serif;
    /* Display font for headings */
    font-weight: 600;
    /* Semi-bold weight */
    line-height: 1.2;
    /* Tight line height for headings */
    margin-bottom: var(--gap-s);
    /* Consistent bottom margin */
}

/* Main heading - largest size with responsive scaling */
h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    /* Responsive font size */
    font-weight: 200;
    /* Light weight for large text */
    letter-spacing: -0.02em;
    /* Tight letter spacing */
}

/* Secondary heading - medium-large size */
h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Responsive font size */
    font-weight: 300;
    /* Light weight */
}

/* Tertiary heading - medium size */
h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    /* Responsive font size */
    font-weight: 400;
    /* Normal weight */
}

/* ===== PARAGRAPH & TEXT STYLES ===== */
/* Base paragraph styling */
p {
    font-size: 1.1rem;
    /* Slightly larger than default */
    line-height: 1.7;
    /* Comfortable reading line height */
    color: var(--text-secondary);
    /* Secondary text color */
    margin-bottom: var(--gap-s);
    /* Bottom margin for spacing */
}

/* ===== TEXT SIZE UTILITIES ===== */
/* Large text variant */
.text-large {
    font-size: 1.25rem;
    /* Larger font size */
    line-height: 1.6;
    /* Adjusted line height */
}

/* Small text variant */
.text-small {
    font-size: 0.9rem;
    /* Smaller font size */
}

/* ===== TEXT COLOR UTILITIES ===== */
/* Accent color text */
.text-accent {
    color: var(--accent-color);
    /* Accent color */
}

/* Primary color text */
.text-primary {
    color: var(--primary-color);
    /* Primary color */
}

/* Gradient text effect */
.text-gradient {
    background: var(--gradient-primary);
    /* Primary gradient background */
    -webkit-background-clip: text;
    /* Webkit prefix for text clipping */
    -webkit-text-fill-color: transparent;
    /* Make text transparent */
    background-clip: text;
    /* Standard property */
}

/* ========================================
   HEADER SECTION
   ======================================== */

/* Main header - fixed navigation bar with glassmorphism effect */
header {
    background: rgba(10, 10, 11, 0.95);
    /* Semi-transparent dark background */
    backdrop-filter: blur(20px);
    /* Glassmorphism blur effect */
    border-bottom: 1px solid var(--line-color);
    /* Subtle bottom border */
    position: fixed;
    /* Fixed positioning at top */
    width: 100%;
    /* Full width */
    top: 0;
    /* Stick to top */
    z-index: 1001;
    /* High z-index for layering */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth transitions */
    transform: translateY(0);
    /* Default position */
}

/* Header state when page is scrolled */
header.scrolled {
    background: rgba(10, 10, 11, 0.98);
    /* More opaque when scrolled */
    box-shadow: var(--shadow-lg);
    /* Add shadow for depth */
    transform: translateY(0);
    /* Keep visible */
}

/* Ensure header stays visible (remove hidden behavior) */
header.hidden {
    transform: translateY(0);
    /* Always visible */
}

/* ===== HEADER VISUAL EFFECTS ===== */
/* Subtle glow effect on header hover */
header::before {
    content: '';
    /* Empty pseudo-element */
    position: absolute;
    /* Absolute positioning */
    top: 0;
    /* Top edge */
    left: 0;
    /* Left edge */
    right: 0;
    /* Right edge */
    height: 1px;
    /* Thin line */
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
    /* Smooth fade transition */
}

/* Show glow effect on header hover */
header:hover::before {
    opacity: 0.5;
    /* Semi-transparent glow */
}

/* Logo animation */
.logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo:hover {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(75, 136, 255, 0.5);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-m) 0;
    position: relative;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: var(--gap-l);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--gap-xl);
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: var(--padding-s) var(--padding-m);
    border-radius: var(--radius-s);
}

.nav-links a:hover {
    color: var(--white);
    transform: translateY(-2px);
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
    border-radius: 2px;
}

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

/* ===== NEW MOBILE MENU STYLES ===== */
.desktop-nav {
    display: flex;
    list-style: none;
    gap: var(--gap-l);
    align-items: center;
    margin: 0;
    padding: 0;
}

.desktop-cta {
    display: inline-block;
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-s);
    transition: all 0.3s ease;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--white);
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

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

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

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

.mobile-nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 11, 0.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.mobile-nav-dropdown.active {
    display: block;
    animation: slideDown 0.3s ease;
}

.mobile-nav-content {
    padding: var(--padding-m);
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
}

.mobile-nav-link,
.mobile-cta-btn {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    padding: var(--padding-s) var(--padding-m);
    color: var(--white);
    text-decoration: none;
    border-radius: var(--radius-s);
    transition: all 0.3s ease;
    font-weight: 500;
}

.mobile-nav-link:hover {
    background: rgba(75, 136, 255, 0.1);
    color: var(--primary-color);
    transform: translateX(5px);
}

.mobile-cta-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    margin-top: var(--gap-s);
    justify-content: center;
    font-weight: 600;
}

.mobile-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(75, 136, 255, 0.3);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ===== MOBILE MENU RESPONSIVE STYLES ===== */
@media (max-width: 992px) {
    .desktop-nav {
        display: none;
    }

    .desktop-cta {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Fix logo positioning on mobile */
    .logo {
        font-size: 1.6rem;
        line-height: 1.2;
    }

    .nav-container {
        padding: var(--padding-s) 0;
        align-items: center;
    }

    /* Ensure proper spacing in mobile header */
    .beta-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
}

.cta-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    padding: var(--padding-s) var(--padding-l);
    border: none;
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.3);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: ctaPulse 3s ease-in-out infinite;
}

@keyframes ctaPulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(75, 136, 255, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 12px 35px rgba(75, 136, 255, 0.5);
        transform: scale(1.02);
    }
}

.cta-btn::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.6s ease;
}

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

.cta-btn::after {
    content: '✨';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    opacity: 0;
    transition: all 0.3s ease;
}

.cta-btn:hover::after {
    opacity: 1;
    right: 15px;
}

.cta-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(75, 136, 255, 0.5);
    animation-play-state: paused;
}

/* ========================================
   10. HERO SECTION
   ======================================== */

/* Main hero section - full viewport height with centered content */
.hero {
    background: var(--gradient-hero);
    /* Dark gradient background */
    color: var(--white);
    /* White text color */
    padding: 80px 0 80px;
    /* Reduced top padding for less gap */
    text-align: center;
    /* Center align content */
    position: relative;
    /* For pseudo-elements */
    overflow: hidden;
    /* Hide overflow from effects */
    min-height: 100vh;
    /* Full viewport height */
    display: flex;
    /* Flexbox for centering */
    align-items: center;
    /* Vertical centering */
    justify-content: center;
    /* Horizontal centering */
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(75, 136, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(211, 215, 3, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(160, 192, 255, 0.08) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

/* Hero Background Image - REMOVED for performance */

/* Particle animations - REMOVED for performance */

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-20px) rotate(1deg);
    }

    66% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
    background: rgba(75, 136, 255, 0.1);
    border: 1px solid rgba(75, 136, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--padding-xs) var(--padding-m);
    margin-bottom: var(--gap-l);
    font-size: 0.9rem;
    color: var(--primary-light);
    animation: fadeInUp 1s ease;
}

.hero-badge i {
    color: var(--accent-color);
}

.hero h1 {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 200;
    margin-bottom: var(--gap-m);
    line-height: 1.1;
    letter-spacing: -0.02em;
    animation: fadeInUp 1s ease 0.2s both;
}

.hero h1 .highlight {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.hero h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: 2px;
    animation: expandWidth 1s ease 1.5s both;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: var(--gap-l);
    color: var(--text-secondary);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1s ease 0.4s both;
}

.hero-buttons {
    display: flex;
    gap: var(--gap-m);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.6s both;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: var(--white);
    padding: var(--padding-m) var(--padding-xl);
    border: none;
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary::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.6s ease;
}

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

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.btn-primary:hover::after {
    width: 300px;
    height: 300px;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 50px rgba(75, 136, 255, 0.5), 0 0 30px rgba(211, 215, 3, 0.3);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.btn-secondary {
    background: transparent;
    color: var(--white);
    padding: var(--padding-m) var(--padding-xl);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.btn-secondary:hover {
    border-color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--gap-xl);
    margin: var(--gap-xl) 0;
    animation: fadeInUp 1s ease 0.8s both;
    flex-wrap: wrap;
}

.hero-stat {
    text-align: center;
    animation: heroStatFloat 4s ease-in-out infinite;
    transition: all 0.3s ease;
}

.hero-stat:nth-child(1) {
    animation-delay: 0s;
}

.hero-stat:nth-child(2) {
    animation-delay: 1s;
}

.hero-stat:nth-child(3) {
    animation-delay: 2s;
}

.hero-stat:hover {
    transform: translateY(-10px) scale(1.05);
}

@keyframes heroStatFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.hero-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    animation: numberPulse 3s ease-in-out infinite;
}

@keyframes numberPulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(75, 136, 255, 0.3);
    }

    50% {
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(75, 136, 255, 0.6);
    }
}

.hero-stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hero Visual Element */
.hero-visual {
    margin-top: var(--gap-xl);
    animation: fadeInUp 1s ease 1s both;
    width: 100%;
    max-width: 600px;
}

.hero-visual .image-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-l);
    transition: transform 0.3s ease;
}

.hero-visual:hover img {
    transform: scale(1.05);
}

.hero-visual .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.1) 0%, rgba(211, 215, 3, 0.1) 100%);
    border-radius: var(--radius-l);
    pointer-events: none;
}

/* ========================================
   11. SERVICES SECTION
   ======================================== */

/* Main services section with dark background */
.services {
    padding: var(--padding-2xl) 0;
    /* Large vertical padding */
    background: var(--bg-dark);
    /* Dark background color */
    position: relative;
    /* For pseudo-elements */
    overflow: hidden;
    /* Hide overflow from effects */
}

.services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 70% 30%, rgba(75, 136, 255, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 50%, var(--bg-base) 100%);
}

/* Services background image - REMOVED for performance */

.section-header {
    text-align: center;
    margin-bottom: var(--gap-xl);
    position: relative;
    z-index: 2;
}

.section-badge {
    display: inline-block;
    background: rgba(75, 136, 255, 0.1);
    border: 1px solid rgba(75, 136, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--padding-xs) var(--padding-m);
    margin-bottom: var(--gap-m);
    font-size: 0.9rem;
    color: var(--primary-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.section-header h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 300;
    margin-bottom: var(--gap-m);
    color: var(--white);
    line-height: 1.2;
}

.section-header p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--gap-l);
    position: relative;
    z-index: 2;
}

.service-card {
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-l);
    padding: var(--padding-xl) var(--padding-l);
    text-align: left;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

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

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

.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(75, 136, 255, 0.3);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(75, 136, 255, 0.1);
}

.service-icon {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--gap-m);
    font-size: 1.8rem;
    color: var(--white);
    position: relative;
    transition: all 0.3s ease;
    animation: iconGlow 3s ease-in-out infinite;
}

/* Different colors for different service icons */
.service-card:nth-child(1) .service-icon {
    background: linear-gradient(135deg, #4b88ff, #00d4ff);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.3);
}

.service-card:nth-child(2) .service-icon {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

.service-card:nth-child(3) .service-icon {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3);
}

.service-card:nth-child(4) .service-icon {
    background: linear-gradient(135deg, #45b7d1, #96c93d);
    box-shadow: 0 8px 25px rgba(69, 183, 209, 0.3);
}

.service-card:nth-child(5) .service-icon {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 8px 25px rgba(240, 147, 251, 0.3);
}

.service-card:nth-child(6) .service-icon {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.3);
}

.service-card:nth-child(7) .service-icon {
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}

.service-card:nth-child(8) .service-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

@keyframes iconGlow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.service-icon::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: var(--radius-m);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover .service-icon::after {
    opacity: 0.3;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
}

.service-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: var(--gap-s);
    color: var(--white);
}

.service-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--gap-m);
}

.service-features {
    list-style: none;
    padding: 0;
    margin: var(--gap-m) 0 0 0;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    margin-bottom: var(--gap-s);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.service-features li::before {
    content: '✓';
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1rem;
}

/* About Section - Enhanced with background */
.about {
    padding: var(--padding-2xl) 0;
    background: var(--bg-base);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 70%, rgba(211, 215, 3, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-base) 100%);
}

/* About background image - REMOVED for performance */

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 300;
    margin-bottom: var(--gap-m);
    color: var(--white);
    line-height: 1.2;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: var(--gap-m);
    line-height: 1.8;
}

.about-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    margin: var(--gap-l) 0;
}

.about-highlight {
    display: flex;
    align-items: center;
    gap: var(--gap-m);
    padding: var(--padding-m);
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-m);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.about-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(75, 136, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.about-highlight:hover::before {
    left: 100%;
}

.about-highlight:hover {
    transform: translateX(10px);
    border-left-color: var(--accent-color);
}

.highlight-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--white);
    animation: highlightPulse 4s ease-in-out infinite;
}

.award-icon {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.team-icon {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.results-icon {
    background: linear-gradient(135deg, #45b7d1, #96c93d);
    box-shadow: 0 4px 15px rgba(69, 183, 209, 0.3);
}

.support-icon {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);
}

@keyframes highlightPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.about-highlight span {
    color: var(--text-secondary);
    font-weight: 500;
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-m);
    margin-top: var(--gap-l);
}

.stat {
    text-align: center;
    padding: var(--padding-l);
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-l);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    animation: statFloat 5s ease-in-out infinite;
}

.stat:nth-child(1) {
    animation-delay: 0s;
}

.stat:nth-child(2) {
    animation-delay: 1.25s;
}

.stat:nth-child(3) {
    animation-delay: 2.5s;
}

.stat:nth-child(4) {
    animation-delay: 3.75s;
}

@keyframes statFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-5px) rotate(0.5deg);
    }

    50% {
        transform: translateY(-10px) rotate(0deg);
    }

    75% {
        transform: translateY(-5px) rotate(-0.5deg);
    }
}

.stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    animation: progressBar 3s ease-in-out infinite;
}

@keyframes progressBar {

    0%,
    100% {
        transform: scaleX(0);
    }

    50% {
        transform: scaleX(1);
    }
}

.stat:hover::before {
    transform: scaleX(1);
    animation-play-state: paused;
}

.stat:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(75, 136, 255, 0.3);
    animation-play-state: paused;
}

.stat h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: 'Space Grotesk', sans-serif;
    margin-bottom: var(--gap-s);
    animation: numberGlow 4s ease-in-out infinite;
}

@keyframes numberGlow {

    0%,
    100% {
        text-shadow: 0 0 10px rgba(75, 136, 255, 0.3);
        transform: scale(1);
    }

    50% {
        text-shadow: 0 0 20px rgba(75, 136, 255, 0.6);
        transform: scale(1.05);
    }
}

.stat p {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-visual {
    width: 100%;
    height: 400px;
    background: var(--gradient-primary);
    border-radius: var(--radius-l);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-visual::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
}

.about-visual i {
    font-size: 4rem;
    color: var(--white);
    z-index: 2;
    position: relative;
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    bottom: 20%;
    left: 30%;
    animation-delay: 4s;
}





/* ========================================
   CONTACT SECTION - MODERN DESIGN
   ======================================== */

/* Main contact section container with gradient background */
.contact-section {
    padding: var(--padding-2xl) 0;
    /* Large vertical padding */
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 50%, var(--bg-base) 100%);
    position: relative;
    /* For pseudo-element positioning */
    overflow: hidden;
    /* Hide overflow from decorative elements */
}

/* Decorative background overlay with subtle gradients */
.contact-section::before {
    content: '';
    /* Empty pseudo-element */
    position: absolute;
    /* Cover entire section */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Multiple radial gradients for depth */
        radial-gradient(circle at 20% 80%, rgba(75, 136, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(211, 215, 3, 0.08) 0%, transparent 50%);
    pointer-events: none;
    /* Don't interfere with interactions */
}

/* ===== CONTACT SECTION HEADER ===== */
/* Main header area with centered content */
.contact-header {
    text-align: center;
    /* Center align all content */
    margin-bottom: var(--gap-xl);
    /* Space below header */
    position: relative;
    /* For z-index stacking */
    z-index: 2;
    /* Above background elements */
}

/* Small badge above main heading */
.contact-badge {
    display: inline-flex;
    /* Inline flex for icon + text */
    align-items: center;
    /* Vertical center alignment */
    gap: var(--gap-s);
    /* Space between icon and text */
    background: rgba(75, 136, 255, 0.1);
    /* Semi-transparent background */
    border: 1px solid rgba(75, 136, 255, 0.2);
    /* Subtle border */
    border-radius: var(--radius-xl);
    /* Rounded pill shape */
    padding: var(--padding-s) var(--padding-m);
    /* Internal padding */
    margin-bottom: var(--gap-m);
    /* Space below badge */
    font-size: 0.9rem;
    /* Smaller font size */
    color: var(--primary-color);
    /* Primary color text */
    font-weight: 500;
    /* Medium font weight */
}

/* Icon within contact badge */
.contact-badge i {
    color: var(--accent-color);
    /* Accent color for icon */
}

/* Main contact section heading with gradient text */
.contact-header h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    /* Responsive font size */
    margin-bottom: var(--gap-s);
    /* Space below heading */
    background: linear-gradient(135deg, var(--white) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    /* Webkit prefix for gradient text */
    background-clip: text;
    /* Standard property */
    -webkit-text-fill-color: transparent;
    /* Make text transparent to show gradient */
}

/* Contact header description text */
.contact-header p {
    font-size: 1.1rem;
    /* Slightly larger text */
    color: var(--text-secondary);
    /* Secondary text color */
    max-width: 600px;
    /* Constrain width for readability */
    margin: 0 auto;
    /* Center horizontally */
}

/* ===== CONTACT GRID LAYOUT ===== */
/* Two-column grid for contact info and form */
.contact-grid {
    display: grid;
    /* CSS Grid layout */
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    gap: clamp(40px, 8vw, 120px);
    /* Responsive gap between columns */
    position: relative;
    /* For z-index stacking */
    z-index: 2;
    /* Above background elements */
    margin-top: var(--gap-xl);
    /* Space above grid */
    padding: 0 var(--padding-s);
    /* Add horizontal padding for better separation */
}

/* ===== CONTACT INFORMATION CARD ===== */
/* Left side card containing contact methods */
.contact-info-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(75, 136, 255, 0.08) 100%);
    border: 3px solid rgba(75, 136, 255, 0.2);
    /* Stronger border with primary color */
    border-radius: var(--radius-l);
    /* Large border radius */
    padding: var(--padding-xl);
    /* Large internal padding */
    backdrop-filter: blur(20px);
    /* Enhanced glassmorphism blur effect */
    position: relative;
    /* For pseudo-elements */
    overflow: hidden;
    /* Hide overflow from effects */
    box-shadow: 0 15px 50px rgba(75, 136, 255, 0.15), 0 5px 20px rgba(0, 0, 0, 0.3);
    /* Enhanced depth shadow with color */
    transition: all 0.3s ease;
    /* Smooth hover transitions */
    margin-right: var(--padding-s);
    /* Add right margin for separation */
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(75, 136, 255, 0.15);
    border-color: rgba(75, 136, 255, 0.3);
}

.contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.info-card-header {
    text-align: center;
    margin-bottom: var(--gap-l);
}

.info-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gap-m);
    font-size: 2rem;
    color: var(--white);
    box-shadow: 0 10px 30px rgba(75, 136, 255, 0.3);
}

.info-card-header h3 {
    font-size: 1.8rem;
    margin-bottom: var(--gap-s);
    color: var(--white);
}

.info-card-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.contact-methods {
    margin-bottom: var(--gap-l);
}

.contact-method {
    display: flex;
    align-items: center;
    gap: var(--gap-m);
    padding: var(--padding-m);
    border-radius: var(--radius-m);
    margin-bottom: var(--gap-s);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.contact-method:hover {
    background: rgba(75, 136, 255, 0.1);
    border-color: rgba(75, 136, 255, 0.2);
    transform: translateX(10px);
}

/* Clickable contact methods (Phone, Email, WhatsApp) */
a.contact-method {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.contact-method:hover {
    background: rgba(75, 136, 255, 0.1);
    border-color: rgba(75, 136, 255, 0.3);
    transform: translateX(10px) scale(1.02);
}

/* Specific hover effects for different contact methods */
a.contact-method:has(.phone-icon):hover {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
}

a.contact-method:has(.email-icon):hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

a.contact-method:has(.whatsapp-icon):hover {
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.3);
}

.method-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--white);
    flex-shrink: 0;
}

.phone-icon {
    background: linear-gradient(135deg, #25d366, #128c7e);
}

.email-icon {
    background: linear-gradient(135deg, #ea4335, #d33b2c);
}

.location-icon {
    background: linear-gradient(135deg, #4285f4, #1a73e8);
}

.whatsapp-icon {
    background: linear-gradient(135deg, #25d366, #075e54);
}

.method-content h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.method-content p {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 2px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.method-content span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.social-connect {
    text-align: center;
    padding-top: var(--gap-m);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-connect h4 {
    color: var(--white);
    margin-bottom: var(--gap-s);
}

.social-links-contact {
    display: flex;
    justify-content: center;
    gap: var(--gap-s);
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link.facebook {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.social-link.instagram {
    background: linear-gradient(135deg, #e4405f, #f77737);
}

.social-link.linkedin {
    background: linear-gradient(135deg, #0077b5, #00a0dc);
}

.social-link.twitter {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.social-link.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.social-link i {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-link:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Contact Form Card */
.contact-form-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(211, 215, 3, 0.08) 100%);
    border: 3px solid rgba(211, 215, 3, 0.2);
    /* Stronger border with accent color */
    border-radius: var(--radius-l);
    padding: var(--padding-xl);
    backdrop-filter: blur(20px);
    /* Enhanced glassmorphism blur effect */
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(211, 215, 3, 0.15), 0 5px 20px rgba(0, 0, 0, 0.3);
    /* Enhanced depth shadow with color */
    transition: all 0.3s ease;
    margin-left: var(--padding-s);
    /* Add left margin for separation */
}

.contact-form-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(211, 215, 3, 0.2), 0 10px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(211, 215, 3, 0.4);
}

.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    animation: shimmer 3s ease-in-out infinite 1.5s;
}

.form-card-header {
    text-align: center;
    margin-bottom: var(--gap-l);
}

.form-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gap-m);
    font-size: 2rem;
    color: var(--white);
    box-shadow: 0 10px 30px rgba(211, 215, 3, 0.3);
}

.form-card-header h3 {
    font-size: 1.8rem;
    margin-bottom: var(--gap-s);
    color: var(--white);
}

.form-card-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.modern-contact-form {
    position: relative;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-m);
    margin-bottom: var(--gap-m);
}

/* ===== NEW FORM FIELD STYLES ===== */
.form-field {
    margin-bottom: var(--gap-m);
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.form-field label {
    display: block;
    margin-bottom: var(--gap-xs);
    color: var(--white);
    font-weight: 500;
    font-size: 0.95rem;
}

.required {
    color: #ff6b6b;
    font-weight: bold;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
    width: 100%;
    padding: var(--padding-s) var(--padding-l) var(--padding-s) var(--padding-s);
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-m);
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
}

.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
    border-color: var(--primary-color);
    background: rgba(75, 136, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(75, 136, 255, 0.1);
}

.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.field-icon {
    position: absolute;
    right: var(--padding-s);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.input-wrapper:focus-within .field-icon {
    color: var(--primary-color);
}

/* Select dropdown styling */
.input-wrapper select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 40px center;
    background-size: 16px;
}

.input-wrapper select option {
    background: var(--bg-dark);
    color: var(--white);
    padding: var(--padding-s);
}

/* ===== CONSENT CHECKBOX STYLES ===== */
.consent-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-m);
    transition: all 0.3s ease;
}

.consent-checkbox:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.consent-checkbox input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.consent-checkbox input[type="checkbox"]:checked+.consent-label .checkbox-custom {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-color: var(--primary-color);
}

.consent-checkbox input[type="checkbox"]:checked+.consent-label .checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    line-height: 1.5;
    width: 100%;
}

.consent-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.terms-link,
.privacy-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.terms-link:hover,
.privacy-link:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.consent-checkbox.error {
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.consent-checkbox.error .checkbox-custom {
    border-color: #ff6b6b;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.input-group {
    position: relative;
    margin-bottom: var(--gap-m);
}

.input-group.full-width {
    grid-column: 1 / -1;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: var(--padding-m) 50px var(--padding-m) var(--padding-m);
    /* Increased right padding for icon space and left padding for label */
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-m);
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    position: relative;
    z-index: 1;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: var(--primary-color);
    background: rgba(75, 136, 255, 0.15);
    box-shadow: 0 0 0 4px rgba(75, 136, 255, 0.15);
    transform: translateY(-2px);
}

.input-group input:hover,
.input-group select:hover,
.input-group textarea:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
}

/* Enhanced Select Dropdown Styling */
.input-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.input-group select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b88ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.input-group select option {
    background: var(--bg-dark);
    color: var(--white);
    padding: var(--padding-s);
    border: none;
}

.input-group select option:hover,
.input-group select option:checked {
    background: var(--primary-color);
    color: var(--white);
}

.input-group label {
    position: absolute;
    top: 50%;
    left: var(--padding-m);
    /* Align with input padding */
    right: 55px;
    /* More space for icon */
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 6px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 80px);
    /* Ensure label doesn't overlap icon */
}

.input-group textarea+label {
    top: var(--padding-m);
    transform: none;
    right: 55px;
    left: var(--padding-m);
}

.input-group input:focus+label,
.input-group input:valid+label,
.input-group select:focus+label,
.input-group select:valid+label,
.input-group textarea:focus+label,
.input-group textarea:valid+label {
    top: -12px;
    left: 16px;
    right: auto;
    font-size: 0.85rem;
    color: var(--primary-color);
    background: var(--bg-dark);
    font-weight: 600;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    max-width: none;
    padding: 0 8px;
    /* Better padding for floating label */
}

/* Required field indicator */
.required {
    color: #ff6b6b;
    font-weight: bold;
    margin-left: 2px;
}

/* Input Icons */
.input-icon {
    position: absolute;
    right: 18px;
    /* More space from edge */
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    /* Slightly larger for better visibility */
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    /* Subtle background for better separation */
    border-radius: 50%;
    /* Circular background */
}

.input-group textarea+label+.input-highlight+.input-icon {
    top: var(--padding-m);
    transform: none;
}

.input-group input:focus~.input-icon,
.input-group select:focus~.input-icon,
.input-group textarea:focus~.input-icon {
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.input-group textarea:focus~.input-icon {
    transform: scale(1.1);
}

.input-highlight {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.3s ease;
}

.input-group input:focus~.input-highlight,
.input-group select:focus~.input-highlight,
.input-group textarea:focus~.input-highlight {
    width: 100%;
}

.submit-btn {
    width: 100%;
    padding: var(--padding-m) var(--padding-l);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    border-radius: var(--radius-m);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
    margin-bottom: var(--gap-m);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.3);
}

.submit-btn::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.6s ease;
}

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

.submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 40px rgba(75, 136, 255, 0.5);
}

.submit-btn:active {
    transform: translateY(-1px) scale(0.98);
}

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

.submit-btn:hover .btn-icon {
    transform: translateX(3px);
}

.btn-ripple {
    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: all 0.6s ease;
}

.submit-btn:active .btn-ripple {
    width: 300px;
    height: 300px;
}

.form-footer {
    text-align: center;
}

.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
    color: var(--text-muted);
    font-size: 0.9rem;
}

.security-note i {
    color: var(--accent-color);
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 1200px) {
    .contact-grid {
        gap: var(--gap-l);
    }

    .contact-info-card,
    .contact-form-card {
        padding: var(--padding-l);
    }
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-2xl);
        padding: 0;
        /* Remove horizontal padding on mobile */
    }

    .contact-info-card {
        margin-right: 0;
        /* Remove right margin on mobile */
        margin-bottom: var(--gap-m);
        /* Add bottom margin for separation */
    }

    .contact-form-card {
        margin-left: 0;
        /* Remove left margin on mobile */
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-m);
    }

    .contact-header h2 {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }

    .info-icon,
    .form-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: var(--padding-xl) 0;
    }

    .contact-info-card,
    .contact-form-card {
        padding: var(--padding-m);
        border-radius: var(--radius-m);
    }

    .contact-header {
        margin-bottom: var(--gap-l);
    }

    .contact-header h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
        margin-bottom: var(--gap-s);
    }

    .contact-header p {
        font-size: 1rem;
    }

    .contact-badge {
        font-size: 0.85rem;
        padding: var(--padding-xs) var(--padding-s);
    }

    /* Better mobile contact methods */
    .contact-method {
        flex-direction: row;
        text-align: left;
        gap: var(--gap-m);
        padding: var(--padding-s);
        margin-bottom: var(--gap-s);
    }

    .contact-method:hover {
        transform: translateX(5px);
    }

    .method-content h4 {
        font-size: 1rem;
        margin-bottom: 2px;
    }

    .method-content p {
        font-size: 0.95rem;
        word-break: break-all;
        line-height: 1.3;
    }

    .method-content span {
        font-size: 0.8rem;
    }

    .method-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .social-links-contact {
        flex-wrap: wrap;
        gap: var(--gap-s);
    }

    .social-link {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    /* Mobile form improvements */
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-s);
    }

    .input-group {
        margin-bottom: var(--gap-s);
    }

    .input-group input,
    .input-group select,
    .input-group textarea {
        padding: var(--padding-s) 45px var(--padding-s) var(--padding-s);
        /* Better mobile padding */
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    .input-group label {
        left: var(--padding-s);
        right: 50px;
        font-size: 0.95rem;
        max-width: calc(100% - 70px);
        /* Prevent overlap on mobile */
    }

    .input-group input:focus+label,
    .input-group input:valid+label,
    .input-group select:focus+label,
    .input-group select:valid+label,
    .input-group textarea:focus+label,
    .input-group textarea:valid+label {
        font-size: 0.8rem;
        right: auto;
        left: 12px;
        padding: 0 6px;
    }

    .input-icon {
        right: 15px;
        font-size: 1rem;
        width: 20px;
        height: 20px;
    }

    .submit-btn {
        padding: var(--padding-s) var(--padding-m);
        font-size: 1rem;
    }

    .info-card-header h3,
    .form-card-header h3 {
        font-size: 1.5rem;
    }

    .info-card-header p,
    .form-card-header p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: var(--padding-l) 0;
    }

    .contact-info-card,
    .contact-form-card {
        padding: var(--padding-s);
    }

    .contact-grid {
        gap: var(--gap-l);
    }

    .contact-header h2 {
        font-size: clamp(1.3rem, 8vw, 1.8rem);
    }

    .contact-header p {
        font-size: 0.9rem;
    }

    .contact-method {
        padding: var(--padding-xs);
        gap: var(--gap-s);
    }

    .method-content p {
        font-size: 0.9rem;
        word-break: break-all;
    }

    .method-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .input-group input,
    .input-group select,
    .input-group textarea {
        padding: 12px 42px 12px 12px;
        /* Better small mobile padding */
        font-size: 16px;
    }

    .input-group label {
        left: 12px;
        right: 47px;
        font-size: 0.9rem;
        max-width: calc(100% - 65px);
        /* Prevent overlap on small mobile */
    }

    .input-group input:focus+label,
    .input-group input:valid+label,
    .input-group select:focus+label,
    .input-group select:valid+label,
    .input-group textarea:focus+label,
    .input-group textarea:valid+label {
        font-size: 0.75rem;
        right: auto;
        left: 10px;
        padding: 0 4px;
    }

    .input-icon {
        right: 12px;
        font-size: 0.9rem;
        width: 18px;
        height: 18px;
    }

    .submit-btn {
        padding: 12px var(--padding-m);
        font-size: 0.95rem;
    }

    .info-icon,
    .form-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .social-link {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* Contact Section - Enhanced with background */
.contact {
    padding: var(--padding-2xl) 0;
    background: var(--bg-base);
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(75, 136, 255, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-base) 100%);
}

.contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/Home_page.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.03;
    z-index: 1;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-2xl);
    position: relative;
    z-index: 2;
}

/* Contact Section Separation */
.contact-info-section {
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-l);
    padding: var(--padding-xl);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.contact-info-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(75, 136, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.contact-form-section {
    background: linear-gradient(135deg, rgba(211, 215, 3, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-l);
    padding: var(--padding-xl);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.contact-form-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 80% 80%, rgba(211, 215, 3, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.contact-info h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--gap-m);
    color: var(--white);
}

.contact-info p {
    color: var(--text-secondary);
    margin-bottom: var(--gap-l);
    line-height: 1.7;
    font-size: 1.1rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--gap-m);
    padding: var(--padding-m);
    background: rgba(75, 136, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-m);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(75, 136, 255, 0.1);
    border-color: rgba(75, 136, 255, 0.3);
    transform: translateX(5px);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.contact-item-content h4 {
    color: var(--white);
    font-weight: 600;
    margin-bottom: var(--gap-xs);
}

.contact-item-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.95rem;
}

.form-group {
    margin-bottom: var(--gap-m);
}

.form-group label {
    display: block;
    margin-bottom: var(--gap-s);
    font-weight: 500;
    color: var(--white);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--padding-m);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-m);
    font-family: inherit;
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(75, 136, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(75, 136, 255, 0.1);
}

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

.form-submit {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--white);
    padding: var(--padding-m) var(--padding-l);
    border: none;
    border-radius: var(--radius-m);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.form-submit::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;
}

.form-submit:hover::before {
    left: 100%;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(75, 136, 255, 0.4);
}

/* ========================================
   16. FOOTER SECTION
   ======================================== */

/* Modern footer with gradient background */
.modern-footer {
    background: linear-gradient(135deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    color: var(--white);
    /* White text color */
    position: relative;
    /* For pseudo-elements */
    overflow: hidden;
    /* Hide overflow from effects */
    margin-top: 0;
    /* No top margin */
}

.modern-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(75, 136, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(211, 215, 3, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--gap-2xl);
    padding: var(--padding-2xl) 0;
    position: relative;
    z-index: 2;
}

.footer-company {
    max-width: 350px;
}

.footer-logo h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--gap-xs);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-tagline {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: var(--gap-m) 0;
    font-size: 0.95rem;
}

/* ========================================
   NEW FOOTER SOCIAL MEDIA SECTION
   ======================================== */

.social-media-section {
    margin-top: var(--gap-l);
}

.social-title {
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--gap-m);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.social-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-s);
    max-width: 280px;
}

.social-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    padding: var(--padding-s);
    border-radius: var(--radius-m);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

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

.social-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
    transition: color 0.3s ease;
}

/* Platform-specific colors */
.facebook-icon .icon-wrapper {
    background: linear-gradient(135deg, #1877f2, #42a5f5);
}

.linkedin-icon .icon-wrapper {
    background: linear-gradient(135deg, #0077b5, #005885);
}

.instagram-icon .icon-wrapper {
    background: linear-gradient(135deg, #e4405f, #fd1d1d, #fcb045);
}

.whatsapp-icon .icon-wrapper {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

/* Hover effects */
.social-icon:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.social-icon:hover .icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.social-icon:hover .social-label {
    color: var(--white);
}

/* Platform-specific hover effects */
.facebook-icon:hover {
    box-shadow: 0 10px 30px rgba(24, 119, 242, 0.3);
}

.linkedin-icon:hover {
    box-shadow: 0 10px 30px rgba(0, 119, 181, 0.3);
}

.instagram-icon:hover {
    box-shadow: 0 10px 30px rgba(228, 64, 95, 0.3);
}

.whatsapp-icon:hover {
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
}

.footer-links,
.footer-services,
.footer-contact {
    padding-top: var(--padding-s);
}

.footer-links h3,
.footer-services h3,
.footer-contact h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--gap-m);
    position: relative;
}

.footer-links h3::after,
.footer-services h3::after,
.footer-contact h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 1px;
}

.footer-links ul,
.footer-services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li,
.footer-services ul li {
    margin-bottom: var(--gap-s);
}

.footer-links ul li a,
.footer-services ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 15px;
}

.footer-links ul li a::before,
.footer-services ul li a::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.footer-links ul li a:hover,
.footer-services ul li a:hover {
    color: var(--white);
    padding-left: 20px;
}

.footer-links ul li a:hover::before,
.footer-services ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
}

.contact-detail {
    display: flex;
    align-items: center;
    gap: var(--gap-s);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.contact-detail i {
    color: var(--primary-color);
    width: 18px;
    text-align: center;
}

.contact-detail:hover {
    color: var(--white);
}

.contact-detail:hover i {
    color: var(--accent-color);
}

.social-links a:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--padding-l) 0;
    position: relative;
    z-index: 2;
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-m);
}

.footer-bottom-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: var(--gap-l);
}

.footer-bottom-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--primary-color);
}

/* Animations - Enhanced */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

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

@keyframes expandWidth {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

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

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

.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure sections are visible by default on smaller screens */
@media (max-width: 768px) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Force visibility for desktop if animations fail */
@media (min-width: 769px) {
    .animate-on-scroll {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}

/* Emergency fallback - ensure all sections are visible */
.services,
.about,
.contact {
    opacity: 1 !important;
    visibility: visible !important;
}

.services .animate-on-scroll,
.about .animate-on-scroll,
.contact .animate-on-scroll {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Enhanced Contact Section Animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

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

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

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

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-contact-item {
    animation: slideInFromLeft 0.6s ease-out forwards;
    opacity: 0;
}

.animate-form-group {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

/* Enhanced Contact Form Styles */
.contact-form {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(75, 136, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--padding-2xl);
    border-radius: var(--radius-l);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(75, 136, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(211, 215, 3, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.form-header {
    text-align: center;
    margin-bottom: var(--gap-xl);
    position: relative;
    z-index: 2;
}

.form-icon-wrapper {
    margin-bottom: var(--gap-m);
}

.form-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    color: var(--white);
    animation: iconPulse 3s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(75, 136, 255, 0.3);
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(75, 136, 255, 0.3);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 15px 40px rgba(75, 136, 255, 0.5);
    }
}

.form-header h3 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--gap-s);
    text-shadow: 0 0 10px rgba(75, 136, 255, 0.3);
}

.form-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--gap-l);
}

.form-divider {
    display: flex;
    align-items: center;
    gap: var(--gap-m);
    margin: var(--gap-l) 0;
}

.divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    animation: lineGlow 2s ease-in-out infinite;
}

.divider-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    animation: starRotate 4s linear infinite;
}

@keyframes lineGlow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes starRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.enhanced-form {
    position: relative;
    z-index: 2;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-l);
    margin-bottom: var(--gap-l);
}

.input-wrapper,
.select-wrapper,
.textarea-wrapper {
    position: relative;
    margin-bottom: var(--gap-m);
}

.input-wrapper input,
.select-wrapper select,
.textarea-wrapper textarea {
    width: 100%;
    padding: var(--padding-m) var(--padding-l) var(--padding-m) 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-m);
    font-family: inherit;
    color: var(--white);
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.select-wrapper select option {
    background: var(--bg-dark);
    color: var(--white);
    padding: var(--padding-s);
}

.input-wrapper input:focus,
.select-wrapper select:focus,
.textarea-wrapper textarea:focus {
    border-color: var(--primary-color);
    background: rgba(75, 136, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(75, 136, 255, 0.1);
    transform: translateY(-2px);
}

.input-wrapper input:focus+label,
.select-wrapper select:focus+label,
.textarea-wrapper textarea:focus+label,
.input-wrapper input:valid+label,
.select-wrapper select:valid+label,
.textarea-wrapper textarea:valid+label {
    top: -8px;
    left: 12px;
    font-size: 0.8rem;
    color: var(--primary-color);
    background: var(--bg-base);
    padding: 0 8px;
    transform: translateY(0);
}

.input-wrapper label,
.select-wrapper label,
.textarea-wrapper label {
    position: absolute;
    top: 50%;
    left: 50px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.textarea-wrapper label {
    top: 20px;
    transform: translateY(0);
}

.input-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    z-index: 2;
}

.textarea-wrapper .input-icon {
    top: 20px;
    transform: translateY(0);
}

.input-wrapper:focus-within .input-icon,
.select-wrapper:focus-within .input-icon,
.textarea-wrapper:focus-within .input-icon {
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.textarea-wrapper:focus-within .input-icon {
    transform: translateY(0) scale(1.1);
}

.input-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.input-wrapper:focus-within .input-border,
.select-wrapper:focus-within .input-border,
.textarea-wrapper:focus-within .input-border {
    width: 100%;
}

.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.char-counter.warning {
    color: var(--accent-color);
}

.char-counter.error {
    color: #ff4757;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-s);
    margin: var(--gap-l) 0;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-wrapper input[type="checkbox"]:checked+.checkbox-label .checkbox-custom {
    background: var(--gradient-primary);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

.checkbox-wrapper input[type="checkbox"]:checked+.checkbox-label .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-size: 12px;
    font-weight: bold;
}

.checkbox-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-s);
    transition: color 0.3s ease;
}

.checkbox-label:hover {
    color: var(--white);
}

.enhanced-submit {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--white);
    padding: var(--padding-m) var(--padding-xl);
    border: none;
    border-radius: var(--radius-m);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.3);
}

.enhanced-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(75, 136, 255, 0.4);
}

.enhanced-submit:active {
    transform: translateY(-1px);
}

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

.enhanced-submit:hover .submit-icon {
    transform: translateX(5px);
}

.submit-ripple {
    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;
}

.enhanced-submit:active .submit-ripple {
    width: 300px;
    height: 300px;
}

.form-note {
    text-align: center;
    margin-top: var(--gap-m);
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-s);
}

.form-note i {
    color: var(--accent-color);
}

/* Contact Item Enhancements */
.contact-item {
    display: flex;
    align-items: center;
    gap: var(--gap-m);
    padding: var(--padding-l);
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-m);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(75, 136, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.contact-item:hover::before {
    left: 100%;
}

.contact-item:hover {
    transform: translateX(10px);
    border-color: rgba(75, 136, 255, 0.3);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.2);
}

.contact-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.3rem;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
    animation: contactIconBounce 3s ease-in-out infinite;
}

/* Different colors for different contact icons */
.contact-item:nth-child(1) .contact-icon {
    background: linear-gradient(135deg, #25d366, #128c7e);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.contact-item:nth-child(2) .contact-icon {
    background: linear-gradient(135deg, #ea4335, #d33b2c);
    box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3);
}

.contact-item:nth-child(3) .contact-icon {
    background: linear-gradient(135deg, #4285f4, #1a73e8);
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
}

.contact-item:nth-child(4) .contact-icon {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

@keyframes contactIconBounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-5px) rotate(2deg);
    }

    75% {
        transform: translateY(-2px) rotate(-1deg);
    }
}

.contact-item:hover .contact-icon {
    transform: scale(1.15) rotate(10deg);
    animation-play-state: paused;
}

.contact-item-content h4 {
    color: var(--white);
    font-weight: 600;
    margin-bottom: var(--gap-xs);
    font-size: 1.1rem;
}

.contact-item-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.contact-item:hover .contact-item-content p {
    color: var(--white);
}



.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



/* Team Section Styles */
.team {
    padding: var(--padding-2xl) 0;
    background: var(--bg-base);
    position: relative;
}

.team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(75, 136, 255, 0.05) 0%, transparent 50%);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-l);
    position: relative;
    z-index: 2;
}

.team-member {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(75, 136, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-l);
    padding: var(--padding-xl);
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    backdrop-filter: blur(10px);
}

.team-member:hover {
    transform: translateY(-8px);
    border-color: rgba(75, 136, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.member-image {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto var(--gap-l);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--primary-color);
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(75, 136, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
}

.team-member:hover .member-overlay {
    opacity: 1;
}

.social-links {
    display: flex;
    gap: var(--gap-s);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

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

.member-info h3 {
    color: var(--white);
    margin-bottom: var(--gap-s);
    font-size: 1.3rem;
}

.member-role {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--gap-m);
    display: block;
}

.member-info p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Contact section enhancements */
.contact-header {
    text-align: center;
    margin-bottom: var(--gap-xl);
}

.contact-icon-main {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gap-m);
    font-size: 2.5rem;
    color: var(--white);
    animation: contactIconFloat 4s ease-in-out infinite;
    box-shadow: 0 15px 40px rgba(75, 136, 255, 0.3);
}

@keyframes contactIconFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

.contact-divider-section {
    margin: var(--gap-xl) 0;
}

.section-divider {
    position: relative;
    text-align: center;
    margin: var(--gap-l) 0;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--accent-color), transparent);
    animation: dividerPulse 3s ease-in-out infinite;
}

.section-divider span {
    background: var(--bg-base);
    padding: 0 var(--padding-l);
    color: var(--primary-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
}

@keyframes dividerPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Enhanced Responsive Design */
@media (max-width: 1400px) {
    .container {
        max-width: 1200px;
        padding: 0 var(--padding-l);
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 1000px;
        padding: 0 var(--padding-l);
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--gap-l);
    }

    .hero h1 {
        font-size: clamp(2.5rem, 7vw, 4.5rem);
    }

    .section-header h2 {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 var(--padding-m);
    }

    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .hero {
        min-height: 80vh;
        padding: 70px 0 60px;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: var(--gap-l);
        justify-content: center;
    }

    .hero-stat {
        flex: 1;
        min-width: 120px;
        max-width: 150px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--gap-s);
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-m);
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-m);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-l);
    }
}

@media (max-width: 768px) {

    /* Additional mobile logo adjustments */
    .logo {
        font-size: 1.4rem;
        line-height: 1.1;
    }

    .beta-badge {
        font-size: 0.55rem;
        padding: 2px 5px;
        margin-left: 5px;
    }

    .nav-container {
        padding: var(--padding-xs) 0;
        min-height: 60px;
        align-items: center;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        padding: var(--padding-s);
        z-index: 1001;
        border-radius: var(--radius-s);
        transition: all 0.3s ease;
    }

    .mobile-menu:hover {
        background: rgba(75, 136, 255, 0.1);
        transform: scale(1.1);
    }

    /* Hide desktop navigation on mobile */
    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, rgba(10, 10, 11, 0.98), rgba(28, 29, 31, 0.98));
        backdrop-filter: blur(30px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--gap-l);
        z-index: 999;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-100%);
        opacity: 0;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-links.active {
        display: flex;
        transform: translateY(0);
        opacity: 1;
    }

    .nav-links li {
        width: 80%;
        max-width: 300px;
        margin: var(--gap-s) 0;
        transform: translateY(50px);
        opacity: 0;
        animation: mobileNavSlideIn 0.6s ease forwards;
    }

    .nav-links li:nth-child(1) {
        animation-delay: 0.1s;
    }

    .nav-links li:nth-child(2) {
        animation-delay: 0.2s;
    }

    .nav-links li:nth-child(3) {
        animation-delay: 0.3s;
    }

    .nav-links li:nth-child(4) {
        animation-delay: 0.4s;
    }

    .nav-links li a {
        display: block;
        width: 100%;
        font-size: 1.4rem;
        font-weight: 600;
        padding: var(--padding-m) var(--padding-l);
        border-radius: var(--radius-xl);
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
        text-decoration: none;
        color: var(--white);
        background: rgba(255, 255, 255, 0.08);
        border: 2px solid rgba(255, 255, 255, 0.1);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .nav-links li a::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.6s ease;
    }

    .nav-links li a:hover::before {
        left: 100%;
    }

    .nav-links li a:hover {
        background: var(--gradient-primary);
        border-color: var(--primary-color);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 10px 25px rgba(75, 136, 255, 0.3);
        color: var(--white);
    }

    /* Hide Get Started button on mobile */
    .cta-btn {
        display: none !important;
    }

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

    .hero {
        padding: 80px 0 var(--padding-2xl);
        min-height: 90vh;
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--gap-s);
        align-items: center;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 300px;
        text-align: center;
        padding: var(--padding-s) var(--padding-l);
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-l);
    }

    .service-card {
        padding: var(--padding-l) var(--padding-m);
    }

    /* Better mobile typography */
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1.1;
    }

    .hero p {
        font-size: 1rem;
        margin-bottom: var(--gap-m);
    }

    .section-header h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    /* Improve mobile stats layout */
    .hero-stats {
        flex-direction: column;
        gap: var(--gap-m);
        margin: var(--gap-l) 0;
    }

    .hero-stat {
        min-width: auto;
        max-width: none;
    }

    .hero-stat-number {
        font-size: 2rem;
    }

    /* Better mobile spacing */
    .container {
        padding: 0 var(--padding-s);
    }

    /* Improve mobile forms */
    .contact-form {
        padding: var(--padding-m);
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }
}

.stats {
    grid-template-columns: 1fr;
    gap: var(--gap-m);
}

/* Mobile Contact Section - Enhanced Separation */
.contact-content {
    grid-template-columns: 1fr;
    gap: var(--gap-2xl);
}

.contact-info-section {
    order: 1;
    margin-bottom: var(--gap-xl);
    padding: var(--padding-l);
    border-radius: var(--radius-m);
    position: relative;
}

.contact-form-section {
    order: 2;
    padding: var(--padding-l);
    border-radius: var(--radius-m);
}

/* Add visual separator between sections */
.contact-info-section::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(75, 136, 255, 0.5);
}

/* Mobile Footer - Enhanced */
.footer-content {
    grid-template-columns: 1fr;
    gap: var(--gap-l);
    text-align: left;
    padding: 0 var(--padding-s);
}

.footer-section {
    margin-bottom: var(--gap-l);
    padding: var(--padding-l);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(75, 136, 255, 0.02) 100%);
    border-radius: var(--radius-m);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
}

.footer-section h3 {
    margin-bottom: var(--gap-m);
    color: var(--white);
    font-size: 1.3rem;
    text-align: center;
}

.footer-section p {
    text-align: center;
    margin-bottom: var(--gap-m);
    padding: 0 var(--padding-s);
    line-height: 1.6;
}

.footer-section ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    align-items: center;
}

.footer-section ul li {
    width: 100%;
    text-align: center;
}

.footer-section ul li a {
    padding: var(--padding-s) var(--padding-m);
    border-radius: var(--radius-s);
    transition: all 0.3s ease;
    display: block;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: var(--gap-xs);
}

.footer-section ul li a:hover {
    background: rgba(75, 136, 255, 0.1);
    color: var(--primary-color);
    transform: translateY(-2px);
    border-color: rgba(75, 136, 255, 0.2);
}

.footer-brand {
    text-align: center;
    padding: var(--padding-xl) var(--padding-m);
}

.footer-logo {
    font-size: 1.8rem;
    margin-bottom: var(--gap-m);
}

.social-links {
    justify-content: center;
    margin-top: var(--gap-l);
    gap: var(--gap-m);
    flex-wrap: wrap;
}

.social-links a {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin: var(--gap-xs);
}

.footer-bottom {
    text-align: center;
    padding: var(--padding-xl) var(--padding-m);
    border-top: 2px solid rgba(75, 136, 255, 0.2);
    margin-top: var(--gap-xl);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.footer-bottom p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    padding: 0 var(--padding-s);
}

.social-links {
    justify-content: center;
}

.section-header h2 {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
}

.hero h1 {
    font-size: clamp(2rem, 8vw, 3.5rem);
}

/* Form Responsive */
.form-row {
    grid-template-columns: 1fr;
    gap: var(--gap-m);
}

.contact-form {
    padding: var(--padding-l);
}

.form-header h3 {
    font-size: 1.5rem;
}

.input-wrapper input,
.select-wrapper select,
.textarea-wrapper textarea {
    padding: var(--padding-s) var(--padding-m) var(--padding-s) 40px;
}

.input-wrapper label,
.select-wrapper label,
.textarea-wrapper label {
    left: 40px;
}

.input-icon {
    left: 12px;
}

@media (max-width: 480px) {

    .container,
    .container-small {
        padding: 0 var(--padding-s);
    }

    /* Further mobile logo adjustments for small screens */
    .logo {
        font-size: 1.2rem;
        line-height: 1;
    }

    .beta-badge {
        font-size: 0.5rem;
        padding: 1px 4px;
        margin-left: 4px;
    }

    .nav-container {
        padding: 8px 0;
        min-height: 50px;
    }

    .hero {
        padding: 70px 0 var(--padding-xl);
        min-height: 85vh;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: var(--padding-xs) var(--padding-s);
    }

    /* Better small mobile typography */
    .hero h1 {
        font-size: clamp(1.8rem, 10vw, 2.8rem);
        line-height: 1.1;
        margin-bottom: var(--gap-s);
    }

    .hero p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: var(--gap-m);
    }

    .section-header h2 {
        font-size: clamp(1.5rem, 8vw, 2rem);
        margin-bottom: var(--gap-s);
    }

    /* Improve button sizing for small screens */
    .btn-primary,
    .btn-secondary {
        padding: var(--padding-s) var(--padding-m);
        font-size: 0.95rem;
        max-width: 250px;
    }

    .services,
    .about,
    .contact {
        padding: var(--padding-xl) 0;
    }

    .service-card {
        padding: var(--padding-m);
        margin-bottom: var(--gap-m);
    }

    .contact-form {
        padding: var(--padding-m);
    }

    .portfolio-metrics {
        flex-direction: column;
        gap: var(--gap-s);
    }

    .hero-stat-number {
        font-size: 1.8rem;
    }

    .stat h3 {
        font-size: 1.8rem;
    }

    /* Better mobile navigation */
    .nav-container {
        padding: var(--padding-s) 0;
    }

    .logo {
        font-size: 1.5rem;
    }

    /* Improve mobile forms */
    .form-group {
        margin-bottom: var(--gap-s);
    }

    .form-group input,
    .form-group textarea {
        padding: var(--padding-s);
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    /* Better mobile footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--gap-m);
        text-align: center;
    }

    .social-links a {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

/* Extra small mobile devices (320px and below) */
@media (max-width: 320px) {

    .container,
    .container-small {
        padding: 0 var(--padding-xs);
    }

    .hero h1 {
        font-size: clamp(1.5rem, 12vw, 2.2rem);
    }

    .hero p {
        font-size: 0.9rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: var(--padding-xs) var(--padding-s);
        font-size: 0.9rem;
        max-width: 200px;
    }

    .hero-stat-number {
        font-size: 1.5rem;
    }

    .service-card {
        padding: var(--padding-s);
    }

    .nav-container {
        padding: var(--padding-xs) 0;
    }

    .logo {
        font-size: 1.3rem;
    }
}

/* Touch-friendly improvements for mobile */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover effects on touch devices */
    .service-card:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none;
    }

    /* Increase touch targets */
    .nav-links a,
    .btn-primary,
    .btn-secondary,
    .social-links a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve tap feedback */
    .service-card,
    .btn-primary,
    .btn-secondary {
        transition: background-color 0.2s ease, transform 0.1s ease;
    }

    .service-card:active {
        transform: scale(0.98);
    }

    .btn-primary:active,
    .btn-secondary:active {
        transform: scale(0.95);
    }
}

/* Image and Media Styles */
.image-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-l);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.1) 0%, rgba(211, 215, 3, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 3rem;
    position: relative;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots-pattern)"/></svg>');
    opacity: 0.3;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-shape {
    position: absolute;
    background: rgba(75, 136, 255, 0.1);
    border-radius: 50%;
    animation: floatShape 8s ease-in-out infinite;
}

.floating-shape:nth-child(1) {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-shape:nth-child(2) {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.floating-shape:nth-child(3) {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes floatShape {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.1;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.3;
    }
}

/* Enhanced Animations */
@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }

    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes morphing {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

@keyframes textGlow {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(75, 136, 255, 0.5);
    }

    50% {
        text-shadow: 0 0 20px rgba(75, 136, 255, 0.8), 0 0 30px rgba(75, 136, 255, 0.6);
    }
}

@keyframes cardHover {
    0% {
        transform: translateY(0) rotateX(0);
    }

    100% {
        transform: translateY(-10px) rotateX(5deg);
    }
}

@keyframes glitch1 {

    0%,
    100% {
        transform: translate(0);
        opacity: 0;
    }

    20% {
        transform: translate(-2px, 2px);
        opacity: 0.1;
    }

    40% {
        transform: translate(-2px, -2px);
        opacity: 0.1;
    }

    60% {
        transform: translate(2px, 2px);
        opacity: 0.1;
    }

    80% {
        transform: translate(2px, -2px);
        opacity: 0.1;
    }
}

@keyframes glitch2 {

    0%,
    100% {
        transform: translate(0);
        opacity: 0;
    }

    20% {
        transform: translate(2px, -2px);
        opacity: 0.1;
    }

    40% {
        transform: translate(2px, 2px);
        opacity: 0.1;
    }

    60% {
        transform: translate(-2px, -2px);
        opacity: 0.1;
    }

    80% {
        transform: translate(-2px, 2px);
        opacity: 0.1;
    }
}

.animate-slide-bottom {
    animation: slideInFromBottom 0.8s ease-out forwards;
    opacity: 0;
}

.animate-scale {
    animation: scaleIn 0.6s ease-out forwards;
    opacity: 0;
}

.animate-rotate {
    animation: rotateIn 0.7s ease-out forwards;
    opacity: 0;
}

/* Magnetic effect for buttons */
.magnetic-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.magnetic-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;
}

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

.magnetic-btn:hover {
    box-shadow: 0 15px 35px rgba(75, 136, 255, 0.4);
}

/* Parallax Effect */
.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-element {
    transition: transform 0.1s ease-out;
}

/* Gradient Overlays */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.1) 0%, rgba(211, 215, 3, 0.05) 100%);
    pointer-events: none;
}

/* Loading Animation for Images */
.image-loading {
    position: relative;
    overflow: hidden;
}

.image-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer 2s infinite;
}

/* Client Logos Section */
.client-logos {
    padding: var(--padding-xl) 0;
    background: var(--bg-dark);
    border-top: 1px solid var(--line-color);
    border-bottom: 1px solid var(--line-color);
    position: relative;
    overflow: hidden;
}

.client-logos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(75, 136, 255, 0.03) 0%, transparent 70%);
}

.client-logos-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gap-l);
    opacity: 0.7;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

.client-logos:hover .client-logos-container {
    opacity: 1;
}

.client-logo-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.client-logo-item:hover {
    transform: scale(1.1) translateY(-5px);
}

.client-logo-item .image-placeholder {
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.client-logo-item:hover .image-placeholder {
    color: var(--primary-light);
}

.team-member {
    text-align: center;
    padding: var(--padding-l);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(75, 136, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-l);
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
    border-color: rgba(75, 136, 255, 0.3);
}

.team-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto var(--gap-m);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.team-avatar::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-primary);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
}

.team-member h4 {
    color: var(--white);
    font-size: 1.2rem;
    margin-bottom: var(--gap-xs);
}

.team-member .role {
    color: var(--primary-light);
    font-size: 0.9rem;
    margin-bottom: var(--gap-s);
}

.team-member p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Service Visual Enhancement */
.service-visual {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-m);
    margin-bottom: var(--gap-m);
}

.service-visual::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(75, 136, 255, 0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-card:hover .service-visual::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .client-logos-container {
        justify-content: center;
        gap: var(--gap-m);
    }

    .client-logo-item {
        flex: 0 0 auto;
    }
}

/* Form Validation States */
.input-wrapper.error input,
.select-wrapper.error select,
.textarea-wrapper.error textarea {
    border-color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
    animation: shake 0.5s ease-in-out;
}

.input-wrapper.success input,
.select-wrapper.success select,
.textarea-wrapper.success textarea {
    border-color: #2ed573;
    background: rgba(46, 213, 115, 0.1);
}

.input-wrapper.error .input-icon,
.select-wrapper.error .input-icon,
.textarea-wrapper.error .input-icon {
    color: #ff4757;
}

.input-wrapper.success .input-icon,
.select-wrapper.success .input-icon,
.textarea-wrapper.success .input-icon {
    color: #2ed573;
}

.input-wrapper.error .input-border,
.select-wrapper.error .input-border,
.textarea-wrapper.error .input-border {
    background: #ff4757;
    width: 100%;
}

.input-wrapper.success .input-border,
.select-wrapper.success .input-border,
.textarea-wrapper.success .input-border {
    background: #2ed573;
    width: 100%;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Success checkmark animation */
.input-wrapper.success::after,
.select-wrapper.success::after,
.textarea-wrapper.success::after {
    content: '✓';
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #2ed573;
    font-weight: bold;
    font-size: 1.2rem;
    animation: checkmark 0.3s ease-in-out;
}

.textarea-wrapper.success::after {
    top: 20px;
    transform: translateY(0);
}

@keyframes checkmark {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.textarea-wrapper.success::after {
    animation: checkmark-textarea 0.3s ease-in-out;
}

@keyframes checkmark-textarea {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fallback for sections that should always be visible */
.services,
.about,
.portfolio,
.testimonials,
.contact {
    min-height: auto;
}

.animate-on-scroll.fade-left {
    transform: translateX(-40px);
}

.animate-on-scroll.fade-right {
    transform: translateX(40px);
}

.animate-on-scroll.fade-left.animated,
.animate-on-scroll.fade-right.animated {
    transform: translateX(0);
}

/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--white);
    animation: rotate 1s linear infinite;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Auto-hide preloader after 5 seconds as fallback */
@keyframes autoHidePreloader {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.preloader {
    animation: autoHidePreloader 3s ease-in-out forwards;
}

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

.preloader-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--gap-m);
    animation: pulse 2s ease-in-out infinite;
}

.preloader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(75, 136, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: rotate 1s linear infinite;
    margin: 0 auto;
}

/* Responsive Design - Enhanced */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--padding-m);
    }

    .services-grid,
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-l);
    }
}

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

    .nav-links {
        display: none;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(10, 10, 11, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--gap-l);
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        font-size: 1.5rem;
        padding: var(--padding-m);
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--gap-m);
    }

    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--gap-l);
    }

    .about-highlights {
        margin: var(--gap-m) 0;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-s);
    }

    .services-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--gap-l);
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .section-header h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .hero h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }
}

@media (max-width: 480px) {

    .container,
    .container-small {
        padding: 0 var(--padding-s);
    }

    .hero {
        padding: 80px 0 var(--padding-2xl);
        min-height: 90vh;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: var(--padding-xs) var(--padding-s);
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--gap-s);
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        padding: var(--padding-s) var(--padding-l);
    }

    .services,
    .about,
    .portfolio,
    .testimonials,
    .contact {
        padding: var(--padding-xl) 0;
    }

    .service-card,
    .portfolio-item,
    .testimonial {
        padding: var(--padding-l) var(--padding-m);
    }

    .contact-form {
        padding: var(--padding-l);
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .stat {
        padding: var(--padding-m);
    }

    .portfolio-metrics {
        flex-direction: column;
        gap: var(--gap-s);
    }
}

/* Toast Notification Styles */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--gradient-primary);
    color: var(--white);
    padding: var(--padding-m) var(--padding-l);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 350px;
    display: flex;
    align-items: center;
    gap: var(--gap-s);
}

.toast.show {
    transform: translateX(0);
}

.toast.error {
    background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
}

.toast.success {
    background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
}

.toast i {
    font-size: 1.2rem;
}

.toast-close {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: auto;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.toast-close:hover {
    opacity: 1;
}

/* Performance Optimization */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Enhanced Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for better accessibility */
*:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-color);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10001;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 6px;
}

/* Enhanced Mobile Navigation Styles */
@media (max-width: 768px) {
    .nav-container {
        padding: var(--padding-s) 0;
    }

    .logo {
        font-size: 1.5rem;
        z-index: 1001;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: var(--gap-s);
        z-index: 1001;
    }

    .cta-btn {
        padding: var(--padding-xs) var(--padding-s);
        font-size: 0.85rem;
        border-radius: var(--radius-m);
    }

    .mobile-menu {
        display: flex;
        z-index: 1001;
    }

    .nav-links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: linear-gradient(135deg, rgba(10, 10, 11, 0.95), rgba(28, 29, 31, 0.95));
        backdrop-filter: blur(30px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--gap-xl);
        z-index: 999;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-100%);
        opacity: 0;
        margin: 0;
        padding: 0;
    }

    .nav-links::before {
        content: '✕';
        position: absolute;
        top: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
        border-radius: 50%;
        color: var(--white);
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 1001;
        animation: closeButtonPulse 2s ease-in-out infinite;
    }

    .nav-links::before:hover {
        transform: scale(1.2) rotate(90deg);
        box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
    }

    .nav-links.active {
        display: flex;
        transform: translateY(0);
        opacity: 1;
    }

    .nav-links li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-links a {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--white);
        padding: var(--padding-l) var(--padding-xl);
        margin: var(--gap-s) 0;
        text-align: center;
        animation: slideInFromLeft 0.6s ease forwards;
        opacity: 0;
        transform: translateX(-50px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 250px;
    }

    .nav-links li:nth-child(1) a {
        animation-delay: 0.1s;
    }

    .nav-links li:nth-child(2) a {
        animation-delay: 0.2s;
    }

    .nav-links li:nth-child(3) a {
        animation-delay: 0.3s;
    }

    .nav-links li:nth-child(4) a {
        animation-delay: 0.4s;
    }

    .nav-links li:nth-child(5) a {
        animation-delay: 0.5s;
    }

    .nav-links li:nth-child(6) a {
        animation-delay: 0.6s;
    }

    .nav-links a:hover {
        color: var(--primary-color);
        transform: translateX(10px);
    }

    .nav-links a::after {
        display: none;
    }

    @keyframes closeButtonPulse {

        0%,
        100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }
    }
}

/* Floating Action Button Styles */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-main {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fabPulse 3s ease-in-out infinite;
}

.fab-main:hover {
    transform: scale(1.1) rotate(45deg);
    box-shadow: 0 12px 35px rgba(75, 136, 255, 0.6);
}

.fab-main.active {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.fab-main i {
    color: var(--white);
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.fab-options {
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fab-options.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fab-option {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--white);
    transition: all 0.3s ease;
    animation: fabSlideIn 0.5s ease forwards;
    opacity: 0;
    transform: translateX(20px);
}

.fab-option:nth-child(1) {
    animation-delay: 0.1s;
}

.fab-option:nth-child(2) {
    animation-delay: 0.2s;
}

.fab-option:nth-child(3) {
    animation-delay: 0.3s;
}

.fab-option:nth-child(4) {
    animation-delay: 0.4s;
}

.fab-call {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.fab-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.fab-email {
    background: linear-gradient(135deg, #FF5722, #E64A19);
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4);
}

.fab-contact {
    background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
}

.fab-option:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ========================================
   AI CHATBOT STYLES
   ======================================== */

/* Chatbot Window */
.chatbot-window {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 380px;
    height: 550px;
    background: var(--bg-dark);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--primary-color);
    backdrop-filter: blur(20px);
}

.chatbot-window.active {
    display: flex;
    animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

/* Chatbot Header */
.chatbot-header {
    padding: var(--padding-m);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chatbot-header-info h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white);
}

.chatbot-status {
    font-size: 0.8rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 5px;
}

.chatbot-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #2ed573;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.chatbot-close {
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.8;
    transition: all 0.3s ease;
    color: var(--white);
    background: none;
    border: none;
    padding: 8px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* Chatbot Messages */
.chatbot-messages {
    flex: 1;
    padding: var(--padding-m);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--bg-darker);
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-dark);
}

.chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

.chatbot-messages::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

/* Message Styles */
.message {
    max-width: 85%;
    animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.message-content {
    padding: 12px 16px;
    border-radius: var(--radius-m);
    font-size: 0.9rem;
    line-height: 1.5;
    word-wrap: break-word;
}

.bot-message {
    align-self: flex-start;
}

.bot-message .message-content {
    background: var(--bg-base);
    color: var(--text-secondary);
    border-bottom-left-radius: 5px;
    border: 1px solid rgba(75, 136, 255, 0.2);
}

.user-message {
    align-self: flex-end;
}

.user-message .message-content {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    border-bottom-right-radius: 5px;
}

.message-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.message-content li {
    margin: 5px 0;
}

.message-content p {
    margin: 8px 0;
}

/* Quick Questions */
.quick-questions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.quick-question-btn {
    padding: 8px 12px;
    background: rgba(75, 136, 255, 0.1);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-m);
    color: var(--primary-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.quick-question-btn:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(75, 136, 255, 0.3);
}

/* Chatbot Input */
.chatbot-input {
    padding: var(--padding-m);
    background: var(--bg-base);
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--line-color);
    align-items: center;
}

.chatbot-input input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--line-color);
    border-radius: 25px;
    background: var(--bg-darker);
    color: var(--white);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.chatbot-input input::placeholder {
    color: var(--text-muted);
}

.chatbot-input input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(75, 136, 255, 0.1);
}

.chatbot-input button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot-input button:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(75, 136, 255, 0.4);
}

.chatbot-input button i {
    font-size: 16px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-base);
    border-radius: var(--radius-m);
    border-bottom-left-radius: 5px;
    max-width: 85%;
    align-self: flex-start;
    border: 1px solid rgba(75, 136, 255, 0.2);
}

.typing-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: typingAnimation 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingAnimation {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Floating Action Buttons Container */
.floating-buttons {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

/* Base Floating Button Styles */
.floating-btn {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    animation: floatingPulse 3s ease-in-out infinite;
}

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

.floating-btn:hover {
    transform: translateY(-5px) scale(1.1);
    animation-play-state: paused;
}

.floating-btn:hover i {
    transform: translateY(-2px);
}

/* Home Button Styles - REMOVED (only WhatsApp and Back to Top buttons remain) */

/* Back to Top Button Styles */
.back-to-top {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    box-shadow: 0 15px 40px rgba(75, 136, 255, 0.6);
}

/* Chatbot Button Styles */
.chatbot-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.4);
    animation: chatbotPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.chatbot-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.6s ease;
}

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

.chatbot-btn:hover {
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    box-shadow: 0 15px 40px rgba(75, 136, 255, 0.6);
    transform: translateY(-5px) scale(1.1);
    animation-play-state: paused;
}

.chatbot-btn.active {
    background: linear-gradient(135deg, #e74c3c, #f39c12);
    animation: none;
}

@keyframes chatbotPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(75, 136, 255, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(75, 136, 255, 0.6);
    }
}

@keyframes floatingPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes fabPulse {

    0%,
    100% {
        box-shadow: 0 8px 25px rgba(75, 136, 255, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 12px 35px rgba(75, 136, 255, 0.6);
        transform: scale(1.05);
    }
}

@keyframes fabSlideIn {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Additional Mobile Responsive Styles for New Sections */
@media (max-width: 768px) {

    /* Mobile Portfolio Styles */
    .portfolio-filters {
        flex-direction: column;
        align-items: center;
        gap: var(--gap-s);
    }

    .filter-btn {
        width: 200px;
        text-align: center;
        padding: var(--padding-s) var(--padding-m);
        font-size: 0.9rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-m);
    }

    .portfolio-item {
        margin-bottom: var(--gap-m);
    }

    .portfolio-content {
        padding: var(--padding-m);
    }

    .portfolio-content h3 {
        font-size: 1.3rem;
    }

    /* Mobile Social Media Section */
    .social-icons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap-m);
        max-width: 200px;
    }

    .social-icon {
        padding: var(--padding-m);
    }

    .icon-wrapper {
        width: 35px;
        height: 35px;
        margin-bottom: 6px;
    }

    .icon-wrapper i {
        font-size: 1rem;
    }

    .social-label {
        font-size: 0.7rem;
    }

    .portfolio-tags {
        gap: var(--gap-xs);
    }

    .portfolio-tags span {
        font-size: 0.75rem;
        padding: 2px 8px;
    }

    /* Mobile Team Styles */
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-m);
    }

    .team-member {
        padding: var(--padding-l);
    }

    .member-image {
        width: 120px;
        height: 120px;
        margin-bottom: var(--gap-m);
    }

    .member-info h3 {
        font-size: 1.2rem;
    }

    .member-info p {
        font-size: 0.9rem;
    }

    .social-links a {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    /* Mobile Testimonials Styles */
    .testimonials-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-m);
    }

    .stat-item {
        padding: var(--padding-m);
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.8rem;
    }

    /* Mobile Hero Styles */
    .hero {
        padding: 70px 0 60px;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }

    .hero-content {
        max-width: 100%;
        padding: 0 var(--padding-m);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-badge {
        font-size: 0.8rem;
        padding: var(--padding-xs) var(--padding-s);
        margin-bottom: var(--gap-m);
        text-align: center;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
        margin-bottom: var(--gap-s);
        line-height: 1.2;
        text-align: center;
    }

    .hero p {
        font-size: 1.1rem;
        margin-bottom: var(--gap-m);
        max-width: 100%;
        text-align: center;
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--gap-s);
        width: 100%;
        max-width: 300px;
        margin: 0 auto var(--gap-l);
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        padding: var(--padding-s) var(--padding-m);
        font-size: 1rem;
        text-align: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--gap-m);
        margin: var(--gap-l) 0;
        width: 100%;
    }

    .hero-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--padding-s);
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--radius-m);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }

    .hero-stat-number {
        font-size: 2rem;
        margin-bottom: 4px;
    }

    .hero-stat-label {
        font-size: 0.8rem;
        text-align: center;
    }

    .hero-visual {
        margin-top: var(--gap-l);
        max-width: 100%;
    }

    .hero-visual .image-container {
        height: 280px;
        border-radius: var(--radius-m);
    }

    /* Mobile Floating Buttons */
    .floating-buttons {
        bottom: 20px;
        right: 20px;
        gap: 12px;
    }

    .floating-btn {
        width: 50px;
        height: 50px;
    }

    .floating-btn i {
        font-size: 1.3rem;
    }

    /* Mobile Chatbot Styles */
    .chatbot-window {
        width: 95%;
        max-width: none;
        height: 75vh;
        bottom: 80px;
        right: 2.5%;
        left: 2.5%;
        border-radius: var(--radius-l);
    }

    .chatbot-window.mobile-fullscreen {
        width: 100%;
        height: 100vh;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        border-radius: 0;
        border: none;
    }

    .chatbot-messages {
        padding: var(--padding-s);
        gap: 12px;
    }

    .message-content {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .chatbot-input {
        padding: var(--padding-s);
    }

    .chatbot-input input {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .chatbot-input button {
        width: 40px;
        height: 40px;
    }

    .quick-question-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

/* Custom Cursor Styles */
.custom-cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    transform: translate(-50%, -50%);
}

.cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(75, 136, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.custom-cursor.cursor-hover {
    width: 15px;
    height: 15px;
    background: var(--accent-color);
}

.cursor-follower.cursor-hover {
    width: 50px;
    height: 50px;
    border-color: var(--accent-color);
}

/* Hide custom cursor on mobile */
@media (max-width: 768px) {

    .custom-cursor,
    .cursor-follower {
        display: none;
    }
}

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

.beta-badge {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    animation: pulse 2s infinite;
}

/* Keep header dark even when scrolled */
header,
header.scrolled {
    background: rgba(10, 10, 11, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line-color);
}

/* Mobile navigation improvements */
@media (max-width: 880px) {
    .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-links {
        position: fixed;
        inset: 70px 0 0 0;
        background: rgba(10, 10, 11, 0.98);
        display: none;
        flex-direction: column;
        gap: 18px;
        padding: 24px 16px;
        border-top: 1px solid var(--line-color);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }
}

/* Footer responsive layout */
.modern-footer .footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--gap-l);
}

@media (max-width: 1024px) {
    .modern-footer .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .modern-footer .footer-main {
        grid-template-columns: 1fr;
        gap: var(--gap-m);
    }

    .modern-footer .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Cursor-following background glow (place below triangles) */
body::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: radial-gradient(600px 600px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(75, 136, 255, 0.08), rgba(0, 0, 0, 0));
    z-index: -1;
}

/* Ensure main content stacks above the glow */
header,
main,
section,
footer {
    position: relative;
    z-index: 1;
}

/* Background triangles canvas */
.bg-triangles {
    position: fixed;
    inset: 0;
    z-index: 2;
    /* above content layers; pointer-events:none keeps UI interactive */
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    display: none;
    /* disabled in favor of particles.js */
}

/* Particles overlay tuning */
#particles-js {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    /* ensure above most layers but below cursor/preloader */
}

#particles-js canvas {
    opacity: 0.6;
    /* make clearly visible */
}

/* Custom cursor like test.html */
.custom-cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--primary-color, #4b88ff);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: all .12s ease;
}

.cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(75, 136, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all .3s ease;
}

.custom-cursor.cursor-hover {
    width: 14px;
    height: 14px;
    background: var(--accent-color, #d3d703);
}

.cursor-follower.cursor-hover {
    width: 52px;
    height: 52px;
    border-color: var(--accent-color, #d3d703);
}

@media (max-width: 768px) {

    .custom-cursor,
    .cursor-follower {
        display: none;
    }
}

/* Make images responsive by default */
img,
picture {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header responsiveness */
header {
    z-index: 2000;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.container {
    position: relative;
    overflow: visible;
}

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

.nav-links li {
    list-style: none;
}

.nav-links a {
    display: block;
    padding: 8px 4px;
}

.mobile-menu {
    display: none;
}

.mobile-menu {
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(20, 20, 22, 0.6);
}

.mobile-menu .mm-label {
    font-size: 0.95rem;
}

.mobile-menu .mm-bars {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-menu .mm-bars span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

/* Support existing structure with three spans directly inside .mobile-menu */
.mobile-menu>span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.mobile-menu>span+span {
    margin-top: 3px;
}

@media (max-width: 992px) {
    header {
        position: sticky;
        top: 0;
        z-index: 2000;
    }

    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        background: rgba(10, 10, 11, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px);
        z-index: 2100;
        text-align: left;
        transform: translateY(-8px);
        opacity: 0;
        transition: transform .22s ease, opacity .22s ease;
    }

    .nav-links.active {
        display: flex !important;
        transform: translateY(0);
        opacity: 1;
    }

    .nav-links a {
        padding: 12px 8px;
        width: 100%;
    }

    .mobile-menu {
        display: inline-flex;
        cursor: pointer;
    }

    .nav-right .cta-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Close button inside dropdown */
    .nav-close-item {
        display: flex;
        justify-content: flex-end;
    }

    .nav-close {
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        padding: 4px 6px;
        cursor: pointer;
        opacity: .9;
    }

    .nav-close:hover {
        opacity: 1;
    }
}

@media (min-width: 993px) {
    .nav-links {
        display: flex !important;
        position: static;
        flex-direction: row;
        padding: 0;
        background: transparent;
        border: 0;
    }

    .mobile-menu {
        display: none;
    }
}

/* Menu overlay */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2050;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Footer contact improvements */
.footer-contact .contact-info {
    display: grid;
    gap: 10px;
}

.footer-contact .contact-detail {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact .contact-detail i {
    flex: 0 0 auto;
}

.footer-contact .contact-detail span {
    word-break: break-word;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .footer-contact h3 {
        margin-bottom: 10px;
    }

    .footer-contact .contact-detail span {
        font-size: 0.95rem;
    }
}

/* Mobile cursor override: show on small screens with smaller size */
@media (max-width: 768px) {

    .custom-cursor,
    .cursor-follower {
        display: block !important;
    }

    .custom-cursor {
        width: 6px;
        height: 6px;
    }

    .cursor-follower {
        width: 30px;
        height: 30px;
    }
}

/* Enhanced Form Validation Styles */
.form-field.error .input-wrapper input,
.form-field.error .input-wrapper select,
.form-field.error .input-wrapper textarea {
    border-color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
    animation: shake 0.5s ease-in-out;
}

.form-field.success .input-wrapper input,
.form-field.success .input-wrapper select,
.form-field.success .input-wrapper textarea {
    border-color: #2ed573 !important;
    background: rgba(46, 213, 115, 0.1) !important;
}

.form-field.error .field-icon {
    color: #ff6b6b !important;
}

.form-field.success .field-icon {
    color: #2ed573 !important;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Turnstile Container Enhanced Styling */
.turnstile-container {
    transition: all 0.3s ease;
    border-radius: 10px;
}

.turnstile-container.verified {
    border: 2px solid #2ed573;
    background: rgba(46, 213, 115, 0.05);
    padding: 10px;
}

.turnstile-container.error {
    border: 2px solid #ff6b6b;
    background: rgba(255, 107, 107, 0.05);
    padding: 10px;
}

/* Submit Button Enhanced States */
.submit-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.submit-btn.loading {
    background: linear-gradient(135deg, #6c757d, #495057) !important;
}

.submit-btn.loading:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Toast Notification Enhancements */
.toast {
    min-width: 300px;
    max-width: 500px;
    word-wrap: break-word;
}

.toast.success {
    background: linear-gradient(135deg, #2ed573 0%, #17a2b8 100%);
}

.toast.error {
    background: linear-gradient(135deg, #ff6b6b 0%, #dc3545 100%);
}

/* Phone Number Input Formatting */
.phone-input-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.phone-input-hint i {
    color: var(--primary-color);
}

/* Form Field Focus Enhancements */
.form-field .input-wrapper:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.15);
}

/* Character Counter for Message Field */
.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-dark);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

.char-counter.warning {
    color: #ffc107;
}

.char-counter.error {
    color: #ff6b6b;
}

/* Loading Spinner for Submit Button */
.fa-spinner {
    animation: spin 1s linear infinite;
}

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

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

/* Mobile Form Enhancements */
@media (max-width: 768px) {

    .form-field .input-wrapper input,
    .form-field .input-wrapper select,
    .form-field .input-wrapper textarea {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    .turnstile-container {
        display: flex;
        justify-content: center;
        margin: 15px 0;
    }

    .toast {
        left: 10px;
        right: 10px;
        top: 10px;
        transform: none;
        max-width: none;
    }

    /* Mobile consent checkbox styles */
    .consent-checkbox {
        padding: 12px;
        margin: 15px 0;
    }

    .consent-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .checkbox-custom {
        width: 18px;
        height: 18px;
        margin-top: 1px;
    }

    .consent-checkbox input[type="checkbox"]:checked+.consent-label .checkbox-custom::after {
        font-size: 12px;
    }
}

/* C
ustom Cursor Styles */
.custom-cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #4b88ff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease;
}

.cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(75, 136, 255, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.custom-cursor.cursor-hover {
    width: 15px;
    height: 15px;
    background: #d3d703;
}

.cursor-follower.cursor-hover {
    width: 50px;
    height: 50px;
    border-color: rgba(211, 215, 3, 0.5);
}

/* Magnetic button effects */
.magnetic-btn {
    transition: transform 0.3s ease;
}

/* Hide custom cursor on mobile */
@media (max-width: 768px) {

    .custom-cursor,
    .cursor-follower {
        display: none;
    }
}

/* Success message styles for contact form */
.success-message {
    text-align: center;
    padding: 40px 20px;
    color: #28a745;
}

.success-message i {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
}

.success-message h3 {
    margin-bottom: 10px;
    color: #333;
}

.success-message p {
    color: #666;
}

/* F
orm Validation Styles */
.form-field.error .input-wrapper {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.form-field.success .input-wrapper {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.field-error {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.field-error::before {
    content: "⚠";
    font-size: 14px;
}

.form-field.success .field-icon {
    color: #28a745 !important;
}

.form-field.error .field-icon {
    color: #dc3545 !important;
}

/* Submit button states */
.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #6c757d !important;
}

.submit-btn.enabled {
    opacity: 1;
    cursor: pointer;
    background: linear-gradient(135deg, #28a745, #20c997) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3) !important;
}

.submit-btn.enabled:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4) !important;
}

/* Character counter styles */
.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: #6c757d;
    background: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

/* Enhanced Custom Cursor Styles */
.custom-cursor {
    transition: all 0.2s ease !important;
}

.cursor-follower {
    transition: all 0.3s ease !important;
}

/* Button hover */
.custom-cursor.cursor-button {
    width: 20px !important;
    height: 20px !important;
    background: #28a745 !important;
}

.cursor-follower.cursor-button {
    width: 60px !important;
    height: 60px !important;
    border-color: rgba(40, 167, 69, 0.6) !important;
    border-width: 3px !important;
}

/* Link hover */
.custom-cursor.cursor-link {
    width: 12px !important;
    height: 12px !important;
    background: #17a2b8 !important;
}

.cursor-follower.cursor-link {
    width: 40px !important;
    height: 40px !important;
    border-color: rgba(23, 162, 184, 0.5) !important;
}

/* Input hover */
.custom-cursor.cursor-input {
    width: 2px !important;
    height: 20px !important;
    background: #6f42c1 !important;
    border-radius: 1px !important;
}

.cursor-follower.cursor-input {
    width: 35px !important;
    height: 35px !important;
    border-color: rgba(111, 66, 193, 0.4) !important;
}

/* Form field focus states */
.form-field .input-wrapper:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(75, 136, 255, 0.15);
}

.form-field.error .input-wrapper:focus-within {
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.15);
}

.form-field.success .input-wrapper:focus-within {
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.15);
}

/ * Success and Error Animation Styles */ .success-animation,
.error-animation {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: slideInUp 0.6s ease-out;
}

.success-animation h3 {
    color: #28a745;
    margin: 20px 0 10px;
    font-size: 1.5rem;
    font-weight: 600;
}

.error-animation h3 {
    color: #dc3545;
    margin: 20px 0 10px;
    font-size: 1.5rem;
    font-weight: 600;
}

.success-animation p,
.error-animation p {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 1rem;
}

/* Success Checkmark Animation */
.success-checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #28a745;
    stroke-miterlimit: 10;
    margin: 0 auto 20px;
    box-shadow: inset 0px 0px 0px #28a745;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
    position: relative;
}

.success-checkmark .check-icon {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 1;
    transform: scale(0);
    animation: scale 0.3s ease-in-out 0.9s both;
}

.check-icon .icon-line {
    height: 2px;
    background: #28a745;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.check-icon .line-tip {
    top: 46px;
    left: 14px;
    width: 25px;
    transform: rotate(45deg);
    animation: icon-line-tip 0.75s;
}

.check-icon .line-long {
    top: 38px;
    right: 8px;
    width: 47px;
    transform: rotate(-45deg);
    animation: icon-line-long 0.75s;
}

.check-icon .icon-circle {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(40, 167, 69, 0.5);
}

.check-icon .icon-fix {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #fff;
}

/* Error Icon Animation */
.error-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: pulse 0.6s ease-in-out;
}

.error-icon i {
    font-size: 2rem;
    color: white;
    animation: shake 0.5s ease-in-out 0.2s;
}

/* Loading Dots Animation */
.loading-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4b88ff;
    animation: loading-dot 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0s;
}

/* Keyframe Animations */
@keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #28a745;
    }
}

@keyframes scale {

    0%,
    20% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

@keyframes pulse {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes loading-dot {

    0%,
    80%,
    100% {
        transform: scale(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive adjustments for animations */
@media (max-width: 768px) {

    .success-animation,
    .error-animation {
        padding: 30px 15px;
    }

    .success-checkmark,
    .error-icon {
        width: 60px;
        height: 60px;
    }

    .success-checkmark .check-icon {
        width: 42px;
        height: 42px;
        left: 9px;
        top: 9px;
    }

    .error-icon i {
        font-size: 1.5rem;
    }

    .success-animation h3,
    .error-animation h3 {
        font-size: 1.3rem;
    }
}

/* ========================================
   SCROLL TO TOP BUTTON
   ======================================== */

.scroll-to-top {
    position: fixed;
    bottom: 100px;
    /* Chatbot is at 20px, so 100px puts us 80px above it */
    right: 20px;
    /* Same right alignment as chatbot */
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4b88ff, #d3d703);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    /* Below chatbot (10000) but above other content */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(75, 136, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 30px rgba(75, 136, 255, 0.5);
    background: linear-gradient(135deg, #5a98ff, #e3e713);
}

.scroll-to-top:active {
    transform: translateY(-3px) scale(1.05);
}

.scroll-to-top i {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.scroll-to-top:hover i {
    transform: translateY(-2px);
}

/* Pulse animation for attention */
.scroll-to-top::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4b88ff, #d3d703);
    z-index: -1;
    opacity: 0;
    animation: scroll-pulse 2s infinite;
}

@keyframes scroll-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 90px;
        /* Adjust for mobile - chatbot at 15px on mobile */
        right: 15px;
        /* Match chatbot mobile positioning */
        width: 45px;
        height: 45px;
    }

    .scroll-to-top i {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .scroll-to-top {
        bottom: 85px;
        right: 15px;
        width: 42px;
        height: 42px;
    }

    .scroll-to-top i {
        font-size: 1rem;
    }
}

/* Accessibility improvements */
.scroll-to-top:focus {
    outline: 2px solid #4b88ff;
    outline-offset: 2px;
}

.scroll-to-top:focus:not(:focus-visible) {
    outline: none;
}

/* Smooth scroll behavior handled by Lenis */