/* Custom styles for the page */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #e2e8f0;
    overflow-x: hidden;
}

/* --- Innovative Services Section Style --- */
.service-item.is-visible {
    border-left-color: #818cf8; /* indigo-300 */
}
.service-item.is-visible h3 {
    color: #c7d2fe; /* indigo-200 */
}
.service-item.is-visible p {
    color: #a5b4fc; /* indigo-300 */
}

/* --- Timeline Projects Section --- */
#projects-timeline {
    position: relative;
    padding: 10rem 0;
}
/* The vertical line - hidden on mobile */
#projects-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #1e293b; /* slate-800 */
    display: none; /* Hidden by default on mobile */
}

/* Show timeline line on desktop */
@media (min-width: 768px) {
    #projects-timeline::before {
        display: block;
    }
}

.timeline-item {
    position: relative;
    margin-bottom: 10rem;
}
.timeline-content {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 0.3;
    transform: scale(0.95);
}
.timeline-item.is-in-view .timeline-content {
    opacity: 1;
    transform: scale(1);
}
/* The dot on the timeline - hidden on mobile */
.timeline-dot {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    background-color: #334155; /* slate-700 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: none; /* Hidden by default on mobile */
}

/* Show timeline dot on desktop */
@media (min-width: 768px) {
    .timeline-dot {
        display: block;
    }
}

.timeline-item.is-in-view .timeline-dot {
    background-color: #818cf8; /* indigo-300 */
    transform: translate(-50%, -50%) scale(1.25);
}

/* --- General Animation Styles --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.scroll-fade {
    opacity: 0;
}

.scroll-fade.is-visible {
    animation: fadeIn 0.8s ease-out forwards;
}