/*
 * SBH Website Custom Stylesheet
 * Author: Gemini AI
 * Date: July 12, 2025
 * Description: Contains all custom CSS for the SBH website,
 * designed for a modern, responsive, and attractive look.
 * Includes styles for global elements, header, hero sections (carousel),
 * service cards, detailed service blocks, call-to-action sections,
 * client logos, contact information, and footer.
 */

/* ==========================================================================
   1. Base Styles & Variables
   ========================================================================== */

/* Google Fonts: Noto Sans (Imported in HTML head) */
body {
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.6;
    color: var(--color-text-dark); /* Default text color */
    background-color: var(--color-background-light); /* Light background for body */
    overflow-x: hidden; /* Prevent horizontal scroll from animations/shadows */
}

/* Color Variables - Centralized for easy theme changes */
:root {
    /* Primary Brand Colors - Adjust these to your brand colors based on SBH Logo */
    --color-primary-custom: #2C2CE0; /* Main vibrant blue from SBH logo */
    --color-primary-custom-light: #6A6AF5; /* Lighter shade for accents/gradients */
    --color-primary-custom-dark: #1A1A9A; /* Darker shade for hover/active states */
    --color-primary-custom-subtle: rgba(44, 44, 224, 0.1); /* Light tint for backgrounds */

    /* Secondary / Accent Colors (Matching Bootstrap defaults for consistency) */
    --color-success: #198754;
    --color-success-subtle: rgba(25, 135, 84, 0.1);
    --color-info: #0dcaf0;
    --color-info-subtle: rgba(13, 202, 240, 0.1);
    --color-warning: #ffc107;
    --color-warning-subtle: rgba(255, 193, 7, 0.1);
    --color-danger: #dc3545;
    --color-danger-subtle: rgba(220, 53, 69, 0.1);

    /* Text Colors */
    --color-text-dark: #343a40; /* Standard dark text */
    --color-text-muted: #6c757d; /* Lighter text for descriptions/subheadings */
    --color-text-white: #ffffff; /* White text for dark backgrounds */
    --color-text-white-50: rgba(255, 255, 255, 0.75); /* Semi-transparent white */

    /* Background Colors */
    --color-background-light: #f8f9fa; /* Light grey/off-white for sections */
    --color-background-dark: #212529; /* Dark background for footer/navbar */
    --color-dark-soft: #2b3035; /* Slightly softer dark for specific areas */
    --color-light-soft: #F8F9FA; /* Alias for background-light for clarity in sections */

    /* Transition Speed */
    --transition-speed: 0.3s ease-in-out;
}

/* General Link Styling */
a {
    color: var(--color-primary-custom);
    text-decoration: none;
    transition: color var(--transition-speed);
}

/* Ensure Hero Section H1 is always white */
.hero-carousel .carousel-caption h1,
.hero-about .hero-content h1,
.hero-services .hero-content h1,
.hero-individual-service .hero-content h1 {
    color: #FFFFFF !important; /* Forces the color to white */
}

a:hover {
    color: var(--color-primary-custom-dark);
    text-decoration: underline; /* Add underline on hover for clarity */
}

/* Section Padding - Consistent spacing */
.section-padded {
    padding: 80px 0;
}

@media (max-width: 767.98px) {
    .section-padded {
        padding: 50px 0;
    }
}

/* Main Content Area - Push content down below fixed navbar */
.main-content {
    margin-top: 76px; /* Default for larger screens */
}

@media (max-width: 991.98px) {
    .main-content {
        margin-top: 70px; /* Adjust for collapsed navbar height on smaller screens */
    }
}

/* Bootstrap Overrides / Custom Buttons */
.btn-primary-custom {
    background-color: var(--color-primary-custom);
    border-color: var(--color-primary-custom);
    color: var(--color-text-white);
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}

.btn-primary-custom:hover {
    background-color: var(--color-primary-custom-dark);
    border-color: var(--color-primary-custom-dark);
    color: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}

.btn-outline-light {
    color: var(--color-text-white);
    border-color: var(--color-text-white);
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
}

.btn-outline-light:hover {
    background-color: var(--color-text-white);
    color: var(--color-primary-custom);
    transform: translateY(-2px);
}

/* Headings - Consistent font and weight */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans', sans-serif;
    color: var(--color-text-dark);
    font-weight: 700;
}

/* Utility Classes */
.text-primary-custom {
    color: var(--color-primary-custom) !important;
}

/* ==========================================================================
   2. Header & Navigation (Navbar)
   ========================================================================== */

