/* Reset and Base Styles - ENHANCED FOR PREMIUM LOOK */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 100%);
}

    .monitor-setup {
        width: 300px;
        height: 200px;
    }

    .about-content,
    .contact-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .tech-hub {
        width: 300px;
        height: 300px;
    }
    
    .tech-center {
        width: 150px;
        height: 150px;
    }
    
    .tech-center i {
        font-size: 3rem;
    }
    
    .tech-element {
        width: 50px;
        height: 50px;
    }
    
    .tech-element i {
        font-size: 1.2rem;
    }
    
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .partner-logo {
        height: 75px;
        padding: 15px;
        border-radius: 12px;
    }

    .section-title {
        font-size: 2.8rem;
        letter-spacing: -1px;
    }
    
    .section-title::after {
        width: 100px;
        height: 3px;
        bottom: -12px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    .service-card {
        padding: 2rem 1.5rem 2rem;
        min-height: 350px;
        border-radius: 20px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .service-card h3 {
        font-size: 1.2rem;
        line-height: 1.3;
        margin-bottom: 1rem;
    }
    
    .service-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .process-steps {
        gap: 1.5rem;
        flex-direction: column;
        flex-wrap: nowrap;
        margin: 50px auto 0;
        padding-top: 30px;
        max-width: 100%;
        justify-content: center;
    }
    
    .step {
        flex: none;
        width: 100%;
        min-width: auto;
        padding: 3rem 1.5rem 2rem;
        min-height: 250px;
        margin-top: 15px;
        text-align: center;
    }
    
    .step::after {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        top: -16px;
    }
}

/* PREMIUM ANIMATIONS */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    }
    50% { 
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 212, 255, 0.3);
    }
}

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

/* DIGITAL BACKGROUND ANIMATIONS */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0, 153, 204, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, rgba(15, 20, 25, 0.9) 0%, rgba(26, 35, 50, 0.8) 100%);
    animation: float 6s ease-in-out infinite;
}

.matrix-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: pulse 4s ease-in-out infinite;
    z-index: 1;
}

.circuit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,50 Q25,25 50,50 T100,50" stroke="rgba(0,212,255,0.2)" stroke-width="1" fill="none"/></svg>');
    animation: shimmer 3s linear infinite;
    z-index: 2;
}

.data-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(2px 2px at 20px 30px, rgba(0, 212, 255, 0.3), transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(0, 153, 204, 0.3), transparent),
                radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.2), transparent);
    background-size: 100px 100px;
    animation: float 8s ease-in-out infinite reverse;
    z-index: 3;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

/* ENHANCED ELEMENTS */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0;
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
    opacity: 0;
}

.rotate-in {
    animation: rotateIn 1s ease-out forwards;
    opacity: 0;
}

/* Service Page Specific Styles */

/* EXACT COPY from main page styles.css */
/* Language Switcher */
.language-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 5px;
}

.lang-btn {
    padding: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-width: 45px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-btn.active,
.lang-btn:hover {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.2);
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.flag-icon {
    width: 24px !important;
    height: 18px !important;
    display: block !important;
    border-radius: 2px;
    overflow: hidden;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    min-width: 24px;
    min-height: 18px;
    max-width: 24px;
    max-height: 18px;
}

/* Service Hero Section - PREMIUM ENHANCED */
.service-hero {
    min-height: 100vh;
    background: 
        linear-gradient(135deg, #0f1419 0%, #1a2332 30%, #2a3441 60%, #1a2332 90%, #0f1419 100%),
        radial-gradient(ellipse at 50% 20%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.service-hero {
    position: relative;
    overflow: hidden;
    margin-top: 70px;
}

.service-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.03) 2px,
            rgba(0, 212, 255, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 212, 255, 0.03) 2px,
            rgba(0, 212, 255, 0.03) 4px
        );
    animation: gridMove 20s linear infinite;
    z-index: 1;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

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

/* Digital Background Effects - COPIED FROM MAIN PAGE */
.digital-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.neural-network {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(0, 212, 255, 0.1) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(0, 255, 136, 0.08) 50%, transparent 60%);
    background-size: 200px 200px, 300px 300px;
    animation: neuralPulse 15s infinite ease-in-out;
}

@keyframes neuralPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.hologram-effects {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        conic-gradient(from 0deg at 30% 40%, transparent 0deg, rgba(0, 212, 255, 0.1) 30deg, transparent 60deg),
        conic-gradient(from 180deg at 70% 60%, transparent 0deg, rgba(0, 255, 136, 0.08) 45deg, transparent 90deg);
    animation: hologramSpin 30s infinite linear;
}

@keyframes hologramSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.service-hero-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

.service-icon-large {
    width: 160px;
    height: 160px;
    background: 
        linear-gradient(45deg, #00d4ff 0%, #0099cc 50%, #00d4ff 100%),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3rem;
    font-size: 4rem;
    color: white;
    box-shadow: 
        0 0 50px rgba(0, 212, 255, 0.7),
        0 0 100px rgba(0, 212, 255, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.1);
    animation: glow 3s ease-in-out infinite, float 6s ease-in-out infinite;
    border: 3px solid rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 10;
}

.service-icon-large::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(45deg, #00d4ff, #0099cc, #00d4ff, #0099cc);
    border-radius: 50%;
    z-index: -1;
    animation: rotateIn 2s ease-out, shimmer 4s linear infinite;
}

.service-icon-large i {
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

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

.service-hero h1 {
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 25%, #ffffff 50%, #00d4ff 75%, #ffffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
    animation: heroTextReveal 1.5s ease-out forwards, gradientShift 4s ease-in-out infinite;
    letter-spacing: -2px;
    line-height: 1.4;
    position: relative;
    z-index: 10;
    text-align: center !important;
}

/* RTL СПЕЦИАЛЬНЫЕ ПРАВИЛА ДЛЯ ЦЕНТРИРОВАНИЯ ЗАГОЛОВКОВ */
html[lang="he"] .service-hero h1,
html[dir="rtl"] .service-hero h1,
.rtl-mode .service-hero h1,
body.rtl-mode .service-hero h1,
html[lang="he"] .security-title,
html[dir="rtl"] .security-title,
.rtl-mode .security-title,
body.rtl-mode .security-title,
html[lang="he"] .support-title,
html[dir="rtl"] .support-title,
.rtl-mode .support-title,
body.rtl-mode .support-title,
html[lang="he"] .access-title,
html[dir="rtl"] .access-title,
.rtl-mode .access-title,
body.rtl-mode .access-title,
html[lang="he"] .network-title,
html[dir="rtl"] .network-title,
.rtl-mode .network-title,
body.rtl-mode .network-title {
    text-align: center !important;
    direction: ltr !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* RTL ЦЕНТРИРОВАНИЕ ДЛЯ HERO CONTENT */
html[lang="he"] .hero-content,
html[dir="rtl"] .hero-content,
.rtl-mode .hero-content,
body.rtl-mode .hero-content {
    text-align: center !important;
}

/* RTL ЦЕНТРИРОВАНИЕ ТОЛЬКО ДЛЯ СЕТКИ (БЕЗ НАРУШЕНИЯ КАРТОЧЕК) */
html[lang="he"] .services-grid,
html[dir="rtl"] .services-grid,
.rtl-mode .services-grid,
body.rtl-mode .services-grid {
    justify-content: center !important;
    margin: 3rem auto 0 auto !important;
    max-width: 1400px !important;
}

.service-hero h1::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: shimmer 3s linear infinite;
    border-radius: 2px;
}

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

.service-hero p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
    animation: heroTextReveal 1.5s ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
    font-weight: 300;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
}

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

.service-stats {
    display: flex;
    justify-content: center;
    gap: 4rem;
    margin-top: 3rem;
}

/* Service Details Section - DARK GRADIENT BACKGROUND */
.service-details {
    padding: 120px 0;
    background: 
        linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #2a3441 100%),
        radial-gradient(ellipse at top, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}

/* Removed gradient overlay for clean white background */

.service-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
}

.service-description h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 2rem;
    color: white;
    text-align: center;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    letter-spacing: -1px;
}

.service-description h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, transparent);
    border-radius: 2px;
}

.service-description p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.9;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 300;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

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

.features-list .feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
    border-radius: 15px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 1px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.features-list .feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    transform: scaleY(0);
    transition: transform 0.4s ease;
}

.features-list .feature:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 20px 50px rgba(0, 212, 255, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
}

.features-list .feature:hover::before {
    transform: scaleY(1);
}

.features-list .feature i {
    color: #00d4ff !important;
    font-size: 1.8rem !important;
    min-width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.05));
    border-radius: 12px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Fallback for when Font Awesome doesn't load */
.features-list .feature i.fas.fa-router::before {
    content: "🔗" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.features-list .feature i.fas.fa-tools::before {
    content: "🔧" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.features-list .feature i.fas.fa-chart-line::before {
    content: "📈" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.features-list .feature i.fas.fa-shield-alt::before {
    content: "🛡️" !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}

.features-list .feature:hover i {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

.features-list .feature-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a2332;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.features-list .feature-content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.service-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 2rem 0;
}

.service-img {
    width: 100%;
    max-width: 400px;
    height: 300px;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    padding: 1rem;
}

.service-img:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 30px 70px rgba(139, 92, 246, 0.3);
    border-color: rgba(139, 92, 246, 0.4);
}

/* Services List Section */
.services-list {
    padding: 100px 0;
    background: #f8fafc;
}

.services-list h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #1a2332;
}

/* Removed white background completely - services on gradient background */

.services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem;
    margin: 3rem auto 0 auto;
    max-width: 1400px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Mobile responsive for services grid */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin: 2rem auto 0 auto;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 2rem auto 0 auto;
        padding: 0 1rem;
    }
}

.service-item {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

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

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

/* COLOR SCHEMES FOR EACH SERVICE */

/* Networking & Cybersecurity - Blue/Cyan */
.networking-page .service-item {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.3);
}

/* Video Surveillance (CCTV) - Red/Orange */
.surveillance-page .service-item {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 15px 35px rgba(249, 115, 22, 0.3);
}

/* Access Control Systems - Green/Emerald */
.access-control-page .service-item {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 15px 35px rgba(16, 185, 129, 0.3);
}

/* Intrusion & Alarm Systems - Purple/Violet */
.intrusion-alarm-page .service-item {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.3);
}

/* EMERGENCY FIX FOR INTRUSION ALARM PAGE LOGO */
.intrusion-alarm-page .nav-container,
.intrusion-alarm-page .nav-container .logo {
    direction: ltr !important;
    justify-content: flex-start !important;
}

.intrusion-alarm-page .logo {
    order: -999 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    float: left !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
}

.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.service-item i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    display: block;
}

