*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block
}

button,
a,
input,
select,
textarea,
[role="button"] {
    min-height: 44px;
    min-width: 44px
}

button,
a,
[role="button"] {
    -webkit-tap-highlight-color: rgba(5, 150, 105, 0.2);
    touch-action: manipulation
}

button:active,
a:active,
[role="button"]:active {
    transform: scale(0.98);
    opacity: 0.9
}

input,
select,
textarea {
    font-size: 16px;
    border-radius: 8px;
    padding: 12px 16px
}

.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)
}

.text-gradient {
    background: linear-gradient(135deg, #059669 0%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.gradient-primary {
    background: linear-gradient(135deg, #059669 0%, #7C3AED 100%)
}

.gradient-secondary {
    background: linear-gradient(135deg, #7C3AED 0%, #059669 100%)
}

.section-divider {
    background: linear-gradient(90deg, transparent, #059669, #7C3AED, transparent);
    height: 2px;
    margin: 0 auto;
    width: 150px
}

@media(min-width:768px) {
    .section-divider {
        width: 200px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important
    }
}

.floating-element {
    animation: float 6s ease-in-out infinite
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg)
    }

    50% {
        transform: translateY(-10px) rotate(2deg)
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.3s ease
}

@media(hover:hover)and(pointer:fine) {
    .card-3d:hover {
        transform: rotateY(5deg) rotateX(5deg) translateZ(20px)
    }
}

.hide-mobile {
    display: none
}

@media(min-width:768px) {
    .hide-mobile {
        display: block
    }
}

.hide-desktop {
    display: block
}

@media(min-width:1024px) {
    .hide-desktop {
        display: none
    }
}

.show-mobile-only {
    display: block
}

@media(min-width:768px) {
    .show-mobile-only {
        display: none
    }
}

.section-padding {
    padding: 3rem 1rem
}

@media(min-width:768px) {
    .section-padding {
        padding: 4rem 1.5rem
    }
}

@media(min-width:1024px) {
    .section-padding {
        padding: 6rem 2rem
    }
}

.heading-xl {
    font-size: 2rem;
    line-height: 1.2
}

.heading-lg {
    font-size: 1.5rem;
    line-height: 1.3
}

.heading-md {
    font-size: 1.25rem;
    line-height: 1.4
}

@media(min-width:768px) {
    .heading-xl {
        font-size: 3rem
    }

    .heading-lg {
        font-size: 2rem
    }

    .heading-md {
        font-size: 1.5rem
    }
}

@media(min-width:1024px) {
    .heading-xl {
        font-size: 4rem
    }

    .heading-lg {
        font-size: 2.5rem
    }

    .heading-md {
        font-size: 1.75rem
    }
}

@supports(padding:env(safe-area-inset-top)) {
    .safe-area-top {
        padding-top: env(safe-area-inset-top)
    }

    .safe-area-bottom {
        padding-bottom: env(safe-area-inset-bottom)
    }
}