@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden; /* Prevent horizontal scroll */
    background: linear-gradient(180deg, #111827 0%, #003f5c 50%, #111827 100%);
    color: #E5E7EB;
    font-family: sans-serif;
}

/* Mobile Menu Styling */
#mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #111827; /* Match header background */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    border-top: 1px solid #1F2937; /* Add a subtle separator */
}

#mobile-menu a {
    text-align: right;
    padding-right: 1.5rem; /* Add some padding for alignment */
}

#mobile-menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Slide by half the total width (the width of the original items) */
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out 0.4s forwards;
    opacity: 0;
}

.animate-scroll-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transform: translateY(20px);
}

.animate-scroll-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gradient-text {
    background: linear-gradient(to right, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-gradient {
    background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 51%, #00c6ff 100%);
    transition: 0.5s;
    background-size: 200% auto;
}

.btn-gradient:hover {
    background-position: right center;
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.5);
}

.card-glow {
    transition: box-shadow 0.3s ease-in-out;
}

.card-glow:hover {
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
}

/* Hero Section Enhancements */
.hero-section {
    position: relative;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(0, 114, 255, 0.15), transparent 50%),
        url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill="%231F2937" fill-opacity="0.4"%3E%3Crect x="0" y="0" width="1" height="100"/%3E%3Crect x="0" y="0" width="100" height="1"/%3E%3C/g%3E%3C/svg%3E');
}

/* Vertical Padding & Section Styling */
main section {
    padding-top: 4rem; /* Reduced from 7rem */
    padding-bottom: 4rem; /* Reduced from 7rem */
}

.section-bg-alt {
    /* This class is no longer needed, but we'll keep it for now to avoid breaking anything */
    background-color: transparent; 
}

main .hero-section {
    padding-top: 6rem; /* Keep hero padding as it was */
    padding-bottom: 6rem;
}

/* New Scroller Animation */
@keyframes scroll {
    to {
        transform: translate(calc(-50%));
    }
}

.scroller {
    max-width: 100%;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    /* Animation will be controlled by JavaScript */
}

.scroller:hover .scroller-inner {
    animation-play-state: paused;
}

.project-card {
    width: 350px; /* Fixed width for cards */
    margin: 0 1rem;
    background-color: #1F2937;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* New Infographic Process Styling */
.process-infographic {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.process-step-bar {
    display: flex;
    align-items: center;
    background-color: #111827; /* Match other cards */
    border-radius: 50px;
    padding: 0.5rem;
    border: 2px solid #1F2937;
}

.step-circle {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-color: var(--arcform-accent, #00c6ff); /* Use accent color */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827; /* Dark text for contrast */
    position: relative;
    border: 4px solid #111827;
}

.step-circle span:first-child {
    font-size: 2rem;
    font-weight: bold;
}

.step-circle span:last-child {
    font-size: 0.8rem;
    text-transform: uppercase;
}

.step-content {
    padding: 0 1.5rem;
}

/* Alternating layout */
.process-step-bar:nth-child(even) {
    flex-direction: row-reverse;
}

/* Speech bubble pointer */
.step-circle::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

.process-step-bar:nth-child(odd) .step-circle::after {
    right: -18px;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent var(--arcform-accent, #00c6ff);
}

.process-step-bar:nth-child(even) .step-circle::after {
    left: -18px;
    border-width: 10px 15px 10px 0;
    border-color: transparent var(--arcform-accent, #00c6ff) transparent transparent;
}