.bg-dark-grid {
    background-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
        );
    background-size: 30px 30px;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

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

@keyframes pulse-btn {
    0% {
        box-shadow: 0 0 0 0 rgba(103, 232, 249, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(103, 232, 249, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(103, 232, 249, 0);
    }
}

.animate-pulse-btn {
    animation: pulse-btn 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-gradient-animated {
    background: linear-gradient(
        270deg,
        #1a202c,
        #0f172a,
        #0d3a4b,
        #0f172a,
        #1a202c
    );
    background-size: 400% 400%;
    animation: gradient-shift 15s ease infinite;
}

.section-divider-top {
    clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%);
}

.section-divider-bottom {
    clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 100%);
}

.nav-link-underline::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: #67e8f9;
    transition: width 0.3s ease-in-out;
    position: absolute;
    left: 0;
    bottom: -4px;
}

.nav-link-underline:hover::after {
    width: 100%;
}

.card-hover-effect {
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-hover-effect:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(103, 232, 249, 0.4);
    border-color: #67e8f9;
}

details > summary {
    cursor: pointer;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}