/* [BEGIN: /home/nxscom/cx-or.com/assets/css/index.css] */

/* Hero Section Specific Styles */
.hero-section {
    position: relative;
    min-height: 100vh; /* Full viewport height */
    background-color: #333; /* Fallback color */
    overflow: hidden; /* Ensure video doesn't overflow */
    padding-top: 100px; /* Account for fixed navbar */
    padding-bottom: 60px;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind content */
}

.video-background video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover; /* Cover the area */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dark overlay for text readability */
    z-index: 0;
}

.hero-section .container {
    z-index: 1; /* Ensure content is above overlay */
}

.hero-section h1 {
    font-size: calc(2.5rem + 2.5vw); /* Responsive font size */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero-section .lead {
    font-size: calc(1rem + 0.5vw);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
     text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Animation Classes (Simple Fade In Up) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }


/* CX/OR Explainer Section */
.cx-or-explainer {
    border-bottom: 1px solid #e9ecef;
}
.cx-or-explainer img {
    max-width: 100%;
    height: auto;
}
.cx-or-explainer .fa-stack {
    min-width: 2em; /* Ensure consistent alignment */
}

/* Features Highlight Section */
.features-highlight .feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.features-highlight .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}
.features-highlight .feature-icon i {
    /* Optional: Add gradient or subtle effect */
}

/* How It Works Quick Steps */
.how-it-works-quick .step-icon i {
    color: #6c757d; /* Use a secondary color */
}

/* Upgrade Pitch Section */
.upgrade-pitch {
     background: linear-gradient(135deg, #e94057, #f27121); /* Example gradient */
     color: #ffffff;
}

.upgrade-pitch .row i {
    display: block; /* Ensure icons are block level for spacing */
    margin-bottom: 0.5rem;
}

/* Testimonials Section */
.testimonials .testimonial-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Make controls visible on light bg */
    border-radius: 50%;
    padding: 1rem; /* Increase clickable area */
}

/* Final CTA Section */
.final-cta {
     border-top: 1px solid #e9ecef;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: calc(2rem + 3vw);
    }
    .hero-section .lead {
        font-size: calc(1rem + 0.3vw);
    }
    .cx-or-explainer .row {
        flex-direction: column-reverse; /* Stack image above text on mobile */
    }
     .cx-or-explainer img {
         margin-bottom: 2rem;
     }
     .upgrade-pitch .col-md-3 {
         width: 50%; /* Two items per row on medium */
     }
}

@media (max-width: 576px) {
     .upgrade-pitch .col-md-3 {
         width: 100%; /* One item per row on small */
     }
}


/* [END: /home/nxscom/cx-or.com/assets/css/index.css] */