html {
    font-family: 'Manrope', sans-serif;
    scroll-behavior: smooth;
}

@keyframes wiggle {
    0% {
        transform: translate(-50%, 50%) rotate(0deg) scale(1.25);
    }

    25% {
        transform: translate(-51%, 51%) rotate(-1deg) scale(1.26);
    }

    50% {
        transform: translate(-50%, 52%) rotate(0deg) scale(1.25);
    }

    75% {
        transform: translate(-49%, 51%) rotate(1deg) scale(1.24);
    }

    100% {
        transform: translate(-50%, 50%) rotate(0deg) scale(1.25);
    }
}

@keyframes wiggle-lg {
    0% {
        transform: translate(-50%, 50%) rotate(0deg) scale(1.7);
    }

    25% {
        transform: translate(-51%, 51%) rotate(-1deg) scale(1.71);
    }

    50% {
        transform: translate(-50%, 52%) rotate(0deg) scale(1.7);
    }

    75% {
        transform: translate(-49%, 51%) rotate(1deg) scale(1.69);
    }

    100% {
        transform: translate(-50%, 50%) rotate(0deg) scale(1.7);
    }
}

.animate-wiggle {
    animation: wiggle 3s ease-in-out infinite;
}

@media (min-width: 1024px) {
    .animate-wiggle {
        animation: wiggle-lg 3s ease-in-out infinite;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

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

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out forwards;
}

.animate-slideDown {
    animation: slideDown 0.3s ease-in-out forwards;
}

.animate-slideUp {
    animation: slideUp 0.3s ease-in-out forwards;
}

.animate-fadeOut {
    animation: fadeOut 0.3s ease-in-out forwards;
}

.hidden-section {
    opacity: 0;
    transition: all 1s ease;
}

.slide-in-left {
    transform: translateX(-100px);
}

.slide-in-right {
    transform: translateX(100px);
}

.slide-in-bottom {
    transform: translateY(100px);
}

.slide-in-top {
    transform: translateY(-100px);
}

.fade-in {
    opacity: 0;
}

.hero-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
    will-change: opacity, transform;
}

.feature-card-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.appear {
    opacity: 1;
    transform: translate(0, 0);
}

#mobile-menu {
    transform-origin: top center;
}

    #mobile-menu.showing {
        animation: slideDown 0.3s ease-in-out forwards;
        display: block;
    }

    #mobile-menu.hiding {
        animation: slideUp 0.3s ease-in-out forwards;
        display: block;
    }

.prevent-drag {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.btn-animated-gradient {
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-accent));
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    background-size: 200% auto;
}

    .btn-animated-gradient::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, var(--color-hover-primary), var(--color-hover-primary-accent));
        z-index: -1;
        transition: opacity 0.5s ease;
        border-radius: inherit;
        opacity: 0;
    }

    .btn-animated-gradient:hover::before {
        opacity: 1;
    }

    .btn-animated-gradient img {
        transition: transform 0.3s ease;
    }

    .btn-animated-gradient:hover img {
        transform: scale(1.2);
    }

.faded-line-primary {
    --fade-color: var(--color-primary);
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-image-source: linear-gradient(to right, transparent, var(--fade-color) 50%, transparent);
    border-image-slice: 1;
}

.faded-dotted-line-primary {
    --fade-color: var(--color-primary);
    background: linear-gradient(to right, transparent 50%, #fff 50%), linear-gradient(to right, var(--fade-color), transparent);
    background-size: 10px 1px, 100% 1px;
}

.faded-dotted-line-dark {
    --fade-color: var(--color-dark-01);
    background: linear-gradient(to right, transparent 50%, var(--color-gray) 50%), linear-gradient(to right, var(--fade-color), transparent);
    background-size: 16px 1px, 100% 1px;
}

.faded-dotted-line-white {
    --bg-color: var(--color-dark-01);
    background: linear-gradient(to right, transparent 50%, var(--bg-color) 50%), linear-gradient(to right, white, transparent);
    background-size: 16px 1px, 100% 1px;
}

.faded-dotted-line-white-bg-white {
    --bg-color: var(--color-dark-01);
    background: linear-gradient(to right, transparent 50%, var(--color-primary) 50%), linear-gradient(to right, white, transparent);
    background-size: 16px 1px, 100% 1px;
}

.border-gradient-rounded {
    --fade-color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: 20px;
    border-top-left-radius: 0;
    background: linear-gradient(135deg, #F0F4F3 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(135deg, transparent 30%, var(--fade-color));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

.bg-white-border-gradient-rounded {
    --fade-color: var(--color-primary);
    border: 1px solid transparent;
    border-radius: 20px;
    border-top-left-radius: 0;
    background: linear-gradient(135deg, #fff 0%, #fff 100%), linear-gradient(135deg, transparent 30%, var(--fade-color));
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}


.pricing-dots-decoration {
    overflow: hidden;
}

    .pricing-dots-decoration img {
        filter: drop-shadow(0px 1000px 0 var(--color-dark-02));
        transform: translateY(-1000px);
    }

input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

input[type="text"], input[type="email"] {
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

    input[type="text"]:focus, input[type="email"]:focus {
        border-color: var(--color-primary);
    }

.carousel-arrow-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    .carousel-arrow-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .carousel-arrow-btn:active {
        transform: translateY(0);
    }

    .carousel-arrow-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: var(--color-gray);
        transform: translateY(0);
        box-shadow: none;
    }

.text-primary {
    color: var(--color-primary);
    fill: var(--color-primary);
}

svg:focus {
    outline: none;
}

@media (max-width: 767.98px) {
    .auto-hover-active {
        background-color: var(--color-primary-transparent) !important;
        border-color: transparent !important;
    }

        .auto-hover-active img {
            opacity: 1 !important;
            max-height: 4rem !important;
        }

        .auto-hover-active p:first-of-type {
            margin-bottom: 0.75rem !important;
        }

        .auto-hover-active .overflow-hidden {
            max-height: 24rem !important;
            opacity: 1 !important;
        }
}

@media (max-width: 767.98px) {
    .drag-disabled {
        cursor: default !important;
    }

        .drag-disabled > * {
            cursor: default !important;
        }

    .carousel-nav-controls .carousel-arrow-btn {
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

        .carousel-nav-controls .carousel-arrow-btn svg {
            height: 1.75rem;
            width: 1.75rem;
        }
}