.service-item h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.service-item p {
    color: #000000;
    line-height: 1.6;
    font-weight: 600;
}

/* Project Gallery Section */
.project-gallery {
    padding: 100px 0;
    background: white;
}

.project-gallery h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a2332;
}

.gallery-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 3rem;
}

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

.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.gallery-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 2rem;
    transform: translateY(60%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.gallery-overlay p {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 1rem;
}

.view-project-btn {
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

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

/* Process Timeline Section */
.process-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.process-section h2 {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #1a2332;
}

.process-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #00d4ff, #0099cc);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.timeline-content {
    flex: 1;
    background: white;
    padding: 2rem;
    border-radius: 15px;
    margin: 0 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    left: -30px;
    border-right-color: white;
    transform: translateY(-50%);
}

.timeline-item:nth-child(even) .timeline-content::before {
    right: -30px;
    border-left-color: white;
    transform: translateY(-50%);
}

.timeline-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1a2332;
}

.timeline-content p {
    color: #666;
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    color: #b0b0b0;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.cta-btn {
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-btn.primary {
    background: linear-gradient(45deg, #00d4ff, #0099cc);
    color: white;
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

.cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
}

.cta-btn.secondary {
    background: transparent;
    color: #00d4ff;
    border: 2px solid #00d4ff;
}

.cta-btn.secondary:hover {
    background: #00d4ff;
    color: white;
    transform: translateY(-3px);
}

/* Project Modal */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: fadeInModal 0.3s ease;
}

.project-modal.active {
    display: flex;
}

.project-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    position: relative;
    animation: slideInModal 0.3s ease;
}

.project-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
}

.project-modal-close:hover {
    color: #00d4ff;
}

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

.project-images img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.project-details {
    margin-top: 2rem;
}

.project-details h3 {
    color: #1a2332;
    margin-bottom: 1rem;
}

.project-details ul {
    color: #666;
    line-height: 1.8;
}

.project-details ul li {
    margin-bottom: 0.5rem;
}

/* Responsive Design for Service Pages */
@media (max-width: 1200px) {
    .service-hero h1 {
        font-size: 4rem;
        line-height: 1.15;
    }
}

@media (max-width: 992px) {
    .service-hero h1 {
        font-size: 3.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    .service-hero h1 {
        font-size: 2.5rem;
        line-height: 1.3;
    }
    
    .service-hero p {
        font-size: 1.1rem;
    }
    
    .service-stats {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .service-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .service-features {
        grid-template-columns: 1fr;
    }
    
    .services-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .process-timeline::before {
        left: 40px;
    }
    
    .timeline-item,
    .timeline-item:nth-child(even) {
        flex-direction: row;
    }
    
    .timeline-icon {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }
    
    .timeline-content {
        margin-left: 2rem;
        margin-right: 0;
    }
    
    .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before {
        left: -30px;
        right: auto;
        border-right-color: white;
        border-left-color: transparent;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .project-modal-content {
        max-width: 95%;
        padding: 1.5rem;
    }
    
    .project-images {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .service-hero {
        min-height: 60vh;
    }
    
    .service-hero h1 {
        font-size: 2rem;
    }
    
    .section-title,
    .services-list h2,
    .project-gallery h2,
    .process-section h2 {
        font-size: 2rem;
    }
    
    .services-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .service-item,
    .gallery-item {
        margin: 0 10px;
    }
    
    .timeline-icon {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .timeline-content {
        padding: 1.5rem;
        margin-left: 1.5rem;
    }
}

/* RTL Support for Service Pages */
.rtl-mode .service-hero-content {
    text-align: right;
}

.rtl-mode .service-stats {
    flex-direction: row-reverse;
}

.rtl-mode .service-content {
    direction: rtl;
}

.rtl-mode .service-description {
    text-align: right;
}

.rtl-mode .service-features {
    direction: rtl;
}

.rtl-mode .service-features .feature {
    flex-direction: row-reverse;
}

.rtl-mode .services-grid {
    direction: rtl;
    margin: 3rem auto 0 auto !important;
    max-width: 1400px !important;
    justify-content: center !important;
}

.rtl-mode .service-item {
    text-align: center; /* Keep centered for better readability */
}

.rtl-mode .gallery-grid {
    direction: rtl;
}

.rtl-mode .process-timeline::before {
    right: 50%;
    left: auto;
    transform: translateX(50%);
}

.rtl-mode .timeline-item {
    flex-direction: row-reverse;
}

.rtl-mode .timeline-item:nth-child(even) {
    flex-direction: row;
}

.rtl-mode .timeline-content {
    text-align: right;
    margin-right: 2rem;
    margin-left: 0;
}

.rtl-mode .timeline-content::before {
    right: -30px;
    left: auto;
    border-left-color: white;
    border-right-color: transparent;
}

.rtl-mode .timeline-item:nth-child(odd) .timeline-content::before {
    right: -30px;
    left: auto;
    border-left-color: white;
    border-right-color: transparent;
}

.rtl-mode .timeline-item:nth-child(even) .timeline-content::before {
    left: -30px;
    right: auto;
    border-right-color: white;
    border-left-color: transparent;
}

.rtl-mode .cta-content {
    text-align: center; /* Keep CTA centered */
}

.rtl-mode .cta-buttons {
    flex-direction: row-reverse;
}

.rtl-mode .project-modal-content {
    direction: rtl;
    text-align: right;
}

.rtl-mode .project-modal-close {
    left: 1.5rem;
    right: auto;
}

/* Mobile RTL adjustments for service pages */
@media (max-width: 768px) {
    .rtl-mode .service-hero-content {
        text-align: center;
    }
    
    .rtl-mode .service-content {
        grid-template-columns: 1fr;
    }
    
    .rtl-mode .timeline-content {
        margin-right: 1.5rem;
        margin-left: 0;
    }
    
    .rtl-mode .timeline-content::before,
    .rtl-mode .timeline-item:nth-child(even) .timeline-content::before,
    .rtl-mode .timeline-item:nth-child(odd) .timeline-content::before {
        right: -30px;
        left: auto;
        border-left-color: white;
        border-right-color: transparent;
    }
    
    .rtl-mode .cta-buttons {
        flex-direction: column;
    }
}

/* PROJECTS GALLERY SECTION - PREMIUM ENHANCED */
.projects-gallery {
    padding: 120px 0;
    background: 
        linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #2a3441 100%),
        radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    position: relative;
    overflow: hidden;
    color: white;
}

.projects-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            135deg,
            transparent,
            transparent 80px,
            rgba(0, 212, 255, 0.05) 80px,
            rgba(0, 212, 255, 0.05) 81px
        );
    animation: slidePattern 20s linear infinite;
    z-index: 1;
}

@keyframes slidePattern {
    0% { transform: translateX(-100px) translateY(-100px); }
    100% { transform: translateX(100px) translateY(100px); }
}

.projects-gallery .container {
    position: relative;
    z-index: 2;
}

.projects-gallery h2 {
    text-align: center;
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 50%, #ffffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite;
    letter-spacing: -2px;
    line-height: 1.1;
    position: relative;
}

.projects-gallery h2::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: shimmer 3s linear infinite;
    border-radius: 2px;
}

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

.project-card {
    background: 
        linear-gradient(135deg, rgba(26, 35, 50, 0.9) 0%, rgba(42, 52, 65, 0.8) 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(10px);
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 
        0 25px 60px rgba(0, 212, 255, 0.2),
        0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 212, 255, 0.5);
}

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

.project-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image img {
    width: 80px;
    height: 80px;
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

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

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
    pointer-events: auto;
}

.project-overlay i {
    font-size: 2rem;
    color: #00d4ff;
    animation: pulse 2s ease-in-out infinite;
}

.project-info {
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.project-info h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
    line-height: 1.3;
}

.project-info p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.project-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.project-stats span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 212, 255, 0.15);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
}

