:root {
    /* Color Scheme - Black, Red, White */
    --primary-color: #000000;
    --secondary-color: #dc0000;
    --accent-color: #ff0000;
    --dark-color: #000000;
    --darker-color: #1a1a1a;
    --light-color: #ffffff;
    --gray-color: #6c757d;
    --light-gray: #f8f9fa;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #000000 0%, #dc0000 100%);
    --gradient-accent: linear-gradient(135deg, #dc0000 0%, #ff0000 100%);
    --gradient-dark: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    
    /* Typography */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    
    /* Spacing */
    --section-padding: 100px 0;
    --container-padding: 0 20px;
    
    /* Transitions */
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-md: 0 5px 20px rgba(0,0,0,0.15);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.2);
    --shadow-red: 0 5px 20px rgba(220, 0, 0, 0.3);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-primary);
    color: var(--dark-color);
    line-height: 1.6;
    overflow-x: hidden;
    background: #000000;
    position: relative;
}

/* Cyber Background Pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(0deg, transparent 24%, rgba(220, 0, 0, 0.05) 25%, rgba(220, 0, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(220, 0, 0, 0.05) 75%, rgba(220, 0, 0, 0.05) 76%, transparent 77%, transparent),
        linear-gradient(90deg, transparent 24%, rgba(220, 0, 0, 0.05) 25%, rgba(220, 0, 0, 0.05) 26%, transparent 27%, transparent 74%, rgba(220, 0, 0, 0.05) 75%, rgba(220, 0, 0, 0.05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
    z-index: -1;
    opacity: 0.5;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--container-padding);
}

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

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

.loader {
    text-align: center;
    color: var(--light-color);
}

.spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: var(--secondary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Top Bar */
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    border-bottom: 2px solid rgba(220, 0, 0, 0.3);
    z-index: 1001;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 45px;
}

/* Full-height container so the bar content can center vertically */
.top-bar .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 20px;
    width: 100%;
    height: 100%;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%;
}

.top-bar-text {
    color: #ffffff;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 8px;
}

.top-bar-text i {
    color: #dc0000;
    font-size: 0.9rem;
}

.top-bar-text a {
    color: #ffffff;
    transition: color 0.3s ease;
}

.top-bar-text a:hover {
    color: #dc0000;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 15px 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(220, 0, 0, 0.1);
    min-height: 120px;
    overflow: visible;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(220, 0, 0, 0.5) 25%, 
        rgba(255, 68, 68, 0.7) 50%, 
        rgba(220, 0, 0, 0.5) 75%, 
        transparent 100%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    min-height: 100px;
}

.navbar.scrolled::before {
    opacity: 1;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    position: relative;
    min-height: 90px;
}

.logo-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    padding: 5px 20px;
}

.logo {
    display: flex;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 12px;
    border-radius: 20px;
}

.logo:hover {
    transform: scale(1.08) translateY(-3px);
}

.logo img {
    width: 220px;
    height: auto;
    max-height: none;
    object-fit: contain;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 40px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
    position: relative;
    z-index: 1;
}

.logo:hover img {
    filter: drop-shadow(0 8px 20px rgba(220, 0, 0, 0.25));
}

.social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.social-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(220, 0, 0, 0.8), rgba(255, 68, 68, 0.6));
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.social-icon i {
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 25px rgba(220, 0, 0, 0.5);
}

.social-icon:hover::before {
    opacity: 1;
}

.social-icon:hover i {
    transform: scale(1.15) rotate(5deg);
}

.social-icon:active {
    transform: translateY(-2px) scale(1.05);
}

/* Individual Social Icon Colors */
.social-icon:nth-child(1)::before {
    /* Phone - Green gradient */
    background: linear-gradient(135deg, rgba(34, 193, 195, 0.8), rgba(45, 253, 139, 0.7));
}

.social-icon:nth-child(2)::before {
    /* Facebook - Blue gradient */
    background: linear-gradient(135deg, rgba(24, 119, 242, 0.8), rgba(66, 183, 255, 0.7));
}

.social-icon:nth-child(3)::before {
    /* WhatsApp - Green gradient */
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.8), rgba(134, 239, 172, 0.7));
}

.social-icon:nth-child(4)::before {
    /* Instagram - Multi-color gradient */
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.8), rgba(193, 53, 132, 0.7), rgba(131, 58, 180, 0.7));
}

.social-icon:nth-child(5)::before {
    /* TikTok - Pink/Cyan gradient */
    background: linear-gradient(135deg, rgba(255, 0, 80, 0.8), rgba(0, 242, 234, 0.6));
}

.nav-menu {
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
    z-index: 5;
}

.nav-left {
    justify-content: flex-start;
    flex: 1;
    padding-right: 220px;
    margin-top: 15px;
}

.nav-right {
    justify-content: flex-end;
    flex: 1;
    padding-left: 180px;
    margin-top: 15px;
}

.nav-link {
    color: #1a1a1a;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 12px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.9rem;
    overflow: hidden;
    background: transparent;
}

/* Hide icons in desktop nav — icons only appear in mobile sidebar */
.nav-link i {
    display: none;
}

.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(220, 0, 0, 0.08), rgba(255, 68, 68, 0.12));
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        rgba(220, 0, 0, 0.3), 
        rgba(220, 0, 0, 1), 
        rgba(255, 68, 68, 1), 
        rgba(220, 0, 0, 1), 
        rgba(220, 0, 0, 0.3));
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(220, 0, 0, 0.6);
    border-radius: 2px;
    z-index: 1;
}

.nav-link span {
    position: relative;
    z-index: 1;
}

.nav-link:hover {
    color: #dc0000;
    transform: translateY(-2px);
}

.nav-link:hover::before {
    opacity: 1;
}

.nav-link:hover::after {
    width: 75%;
}

