@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Space+Grotesk:wght@300..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

@media (max-width: 640px) {
    section,
    section > div,
    section > div > div,
    section > div > div > div {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .grid > div {
        min-width: 0;
        max-width: 100%;
    }
}

.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
}

#topbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    height: 40px;
    display: flex;
    align-items: center;
}

.navbar-offset {
    top: 40px;
}

.hero-section-offset {
    margin-top: 80px;
}

#navbar {
    position: fixed;
    width: 100%;
    z-index: 40;
}

@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 10s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes gradient-x {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 5s ease infinite;
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-up {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-slide-in-left {
    animation: slide-in-left 0.8s ease-out;
}

.animate-slide-in-right {
    animation: slide-in-right 0.8s ease-out;
}

.animate-slide-in-up {
    animation: slide-in-up 0.8s ease-out;
}

.parallax-bg {
    transform: translateZ(-1px) scale(1.5);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    background-size: 1000px 100%;
    animation: shimmer 3s infinite;
}

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.3);
}

.text-shadow-lg {
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.gradient-border {
    position: relative;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(45deg, #22c55e, #16a34a) border-box;
    border: 3px solid transparent;
    border-radius: 1rem;
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(34, 197, 94, 0);
    }
}

.pulse-green {
    animation: pulse-green 2s infinite;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

.hero-pattern {
    background-image:
        radial-gradient(circle at 20% 50%, rgba(34, 197, 94, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(22, 163, 74, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(134, 239, 172, 0.1) 0%, transparent 50%);
}

.leaf-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2322c55e' fill-opacity='0.03'%3E%3Cpath d='M20 20c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10zm10 0c0-5.5-4.5-10-10-10s-10 4.5-10 10 4.5 10 10 10 10-4.5 10-10z'/%3E%3C/g%3E%3C/svg%3E");
}

#contact-form {
    max-width: 100%;
    overflow: hidden;
}

#contact-form .g-recaptcha {
    transform-origin: left center;
    max-width: 100%;
}

@media (max-width: 400px) {
    #contact-form .g-recaptcha {
        transform: scale(0.85);
    }

    #contact-form .g-recaptcha > div {
        max-width: 100% !important;
    }
}

@media (max-width: 340px) {
    #contact-form .g-recaptcha {
        transform: scale(0.75);
    }
}