/* CSS/style.css */

/* Define CSS Custom Properties (Variables) for consistency */
:root {
    --primary-font: 'Inter', sans-serif;
    --hero-text-font: sans-serif;
    --text-shadow-color: rgba(0, 0, 0, 0.7);
    --hero-media-transition-speed: 1s;
    --section-animation-speed: 1s;
    --section-animation-offset: 50px;
    --hero-text-animation-delay: 0.5s;
    --hero-button-animation-delay: 1s;
}

/* Apply Inter font family globally */
body {
    font-family: var(--primary-font);
    overflow-x: hidden; /* Prevent horizontal scroll due to potential overflow */
}

.hero-overlay-text-font {
    font-family: var(--hero-text-font);
}

/* Fixed header to stay on top */
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it stays above other content */
}

/* Hero Section with Image Slider */
.hero-slider-background {
    /* Tailwind classes (relative overflow-hidden) already handle position and overflow,
       so no need to redefine them here unless overriding specific Tailwind defaults. */
}

.hero-slide-media { /* New class for both video and image */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Hidden by default */
    transition: opacity var(--hero-media-transition-speed) ease-in-out; /* Smooth fade transition */
}

.hero-slide-media.active {
    opacity: 1; /* Active media is visible */
}

/* Decreased logo scale by 10% from current (1.866 * 0.90 = ~1.679) */
.logo-visual-scale {
    transform: scale(1.679);
    transform-origin: left center;
}

/* Hero Text Animation - This CSS animation will now only apply if 'hero-text-animate' is present */
.lifted-text.hero-text-animate {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
    animation: fadeInUp 1.5s ease-out forwards; /* Apply text animation */
    animation-delay: var(--hero-text-animation-delay); /* Delay text animation slightly */
}

/* Keyframe for fade in and slide up effect for hero text */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Button Animation */
.hero-button-animate {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start slightly below */
    animation: fadeInUp 1.5s ease-out forwards; /* Apply text animation */
    animation-delay: var(--hero-button-animation-delay); /* Delay button animation more than text */
}


/* General animation for sections that scroll into view */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

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

/* Testimonial specific styles */
.testimonial-text {
    min-height: 100px; /* Ensure consistent height for testimonials */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Testimonial fade effect */
#testimonial-content {
    transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}

#testimonial-content.is-fading-out {
    opacity: 0;
}

#testimonial-content.is-fading-in {
    opacity: 1;
}

/* Typing Effect for Hero Text */
.typing-cursor {
    border-right: 0.15em solid white; /* Blinking cursor */
    animation: blink-caret 0.75s step-end infinite;
    white-space: nowrap; /* Keep text on one line during typing */
    overflow: hidden; /* Hide overflow until fully typed */
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: white; }
}

/* Transparent Background for Hero Text - darker light grey with 90% opacity */
.hero-text-bg {
    background-color: rgba(229, 231, 235, 0.90); /* Tailwind gray-200 with 90% opacity */
    padding: 0.5em 0.75em; /* Adjust padding as needed */
    border-radius: 0.25em; /* Optional: add rounded corners */
}

/* New gradient background for testimonials section (20% Lighter Dark Grey) */
#testimonials-section.testimonials-gradient-bg {
    background-image: linear-gradient(to bottom, #858585, #6B6B6B); /* Even lighter dark grey gradient */
    color: #ffffff; /* Ensure text inside remains white for contrast */
}

/* Basic styling for responsive iframe within the new section */
#contact-info-map-section iframe {
    width: 100%;
    height: 100%; /* Fill the aspect ratio container */
}