.nav-link.active {
    color: #dc0000;
    background: rgba(220, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(220, 0, 0, 0.1);
    animation: navActiveSlideDesktop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link.active::before {
    opacity: 1;
}

.nav-link.active::after {
    width: 75%;
}

@keyframes navActiveSlideDesktop {
    from {
        opacity: 0.7;
        transform: translateX(-14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.free-gif {
    width: 45px !important;
    height: 45px !important;
    display: inline-block !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    position: relative !important;
    z-index: 10 !important;
}

.netconfig-link span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

.netconfig-link {
    overflow: visible !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.nav-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-weight: 600;
    padding: 10px 20px;
    background: linear-gradient(135deg, #000000, #dc0000);
    border-radius: 25px;
    transition: var(--transition-fast);
    box-shadow: 0 4px 15px rgba(220, 0, 0, 0.3);
    border: 2px solid rgba(220, 0, 0, 0.5);
}

.nav-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 0, 0, 0.5);
    border-color: #dc0000;
}

.nav-phone:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,212,255,0.4);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 12px;
    border-radius: 12px;
    background: rgba(220, 0, 0, 0.05);
    border: 2px solid rgba(220, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.menu-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(220, 0, 0, 0.1), rgba(255, 68, 68, 0.15));
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle:hover {
    background: rgba(220, 0, 0, 0.08);
    border-color: rgba(220, 0, 0, 0.3);
    transform: scale(1.05);
}

.menu-toggle:hover::before {
    opacity: 1;
}

.menu-toggle span {
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, #dc0000, #ff4444);
    border-radius: 3px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(220, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.menu-toggle:hover span {
    background: linear-gradient(90deg, #ff4444, #dc0000);
    box-shadow: 0 2px 12px rgba(220, 0, 0, 0.5);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    /* svh tracks the visible area on mobile browsers, so the hero does not sit
       partly behind the address bar. Ignored by browsers that lack it. */
    height: 100svh;
    min-height: 600px;
    max-height: 1000px;
    margin-top: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
}

/* Modern Geometric Background Pattern */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, transparent 48%, rgba(220, 0, 0, 0.1) 49%, rgba(220, 0, 0, 0.1) 51%, transparent 52%),
        linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.03) 49%, rgba(255, 255, 255, 0.03) 51%, transparent 52%);
    background-size: 80px 80px;
    animation: patternSlide 20s linear infinite;
    z-index: 1;
    pointer-events: none;
}

/* Animated Gradient Orbs */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(220, 0, 0, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 68, 68, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(220, 0, 0, 0.15) 0%, transparent 40%);
    animation: orbPulse 15s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
}

@keyframes patternSlide {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(80px) translateY(80px); }
}

@keyframes orbPulse {
    0%, 100% { 
        opacity: 0.8;
        transform: scale(1) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.1) rotate(180deg);
    }
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 4;
}

/* Modern Glass Overlay with Gradient */
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, 
            rgba(0, 0, 0, 0.6) 0%, 
            rgba(220, 0, 0, 0.1) 50%, 
            rgba(0, 0, 0, 0.7) 100%
        );
    backdrop-filter: blur(2px) saturate(1.5);
    -webkit-backdrop-filter: blur(2px) saturate(1.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--light-color);
    /* Clears the fixed header (top bar + navbar) on every size */
    padding: clamp(120px, 16vh, 165px) clamp(20px, 4vw, 50px) 0;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content h1 {
    font-family: var(--font-secondary);
    /* One fluid scale for every screen. This replaces three fixed breakpoint
       blocks whose sizes ran backwards — 6rem between 1201-1400px but only 4rem
       above 1400px, so the headline shrank as the screen got wider. */
    font-size: clamp(2rem, 3.2vw + 1rem, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #ffffff;
    position: relative;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.3);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

/* Temporarily disable complex h1 effects
.hero-content h1::before {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: -1;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(255, 255, 255, 0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: blur(8px);
}
*/

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

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

.hero-content p {
    font-size: clamp(1.05rem, 1.25vw + 0.5rem, 1.8rem);
    margin-bottom: 40px;
    max-width: 650px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    line-height: 1.8;
    position: relative;
    padding-left: 25px;
}

.hero-content p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(180deg, #dc0000 0%, #ff4444 100%);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(220, 0, 0, 0.8);
    animation: barPulse 2s ease-in-out infinite;
}

@keyframes barPulse {
    0%, 100% { 
        opacity: 1;
        transform: scaleY(1);
    }
    50% { 
        opacity: 0.6;
        transform: scaleY(0.95);
    }
}

.hero-content .btn {
    animation: slideUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #dc0000 0%, #ff4444 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 10px 40px rgba(220, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-content .btn::before {
    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: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-content .btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 50px rgba(220, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
}

.hero-content .btn:hover::before {
    width: 400px;
    height: 400px;
}

.hero-content .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.hero-content .btn:hover::after {
    transform: translateX(100%);
}

/* Hero Controls - Modern Style */
.hero-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    pointer-events: none;
}

.slider-btn {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

.slider-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(220, 0, 0, 0.8), rgba(255, 68, 68, 0.6));
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-btn i {
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-btn:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 48px rgba(220, 0, 0, 0.5);
}

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

.slider-btn:hover i {
    transform: scale(1.1);
}

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

/* Slider Dots - Modern Style */
.slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dot:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

.dot.active {
    background: linear-gradient(135deg, #dc0000, #ff4444);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(220, 0, 0, 0.8);
}

.dot.active::before {
    border-color: rgba(220, 0, 0, 0.4);
    transform: scale(1.5);
}

/* Scroll Indicator - Modern Style */
.scroll-indicator {
    position: absolute;
    bottom: 120px;
    right: 45px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: floatUpDown 2s ease-in-out infinite;
}

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

.mouse {
    width: 28px;
    height: 45px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(220, 0, 0, 0.3);
}

.wheel {
    width: 4px;
    height: 10px;
    background: linear-gradient(180deg, #dc0000, #ff4444);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(220, 0, 0, 0.8);
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}

.scroll-indicator p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Section Styles */
section {
    padding: var(--section-padding);
    position: relative;
}

/* Section Backgrounds */
.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.gradient-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(220, 0, 0, 0.05) 100%);
    width: 100%;
    height: 100%;
}

.particles-bg {
    background-image: radial-gradient(circle at 20% 80%, rgba(220, 0, 0, 0.1) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
    width: 100%;
    height: 100%;
}

.geometric-pattern {
    background: linear-gradient(45deg, transparent 49%, rgba(220, 0, 0, 0.03) 50%, transparent 51%),
                linear-gradient(-45deg, transparent 49%, rgba(0, 0, 0, 0.03) 50%, transparent 51%);
    background-size: 60px 60px;
    width: 100%;
    height: 100%;
}

.wave-pattern {
    background: radial-gradient(ellipse at center, rgba(220, 0, 0, 0.05) 0%, transparent 70%);
    width: 100%;
    height: 100%;
}

/* Modern Section Headers */
.modern-section-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 0, 0, 0.2);
    padding: 12px 24px;
    border-radius: 50px;
    color: #dc0000;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px rgba(220, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.header-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(220, 0, 0, 0.2);
}