.header .navbar {
    background-color: var(--color-background-dark) !important; /* Force dark background */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    transition: background-color var(--transition-speed), padding var(--transition-speed);
}

/* Navbar Scrolled State (Optional: for a shrinking/changing navbar on scroll) */
.navbar.scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(var(--color-background-dark), 0.95) !important; /* Slightly transparent */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


/* Navbar Brand/Logo */
.navbar-brand {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    display: flex; /* Ensure logo and optional tagline align */
    align-items: center;
}

/* --- Navbar Logo Adjustments (Image Logo) --- */
.navbar-logo {
    height: 50px; /* Adjust logo height as needed */
    width: auto; /* Maintain aspect ratio */
    filter: brightness(0) invert(1); /* Optional: If your logo is dark and needs to be white on a dark navbar */
    transition: transform 0.3s ease;
}

.navbar-logo:hover {
    transform: scale(1.05); /* Subtle hover effect */
}


/* Navbar Links */
.navbar-nav .nav-link {
    color: var(--color-text-white-50);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color var(--transition-speed);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--color-primary-custom); /* Highlight on hover/active */
}

/* Dropdown Menu */
.navbar-nav .dropdown-menu {
    background-color: var(--color-background-dark);
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 0.5rem 0;
}

.navbar-nav .dropdown-item {
    color: var(--color-text-white-50);
    padding: 0.75rem 1.5rem;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:active {
    background-color: var(--color-primary-custom);
    color: var(--color-text-white);
}

.navbar-nav .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar Toggler for mobile */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* ==========================================================================
   3. Hero Sections (General Styles for all Hero Banners)
   ========================================================================== */

/* Base styles for all hero sections */
.hero-carousel, .hero-services, .hero-about, .hero-contact, .hero-individual-service {
    min-height: 60vh; /* Default height for non-homepage heroes */
    position: relative;
    padding: 80px 0; /* Default padding, content will center vertically */
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-text-white);
}

/* Background overlay for readability */
.hero-bg-overlay {
    background: rgba(0, 0, 0, 0.65); /* Dark overlay for text contrast */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure overlay is behind content */
}

/* Content container within hero for positioning and z-index */
.hero-content {
    position: relative;
    z-index: 1; /* Ensure content is above overlay */
    width: 100%;
}

.hero-content h1, .hero-content h2 {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive font size for main heading */
    text-shadow: 0 4px 8px rgba(0,0,0,0.4);
    font-weight: 700;
    color: var(--color-text-white);
}

.hero-content p.lead {
    font-size: clamp(1.1rem, 2.8vw, 1.4rem); /* Responsive font size for lead paragraph */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-white-50);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Specific background images for each hero type */
