/* Custom styles not covered by Tailwind or for specific animations */
html {
    scroll-behavior: smooth;
}
.max-w-full.h-auto.animate-zoom-in.image-hover-scale.transition-transform.duration-500.ease-in-out {
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(89, 180, 0, 0.3), 0 6px 12px rgba(89, 180, 0, 0.2);
}
/* Hero Section Animations - remain as custom CSS for specific timing */
@keyframes slideFromLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-from-left {
    opacity: 0;
    transform: translateX(-100%);
    animation: slideFromLeft 0.8s ease-out forwards;
    animation-delay: 0.7s;
}

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

.animate-zoom-in {
    opacity: 0;
    transform: scale(0.95);
    animation: zoomIn 0.8s ease forwards;
    animation-delay: 2.0s;
}

/* Intro Section Animation (from original JS) */
.intro-section-content {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.intro-section-content.zoom-visible {
    opacity: 1;
    transform: scale(1);
}

/* Service Card Hover Effect */
.service-card:hover {
    transform: scale(1.05);
}

/* Button Hover Effect */
.btn-hover-scale:hover {
    transform: scale(1.05);
    background: #4a9e00; /* Slightly darker green */
    border-color: #4a9e00;
    color: #1e1e1e;
}

/* Image Hover Effect */
.image-hover-scale:hover {
    transform: scale(1.09);
}

/* Custom Colors (Tailwind can use these directly via config, or define here) */
.text-primary-green { color: #59b400; }
.bg-primary-green { background-color: #59b400; }
.border-primary-green { border-color: #59b400; }
.hover\:bg-primary-green-dark { background-color: #4a9e00; } /* Darker shade for hover */

/* Specific override for h1 text alignment */
h1.text-4xl.sm\:text-5xl.md\:text-6xl.font-extrabold.leading-tight.text-white.mb-6 {
    text-align: left;
}
/* --- Mobile Responsiveness (Custom CSS) --- */
/* Apply styles for screens up to 768px wide (typical tablet portrait / large mobile) */
@media (max-width: 768px) {
    /* Example: If you had custom font sizes defined here, you might adjust them */
    /* .some-custom-text-class {
        font-size: 1.2rem;
    } */

    /* Example: Adjust animation delays or properties for smaller screens if needed */
    /* .animate-slide-from-left {
        animation-delay: 0.5s;
    } */

    /* Note: Most layout and element sizing responsiveness is handled by Tailwind
       classes in the HTML (e.g., md:w-1/2, text-sm sm:text-base).
       Use this section for specific overrides or custom elements not managed by Tailwind. */
}

/* Apply styles for screens up to 480px wide (typical mobile portrait) */
@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    /* .some-other-custom-element {
        padding: 0.5rem;
    } */
    .w-full.md\:w-1\/2.flex.justify-center.items-center.mt-8.md\:mt-0 {
    display: none;
    }
    .text-4xl.sm\:text-5xl.md\:text-6xl.font-extrabold.leading-tight.text-white.mb-6 {
    text-align: center!important;
    font-size: 2rem;
    }
}