.modern-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--dark-color);
    margin: 0 0 25px 0;
    line-height: 1.2;
    font-family: var(--font-secondary);
}

.gradient-text {
    background: linear-gradient(135deg, #dc0000 0%, #ff4444 50%, #dc0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.white-text {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.black-text {
    color: #000000;
}

.title-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.decoration-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #dc0000 50%, transparent 100%);
}

.decoration-dot {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #dc0000, #ff4444);
    border-radius: 50%;
    position: relative;
}

.decoration-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.modern-subtitle {
    font-size: 1.2rem;
    color: var(--gray-color);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Legacy Section Header (for backward compatibility) */
.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-tag {
    display: inline-block;
    color: #dc0000;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    position: relative;
    padding: 5px 15px;
    border: 2px solid #dc0000;
    background: rgba(220, 0, 0, 0.1);
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    animation: tagGlow 2s ease-in-out infinite;
}

@keyframes tagGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(220, 0, 0, 0.8);
    }
}

.section-title {
    font-family: var(--font-secondary);
    font-size: 2.8rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(220, 0, 0, 0.5);
}

.highlight {
    background: linear-gradient(45deg, #dc0000, #ff0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(220, 0, 0, 0.8));
}

.title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #dc0000, transparent);
    margin: 0 auto 20px;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(220, 0, 0, 0.8);
}

.section-description {
    color: #cccccc;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 30px;
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--light-color);
    box-shadow: 0 5px 15px rgba(220, 0, 0, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 0, 0, 0.5);
}

.btn-outline {
    background: transparent;
    color: var(--dark-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background: var(--gradient-primary);
    color: var(--light-color);
    border-color: transparent;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* Promotional Banners Section */
.promo-banners {
    position: relative;
    height: 600px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.05);
    padding : 40px 0;
}

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

.promo-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.1) translateX(100%);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-slide.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    z-index: 1;
    animation: slideZoom 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideZoom {
    0% {
        opacity: 0;
        transform: scale(1.1) translateX(100%);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

.promo-slide picture {
    width: 100%;
    height: 100%;
    display: block;
}

.promo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.05) contrast(1.05);
    transition: transform 0.5s ease;
}

.promo-slide.active img {
    animation: kenBurns 8s ease-out;
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

.promo-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    pointer-events: none;
}

.promo-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #ffffff;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.promo-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(220, 0, 0, 0.8), rgba(255, 68, 68, 0.6));
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 50%;
}

.promo-btn i {
    position: relative;
    z-index: 1;
}

.promo-btn:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.15);
    box-shadow: 0 12px 48px rgba(220, 0, 0, 0.4);
}

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

.promo-btn:active {
    transform: scale(1.05);
}

.promo-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.promo-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 2px solid transparent;
}

.promo-dots .dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #dc0000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.promo-dots .dot.active {
    background: linear-gradient(135deg, #dc0000, #ff4444);
    width: 32px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(220, 0, 0, 0.5);
}

.promo-dots .dot.active::before {
    opacity: 1;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.promo-dots .dot:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

@media (max-width: 1024px) {
    .promo-controls {
        display: none;
    }

    .promo-banners {
        width: 100%;
        height: 420px;
    }
}
.about {
    background: var(--light-gray);
}

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

.about-image {
    position: relative;
    background: transparent;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: none;
    background: transparent;
    mix-blend-mode: darken;
    filter: contrast(1.1);
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -24px;
    width: 160px;
    background: linear-gradient(160deg, #111111 0%, #1c1c1c 100%);
    border-radius: 18px;
    border: 1px solid rgba(220, 0, 0, 0.35);
    border-top: 3px solid #dc0000;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(220, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 22px 18px 18px;
    gap: 4px;
    z-index: 5;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.experience-badge::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: #dc0000;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 12px rgba(220, 0, 0, 0.7);
}

.experience-badge::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 1.5px solid rgba(220, 0, 0, 0.2);
    animation: badgePulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgePulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 0;   transform: scale(1.06); }
}

.experience-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 32px rgba(220, 0, 0, 0.3);
}

.badge-content {
    position: relative;
    z-index: 1;
    color: white;
}

.badge-content h3 {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: #ffffff;
    letter-spacing: -1px;
}

.badge-content h3::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: #dc0000;
    border-radius: 2px;
    margin: 6px auto 4px;
}

.badge-content p {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.about-text h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--dark-color);
}