.project-stats span:hover {
    background: rgba(0, 212, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
}

.project-stats span i {
    font-size: 0.8rem;
}

/* RESPONSIVE ENHANCEMENTS */
@media (max-width: 768px) {
    .projects-gallery {
        padding: 80px 0;
    }
    
    .projects-gallery h2 {
        font-size: 2.5rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 3rem;
    }
    
    .project-card {
        margin: 0 1rem;
    }
    
    .service-hero h1 {
        font-size: 3.5rem;
    }
    
    .service-hero p {
        font-size: 1.2rem;
    }
    
    .service-icon-large {
        width: 120px;
        height: 120px;
        font-size: 3rem;
    }
}

/* ===== FOOTER STYLES (FROM MAIN STYLES.CSS) ===== */
.footer {
    padding: 3rem 0;
    background: #0f1419;
    color: white;
}

.footer-content {
    grid-template-columns: 1fr;
    text-align: center;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
    color: #00d4ff;
    font-size: 1.2rem;
    font-weight: 700;
}

.footer-section h3 {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-section p {
    color: #b0b0b0;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #00d4ff;
}

/* Service Request Form Section */
.service-request {
    background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
    padding: 80px 0;
    margin-top: 4rem;
}

.request-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.request-info h2 {
    color: #00d4ff;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.request-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.request-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.benefit-item i {
    color: #00d4ff;
    font-size: 1.2rem;
    width: 20px;
}

.request-form {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.service-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    color: #00d4ff;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: 15px 18px;
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00d4ff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
    transform: translateY(-2px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* ENGLISH LTR OVERRIDE - PREVENT RTL LEAK */
html[lang="en"] .form-group input,
html[lang="en"] .form-group textarea,
html[lang="en"] .form-group input::placeholder,
html[lang="en"] .form-group textarea::placeholder,
body:not(.rtl-mode) .form-group input,
body:not(.rtl-mode) .form-group textarea,
body:not(.rtl-mode) .form-group input::placeholder,
body:not(.rtl-mode) .form-group textarea::placeholder {
    text-align: left !important;
    direction: ltr !important;
}

/* RTL FORMS - Hebrew alignment */
html[lang="he"] .form-group input,
html[lang="he"] .form-group textarea,
html[lang="he"] .form-group select,
html[lang="he"] .form-group input::placeholder,
html[lang="he"] .form-group textarea::placeholder,
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group textarea,
html[dir="rtl"] .form-group select,
html[dir="rtl"] .form-group input::placeholder,
html[dir="rtl"] .form-group textarea::placeholder,
body.rtl-mode .form-group input,
body.rtl-mode .form-group textarea,
body.rtl-mode .form-group select,
body.rtl-mode .form-group input::placeholder,
body.rtl-mode .form-group textarea::placeholder {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
}

/* Дополнительные стили для RTL форм */
.rtl-mode input,
.rtl-mode textarea,
.rtl-mode select {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
}

.rtl-mode input::placeholder,
.rtl-mode textarea::placeholder {
    text-align: right !important;
    direction: rtl !important;
}

/* Исправление для ввода текста справа налево */
.rtl-mode input[type="text"],
.rtl-mode input[type="email"],
.rtl-mode input[type="tel"],
.rtl-mode input[type="password"],
.rtl-mode textarea {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
}

/* RTL FORMS ONLY - Headers stay centered! */

.form-group select {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a2332 !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    appearance: none;
}

/* Ensure dropdown list items are visible in both light and dark sections */
.form-group select option {
    background: #ffffff !important;
    color: #1a2332 !important;
}

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

.submit-btn {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    border-radius: 16px;
    padding: 18px 30px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 212, 255, 0.3);
    background: linear-gradient(135deg, #0099cc, #007aa3);
}

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

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

/* Feature specs styling */
.feature-specs {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.feature-specs li {
    color: rgba(255, 255, 255, 0.7);
    padding: 0.3rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
}

.feature-specs li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #00d4ff;
    font-weight: bold;
}

/* Service highlights styling */
.service-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.highlight-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.highlight-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.highlight-item i {
    color: #00d4ff;
    font-size: 1.5rem;
    min-width: 30px;
}

.highlight-item h4 {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.highlight-item p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 768px) {
    .request-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .request-form {
        padding: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .request-info h2 {
        font-size: 2rem;
    }
    
    .service-highlights {
        grid-template-columns: 1fr;
    }
    
    .feature-specs {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .service-request {
        padding: 60px 0;
    }
    
    .request-form {
        padding: 1.5rem;
        border-radius: 16px;
    }
    
    .request-info h2 {
        font-size: 1.8rem;
    }
    
    .submit-btn {
        padding: 16px 24px;
        font-size: 1rem;
    }
}

/* ========================================
   NETWORK SOLUTIONS UNIQUE STYLES
   ======================================== */

/* Network Hero Section */
.network-hero {
    background: linear-gradient(135deg, #0a0f1e 0%, #1a2332 50%, #0d1829 100%);
    position: relative;
    overflow: hidden;
}

.network-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(0, 150, 255, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* Network Effects */
.network-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.network-nodes .node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #00d4ff;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    animation: networkPulse 2s ease-in-out infinite;
}

.network-nodes .node:nth-child(1) {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.network-nodes .node:nth-child(2) {
    top: 40%;
    left: 80%;
    animation-delay: 0.5s;
}

.network-nodes .node:nth-child(3) {
    top: 70%;
    left: 25%;
    animation-delay: 1s;
}

.network-nodes .node:nth-child(4) {
    top: 30%;
    left: 60%;
    animation-delay: 1.5s;
}

.network-nodes .node:nth-child(5) {
    top: 85%;
    left: 70%;
    animation-delay: 2s;
}

.network-nodes .connection-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
    animation: connectionFlow 3s linear infinite;
}

.network-nodes .connection-line:nth-child(6) {
    top: 20.5%;
    left: 15%;
    width: 45%;
    transform: rotate(15deg);
}

.network-nodes .connection-line:nth-child(7) {
    top: 40.5%;
    left: 25%;
    width: 35%;
    transform: rotate(-25deg);
}

.network-nodes .connection-line:nth-child(8) {
    top: 70.5%;
    left: 25%;
    width: 40%;
    transform: rotate(10deg);
}

@keyframes networkPulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.8); 
    }
    50% { 
        transform: scale(1.5); 
        box-shadow: 0 0 30px rgba(0, 212, 255, 1); 
    }
}

@keyframes connectionFlow {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* WiFi Waves */
.wifi-waves {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    z-index: 2;
}

.wifi-waves .wave {
    width: 60px;
    height: 60px;
    border: 2px solid #00d4ff;
    border-radius: 50%;
    position: absolute;
    opacity: 0;
    animation: wifiWave 2s ease-out infinite;
}

.wifi-waves .wave:nth-child(1) {
    animation-delay: 0s;
}

.wifi-waves .wave:nth-child(2) {
    animation-delay: 0.7s;
}

.wifi-waves .wave:nth-child(3) {
    animation-delay: 1.4s;
}

@keyframes wifiWave {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Network Icon */
.network-icon {
    position: relative;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3);
}

.network-icon i {
    font-size: 3rem;
    color: white;
}

.signal-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    gap: 2px;
}

.signal-indicator span {
    width: 4px;
    height: 10px;
    background: #00ff88;
    animation: signalStrength 1s ease-in-out infinite;
}

.signal-indicator span:nth-child(1) {
    animation-delay: 0s;
    height: 6px;
}

.signal-indicator span:nth-child(2) {
    animation-delay: 0.2s;
    height: 8px;
}

.signal-indicator span:nth-child(3) {
    animation-delay: 0.4s;
    height: 10px;
}

.signal-indicator span:nth-child(4) {
    animation-delay: 0.6s;
    height: 12px;
}

@keyframes signalStrength {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Network Title */
.network-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin: 2rem 0;
}

.network-title .gradient-text {
    background: linear-gradient(135deg, #00d4ff, #0099cc, #006699);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease-in-out infinite;
}

.network-title .sub-title {
    color: #ffffff;
    font-size: 2rem;
    display: block;
    margin-top: 0.5rem;
}

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

/* Speed Display */
.speed-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.speed-meter {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.speed-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00d4ff;
    animation: speedCounter 2s ease-out;
}

.speed-unit {
    font-size: 1rem;
    color: #ffffff;
    opacity: 0.8;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00ff88;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: #00ff88;
    border-radius: 50%;
    animation: statusBlink 1.5s ease-in-out infinite;
}

@keyframes speedCounter {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Network Details Section */
.network-details {
    background: linear-gradient(180deg, #0a0f1e 0%, #1a2332 100%);
}

.network-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
    color: #00d4ff;
    margin-bottom: 2rem;
}

.network-section-title i {
    font-size: 2rem;
    color: #00d4ff;
}

/* Network Topology */
.network-topology {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.topology-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.device-icon {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    position: relative;
    transition: all 0.3s ease;
}

.device-icon.router {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
}

.device-icon.switch {
    background: linear-gradient(135deg, #0099cc, #006699);
}

.device-icon.access-point {
    background: linear-gradient(135deg, #006699, #004466);
}

.device-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
}

.topology-item span {
    color: #ffffff;
    font-weight: 500;
    text-align: center;
}

.connection-line.horizontal {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #0099cc);
    border-radius: 2px;
    position: relative;
    animation: dataFlow 2s linear infinite;
}

@keyframes dataFlow {
    0% {
        box-shadow: -20px 0 10px rgba(0, 212, 255, 0.8);
    }
    100% {
        box-shadow: 20px 0 10px rgba(0, 212, 255, 0.8);
    }
}

/* Network Cards */
.network-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.network-card {
    position: relative;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.network-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 212, 255, 0.4);
}

.network-card .card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.network-card .card-content h4 {
    color: #00d4ff;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.network-card .card-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.service-badge {
    display: inline-block;
    background: linear-gradient(135deg, #00ff88, #00cc6a);
    color: #001a0d;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.network-card:hover .card-glow {
    opacity: 1;
}

/* Network Statistics */
.network-stats {
    display: flex;
    justify-content: space-around;
    margin: 4rem 0;
    padding: 2rem;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

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

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #00d4ff;
    display: block;
    animation: countUp 2s ease-out;
    direction: ltr !important;
    text-align: center !important;
    unicode-bidi: embed !important;
}

.stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-top: 0.5rem;
}

@keyframes countUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Network Process */
.network-process {
    margin: 4rem 0;
}

.process-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    color: #00d4ff;
    margin-bottom: 3rem;
    text-align: center;
    justify-content: center;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.step-item {
    position: relative;
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.step-item:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 212, 255, 0.4);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
}

.step-content h4 {
    color: #00d4ff;
    margin: 1rem 0;
    font-size: 1.2rem;
}

.step-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .network-title {
        font-size: 2.5rem;
    }
    
    .network-title .sub-title {
        font-size: 1.5rem;
    }
    
    .network-topology {
        flex-direction: column;
        gap: 1rem;
    }
    
    .connection-line.horizontal {
        width: 3px;
        height: 30px;
        transform: rotate(90deg);
    }
    
    .network-stats {
        flex-direction: column;
        gap: 2rem;
    }
    
    .speed-display {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ========================================
   VIDEO SURVEILLANCE UNIQUE STYLES
   ======================================== */

/* Security Hero Section */
.security-hero {
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1b1b 50%, #1f0f0f 100%);
    position: relative;
    overflow: hidden;
}

.security-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(255, 77, 77, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255, 140, 0, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* Security Grid Effects */
.security-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.security-grid .grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(255, 77, 77, 0.3), transparent);
    animation: gridScan 4s linear infinite;
}

.security-grid .grid-line:nth-child(1) {
    top: 25%;
    left: 0;
    right: 0;
    height: 1px;
    animation-delay: 0s;
}

.security-grid .grid-line:nth-child(2) {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    animation-delay: 1s;
}

.security-grid .grid-line:nth-child(3) {
    left: 25%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 77, 77, 0.3), transparent);
    animation-delay: 2s;
}

.security-grid .grid-line:nth-child(4) {
    left: 75%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 77, 77, 0.3), transparent);
    animation-delay: 3s;
}

@keyframes gridScan {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Surveillance Zones */
.surveillance-zones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.surveillance-zones .zone {
    position: absolute;
    border: 2px solid rgba(255, 77, 77, 0.4);
    border-radius: 10px;
    animation: zoneHighlight 3s ease-in-out infinite;
}

.surveillance-zones .zone-1 {
    top: 20%;
    left: 10%;
    width: 150px;
    height: 100px;
    animation-delay: 0s;
}

.surveillance-zones .zone-2 {
    top: 60%;
    right: 15%;
    width: 120px;
    height: 80px;
    animation-delay: 1s;
}

.surveillance-zones .zone-3 {
    bottom: 20%;
    left: 30%;
    width: 100px;
    height: 60px;
    animation-delay: 2s;
}

@keyframes zoneHighlight {
    0%, 100% { 
        border-color: rgba(255, 77, 77, 0.4);
        box-shadow: none;
    }
    50% { 
        border-color: rgba(255, 77, 77, 0.8);
        box-shadow: 0 0 20px rgba(255, 77, 77, 0.5);
    }
}

/* Security Alerts */
.security-alerts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.alert-pulse {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff4d4d;
    border-radius: 50%;
    animation: alertPulse 2s ease-in-out infinite;
}

.alert-pulse:nth-child(1) {
    top: 30%;
    right: 20%;
    animation-delay: 0s;
}

.alert-pulse:nth-child(2) {
    bottom: 30%;
    left: 25%;
    animation-delay: 1s;
}

@keyframes alertPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(255, 77, 77, 0);
    }
}

/* Security Icon */
.security-icon {
    position: relative;
    background: linear-gradient(135deg, #ff4d4d, #ff8c00);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(255, 77, 77, 0.3);
}

.security-icon i {
    font-size: 3rem;
    color: white;
}

.camera-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: white;
}

.recording-dot {
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    animation: recordingBlink 1s ease-in-out infinite;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff4d4d, transparent);
    animation: scanLine 2s linear infinite;
}