.hero-carousel {
    min-height: 100vh; /* Homepage carousel is taller */
    padding-top: 0;
    padding-bottom: 0;
}
.hero-carousel .carousel-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.5); /* Adjust for desired overlay darkness */
    transform: scale(1);
    transition: transform 6s ease-in-out; /* Slow zoom-in effect */
}
.hero-carousel .carousel-item.active .carousel-bg-image {
    transform: scale(1.05); /* Zoom in slightly on active image */
}
.hero-carousel .carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2); /* Subtle overlay for text readability */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}
.hero-carousel .carousel-indicators button {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.hero-carousel .carousel-indicators button.active {
    background-color: var(--color-primary-custom);
    transform: scale(1.2);
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 5%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
    opacity: 1;
}

/* Specific Hero Backgrounds */
.hero-services { background-image: url('images/service-page-image.jpg'); }
.hero-about { background-image: url('images/about-us-image-hero'); }
.hero-contact { background-image: url('images/contact-us-now.jpg'); }

/* Individual Service Page Heroes */
.hero-individual-service {
    /* Base styles are inherited, just need specific backgrounds */
}
#hero-automotive { background-image: url('images/automative-hero.jpg'); }
#hero-burma-food { background-image: url('images/burma-special.jpg'); }
#hero-construction { background-image: url('images/construction-sbh-hero.jpg'); }
#hero-general-contracting { background-image: url('images/general-contract-home.jpg'); }
#hero-cleaning-services { background-image: url('images/cleaning-home-image.png'); }


/* ==========================================================================
   4. Homepage Sections (Intro, Service Cards, Clients)
   ========================================================================== */

/* Introduction Section - General info blocks */
.bg-light-soft {
    background-color: var(--color-light-soft);
}

.icon-modern-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Service Cards (Homepage Grid) */
.service-card-modern {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.service-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.service-card-modern .card-img-top-container {
    height: 200px; /* Fixed height for image container */
    overflow: hidden;
}
.service-card-modern .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the area */
    transition: transform 0.5s ease;
}

.service-card-modern:hover .card-img-top {
    transform: scale(1.05); /* Slight zoom on hover */
}

.service-card-modern .card-body {
    padding: 2rem;
}

.icon-modern-lg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-top: -60px; /* Pull icon up over the image */
    position: relative;
    z-index: 1;
    border: 5px solid #fff; /* White border to separate from image */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Custom colors for service cards (matching Bootstrap defaults) */
.bg-primary-custom-subtle { background-color: var(--color-primary-custom-subtle) !important; }
.text-primary-custom { color: var(--color-primary-custom) !important; }
.btn-outline-primary-custom {
    border-color: var(--color-primary-custom);
    color: var(--color-primary-custom);
}
.btn-outline-primary-custom:hover {
    background-color: var(--color-primary-custom);
    color: #fff;
}

/* Specific CTA card for "View All Services" on homepage */
.cta-card-all {
    background: linear-gradient(135deg, var(--color-primary-custom), var(--color-primary-custom-light)); /* Gradient background */
    color: #fff;
    border: none;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.cta-card-all:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

.cta-card-all .btn-light {
    color: var(--color-primary-custom);
    font-weight: 600;
}
.cta-card-all .btn-light:hover {
    background-color: rgba(255,255,255,0.9);
}


/* Our Clients Section */
.clients-section {
    background-color: var(--color-light-soft);
}
.client-logos img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter var(--transition-speed), opacity var(--transition-speed);
    max-height: 80px; /* Standardize logo height */
    object-fit: contain;
}

.client-logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ==========================================================================
   5. Service Detail Blocks (Services Page & About Us Page & Individual Service Pages)
   ========================================================================== */

.service-detail-block {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden; /* Ensures image and text fit within rounded corners */
    margin-bottom: 60px; /* Space between blocks */
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.service-detail-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.service-detail-block .image-container {
    padding: 0; /* Remove padding from Bootstrap columns */
}

.service-detail-block .image-container img {
    width: 100%;
    height: 400px; /* Fixed height for consistent image size */
    object-fit: cover; /* Ensures image covers the area, crops if needed */
    border-radius: 0; /* Override img-fluid border-radius if any */
    transition: transform 0.5s ease;
}

.service-detail-block:hover .image-container img {
    transform: scale(1.03); /* Subtle zoom on hover */
}

.service-detail-block .text-content {
    padding: 40px; /* Internal padding for text */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-detail-block .text-content h3 {
    margin-bottom: 1rem;
}

.service-detail-block .text-content p.lead {
    font-size: 1.15rem;
    color: var(--color-text-muted);
}

.service-detail-block .text-content ul {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 20px; /* Indent list items */
}

.service-detail-block .text-content ul li {
    font-size: 1.05rem;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}
.service-detail-block .text-content ul li i {
    margin-right: 8px;
    color: var(--color-success); /* Checkmark color */
}


/* Responsive adjustments for service blocks */
@media (max-width: 767.98px) {
    .service-detail-block .image-container img {
        height: 250px; /* Smaller image height on mobile */
    }
    .service-detail-block .text-content {
        padding: 30px; /* Smaller padding on mobile */
        text-align: center; /* Center text on mobile */
    }
    .service-detail-block .text-content ul {
        text-align: left; /* Keep list left-aligned */
        padding-left: 20px;
    }
    /* Ensure the order reversal works for images on top for mobile */
    .service-detail-block .order-md-1 { order: 1 !important; }
    .service-detail-block .order-md-2 { order: 2 !important; }
    /* For blocks that are naturally image left, text right (flex-md-row-reverse) */
    .service-detail-block.flex-md-row-reverse .order-md-1 { order: 1 !important; }
    .service-detail-block.flex-md-row-reverse .order-md-2 { order: 2 !important; }
}

/* Final CTA block at the end of services section - similar to cta-card-all */
.service-detail-block.cta-card-all {
    background: linear-gradient(135deg, var(--color-primary-custom-light), var(--color-primary-custom));
    color: #fff;
    border: none;
    padding: 60px 40px; /* More padding for a final CTA */
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-top: 60px; /* Space after last service block */
    margin-bottom: 0; /* No margin at the bottom of this specific block */
}

.service-detail-block.cta-card-all h3 {
    color: #fff;
    font-weight: 700;
}
.service-detail-block.cta-card-all .lead {
    color: rgba(255,255,255,0.9);
}

.service-detail-block.cta-card-all .btn-light {
    color: var(--color-primary-custom);
    font-weight: 600;
    padding: 0.8rem 2.5rem;
    border-radius: 0.5rem;
}
.service-detail-block.cta-card-all .btn-light:hover {
    background-color: rgba(255,255,255,0.9);
    transform: translateY(-2px);
}

/* About Us Page Specific: Company Details Image Border Radius */
.service-detail-block .rounded-3-md-start {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

@media (max-width: 767.98px) {
    .service-detail-block .rounded-3-md-start {
        border-radius: 1rem !important; /* Full rounded corners on mobile */
    }
}

/* ==========================================================================
   6. Contact Info & Map Section (Used on Homepage & Contact Page & About Us Page)
   ========================================================================== */

.contact-modern-section {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--color-background-light);
}

.contact-info-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    background-color: #fff;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    padding: 40px 20px; /* More internal padding */
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.contact-info-card .icon-modern-lg {
    width: 60px; /* Slightly smaller for contact cards */
    height: 60px;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    border: none; /* No white border needed here */
    box-shadow: none; /* No shadow needed here */
}

.contact-info-card h3 {
    font-size: 1.35rem; /* Slightly smaller heading */
    font-weight: 600;
    margin-bottom: 1rem;
}

.contact-info-card p.card-text {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.contact-info-card a.text-muted.fw-bold {
    color: var(--color-text-dark) !important; /* Ensure phone/email links are visible */
    transition: color var(--transition-speed);
}
.contact-info-card a.text-muted.fw-bold:hover {
    color: var(--color-primary-custom) !important;
}

.contact-info-card .btn-sm {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 0.3rem;
}

.map-container-modern {
    border-radius: 0.75rem;
    overflow: hidden; /* Ensures map adheres to border-radius */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-container-modern h3 {
    color: var(--color-text-dark);
    padding: 20px 0;
}

/* ==========================================================================
   7. Contact Form Specific Styles (Contact Us Page)
   ========================================================================== */
.contact-form-container {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.contact-form-container .form-label {
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

.contact-form-container .form-control,
.contact-form-container .form-select {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-container .form-control:focus,
.contact-form-container .form-select:focus {
    border-color: var(--color-primary-custom);
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Form message (success/error) */
#form-message {
    margin-bottom: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
}

#form-message.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

#form-message.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}


/* ==========================================================================
   8. General Call to Action Section (Bottom of Pages)
   ========================================================================== */

.cta-section-modern {
    background-color: var(--color-primary-custom);
    background-image: linear-gradient(to right, var(--color-primary-custom-dark), var(--color-primary-custom)); /* Subtle gradient */
    color: var(--color-text-white);
    padding: 60px 0;
    text-align: center;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05); /* Soft shadow on top */
}

.cta-section-modern h2 {
    color: var(--color-text-white);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
}

.cta-section-modern p.lead {
    color: var(--color-text-white-50);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    max-width: 700px;
    margin: 0 auto 30px auto;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.footer {
    background-color: var(--color-dark-soft) !important;
    color: var(--color-text-white-50);
    padding: 50px 0 20px 0; /* Adjusted bottom padding for copyright */
    font-size: 0.9rem;
}

.footer h5 {
    color: var(--color-text-white);
    font-weight: 600;
}

.footer ul {
    padding-left: 0;
    list-style: none;
}

.footer-link-hover {
    transition: color var(--transition-speed);
}

.footer-link-hover:hover {
    color: var(--color-primary-custom-light) !important;
    text-decoration: underline !important;
}

.footer-social-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    color: var(--color-text-white-50); /* Default color */
    transition: color var(--transition-speed);
}

.footer-social-icon:hover {
    color: var(--color-primary-custom); /* Highlight on hover */
}

/* ==========================================================================
   10. Animations (from Animate.css - linked in HTML)
   ========================================================================== */

/* Base class for all animated elements */
.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Custom fade animations for service blocks (triggered by JS Intersection Observer) */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate__fadeInLeft {
    animation-name: fadeInLeft;
}

.animate__fadeInRight {
    animation-name: fadeInRight;
}

/* Ensure original animations are applied to carousel elements too */
/* These are the keyframe names from Animate.css if you were using it directly,
   but for the custom JS re-triggering, the names match the data-animation attributes. */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* These classes are applied by JS to trigger the animations */
.hero-carousel .animate__fadeInDown { animation-name: fadeInDown; }
.hero-carousel .animate__fadeInUp { animation-name: fadeInUp; }
.hero-carousel .animate__zoomIn { animation-name: zoomIn; }

/* Animation delays for carousel text */
.animate__delay-1s { animation-delay: 1s; }
.animate__delay-2s { animation-delay: 2s; }