.lead {
    font-size: 1.1rem;
    color: var(--gray-color);
    margin-bottom: 30px;
    line-height: 1.8;
}

.about-features {
    margin-bottom: 30px;
}

.feature-item {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--light-color);
    border-radius: 15px;
    transition: var(--transition-fast);
}

.feature-item:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.feature-icon {
    font-size: 2rem;
    color: #dc0000;
}

.feature-text h4 {
    font-weight: 600;
    margin-bottom: 5px;
}

.feature-text p {
    color: var(--gray-color);
    font-size: 0.95rem;
}

.about-cta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--light-color);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    transition: var(--transition-smooth);
    z-index: 0;
}

.service-card:hover::before {
    left: 0;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

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

.service-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: var(--transition-fast);
}

.service-card:hover .service-icon {
    -webkit-text-fill-color: var(--light-color);
    transform: scale(1.1) rotateY(360deg);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--dark-color);
    transition: var(--transition-fast);
}

.service-card:hover h3 {
    color: var(--light-color);
}

.service-card p {
    color: var(--gray-color);
    line-height: 1.8;
    transition: var(--transition-fast);
}

.service-card:hover p {
    color: rgba(255,255,255,0.9);
}

/* Stats Section */
.stats {
    background: var(--gradient-dark);
    color: var(--light-color);
}

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

.stat-item {
    text-align: center;
}

.stat-item i {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.stat-item h3 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
}

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

/* Portfolio Section */
.portfolio {
    background: var(--light-gray);
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 25px;
    background: var(--light-color);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--gradient-primary);
    color: var(--light-color);
    border-color: transparent;
    transform: translateY(-2px);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 35px;
}

.portfolio-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: white;
}

.portfolio-item:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 50px rgba(0, 102, 255, 0.25);
}

.portfolio-image-slider {
    position: relative;
    height: 320px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.portfolio-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.portfolio-slide {
    min-width: 100%;
    height: 100%;
}

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

.portfolio-item:hover .portfolio-slide img {
    transform: scale(1.08);
}

.portfolio-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 10;
}

.portfolio-item:hover .portfolio-slider-nav {
    opacity: 1;
}

.portfolio-slider-btn {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #0066ff;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.portfolio-slider-btn:hover {
    background: #0066ff;
    color: white;
    transform: scale(1.1);
}

.portfolio-image-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.portfolio-content {
    padding: 25px;
    position: relative;
}

.portfolio-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #0066ff, #00d4ff);
    color: white;
}

.portfolio-content h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
    color: #1a1a1a;
    font-weight: 700;
}

.portfolio-content p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 18px;
    font-size: 0.95rem;
}

.portfolio-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #0066ff, #00d4ff);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.portfolio-view-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 102, 255, 0.4);
}

.portfolio-view-btn i {
    transition: transform 0.3s;
}

.portfolio-view-btn:hover i {
    transform: translateX(3px);
}

/* Portfolio Lightbox */
.portfolio-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    animation: fadeIn 0.3s;
}

.portfolio-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    position: relative;
}

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

.lightbox-image-wrapper img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #0066ff;
    font-size: 1.2rem;
}

.lightbox-nav-btn:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-nav-btn.prev {
    left: -70px;
}

.lightbox-nav-btn.next {
    right: -70px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333;
    transition: all 0.3s;
}

.lightbox-close:hover {
    background: #ff4444;
    color: white;
    transform: rotate(90deg);
}

.lightbox-info {
    text-align: center;
    color: white;
    margin-top: 20px;
}

.lightbox-info h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.lightbox-info p {
    font-size: 1rem;
    opacity: 0.8;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 25px;
    color: #333;
    font-weight: 600;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Styles */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    animation: slideUp 0.3s ease;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--dark-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
}

.modal-close:hover {
    color: var(--secondary-color);
}

.modal-body {
    padding: 20px;
    color: #666;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    flex-wrap: wrap;
}

.modal-footer .btn {
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .lightbox-nav-btn.prev {
        left: 10px;
    }
    
    .lightbox-nav-btn.next {
        right: 10px;
    }
}

/* Testimonials Section Redesign - Auto Scrolling */
.testimonials {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

.testimonials-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(220, 0, 0, 0.1), rgba(255, 68, 68, 0.05));
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 80px;
    height: 80px;
    top: 20%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    left: 20%;
    animation-delay: 4s;
}

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

.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 1;
}

.testimonials-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(220, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 0, 0, 0.2);
    padding: 15px 30px;
    border-radius: 50px;
    color: #dc0000;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 40px rgba(220, 0, 0, 0.1);
}

.testimonials-title {
    font-size: 3.8rem;
    font-weight: 900;
    color: var(--dark-color);
    margin: 0 0 20px 0;
    line-height: 1.1;
    font-family: var(--font-secondary);
}

