/* Custom font and base styling */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
  --primary-color: #ff9900;
  --dark-bg: #1a1a2e;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--dark-bg);
    color: #e5e7eb; /* Light gray text */
    scroll-behavior: smooth; /* Smooth scrolling for navigation */
}

/* --- Hero Section Styling & Parallax Effect --- */
.hero-section {
    position: relative;
    background-color: #000;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax-like effect */
    z-index: 0;
    /* Dark overlay for text readability */
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.7); 
}

/* --- Heading Style --- */
.section-heading {
    border-bottom: 3px solid var(--primary-color); 
    display: inline-block;
    padding-bottom: 0.5rem;
}

/* --- Card & Gallery Hover Animations --- */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-8px); /* Deeper lift on hover */
    box-shadow: 0 15px 20px rgba(255, 153, 0, 0.3); /* Stronger glow */
}

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

@media (min-width: 768px) {
    .gallery-img {
        height: 250px;
    }
}

/* --- Scroll Reveal Animations (Initial Hidden State) --- */

/* Elements that will fade in on scroll */
.service-card, .feature-card, .process-step, .gallery-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* State when the element is visible */
.service-card.show, .feature-card.show, .process-step.show, .gallery-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* Add a slight delay for staggered appearance */
.service-card:nth-child(2) { transition-delay: 0.1s; }
.service-card:nth-child(3) { transition-delay: 0.2s; }
.service-card:nth-child(4) { transition-delay: 0.3s; }
.service-card:nth-child(5) { transition-delay: 0.4s; }

.feature-card:nth-child(2) { transition-delay: 0.1s; }
.feature-card:nth-child(3) { transition-delay: 0.2s; }

/* --- Hero Element Animations (Always runs on load) --- */
.animate-fade-in-up {
    animation: fadeInUp 1.2s ease-out forwards;
    opacity: 0; /* Start hidden */
}
.delay-200 { animation-delay: 0.2s; }

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