@keyframes recordingBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes scanLine {
    0% { transform: translateY(0); }
    100% { transform: translateY(100px); }
}

/* Security Title */
.security-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center !important;
    margin: 2rem 0;
}

.gradient-text-security {
    background: linear-gradient(135deg, #ff4d4d, #ff8c00, #ff6b35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: securityGradientShift 3s ease-in-out infinite;
}

.sub-title-security {
    color: #ffffff;
    font-size: 2rem;
    display: block;
    margin-top: 0.5rem;
}

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

/* Security Status Display */
.security-status {
    margin-top: 2rem;
}

.status-panel {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.camera-count,
.recording-status,
.alert-level {
    text-align: center;
}

.count-value,
.level-value {
    font-size: 2rem;
    font-weight: 700;
    color: #ff4d4d;
    display: block;
}

.count-label,
.level-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.rec-indicator {
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    animation: recordingBlink 1s ease-in-out infinite;
}

.recording-status span {
    color: #ff4d4d;
    font-weight: 600;
}

/* Security Details Section */
.security-details {
    background: linear-gradient(180deg, #1a0a0a 0%, #2d1b1b 100%);
}

.security-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 2.5rem;
    color: #ff4d4d;
    margin-bottom: 2rem;
}

.security-section-title i {
    font-size: 2rem;
    color: #ff8c00;
}

/* Camera Control Panel */
.camera-control-panel {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 77, 77, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 77, 77, 0.2);
}

.camera-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.camera-screen {
    position: relative;
    background: #000;
    border-radius: 10px;
    height: 200px;
    overflow: hidden;
    border: 2px solid #ff4d4d;
}

.camera-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    color: #ff4d4d;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    z-index: 3;
}

.motion-detector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.detection-zone {
    width: 100px;
    height: 60px;
    border: 2px dashed #ff4d4d;
    animation: motionDetection 2s ease-in-out infinite;
}

@keyframes motionDetection {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.camera-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.control-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 77, 77, 0.2);
    border: 1px solid #ff4d4d;
    border-radius: 50%;
    color: #ff4d4d;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.control-btn:hover,
.control-btn.active {
    background: #ff4d4d;
    color: white;
}

.camera-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.camera-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 77, 77, 0.05);
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.camera-item:hover,
.camera-item.active {
    background: rgba(255, 77, 77, 0.1);
    border-color: #ff4d4d;
}

.camera-item i {
    color: #ff4d4d;
    font-size: 1.2rem;
}

.camera-item span {
    color: white;
    flex: 1;
}

.status-led {
    width: 8px;
    height: 8px;
    background: #00ff00;
    border-radius: 50%;
    animation: statusBlink 2s ease-in-out infinite;
}

/* Security Cards */
.security-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.security-card {
    position: relative;
    background: rgba(255, 77, 77, 0.05);
    border: 1px solid rgba(255, 77, 77, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.security-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 77, 77, 0.4);
}

.security-card .card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff4d4d, #ff8c00);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.security-card .card-content h4 {
    color: #ff4d4d;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.security-card .card-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.security-badge {
    background: linear-gradient(135deg, #ff8c00, #ff6b35);
    color: #1a0a0a;
}

.security-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.security-card:hover .security-glow {
    opacity: 1;
}

/* Security Statistics */
.security-stats {
    display: flex;
    justify-content: space-around;
    margin: 4rem 0;
    padding: 2rem;
    background: rgba(255, 77, 77, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 77, 77, 0.2);
}

.security-number {
    color: #ff4d4d;
}

/* Force RTL fix for security numbers containing + or % */
.rtl-mode .security-number,
html[lang="he"] .security-number,
body.rtl-mode .security-number,
html[dir="rtl"] .security-number {
    direction: ltr !important;
    text-align: center !important;
    unicode-bidi: embed !important;
}

/* Security Process */
.security-process {
    margin: 4rem 0;
}

.security-process-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    color: #ff4d4d;
    margin-bottom: 3rem;
    text-align: center;
    justify-content: center;
}

.security-step {
    background: rgba(255, 77, 77, 0.05);
    border: 1px solid rgba(255, 77, 77, 0.2);
}

.security-step:hover {
    border-color: rgba(255, 77, 77, 0.4);
}

.security-step-number {
    background: linear-gradient(135deg, #ff4d4d, #ff8c00);
}

.security-step .step-content h4 {
    color: #ff4d4d;
}

/* Responsive */
@media (max-width: 768px) {
    .security-title {
        font-size: 2.5rem;
    }
    
    .sub-title-security {
        font-size: 1.5rem;
    }
    
    .status-panel {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .camera-control-panel {
        grid-template-columns: 1fr;
    }
    
    .security-stats {
        flex-direction: column;
        gap: 2rem;
    }
}

/* ========================================
   ACCESS CONTROL UNIQUE STYLES
   ======================================== */

/* Access Hero Section */
.access-hero {
    background: linear-gradient(135deg, #0a1a0a 0%, #1b2d1b 50%, #0f1f0f 100%);
    position: relative;
    overflow: hidden;
}

.access-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 25%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* Access Lock Effects */
.access-locks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.lock-animation {
    position: absolute;
    width: 40px;
    height: 40px;
    color: #22c55e;
    font-size: 1.5rem;
    animation: lockFloat 3s ease-in-out infinite;
}

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

.lock-animation:nth-child(2) {
    top: 60%;
    right: 25%;
    animation-delay: 1s;
}

.lock-animation:nth-child(3) {
    bottom: 30%;
    left: 60%;
    animation-delay: 2s;
}

@keyframes lockFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
}

/* Biometric Scanner */
.biometric-scanner {
    position: absolute;
    top: 20%;
    right: 15%;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 50%;
    z-index: 2;
}

.scanner-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
    animation: scannerSweep 2s linear infinite;
}

.scanner-grid {
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 1px, transparent 1px);
    background-size: 8px 8px;
    animation: gridPulse 3s ease-in-out infinite;
}

@keyframes scannerSweep {
    0% { transform: translateY(-40px) rotate(0deg); }
    100% { transform: translateY(40px) rotate(180deg); }
}

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

/* Access Zones */
.access-zones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.access-zones .zone {
    position: absolute;
    border-radius: 8px;
    animation: zoneAccess 4s ease-in-out infinite;
}

.access-zones .zone.secure {
    top: 30%;
    left: 10%;
    width: 80px;
    height: 50px;
    border: 2px solid #22c55e;
    animation-delay: 0s;
}

.access-zones .zone.authorized {
    top: 50%;
    right: 30%;
    width: 100px;
    height: 60px;
    border: 2px solid #10b981;
    animation-delay: 1.5s;
}

.access-zones .zone.restricted {
    bottom: 25%;
    left: 40%;
    width: 60px;
    height: 40px;
    border: 2px solid #059669;
    animation-delay: 3s;
}

@keyframes zoneAccess {
    0%, 100% {
        border-color: rgba(34, 197, 94, 0.4);
        box-shadow: none;
    }
    50% {
        border-color: rgba(34, 197, 94, 0.9);
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
    }
}

/* Access Icon */
.access-icon {
    position: relative;
    background: linear-gradient(135deg, #22c55e, #10b981);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3);
}

.access-icon i {
    font-size: 3rem;
    color: white;
}

.security-level {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: white;
}

.level-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: levelBlink 1.5s ease-in-out infinite;
}

.level-indicator.high {
    background: #22c55e;
}

.access-badge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

@keyframes levelBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Access Title */
.access-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin: 2rem 0;
}