.testimonials-subtitle {
    font-size: 1.3rem;
    color: var(--gray-color);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

.testimonials-container {
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 20px 0;
}

.testimonials-scroll-wrapper {
    display: flex;
    gap: 30px;
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.testimonials-scroll-wrapper.is-dragging {
    cursor: grabbing;
}

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

.testimonial-card {
    min-width: 280px;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(220, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #dc0000, #ff4444);
}

.testimonial-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(220, 0, 0, 0.2);
    border-color: rgba(220, 0, 0, 0.3);
}

.testimonial-screenshot {
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 450px;
}

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

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

.testimonial-footer {
    padding: 16px;
    text-align: center;
}

.client-name {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    margin: 0;
    word-break: break-word;
}

/* Responsive Design for Modern Headers */
/* Responsive Styles */

/* Header & Social Icons Responsive */
@media (max-width: 992px) {
    .social-icons {
        gap: 12px;
    }
    
    .social-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .social-icons {
        gap: 10px;
    }
    
    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .social-icon:hover {
        transform: translateY(-3px) scale(1.05);
    }
}

@media (max-width: 480px) {
    .social-icons {
        gap: 8px;
    }
    
    .social-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
}

/* Hero Responsive
   Headline and body sizes come from the fluid clamp() scale on .hero-content,
   so no per-breakpoint font sizes are needed between 769px and desktop. */
@media (max-width: 992px) and (min-width: 769px) {
    .hero-btn {
        padding: 16px 40px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .hero {
        height: 70vh;
        min-height: 600px;
    }

    .hero-controls {
        display: none;
    }

    .hero-content {
        width: calc(100% - 32px);
        max-width: 100%;
        padding: 140px 0 40px;
        margin: 0 16px;
        justify-content: center;
        align-items: flex-start;
    }
    
    .hero-content h1 {
        font-size: clamp(2.1rem, 7vw, 2.8rem);
        letter-spacing: 1.5px;
        margin-bottom: 20px;
        max-width: 100%;
        word-break: break-word;
    }
    
    .hero-content p {
        font-size: 1.05rem;
        max-width: 100%;
        margin-bottom: 28px;
        line-height: 1.65;
        padding-left: 18px;
        padding-right: 0;
    }
    
    .hero-content .btn,
    .hero-btn {
        padding: 14px 35px;
        font-size: 0.95rem;
        width: auto;
        max-width: 100%;
    }
    
    .slider-btn {
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }
    
    .scroll-indicator {
        right: 30px;
    }
    
    .slider-dots {
        bottom: 30px;
        gap: 12px;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
    
    /* Reduce animation complexity on mobile */
    .hero-slide::before {
        animation: none;
        background: linear-gradient(45deg, transparent 48%, rgba(220, 0, 0, 0.05) 50%, transparent 52%);
    }
    
    .orb {
        opacity: 0.3;
    }
}

@media (max-width: 480px) {
    .hero {
        height: 65vh;
        margin-top: 0;
        min-height: 500px;
    }

    .hero-controls {
        display: none;
    }

    .hero-content {
        width: calc(100% - 24px);
        padding: 128px 0 32px;
        margin: 0 12px;
    }
    
    .hero-content h1 {
        font-size: clamp(1.75rem, 8vw, 2.2rem);
        line-height: 1.15;
        letter-spacing: 1px;
    }
    
    .hero-content p {
        font-size: 0.95rem;
        margin: 15px 0 22px;
        padding-left: 14px;
    }
    
    .hero-content .btn,
    .hero-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
    
    .slider-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
    
    .hero-controls {
        padding: 0 15px;
    }
    
    .scroll-indicator {
        display: none; /* Hide scroll indicator on very small screens */
    }
    
    .slider-dots {
        bottom: 20px;
        gap: 10px;
    }
    
    /* Disable heavy effects on mobile */
    .hero-slide::before,
    .orb {
        display: none;
    }
    
    .hero-overlay {
        backdrop-filter: blur(5px);
    }
}

/* Section Responsive */
@media (max-width: 768px) {
    .modern-title {
        font-size: 2.5rem;
    }
    
    .testimonials-title {
        font-size: 2.8rem;
    }
    
    .header-badge,
    .testimonials-badge {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .modern-subtitle,
    .testimonials-subtitle {
        font-size: 1.1rem;
    }
    
    .testimonial-card {
        min-width: 320px;
        padding: 30px 25px;
    }
    
    .client-avatar {
        width: 60px;
        height: 60px;
    }
    
    .client-name {
        font-size: 1.1rem;
    }
    
    .testimonial-text {
        font-size: 1rem;
    }
    
    .shape-1, .shape-2, .shape-3 {
        display: none; /* Hide floating shapes on mobile */
    }
}

@media (max-width: 480px) {
    .modern-title {
        font-size: 2rem;
    }
    
    .testimonials-title {
        font-size: 2.2rem;
    }
    
    .testimonials {
        padding: 80px 0;
    }
    
    .modern-section-header,
    .testimonials-header {
        margin-bottom: 50px;
    }
    
    .testimonial-card {
        min-width: 280px;
        padding: 25px 20px;
    }
    
    .client-avatar {
        width: 50px;
        height: 50px;
    }
    
    .client-name {
        font-size: 1rem;
    }
    
    .testimonial-text {
        font-size: 0.95rem;
    }
}

/* Legacy Testimonials Styles */
.testimonials-slider {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.testimonial-slide {
    display: none;
    text-align: center;
    padding: 40px;
    background: var(--light-color);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.testimonial-slide.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

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

.testimonial-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 5px solid var(--secondary-color);
    overflow: hidden;
}

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

.testimonial-content {
    margin-bottom: 20px;
}

.stars {
    color: #ffc107;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.testimonial-content p {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--gray-color);
    line-height: 1.8;
    margin-bottom: 20px;
}

.testimonial-author h4 {
    font-size: 1.2rem;
    color: var(--dark-color);
    margin-bottom: 5px;
}

.testimonial-author span {
    color: var(--primary-color);
    font-size: 0.95rem;
}

.testimonial-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.testimonial-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.testimonial-btn:hover {
    background: var(--gradient-primary);
    color: var(--light-color);
    border-color: transparent;
    transform: scale(1.1);
}

/* Contact Section */
.contact {
    background: var(--light-gray);
}

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

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-card {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: var(--light-color);
    border-radius: 15px;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.info-card:hover {
    transform: translateX(10px);
    box-shadow: var(--shadow-md);
}

.info-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--light-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-content h4 {
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--dark-color);
}

.info-content p {
    color: var(--gray-color);
}

.contact-form {
    background: var(--light-color);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

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

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-group i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-color);
    transition: var(--transition-fast);
}

.form-group textarea ~ i {
    top: 20px;
    transform: none;
}

.form-group input:focus ~ i,
.form-group textarea:focus ~ i {
    color: var(--primary-color);
}

.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    display: none;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    display: block;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    display: block;
}

/* Brands and Partners Section */
.brands-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

.brands-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 48%, rgba(220, 0, 0, 0.02) 50%, transparent 52%),
                linear-gradient(-45deg, transparent 48%, rgba(0, 0, 0, 0.02) 50%, transparent 52%);
    background-size: 60px 60px;
    opacity: 0.5;
    pointer-events: none;
}

.brands-container {
    display: flex;
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 20px 0;
}

.brands-wrapper {
    display: flex;
    gap: 30px;
    animation: brandsScroll 30s linear infinite;
    will-change: transform;
}

.brands-wrapper:hover {
    animation-play-state: paused;
}

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

.brand-item {
    background: #ffffff;
    padding: 35px 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 140px;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.brand-item:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.brand-item img {
    max-width: 160px;
    max-height: 70px;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) contrast(0.8) brightness(1.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.brand-item:hover img {
    filter: grayscale(0%) contrast(1) brightness(1);
    transform: scale(1.05);
}

/* Brands Responsive */
@media (max-width: 992px) {
    .brands-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 30px;
    }
    
    .brand-item {
        padding: 35px 25px;
    }
    
    .brand-item img {
        max-width: 120px;
        max-height: 70px;
    }
}

@media (max-width: 768px) {
    .brands-section {
        padding: 80px 0;
    }
    
    .brands-container {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 25px;
        margin-top: 50px;
    }
    
    .brand-item {
        padding: 30px 20px;
    }
    
    .brand-item img {
        max-width: 100px;
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .brands-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .brand-item {
        padding: 25px 15px;
    }
    
    .brand-item img {
        max-width: 90px;
        max-height: 50px;
    }
}

/* Footer */
.footer {
    background: var(--gradient-dark);
    color: var(--light-color);
    padding: 60px 0 20px;
}

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

.footer-col h3 {
    margin-bottom: 10px;
}

.footer-col h4 {
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-col p {
    color: rgba(255,255,255,0.7);
    margin-bottom: 20px;
}

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

.footer-col ul li a {
    color: rgba(255,255,255,0.7);
    transition: var(--transition-fast);
}

.footer-col ul li a:hover {
    color: var(--secondary-color);
    padding-left: 5px;
}

.footer-logo {
    width: 180px;
    height: auto;
    margin-bottom: 20px;
    filter: brightness(2.2) drop-shadow(0 0 7px rgba(255, 255, 255, 1)) drop-shadow(0 1px 5px rgba(255, 255, 255, 0.9));
    transition: all 0.3s ease;
}

.footer-logo:hover {
    filter: brightness(1.4) drop-shadow(0 0 16px rgba(255, 255, 255, 1)) drop-shadow(0 6px 20px rgba(220, 0, 0, 0.5));
    transform: scale(1.05);
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-fast);
}

.social-links a:hover {
    background: var(--gradient-primary);
    transform: translateY(-3px);
}

.contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.7);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
    color: rgba(255,255,255,0.7);
    margin: 5px 0;
}

.footer-bottom i {
    color: #ff0000;
    animation: heartbeat 1.5s infinite;
}

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

/* Scroll to Top Button */
.scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: var(--light-color);
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-fast);
    z-index: 999;
    box-shadow: var(--shadow-md);
}

