/* ============================================
   VCOM CONSOLIDATED STYLESHEET
   Used by both Contact.html and index.html
   ============================================ */

/* VCOM Custom Colors */
.bg-vcom-navy {
    background-color: #00072D;
}

.text-vcom-navy {
    color: #00072D;
}

/* Hero Pattern Background */
.hero-pattern {
    background-color: #00072d;
    background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e3a8a' fill-opacity='0.2'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.446 9.554c-2.21 0-4-1.79-4-4 0-3.314-2.686-6-6-6 2.21 0 4-1.79 4-4 0-3.314 2.686-6 6-6 2.21 0 4 1.79 4 4 0 3.314 2.686 6 6 6-2.21 0-4 1.79-4 4 0 3.314-2.686 6-6 6z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

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

section {
    scroll-margin-top: 100px;
}

/* Mobile Menu Styles */
.mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #00072D;
    flex-direction: column;
    gap: 0;
    z-index: 40;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.mobile-menu a {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease;
}

.mobile-menu a:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .header-container {
        flex-wrap: wrap;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Robot Dance Animation */
@keyframes vcom-dance {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    50% {
        transform: translateY(-3px) scale(1.1);
        filter: brightness(1.2);
    }
}

.animate-vcom-dance {
    animation: vcom-dance 2.5s infinite ease-in-out;
}

/* Reveal Animation for scroll effects */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Chat Animation */
.chat-open {
    display: flex !important;
    animation: chatFadeIn 0.3s forwards;
}

@keyframes chatFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Animation */
@keyframes slide-right {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-right {
    animation: slide-right 0.3s ease-out;
}

/* ============================================
   SERVICE PAGE BACKGROUNDS
   ============================================ */

/* Standardized Service Page Background - Used by all 4 service pages */
.bg-service-pattern {
    background-color: #f8fafc;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================
   INTRODUCTION SLIDER
   ============================================ */

#intro-slides-wrapper {
    display: flex;
}

.intro-slide {
    animation: slideInFromRight 0.5s ease-out forwards;
}

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

.intro-dot {
    cursor: pointer;
    transition: all 0.3s ease;
}

.intro-dot.active {
    width: 1rem;
}