.gradient-text-access {
    background: linear-gradient(135deg, #22c55e, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: accessGradientShift 3s ease-in-out infinite;
}

.sub-title-access {
    color: #ffffff;
    font-size: 2rem;
    display: block;
    margin-top: 0.5rem;
}

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

/* Access Dashboard */
.access-dashboard {
    margin-top: 2rem;
}

.dashboard-panel {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.access-points,
.access-level,
.active-users {
    text-align: center;
}

.point-value,
.user-count {
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
    display: block;
}

.point-label,
.level-label,
.user-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.level-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.level-badge.secure {
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: white;
}

/* Access Details Section */
.access-details {
    background: linear-gradient(180deg, #0a1a0a 0%, #1b2d1b 100%);
}

.access-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
    color: #22c55e;
    margin-bottom: 2rem;
}

.access-section-title i {
    font-size: 2rem;
    color: #10b981;
}

/* Access Control Interface */
.access-control-interface {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.access-dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.dashboard-screen {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid #22c55e;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
}

.dashboard-header h4 {
    color: #22c55e;
    font-size: 1.2rem;
    margin: 0;
}

.system-status {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.system-status.online {
    background: #22c55e;
    color: white;
}

.access-log {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.log-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.log-entry.granted {
    border-left-color: #22c55e;
}

.log-entry.denied {
    border-left-color: #ef4444;
}

.log-entry i {
    font-size: 1.1rem;
}

.log-entry.granted i {
    color: #22c55e;
}

.log-entry.denied i {
    color: #ef4444;
}

.log-entry span {
    color: white;
    flex: 1;
}

.log-entry time {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.access-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.method-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.method-card:hover,
.method-card.active {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.method-card i {
    color: #22c55e;
    font-size: 1.3rem;
}

.method-card span {
    color: white;
    flex: 1;
}

.method-status {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: statusBlink 2s ease-in-out infinite;
}

/* Access Cards */
.access-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.access-card {
    position: relative;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.access-card:hover {
    transform: translateY(-10px);
    border-color: rgba(34, 197, 94, 0.4);
}

.access-card .card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #22c55e, #10b981);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.access-card .card-content h4 {
    color: #22c55e;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.access-card .card-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.access-badge-green {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.access-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.access-card:hover .access-glow {
    opacity: 1;
}

/* Access Statistics */
.access-stats {
    display: flex;
    justify-content: space-around;
    margin: 4rem 0;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.access-number {
    color: #22c55e;
}

/* Access Process */
.access-process {
    margin: 4rem 0;
}

.access-process-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    color: #22c55e;
    margin-bottom: 3rem;
    text-align: center;
    justify-content: center;
}

.access-step {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.access-step:hover {
    border-color: rgba(34, 197, 94, 0.4);
}

.access-step-number {
    background: linear-gradient(135deg, #22c55e, #10b981);
}

.access-step .step-content h4 {
    color: #22c55e;
}

/* Responsive */
@media (max-width: 768px) {
    .access-title {
        font-size: 2.5rem;
    }
    
    .sub-title-access {
        font-size: 1.5rem;
    }
    
    .dashboard-panel {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .access-dashboard-main {
        grid-template-columns: 1fr;
    }
    
    .access-stats {
        flex-direction: column;
        gap: 2rem;
    }
}

/* ========================================
   TECHNICAL SUPPORT UNIQUE STYLES
   ======================================== */

/* Support Hero Section */
.support-hero {
    background: linear-gradient(135deg, #1a0a1a 0%, #2d1b2d 50%, #1f0f1f 100%);
    position: relative;
    overflow: hidden;
}

.support-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* Support Tool Effects */
.support-tools {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.tool-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    color: #9333ea;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-icon.rotating {
    top: 20%;
    left: 15%;
    animation: toolRotate 4s linear infinite;
}

.tool-icon.floating {
    top: 60%;
    right: 20%;
    animation: toolFloat 3s ease-in-out infinite;
}

.tool-icon.pulsing {
    bottom: 30%;
    left: 30%;
    animation: toolPulse 2s ease-in-out infinite;
}

.tool-icon.spinning {
    top: 40%;
    right: 40%;
    animation: toolSpin 5s linear infinite;
}

@keyframes toolRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes toolFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-25px) scale(1.1);
        opacity: 1;
    }
}

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

@keyframes toolSpin {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(0.9); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Diagnostic Waves */
.diagnostic-waves {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 200px;
    height: 100px;
    z-index: 2;
}

.wave-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #9333ea, transparent);
    animation: diagnosticWave 3s ease-in-out infinite;
}

.wave-line:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}

.wave-line:nth-child(2) {
    top: 50%;
    animation-delay: 1s;
}

.wave-line:nth-child(3) {
    top: 80%;
    animation-delay: 2s;
}

@keyframes diagnosticWave {
    0%, 100% {
        transform: scaleX(0.5);
        opacity: 0.5;
    }
    50% {
        transform: scaleX(1.2);
        opacity: 1;
    }
}

/* Support Tickets */
.support-tickets {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.ticket {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    animation: ticketFloat 4s ease-in-out infinite;
}

.ticket.resolved {
    top: 25%;
    right: 15%;
    background: #22c55e;
    color: white;
    animation-delay: 0s;
}

.ticket.in-progress {
    top: 70%;
    left: 60%;
    background: #f59e0b;
    color: white;
    animation-delay: 1.5s;
}

.ticket.new {
    bottom: 25%;
    right: 30%;
    background: #ef4444;
    color: white;
    animation-delay: 3s;
}

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

/* Support Icon */
.support-icon {
    position: relative;
    background: linear-gradient(135deg, #9333ea, #a855f7);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(147, 51, 234, 0.3);
}

.support-icon i {
    font-size: 3rem;
    color: white;
}

.support-status {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: white;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: statusPulse 1.5s ease-in-out infinite;
}

.status-indicator.active {
    background: #22c55e;
}

.repair-animation {
    position: absolute;
    bottom: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    background: #f59e0b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    animation: repairWork 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes repairWork {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-15deg) scale(1.1);
    }
    75% {
        transform: rotate(15deg) scale(1.1);
    }
}

/* Support Title */
.support-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin: 2rem 0;
}

.gradient-text-support {
    background: linear-gradient(135deg, #9333ea, #a855f7, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: supportGradientShift 3s ease-in-out infinite;
}

.sub-title-support {
    color: #ffffff;
    font-size: 2rem;
    display: block;
    margin-top: 0.5rem;
}

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

/* Support Dashboard */
.support-dashboard {
    margin-top: 2rem;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2rem;
    background: rgba(147, 51, 234, 0.1);
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.support-metric {
    text-align: center;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #9333ea;
    display: block;
    margin-bottom: 0.5rem;
}

.metric-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* Support Details Section */
.support-details {
    background: linear-gradient(180deg, #1a0a1a 0%, #2d1b2d 100%);
}

.support-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
    color: #9333ea;
    margin-bottom: 2rem;
}

.support-section-title i {
    font-size: 2rem;
    color: #a855f7;
}

/* Support Control Center */
.support-control-center {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(147, 51, 234, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(147, 51, 234, 0.2);
}

.control-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.system-monitor {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid #9333ea;
}

.monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(147, 51, 234, 0.3);
}

.monitor-header h4 {
    color: #9333ea;
    font-size: 1.2rem;
    margin: 0;
}

.health-status {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.health-status.excellent {
    background: #22c55e;
    color: white;
}

.health-metrics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: white;
}

.metric-bar span:first-child {
    width: 80px;
    font-size: 0.9rem;
}

.metric-bar span:last-child {
    width: 40px;
    text-align: right;
    font-size: 0.9rem;
    color: #9333ea;
}

.bar {
    flex: 1;
    height: 8px;
    background: rgba(147, 51, 234, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.bar .fill {
    height: 100%;
    background: linear-gradient(90deg, #9333ea, #a855f7);
    animation: barFill 2s ease-out;
}

@keyframes barFill {
    0% { width: 0% !important; }
}

.support-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(147, 51, 234, 0.05);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-card:hover,
.action-card.active {
    background: rgba(147, 51, 234, 0.1);
    border-color: #9333ea;
}

.action-card i {
    color: #9333ea;
    font-size: 1.3rem;
}

.action-card span {
    color: white;
    flex: 1;
}

.action-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.action-status.running {
    background: #f59e0b;
    animation: statusBlink 1s ease-in-out infinite;
}

.action-status.completed {
    background: #22c55e;
}

.action-status.pending {
    background: #6b7280;
}

/* Support Cards */
.support-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.support-card {
    position: relative;
    background: rgba(147, 51, 234, 0.05);
    border: 1px solid rgba(147, 51, 234, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.support-card:hover {
    transform: translateY(-10px);
    border-color: rgba(147, 51, 234, 0.4);
}

.support-card .card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #9333ea, #a855f7);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.support-card .card-content h4 {
    color: #9333ea;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.support-card .card-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.support-badge {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    color: white;
}

.support-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.support-card:hover .support-glow {
    opacity: 1;
}

/* Support Statistics */
.support-stats {
    display: flex;
    justify-content: space-around;
    margin: 4rem 0;
    padding: 2rem;
    background: rgba(147, 51, 234, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(147, 51, 234, 0.2);
}

.support-number {
    color: #9333ea;
}

/* Support Process */
.support-process {
    margin: 4rem 0;
}

.support-process-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    color: #9333ea;
    margin-bottom: 3rem;
    text-align: center;
    justify-content: center;
}

.support-step {
    background: rgba(147, 51, 234, 0.05);
    border: 1px solid rgba(147, 51, 234, 0.2);
}

.support-step:hover {
    border-color: rgba(147, 51, 234, 0.4);
}

.support-step-number {
    background: linear-gradient(135deg, #9333ea, #a855f7);
}

.support-step .step-content h4 {
    color: #9333ea;
}

/* Responsive */
@media (max-width: 768px) {
    .support-title {
        font-size: 2.5rem;
    }
    
    .sub-title-support {
        font-size: 1.5rem;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .control-main {
        grid-template-columns: 1fr;
    }
    
    .support-stats {
        flex-direction: column;
        gap: 2rem;
    }
}

/* ========================================
   ACCESS CONTROL UNIQUE STYLES
   ======================================== */

/* Access Hero Section */
.access-hero {
    background: linear-gradient(135deg, #0a1a0a 0%, #1b2d1b 50%, #0f1f0f 100%);
    position: relative;
    overflow: hidden;
}

.access-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 25%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    z-index: 1;
}

/* Access Lock Effects */
.access-locks {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.lock-animation {
    position: absolute;
    width: 40px;
    height: 40px;
    color: #22c55e;
    font-size: 1.5rem;
    animation: lockFloat 3s ease-in-out infinite;
}

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

.lock-animation:nth-child(2) {
    top: 60%;
    right: 25%;
    animation-delay: 1s;
}

.lock-animation:nth-child(3) {
    bottom: 30%;
    left: 60%;
    animation-delay: 2s;
}

@keyframes lockFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
}

/* Biometric Scanner */
.biometric-scanner {
    position: absolute;
    top: 20%;
    right: 15%;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 50%;
    z-index: 2;
}

.scanner-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
    animation: scannerSweep 2s linear infinite;
}

.scanner-grid {
    position: absolute;
    top: 20%;
    left: 20%;
    right: 20%;
    bottom: 20%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2) 1px, transparent 1px);
    background-size: 8px 8px;
    animation: gridPulse 3s ease-in-out infinite;
}

@keyframes scannerSweep {
    0% { transform: translateY(-40px) rotate(0deg); }
    100% { transform: translateY(40px) rotate(180deg); }
}

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

/* Access Zones */
.access-zones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

.access-zones .zone {
    position: absolute;
    border-radius: 8px;
    animation: zoneAccess 4s ease-in-out infinite;
}

.access-zones .zone.secure {
    top: 30%;
    left: 10%;
    width: 80px;
    height: 50px;
    border: 2px solid #22c55e;
    animation-delay: 0s;
}

.access-zones .zone.authorized {
    top: 50%;
    right: 30%;
    width: 100px;
    height: 60px;
    border: 2px solid #10b981;
    animation-delay: 1.5s;
}

.access-zones .zone.restricted {
    bottom: 25%;
    left: 40%;
    width: 60px;
    height: 40px;
    border: 2px solid #059669;
    animation-delay: 3s;
}

@keyframes zoneAccess {
    0%, 100% {
        border-color: rgba(34, 197, 94, 0.4);
        box-shadow: none;
    }
    50% {
        border-color: rgba(34, 197, 94, 0.9);
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
    }
}

/* Access Icon */
.access-icon {
    position: relative;
    background: linear-gradient(135deg, #22c55e, #10b981);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(34, 197, 94, 0.3);
}

.access-icon i {
    font-size: 3rem;
    color: white;
}

.security-level {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    color: white;
}

.level-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: levelBlink 1.5s ease-in-out infinite;
}

.level-indicator.high {
    background: #22c55e;
}

.access-badge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

@keyframes levelBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Access Title */
.access-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin: 2rem 0;
}

.gradient-text-access {
    background: linear-gradient(135deg, #22c55e, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: accessGradientShift 3s ease-in-out infinite;
}

.sub-title-access {
    color: #ffffff;
    font-size: 2rem;
    display: block;
    margin-top: 0.5rem;
}

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

/* Access Dashboard */
.access-dashboard {
    margin-top: 2rem;
}

.dashboard-panel {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.access-points,
.access-level,
.active-users {
    text-align: center;
}

.point-value,
.user-count {
    font-size: 2rem;
    font-weight: 700;
    color: #22c55e;
    display: block;
}

.point-label,
.level-label,
.user-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.level-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.level-badge.secure {
    background: linear-gradient(135deg, #22c55e, #10b981);
    color: white;
}

/* Access Details Section */
.access-details {
    background: linear-gradient(180deg, #0a1a0a 0%, #1b2d1b 100%);
}

.access-section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2.5rem;
    color: #22c55e;
    margin-bottom: 2rem;
}

.access-section-title i {
    font-size: 2rem;
    color: #10b981;
}

/* Access Control Interface */
.access-control-interface {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.access-dashboard-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.dashboard-screen {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    padding: 1.5rem;
    border: 1px solid #22c55e;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
}

.dashboard-header h4 {
    color: #22c55e;
    font-size: 1.2rem;
    margin: 0;
}

.system-status {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.system-status.online {
    background: #22c55e;
    color: white;
}

.access-log {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.log-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.log-entry.granted {
    border-left-color: #22c55e;
}

.log-entry.denied {
    border-left-color: #ef4444;
}

.log-entry i {
    font-size: 1.1rem;
}

.log-entry.granted i {
    color: #22c55e;
}

.log-entry.denied i {
    color: #ef4444;
}

.log-entry span {
    color: white;
    flex: 1;
}

.log-entry time {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.access-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.method-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.method-card:hover,
.method-card.active {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.method-card i {
    color: #22c55e;
    font-size: 1.3rem;
}

.method-card span {
    color: white;
    flex: 1;
}

.method-status {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: statusBlink 2s ease-in-out infinite;
}

/* Access Cards */
.access-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.access-card {
    position: relative;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.access-card:hover {
    transform: translateY(-10px);
    border-color: rgba(34, 197, 94, 0.4);
}

.access-card .card-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #22c55e, #10b981);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
}

.access-card .card-content h4 {
    color: #22c55e;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.access-card .card-content p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.access-badge-green {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.access-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.access-card:hover .access-glow {
    opacity: 1;
}

/* Access Statistics */
.access-stats {
    display: flex;
    justify-content: space-around;
    margin: 4rem 0;
    padding: 2rem;
    background: rgba(34, 197, 94, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.access-number {
    color: #22c55e;
}

/* Access Process */
.access-process {
    margin: 4rem 0;
}

.access-process-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    color: #22c55e;
    margin-bottom: 3rem;
    text-align: center;
    justify-content: center;
}

.access-step {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.access-step:hover {
    border-color: rgba(34, 197, 94, 0.4);
}

.access-step-number {
    background: linear-gradient(135deg, #22c55e, #10b981);
}

.access-step .step-content h4 {
    color: #22c55e;
}

/* Responsive */
@media (max-width: 768px) {
    .access-title {
        font-size: 2.5rem;
    }
    
    .sub-title-access {
        font-size: 1.5rem;
    }
    
    .dashboard-panel {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .access-dashboard-main {
        grid-template-columns: 1fr;
    }
    
    .access-stats {
        flex-direction: column;
        gap: 2rem;
    }
}

/* =============================================
   MODERN MOBILE ADAPTATION - FINAL VERSION
   ============================================= */

/* Body with open navigation */
body.nav-open {
    overflow: hidden;
}

/* Hamburger menu base styles */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 5px;
    margin-left: auto;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 3px 0;
    transition: 0.3s ease;
    border-radius: 2px;
}

/* Enhanced Mobile Breakpoints */
@media (max-width: 1200px) {
    .container {
        max-width: 90%;
        padding: 0 20px;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 992px) {
    /* Show hamburger menu */
    .hamburger {
        display: flex;
    }

    /* Navigation optimizations */
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(15, 20, 25, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 50px;
        transition: left 0.3s ease;
        z-index: 999;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        margin: 20px 0;
        width: 90%;
        text-align: center;
    }
    
    .nav-menu a {
        font-size: 1.2rem;
        padding: 15px 20px;
        width: 100%;
        display: block;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .nav-menu a:hover {
        background: rgba(59, 130, 246, 0.1);
        transform: translateX(10px);
    }
    
    /* Dropdown in mobile */
    .dropdown-menu {
        position: static;
        background: rgba(30, 41, 59, 0.9);
        border-radius: 10px;
        margin-top: 10px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    .dropdown.active .dropdown-menu {
        max-height: 300px;
    }
    
    .dropdown-item {
        padding: 12px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .dropdown-item:last-child {
        border-bottom: none;
    }
    
    /* Hamburger menu */
    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        padding: 5px;
    }
    
    .hamburger span {
        width: 25px;
        height: 3px;
        background: #fff;
        margin: 3px 0;
        transition: 0.3s;
        border-radius: 2px;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    
    /* Hero section tablet */
    .hero-content h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .hero-content p {
        font-size: 1.1rem;
        margin: 20px 0;
    }
    
    .service-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Base mobile styles */
    body {
        font-size: 16px;
    }
    
    .container {
        max-width: 95%;
        padding: 0 15px;
    }
    
    .logo {
        font-size: 1.3rem;
    }
    
    .logo-img {
        width: 42px !important;
        height: 42px !important;
    }
    
    /* Language switcher mobile */
    .language-switcher {
        top: 90px;
        right: 15px;
        scale: 0.9;
    }
    
    /* Hero mobile optimization */
    .service-hero {
        min-height: 70vh;
        padding: 80px 0 60px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
        line-height: 1.3;
        margin-bottom: 15px;
    }
    
    .hero-content h1 br {
        display: none;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin: 15px 0 25px;
        line-height: 1.5;
    }
    
    /* Service icon mobile */
    .service-icon-large {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }
    
    .service-icon-large i {
        font-size: 3rem;
    }
    
    /* Features grid mobile */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px 0;
    }
    
    .feature-card {
        padding: 25px 20px;
        text-align: center;
    }
    
    .feature-card h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .feature-card p {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    /* Services section mobile */
    .services-section {
        padding: 60px 0;
    }
    
    .services-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .service-item {
        margin-bottom: 40px;
        padding: 25px 20px;
    }
    
        .service-item h3 {
        font-size: 1.3rem;
        margin-bottom: 15px;
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .service-item p {
        font-size: 0.95rem;
        line-height: 1.5;
        color: #000000;
        font-weight: 600;
    }
    
    /* Gallery mobile */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-item {
        height: 250px;
    }
    
    .gallery-item h3 {
        font-size: 1.1rem;
    }
    
    .gallery-item p {
        font-size: 0.9rem;
    }
    
    /* Contact form mobile */
    .contact-section {
        padding: 60px 0;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-form {
        padding: 30px 20px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-control {
        padding: 12px 15px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .btn-primary {
        padding: 15px 30px;
        font-size: 1rem;
        width: 100%;
    }
    
    /* WhatsApp button mobile */
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    .whatsapp-float a {
        font-size: 1.5rem;
    }
    
    /* Stats mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .stat-item h3 {
        font-size: 1.8rem;
    }
    
    .stat-item p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile */
    .container {
        padding: 0 10px;
    }
    
    .hero-content h1 {
        font-size: 1.7rem;
    }
    
    .service-icon-large {
        width: 100px;
        height: 100px;
    }
    
    .service-icon-large i {
        font-size: 2.5rem;
    }
    
    /* LOGO MOBILE ADAPTATIONS */
    .logo-img {
        width: 42px !important;
        height: 42px !important;
    }
    
    .logo-text {
        font-size: 1.45rem !important;
        letter-spacing: 0.3px !important;
    }
    
    .logo {
        gap: 10px !important;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .feature-card {
        padding: 20px 15px;
    }
    
    .contact-form {
        padding: 25px 15px;
    }
    
    .gallery-item {
        height: 220px;
    }
    
    .language-switcher {
        scale: 0.8;
    }
    
    /* МОБИЛЬНЫЕ СЕРВИСЫ - 2x2 СЕТКА */
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 0.5rem !important;
        margin: 1.5rem auto 0 auto !important;
        width: 100% !important;
        max-width: 1400px !important;
    }
    
    .service-item {
        padding: 1.5rem 1rem !important;
        min-height: 280px !important;
        border-radius: 16px !important;
    }
    
    .service-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .service-item h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.8rem !important;
    }
    
    .service-item p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }
}

/* Touch optimization */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .feature-card:hover,
    .gallery-item:hover {
        transform: none;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .nav-menu a:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Landscape mobile orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .service-hero {
        min-height: 60vh;
        padding: 60px 0 40px;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .nav-menu {
        height: calc(100vh - 60px);
        top: 60px;
    }
}

/* Dark mode adaptation */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #0a0e13 0%, #1a2332 100%);
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print styles */
@media print {
    .header,
    .whatsapp-float,
    .digital-background,
    .hero-effects {
        display: none !important;
    }
    /* Оставляем language-switcher видимым даже при печати для тестирования */
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero-content h1,
    .service-item h3 {
        color: black !important;
    }
}

/* EXPAND CONTAINER FOR SERVICES */
.service-details .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 2rem !important;
}

.service-content {
    display: block !important;
    grid-template-columns: none !important;
}

.service-description {
    max-width: none !important;
}

/* SIMPLE SERVICES GRID LAYOUT */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem auto 0 auto;
    width: 100%;
    max-width: 1400px;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Force 3+ columns on desktop */
@media (min-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* МОБИЛЬНЫЕ УСТРОЙСТВА - 2x2 СЕТКА */
@media (max-width: 599px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
        margin: 1.5rem auto 0 auto !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Убрал дублирующиеся медиа-запросы для избежания конфликтов */

.service-item {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 220px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 212, 255, 0.1);
}

.service-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 153, 204, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

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

.service-item:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.12),
        0 15px 35px rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.3);
}

.service-item i {
    font-size: 2.8rem;
    color: #00d4ff;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.05));
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 
        0 10px 25px rgba(0, 212, 255, 0.15),
        0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.service-item:hover i {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 15px 35px rgba(0, 212, 255, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.08));
}

.service-item h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a2332;
    margin-bottom: 1rem;
    line-height: 1.3;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.service-item:hover h3 {
    color: #00d4ff;
    transform: translateY(-2px);
}

.service-item p {
    color: #000000;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    flex-grow: 1;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.service-item:hover p {
    color: #475569;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 2rem auto 0 auto !important;
        max-width: 1400px !important;
    }
    
    /* Центрирование всех заголовков секций на мобильных */
    .service-description h2,
    .services-section h2,
    .service-section-title,
    .section-title,
    .process-title,
    .projects-gallery h2,
    .service-request h2,
    .request-info h2 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Центрирование описаний */
    .service-description p,
    .services-section p,
    .slide-in-left,
    .request-info p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Центрирование форм на мобильных */
    .service-form,
    .request-form,
    .form-group {
        text-align: center !important;
    }
    
    .form-group label {
        text-align: left !important;
        display: block !important;
        margin-bottom: 0.5rem !important;
    }
}

/* FIX: Center align all access cards content - иконки и текст по центру */
.access-card {
    text-align: center !important;
}

.access-card .card-icon {
    margin: 0 auto 1.5rem auto !important;
}

/* FIX: Center align all support cards content - фиолетовые карточки по центру */
.support-card {
    text-align: center !important;
}

.support-card .card-icon {
    margin: 0 auto 1.5rem auto !important;
}

/* FIX: Center align all security cards content - оранжевые карточки по центру */
.security-card {
    text-align: center !important;
}

.security-card .card-icon {
    margin: 0 auto 1.5rem auto !important;
}

/* WhatsApp Floating Button - плавающая кнопка для всех страниц сервисов */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #20B858);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
}

.whatsapp-float a {
    color: white;
    font-size: 1.8rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.whatsapp-float i {
    transition: transform 0.3s ease;
}

.whatsapp-float:hover i {
    transform: rotate(15deg);
}

@keyframes whatsappPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.7), 0 0 0 15px rgba(37, 211, 102, 0.1);
    }
}

/* Support Team Info Cards - красивые карточки вместо стремного SVG */
.support-team-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.team-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.team-card:hover {
    transform: translateY(-10px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 20px 50px rgba(139, 92, 246, 0.2);
}

.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
    transition: left 0.5s ease;
}

.team-card:hover::before {
    left: 100%;
}

.team-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    font-size: 2rem;
    color: white;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.team-card h4 {
    color: #8b5cf6;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.team-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.team-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 900;
    color: #8b5cf6;
    text-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
  .services-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem auto 0 auto !important;
    max-width: 1400px !important;
  }
  .service-item {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 1.2rem;
    text-align: center !important;
  }
  
  /* Центрирование всех элементов в карточках услуг */
  .service-item h3,
  .service-item p,
  .service-item i {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  .features-list,
  .service-features,
  .services-grid,
  .gallery-grid,
  .process-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .feature,
  .service-item,
  .gallery-item,
  .timeline-item {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 1.2rem !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  /* Центрирование текста в проектах */
  .project-card,
  .project-info,
  .project-stats {
    text-align: center !important;
  }
  
  .project-card h3,
  .project-card p,
  .project-stats span {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
  
  /* UNIFIED MOBILE NAVIGATION - RESPONSIVE & RTL-FRIENDLY */
  .nav-container,
  html[lang="he"] .nav-container,
  html[dir="rtl"] .nav-container,
  .rtl-mode .nav-container,
  body.rtl-mode .nav-container,
  body[dir="rtl"] .nav-container,
  html[lang="he"][dir="rtl"] .nav-container,
  body[lang="he"] .nav-container,
  body[lang="he"][dir="rtl"] .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.8rem 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  
  /* Logo positioning - respects RTL */
  .logo,
  html[lang="he"] .logo,
  html[dir="rtl"] .logo,
  .rtl-mode .logo,
  body.rtl-mode .logo,
  body[dir="rtl"] .logo,
  html[lang="he"][dir="rtl"] .logo,
  body[lang="he"] .logo,
  body[lang="he"][dir="rtl"] .logo,
  .nav-container .logo {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
    position: static !important;
  }
  
  
  html[lang="he"] .logo,
  html[dir="rtl"] .logo,
  .rtl-mode .logo {
    order: 1 !important;
    flex-direction: row !important;
  }
  
  /* Элементы внутри логотипа не должны менять порядок */
  html[lang="he"] .logo-img,
  html[dir="rtl"] .logo-img,
  .rtl-mode .logo-img {
    order: 1 !important;
  }
  
  html[lang="he"] .logo-text,
  html[dir="rtl"] .logo-text,
  .rtl-mode .logo-text {
    order: 0 !important;
}

/* ===== FOOTER RESPONSIVE & RTL STYLES (FROM MAIN STYLES.CSS) ===== */

/* Mobile Footer Styles */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* RTL Footer Styles */
.rtl-mode .footer-content {
    direction: rtl;
    text-align: center !important;
}

.rtl-mode .footer-section,
html[lang="he"] .footer-section,
html[dir="rtl"] .footer-section {
    text-align: center !important;
    direction: rtl !important;
}

.rtl-mode .footer-section h3,
.rtl-mode .footer-section h4,
html[lang="he"] .footer-section h3,
html[lang="he"] .footer-section h4,
html[dir="rtl"] .footer-section h3,
html[dir="rtl"] .footer-section h4 {
    text-align: center !important;
}

.rtl-mode .footer-section ul,
html[lang="he"] .footer-section ul,
html[dir="rtl"] .footer-section ul {
    text-align: center !important;
}

.rtl-mode .footer-section ul li,
html[lang="he"] .footer-section ul li,  
html[dir="rtl"] .footer-section ul li {
    text-align: center !important;
}
  
  /* Универсальные стили для корректного отображения логотипа на всех страницах */
  .logo {
    flex-direction: row !important;
  }
  
  .logo-img {
    order: 1 !important;
  }
  
  .logo-text {
    order: 2 !important;
  }

  body, html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }


/* DESKTOP VIEWPORT FIX - ENSURE PROPER HEIGHT ON PC */
@media screen and (min-width: 769px) {
    .offcanvas-menu {
        height: 100vh !important; /* Standard viewport height for desktop */
        max-height: none !important; /* Remove mobile restrictions */
    }
    
    /* Ensure body works properly on desktop */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    html {
        height: auto !important; /* Let content determine height */
    }
}

/* MOBILE VIEWPORT FIX - PREVENT CONTENT CLIPPING ON CHROME MOBILE */
@media screen and (max-width: 768px) {
    .offcanvas-menu {
        height: 100dvh !important; /* Dynamic viewport height for mobile */
        min-height: 100vh !important; /* Fallback */
    }
    
    /* Ensure body doesn't overflow on mobile */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* Fix for mobile Chrome address bar hiding */
    html {
        height: 100%;
        height: 100dvh;
    }
}

/* RTL WHATSAPP BUTTON POSITIONING - MOVE TO RIGHT FOR HEBREW */
.rtl-mode .whatsapp-float,
html[lang="he"] .whatsapp-float,
html[dir="rtl"] .whatsapp-float {
    right: 30px !important;
    left: auto !important;
}

/* Mobile RTL WhatsApp positioning */
@media screen and (max-width: 768px) {
    .rtl-mode .whatsapp-float,
    html[lang="he"] .whatsapp-float,
    html[dir="rtl"] .whatsapp-float {
        right: 20px !important;
        left: auto !important;
    }
}

html[lang="he"] .whatsapp-float,
html[dir="rtl"] .whatsapp-float {
    right: 20px !important;
    left: auto !important;
}

html[lang="he"] .nav-menu,
html[dir="rtl"] .nav-menu,
.rtl-mode .nav-menu {
    direction: rtl !important;
    text-align: right !important;
}

/* === RTL LANGUAGE SWITCHER === */
html[lang="he"] .language-switcher,
html[dir="rtl"] .language-switcher,
.rtl-mode .language-switcher {
    left: 20px !important;
    right: auto !important;
}

/* === RTL CHECKBOX SPACING === */
html[lang="he"] .verification-checkbox,
html[dir="rtl"] .verification-checkbox,
body.rtl-mode .verification-checkbox {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
}

html[lang="he"] .verification-checkbox .checkmark,
html[dir="rtl"] .verification-checkbox .checkmark,
body.rtl-mode .verification-checkbox .checkmark {
    margin-right: 0 !important;
    margin-left: 20px !important;
}

html[lang="he"] .verification-checkbox span,
html[dir="rtl"] .verification-checkbox span,
body.rtl-mode .verification-checkbox span {
    text-align: right !important;
    direction: rtl !important;
}

/* ========================================
   ЦЕНТРИРОВАНИЕ ВСЕХ ЗАГОЛОВКОВ НА СТРАНИЦАХ СЕРВИСОВ
   ======================================== */

/* Центрирование всех заголовков */
h1, h2, h3, h4, h5, h6,
.access-section-title,
.support-section-title,
.access-title,
.support-title,
.process-title,
.access-process-title,
.support-process-title,
.hero-content h1,
.service-content h2,
.service-content h3,
.service-description h2,
.service-description h3,
.projects-gallery h2,
.service-request h2 {
    text-align: center !important;
}

/* RTL центрирование заголовков */
.rtl-mode h1, 
.rtl-mode h2, 
.rtl-mode h3, 
.rtl-mode h4, 
.rtl-mode h5, 
.rtl-mode h6,
.rtl-mode .access-section-title,
.rtl-mode .support-section-title,
.rtl-mode .access-title,
.rtl-mode .support-title,
.rtl-mode .process-title,
.rtl-mode .access-process-title,
.rtl-mode .support-process-title,
.rtl-mode .hero-content h1,
.rtl-mode .service-content h2,
.rtl-mode .service-content h3,
.rtl-mode .service-description h2,
.rtl-mode .service-description h3,
.rtl-mode .projects-gallery h2,
.rtl-mode .service-request h2 {
    text-align: center !important;
}

/* Центрирование заголовков в формах */
.service-form h2,
.service-form h3,
.service-form h4,
.request-info h2,
.request-info h3 {
    text-align: center !important;
}

.rtl-mode .service-form h2,
.rtl-mode .service-form h3,
.rtl-mode .service-form h4,
.rtl-mode .request-info h2,
.rtl-mode .request-info h3 {
    text-align: center !important;
}

/* Центрирование заголовков в проектах */
.project-card h3,
.project-info h3 {
    text-align: center !important;
}

.rtl-mode .project-card h3,
.rtl-mode .project-info h3 {
    text-align: center !important;
}

/* Специальное центрирование для hero заголовков */
.service-hero h1,
.service-hero .access-title,
.service-hero .support-title,
.hero-content h1 {
    text-align: center !important;
}

.rtl-mode .service-hero h1,
.rtl-mode .service-hero .access-title,
.rtl-mode .service-hero .support-title,
.rtl-mode .hero-content h1 {
    text-align: center !important;
}

/* Центрирование для всех секций */
.service-details h2,
.service-details h3,
.service-process h3,
.projects-gallery h2,
.service-request h2,
.access-details h2,
.support-details h2 {
    text-align: center !important;
}

.rtl-mode .service-details h2,
.rtl-mode .service-details h3,
.rtl-mode .service-process h3,
.rtl-mode .projects-gallery h2,
.rtl-mode .service-request h2,
.rtl-mode .access-details h2,
.rtl-mode .support-details h2 {
    text-align: center !important;
}

/* Специальное центрирование для конкретных заголовков */
h2.access-section-title,
h2.support-section-title,
h2.security-section-title,
h2.fade-in-up,
.service-description h2 {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.rtl-mode h2.access-section-title,
.rtl-mode h2.support-section-title,
.rtl-mode h2.security-section-title,
.rtl-mode h2.fade-in-up,
.rtl-mode .service-description h2 {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Центрирование для всех заголовков в services-section */
.services-section h2,
.services-section h3 {
    text-align: center !important;
}

.rtl-mode .services-section h2,
.rtl-mode .services-section h3 {
    text-align: center !important;
}

/* Переопределение базовых стилей заголовков для центрирования */
.access-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.support-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.security-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

/* RTL версии */
.rtl-mode .access-section-title,
.rtl-mode .support-section-title,
.rtl-mode .security-section-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    text-align: center !important;
}

/* Центрирование заголовков без специальных классов */
.service-description > h2,
.services-section > h2 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

.rtl-mode .service-description > h2,
.rtl-mode .services-section > h2 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Дополнительные стили для RTL форм на сервисных страницах */
html[lang="he"] .form-group input,
html[lang="he"] .form-group textarea,
html[lang="he"] .form-group select,
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group textarea,
html[dir="rtl"] .form-group select,
body.rtl-mode .form-group input,
body.rtl-mode .form-group textarea,
body.rtl-mode .form-group select {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
}

/* RTL для placeholder */
html[lang="he"] .form-group input::placeholder,
html[lang="he"] .form-group textarea::placeholder,
html[dir="rtl"] .form-group input::placeholder,
html[dir="rtl"] .form-group textarea::placeholder,
body.rtl-mode .form-group input::placeholder,
body.rtl-mode .form-group textarea::placeholder {
    text-align: right !important;
    direction: rtl !important;
}

/* RTL для checkbox и radio */
html[lang="he"] .form-group label,
html[dir="rtl"] .form-group label,
body.rtl-mode .form-group label {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

/* RTL для select options */
html[lang="he"] .form-group select option,
html[dir="rtl"] .form-group select option,
body.rtl-mode .form-group select option {
    text-align: right !important;
    direction: rtl !important;
}

/* Mobile footer layout - vertical */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 2rem;
    }
    
    .footer-section {
        margin-bottom: 1.5rem;
    }
}

/* RTL footer styles - принудительно вертикальное отображение */
.rtl-mode .footer-content {
    direction: ltr !important; /* Принудительно LTR для правильного порядка */
    text-align: center !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
}

.rtl-mode .footer-section,
html[lang="he"] .footer-section,
html[dir="rtl"] .footer-section {
    text-align: center !important;
    direction: ltr !important; /* Принудительно LTR для правильного порядка */
}

.rtl-mode .footer-section h3,
.rtl-mode .footer-section h4,
html[lang="he"] .footer-section h3,
html[lang="he"] .footer-section h4,
html[dir="rtl"] .footer-section h3,
html[dir="rtl"] .footer-section h4 {
    text-align: center !important;
}

.rtl-mode .footer-section ul,
html[lang="he"] .footer-section ul,
html[dir="rtl"] .footer-section ul {
    text-align: center !important;
}

.rtl-mode .footer-section ul li,
html[lang="he"] .footer-section ul li,  
html[dir="rtl"] .footer-section ul li {
    text-align: center !important;
}

/* Принудительно вертикальное отображение футера для всех языков */
html[lang="he"] .footer-content,
html[dir="rtl"] .footer-content {
    direction: ltr !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
}

/* Принудительно вертикальное отображение для мобильных */
@media (max-width: 768px) {
    .rtl-mode .footer-content,
    html[lang="he"] .footer-content,
    html[dir="rtl"] .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 2rem;
    }
}

/* ===== FORM VERIFICATION STYLES FROM MAIN PAGE ===== */
.form-verification {
    margin: 15px 0;
}

.verification-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    gap: 15px !important;
}

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

.verification-checkbox .checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(67, 216, 255, 0.5);
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
}

.verification-checkbox .checkmark::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #43d8ff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.verification-checkbox input[type="checkbox"]:checked + .checkmark {
    background: rgba(67, 216, 255, 0.2);
    border-color: #43d8ff;
}

.verification-checkbox input[type="checkbox"]:checked + .checkmark::after {
    opacity: 1;
}

.verification-checkbox:hover .checkmark {
    border-color: #43d8ff;
    background: rgba(67, 216, 255, 0.1);
}

/* Google reCAPTCHA Styles */
.g-recaptcha {
    margin: 15px 0;
    transform: scale(1);
    transform-origin: 0 0;
}

/* Responsive reCAPTCHA for mobile */
@media (max-width: 768px) {
    .g-recaptcha {
        transform: scale(0.9);
        transform-origin: 0 0;
    }
}

@media (max-width: 480px) {
    .g-recaptcha {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* RTL support for reCAPTCHA */
html[lang="he"] .g-recaptcha,
html[dir="rtl"] .g-recaptcha,
body.rtl-mode .g-recaptcha {
    direction: ltr;
    text-align: left;
}

/* RTL styles for verification checkbox */
.rtl-mode .verification-checkbox {
    flex-direction: row-reverse;
    text-align: right;
}

.rtl-mode .verification-checkbox .checkmark {
    margin-right: 0;
    margin-left: 10px;
}

.rtl-mode .verification-checkbox span {
    text-align: right;
}

html[lang="he"] .verification-checkbox,
html[dir="rtl"] .verification-checkbox,
body.rtl-mode .verification-checkbox {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[lang="he"] .verification-checkbox .checkmark,
html[dir="rtl"] .verification-checkbox .checkmark,
body.rtl-mode .verification-checkbox .checkmark {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[lang="he"] .verification-checkbox span,
html[dir="rtl"] .verification-checkbox span,
body.rtl-mode .verification-checkbox span {
    text-align: right !important;
}

/* ===== FORCE LTR FOR ALL FORM INPUTS ===== */
/* Принудительно LTR для всех полей ввода в формах */
.service-form input,
.service-form textarea,
.service-form input[type="text"],
.service-form input[type="email"],
.service-form input[type="tel"],
.service-form input[type="number"],
.service-form input[type="password"],
.service-form textarea[name="message"],
.service-form textarea[name="currentIssues"],
.service-form textarea[name="additionalServices"],
.service-form textarea[name="projectDetails"],
.service-form textarea[name="securityRequirements"],
.service-form textarea[name="networkRequirements"],
.service-form textarea[name="monitoringRequirements"],
.service-form textarea[name="supportRequirements"] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    writing-mode: horizontal-tb !important;
}

/* Принудительно LTR для placeholder */
.service-form input::placeholder,
.service-form textarea::placeholder,
.service-form select::placeholder {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* Принудительно LTR для всех языков */
html[lang="he"] .service-form input,
html[lang="he"] .service-form textarea,
html[lang="he"] .service-form select,
html[dir="rtl"] .service-form input,
html[dir="rtl"] .service-form textarea,
html[dir="rtl"] .service-form select,
body.rtl-mode .service-form input,
body.rtl-mode .service-form textarea,
body.rtl-mode .service-form select {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    writing-mode: horizontal-tb !important;
}

/* Принудительно LTR для placeholder во всех языках */
html[lang="he"] .service-form input::placeholder,
html[lang="he"] .service-form textarea::placeholder,
html[dir="rtl"] .service-form input::placeholder,
html[dir="rtl"] .service-form textarea::placeholder,
body.rtl-mode .service-form input::placeholder,
body.rtl-mode .service-form textarea::placeholder {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* Принудительно LTR для select options */
.service-form select option,
html[lang="he"] .service-form select option,
html[dir="rtl"] .service-form select option,
body.rtl-mode .service-form select option {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* ===== FIX FOR MIRRORED TEXT IN FORMS ON MOBILE ===== */
/* Принудительно исправляем зеркальное отображение текста в формах */
.service-form input,
.service-form textarea,
.service-form select,
.request-form input,
.request-form textarea,
.request-form select {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Исправление для placeholder */
.service-form input::placeholder,
.service-form textarea::placeholder,
.service-form select::placeholder,
.request-form input::placeholder,
.request-form textarea::placeholder,
.request-form select::placeholder {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* Исправление для всех языков и RTL режимов */
html[lang="he"] .service-form input,
html[lang="he"] .service-form textarea,
html[lang="he"] .request-form input,
html[lang="he"] .request-form textarea,
html[dir="rtl"] .service-form input,
html[dir="rtl"] .service-form textarea,
html[dir="rtl"] .request-form input,
html[dir="rtl"] .request-form textarea,
body.rtl-mode .service-form input,
body.rtl-mode .service-form textarea,
body.rtl-mode .request-form input,
body.rtl-mode .request-form textarea{
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* Исправление для placeholder во всех языках */
html[lang="he"] .service-form input::placeholder,
html[lang="he"] .service-form textarea::placeholder,
html[lang="he"] .request-form input::placeholder,
html[lang="he"] .request-form textarea::placeholder,
html[dir="rtl"] .service-form input::placeholder,
html[dir="rtl"] .service-form textarea::placeholder,
html[dir="rtl"] .request-form input::placeholder,
html[dir="rtl"] .request-form textarea::placeholder,
body.rtl-mode .service-form input::placeholder,
body.rtl-mode .service-form textarea::placeholder,
body.rtl-mode .request-form input::placeholder,
body.rtl-mode .request-form textarea::placeholder {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed !important;
}

/* Исправление для select options */
.service-form select option,
.request-form select option,
html[lang="he"] .service-form select option,
html[lang="he"] .request-form select option,
html[dir="rtl"] .service-form select option,
html[dir="rtl"] .request-form select option,
body.rtl-mode .service-form select option,
body.rtl-mode .request-form select option {
    direction: rtr !important;
    text-align: right !important;
    unicode-bidi: embed !important;
}

/* Специальное исправление для мобильных устройств */
@media (max-width: 768px) {
    .service-form input,
    .service-form textarea,
    .request-form input,
    .request-form textarea,
    .request-form select {
        direction: ltr !important;
        text-align: left !important;
        unicode-bidi: embed !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
        -moz-text-orientation: mixed !important;
    }
    
    .service-form input::placeholder,
    .service-form textarea::placeholder,
    .request-form input::placeholder,
    .request-form textarea::placeholder {
        direction: ltr !important;
        text-align: left !important;
        unicode-bidi: embed !important;
    }
}

/* Дополнительное исправление для iOS Safari */
@supports (-webkit-touch-callout: none) {
    .service-form input,
    .service-form textarea,
    .request-form input,
    .request-form textarea,
    .request-form select {
        direction: ltr !important;
        text-align: left !important;
        unicode-bidi: embed !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        -webkit-text-orientation: mixed !important;
    }
}