.scroll-top.active {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* WhatsApp Float Button */
.whatsapp-float {
    position: fixed;
    bottom: 95px;
    right: 30px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #25d366;
    color: var(--light-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    box-shadow: var(--shadow-lg);
    z-index: 999;
    transition: var(--transition-fast);
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .top-bar {
        position: fixed;
        top: 0;
        height: 45px;
    }
    
    /* Mobile Top Bar */
    .top-bar {
        height: 45px;
        position: fixed;
        z-index: 1002;
    }

    .top-bar-content {
        padding: 0 12px;
        justify-content: center;
        height: 100%;
        align-items: center;
    }

    /* Contact info fills the bar */
    .top-bar-left {
        width: 100%;
        justify-content: center;
        gap: 18px;
    }

    .top-bar-text {
        font-size: 0.78rem;
        gap: 6px;
    }

    .top-bar-text i {
        font-size: 0.8rem;
    }

    /* Mobile Navbar — white bar with centered logo + hamburger right */
    .navbar {
        top: 45px;
        padding: 8px 0;
        min-height: 58px;
        position: fixed;
        z-index: 1000;
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid #e9ecef;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
    
    .navbar.scrolled {
        min-height: 54px;
    }
    
    .nav-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        gap: 15px;
        min-height: auto;
        padding: 0 14px;
    }
    
    /* Hide ALL nav menus from mobile header - they only appear in sidebar */
    .nav-wrapper .nav-menu {
        display: none !important;
    }
    
    .nav-wrapper .nav-left,
    .nav-wrapper .nav-right {
        display: none !important;
    }
    
    /* Primary panel: always in DOM, hidden via transform so transition works */
    .nav-wrapper .mobile-nav-primary {
        display: block !important;
        pointer-events: none;
    }
    
    /* Only show logo and hamburger in mobile header */
    .nav-wrapper .logo-container {
        display: flex;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: max-content;
        z-index: 10;
    }
    
    .nav-wrapper .menu-toggle {
        display: flex;
        margin-left: auto;
    }
    
    /* Mobile sidebar drawer — matches dashboard sidebar style */
    .mobile-nav-panel {
        position: fixed;
        top: 103px;
        left: 0;
        width: 50vw !important;
        height: calc(100vh - 103px);
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        overflow-y: auto;
        background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
        opacity: 1;
    }

    .mobile-nav-primary.active {
        display: block !important;
        transform: translateX(0);
        pointer-events: auto;
        animation: none;
        padding: 10px 0;
    }

    /* Right menu links are merged into the left menu on mobile via JS. */
    .mobile-nav-secondary.active {
        display: none !important;
    }

    /* Dim overlay behind open sidebar — opacity fade instead of display swap */
    .mobile-nav-overlay {
        display: block;
        position: fixed;
        top: 103px;
        left: 50vw;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 9998;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.mobile-menu-open .mobile-nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    
    @keyframes slideIn {
        from { opacity: 0; transform: translateX(-100%); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Staggered slide-in for each nav link when sidebar opens */
    @keyframes navLinkFadeIn {
        from { opacity: 0; transform: translateX(-18px); }
        to   { opacity: 1; transform: translateX(0); }
    }
    .mobile-nav-primary.active .nav-link {
        opacity: 0;
        animation: navLinkFadeIn 0.3s ease forwards;
    }
    .mobile-nav-primary.active .nav-link:nth-child(1) { animation-delay: 0.08s; }
    .mobile-nav-primary.active .nav-link:nth-child(2) { animation-delay: 0.14s; }
    .mobile-nav-primary.active .nav-link:nth-child(3) { animation-delay: 0.20s; }
    .mobile-nav-primary.active .nav-link:nth-child(4) { animation-delay: 0.26s; }
    .mobile-nav-primary.active .nav-link:nth-child(5) { animation-delay: 0.32s; }
    .mobile-nav-primary.active .nav-link:nth-child(6) { animation-delay: 0.38s; }
    
    /* Both nav menus — flex column, no gap (items have borders) */
    .nav-left,
    .nav-right {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
        gap: 0;
    }
    
    /* Navigation links — icon + text row matching dashboard nav-item */
    .mobile-nav-primary .nav-link {
        display: flex !important;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 16px 25px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #ffffff !important;
        background: transparent;
        border: none;
        border-left: 3px solid transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin: 0;
        text-align: left;
        border-radius: 0;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .mobile-nav-primary .nav-link i {
        display: inline-block;
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
        color: #ffffff !important;
        flex-shrink: 0;
    }

    .mobile-nav-primary .nav-link span {
        color: inherit;
    }

    .mobile-nav-primary .nav-link:hover {
        background: rgba(220, 0, 0, 0.12);
        color: #ffffff;
        border-left-color: rgba(220, 0, 0, 0.6);
        padding-left: 25px;
        transform: none;
    }
    
    .mobile-nav-primary .nav-link.active {
        background: rgba(220, 0, 0, 0.2);
        color: #ff6060;
        border-left: 3px solid #dc0000;
        font-weight: 600;
        opacity: 1;
        animation: none;
    }
    
    /* Logo in mobile — smaller to fit compact white bar */
    .logo-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: max-content;
    }
    
    .logo img {
        height: 40px !important;
        width: auto !important;
        margin-top: 0 !important;
        filter: none !important;
        image-rendering: auto;
        transform: translateZ(0);
    }
    
    /* Reset logo container padding on mobile */
    .logo {
        padding: 4px 8px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    /* Hide social icons in mobile nav */
    .logo-container .social-icons {
        display: none;
    }
    
    /* Hamburger menu button */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 10px;
        background: rgba(220, 0, 0, 0.1);
        border: 2px solid rgba(220, 0, 0, 0.3);
        border-radius: 8px;
        z-index: 10000;
        position: relative;
        margin-left: auto;
    }
    
    .menu-toggle span {
        width: 25px;
        height: 2px;
        background: #dc0000;
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    .menu-toggle.active {
        background: rgba(220, 0, 0, 0.2);
    }
    
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translateY(7px);
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-7px);
    }
    
    /* Hero adjustment for mobile */
    .hero {
        margin-top: 103px;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .top-bar {
        height: 42px;
    }

    /* Only the phone number fits on narrow screens */
    .top-bar-left .top-bar-text:last-child {
        display: none;
    }

    .navbar {
        top: 42px;
        padding: 8px 0;
        min-height: 58px;
    }

    .logo img {
        height: 40px !important;
        width: auto !important;
        margin-top: 0 !important;
        filter: none !important;
    }

    .menu-toggle span {
        width: 22px;
    }

    .hero {
        margin-top: 100px;
    }

    .nav-link {
        padding: 14px 18px;
        font-size: 0.95rem;
    }
    
    .nav-link {
        padding: 16px 25px;
        font-size: 1rem;
        margin: 6px 0;
    }

    .social-icons {
        gap: 8px;
    }
    
    .menu-toggle {
        padding: 10px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-cta {
        flex-direction: column;
    }
    
    .about-cta .btn {
        width: 100%;
    }
}

/* =========================================================================
   RESPONSIVE TIERS
   Desktop (>1366) · Laptop & iPad Pro landscape (1025-1366)
   Tablet portrait (769-1024) · Phone (<=768) · Small phone (<=480)
   ========================================================================= */

/* ---- Keep the split desktop nav inside the content column -----------------
   The centred logo is absolutely positioned, so .nav-left/.nav-right reserve
   space for it with side padding. With the original 28px link padding the two
   menus needed ~1250px inside an 1160px container, so the right-hand links
   (Portfolio / Contact / NetConfig) spilled past the container — and off-screen
   entirely at 1366px and below. Tighter link padding brings them back in. */
@media (min-width: 1025px) {
    .nav-menu {
        gap: 6px;
    }

    .nav-link {
        padding: 14px 12px;
        letter-spacing: 0.8px;
    }

    /* .nav-link sets overflow: hidden, so a flex squeeze silently clips the
       label text instead of showing it. Refuse to shrink and keep labels on one
       line — the gutters below are sized to leave real slack, so nothing has to
       shrink in the first place. */
    .nav-wrapper .nav-link {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* The mobile dim overlay lives inside .nav-wrapper. On desktop it stayed a
       static display:block flex item, so it ate a second 30px flex gap at the
       end of the row and made the two halves unequal (539px vs 561px), shifting
       the whole nav off-centre. It is only ever used under 1024px. */
    .mobile-nav-overlay {
        display: none;
    }

    /* Balance the two link groups around the centred logo.
       Previously .nav-left was flex-start and .nav-right flex-end, so both
       groups hugged the outer container edges. The right-hand labels are wider
       (PORTFOLIO / CONTACT / NETCONFIG + FREE badge), which left a 133px gap to
       the left of the logo and only 9px to the right. Aligning each group toward
       the logo with an equal gutter makes those two gaps identical regardless of
       how wide the labels are. */
    /* min-width: 0 overrides the flex default of min-width: auto. Without it a
       group whose labels outgrow its half would refuse to shrink, stealing width
       from the other half and pulling the two gaps apart again. */
    .nav-left,
    .nav-right {
        min-width: 0;
    }

    .nav-left {
        justify-content: flex-end;
        padding-right: 160px;
        padding-left: 0;
    }

    .nav-right {
        justify-content: flex-start;
        padding-left: 160px;
        padding-right: 0;
    }
}

/* ---- Laptop & iPad Pro 12.9" landscape (1366x1024) ---------------------- */
@media (min-width: 1025px) and (max-width: 1366px) {
    .nav-menu {
        gap: 2px;
    }

    .nav-link {
        padding: 12px 10px;
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }

    /* Equal gutters here too — the logo is smaller in this tier, so the
       reserved space either side of it shrinks to match. Sized so the wider
       right-hand group still has slack inside its half at 1025px (the narrowest
       width in this tier) — if it hit its min-content width the flex halves
       would stop being equal and the gaps would drift apart again. */
    .nav-left {
        padding-right: 140px;
        padding-left: 0;
    }

    .nav-right {
        padding-left: 140px;
        padding-right: 0;
    }

    .logo img {
        width: 185px;
        margin-top: 32px;
    }

    .free-gif {
        width: 34px !important;
        height: 34px !important;
    }

    .social-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .social-icons {
        gap: 10px;
    }
}

/* ---- Tablet portrait: iPad Pro 12.9" (1024), iPad Pro 11" (834),
        iPad Air (820), iPad Mini (768) -------------------------------------
   These use the hamburger nav (see the max-width: 1024px block above), but
   they have far more room than a phone, so the content grids stay multi-column
   and the logo / spacing scale up from the phone values.
   Starts at 768 (not 769) so iPad Mini portrait gets tablet treatment rather
   than phone treatment — this block sits after the max-width: 768px phone
   rules, so it wins the overlap at exactly 768px. */
@media (min-width: 768px) and (max-width: 1024px) {
    section {
        padding: 80px 0;
    }

    .logo img {
        height: 52px !important;
    }

    /* Slide-out panel: 50vw is ~512px on an iPad Pro — too wide.
       Keep the width in sync with the overlay's left edge below. */
    .mobile-nav-panel {
        width: 40vw !important;
    }

    .mobile-nav-overlay {
        left: 40vw;
    }

    /* 4 stats in 3 columns left an orphan on the second row */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    /* ...but with exactly 3 stats, 2 columns is what leaves the orphan, so put
       all three on one row instead. Ignored by browsers without :has(), which
       simply keep the 2-column layout above. */
    .stats-grid:has(> .stat-item:nth-child(3):last-child) {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

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

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

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

    /* Sized to the content rather than to a share of the screen. 62svh gave a
       740px hero for ~347px of content, leaving a 320px gap above the headline
       on an iPad. Clamped so a taller tablet cannot reopen that gap. */
    .hero {
        height: auto;
        min-height: 500px;
        min-height: clamp(500px, 40svh, 525px);
        max-height: none;
    }

    /* The base padding is up to 165px, which pushed the block far down the
       hero. The header is 103px tall here, so this leaves a modest gap. */
    .hero-content {
        padding-top: 128px;
        padding-bottom: 36px;
    }

    .promo-banners {
        height: 460px;
    }

    .modern-title {
        font-size: 2.6rem;
    }

    .stat-item h3 {
        font-size: 2.6rem;
    }
}

/* ---- Phone (<=767) -----------------------------------------------------
   Stops at 767 so it does not fight the tablet tier at exactly 768px. */
@media (max-width: 767px) {
    /* 4 stats in 3 columns left an orphan here too */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Every .hero-slide is absolutely positioned, so the hero cannot size
       itself from its content — the height has to be stated. 74svh left about
       120px of empty space under the button on a phone, so this is clamped to
       roughly what the content needs instead of a share of the screen. */
    .hero {
        height: auto;
        min-height: 430px;
        min-height: clamp(430px, 56svh, 480px);
        max-height: none;
    }

    /* Was 140px top / 40px bottom, which pushed the block down and left the
       gap at the bottom. The header is 100px tall, so ~112px puts a small,
       even gap above the headline. */
    .hero-content {
        padding: 112px 0 28px;
    }

    .promo-banners {
        height: 340px;
    }
}

/* ---- Small phone (<=480) ---------------------------------------------- */
@media (max-width: 480px) {
    /* The badge deliberately overhangs the image by 24px, which pushed it
       past the viewport edge on narrow screens */
    .experience-badge {
        right: 0;
    }

    /* Comfortable tap targets for the footer link lists */
    .footer-col ul a {
        display: inline-block;
        padding: 6px 0;
    }

    .promo-banners {
        height: 260px;
    }
}

/* ---- Small phone (<=600): the top bar shrinks 45px -> 42px, so the
        slide-out panel and its overlay have to start 3px higher to stay
        flush with the header instead of leaving a sliver of page showing. */
@media (max-width: 600px) {
    .mobile-nav-panel {
        top: 100px;
        height: calc(100vh - 100px);
    }

    .mobile-nav-overlay {
        top: 100px;
    }
}