/* A tag title */
    [data-title] {
        position: relative;
        overflow: visible;
    }

    [data-title]::after {
        content: attr(data-title);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: normal;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.2s ease;
        z-index: 100;
    }

    [data-title]:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px);
    }

    html {
        scroll-behavior: smooth;
    }


    /* <!-- Animation Keyframes --> */

    @keyframes float-slow {

        0%,
        100% {
            transform: translateY(0) translateX(0);
        }

        50% {
            transform: translateY(-20px) translateX(10px);
        }
    }

    @keyframes float-medium {

        0%,
        100% {
            transform: translateY(0) translateX(0);
        }

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

    @keyframes float-fast {

        0%,
        100% {
            transform: translateY(0) translateX(0);
        }

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

    @keyframes ping-slow {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }


    @keyframes draw {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }


    /* Custom Animations */
    @keyframes pulse-slow {

        0%,
        100% {
            opacity: 0.2;
            transform: scale(1);
        }

        50% {
            opacity: 0.3;
            transform: scale(1.05);
        }
    }

    @keyframes pulse-medium {

        0%,
        100% {
            opacity: 0.2;
            transform: scale(1);
        }

        50% {
            opacity: 0.25;
            transform: scale(1.03);
        }
    }

    @keyframes pulse-fast {

        0%,
        100% {
            opacity: 0.15;
            transform: scale(1);
        }

        50% {
            opacity: 0.2;
            transform: scale(1.02);
        }
    }

    @keyframes ping-slow {
        0% {
            transform: scale(0.8);
            opacity: 0.8;
        }

        100% {
            transform: scale(2.5);
            opacity: 0;
        }
    }


    /* CSS Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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


    @keyframes floatUp {
        0% {
            transform: translateY(0);
            opacity: 0.1;
        }

        10% {
            opacity: 0.6;
        }

        90% {
            opacity: 0.6;
        }

        100% {
            transform: translateY(-100vh);
            opacity: 0;
        }
    }



    .animate-fade-in-up {
        animation: fadeInUp 1s ease-out forwards;
    }

    .animation-delay-100 {
        animation-delay: 0.2s;
    }

    .animation-delay-200 {
        animation-delay: 0.4s;
    }

    .animation-delay-300 {
        animation-delay: 0.6s;
    }

    /* Binary animation styles */
    .binary-animation div {
        position: absolute;
        color: rgba(0, 180, 216, 0.3);
        font-family: monospace;
        font-size: 0.875rem;
        animation: floatUp 30s linear infinite;
    }


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

    .animate-pulse-medium {
        animation: pulse-medium 4s ease-in-out infinite;
    }

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

    .animate-ping-slow {
        animation: ping-slow 3s ease-out infinite;
    }



    .animate-draw {
        animation: draw 3s ease-in-out forwards;
    }

    .animate-spin-slow {
        animation: spin-slow 10s linear infinite;
    }


    .animate-ping-slow {
        animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

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

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

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


    #select {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300b4d8'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.25rem;
    }


    /* ======================================================================== */
    /* Preloader */
    /* ======================================================================== */

    body {
        overflow: hidden;
    }

    body.loaded {
        overflow: overlay;
    }

    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom right, #1b1f24, #2a3a4a);
        /* background: linear-gradient( to bottom right, rgba(0, 119, 182), rgba(56, 176, 0)); */
        z-index: 9999;
        display: grid;
        place-content: center;
        justify-items: center;
        transition: 500ms ease;
    }

    .preloader>* {
        transition: 250ms ease;
    }

    .preloader.loaded {
        opacity: 0;
    }

    .preloader.loaded {
        transition-delay: 250ms;
        transform: translateY(100%);
    }

    .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid #f1faff;
        border-top: 3px solid #00b4d8;
        margin-block-end: 45px;
        animation: spin 1s infinite linear;
    }

    .preloader .text {
        font-size: calc(2rem + 3vw);
        font-weight: 600;
        background-image: linear-gradient(90deg, transparent 0% 16.66%, #f1faff 33.33% 50%, transparent 66.66% 75%);
        background-size: 500%;
        line-height: 1em;
        text-transform: uppercase;
        letter-spacing: 16px;
        padding-inline-start: 16px;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-stroke: 1.5px #f1faff;
        animation: loading linear 2s infinite;
    }

    @keyframes loading {
        0% {
            background-position: 100%;
        }

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


    /* .rm_op {
        opacity: 1 !important;
        transform: translateY(0) !important;
    } */



    /* ======================================================================== */
    /* Bubble Effect */
    /* ======================================================================== */

    .bubble {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle, var(--bubble-color) 0%, transparent 70%);
        filter: blur(20px);
        animation: float linear infinite;
        z-index: 0;
    }

    .bubble::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, var(--bubble-color) 0%, transparent 70%);
        filter: blur(20px);
    }

    @keyframes float {
        0% {
            transform: translate(0, 0) rotate(0deg);
            opacity: 0.8;
        }

        25% {
            transform: translate(20px, -30px) rotate(90deg);
            opacity: 1;
        }

        50% {
            transform: translate(40px, 0) rotate(180deg);
            opacity: 0.8;
        }

        75% {
            transform: translate(20px, 30px) rotate(270deg);
            opacity: 1;
        }

        100% {
            transform: translate(0, 0) rotate(360deg);
            opacity: 0.8;
        }
    }



    /* Gradient Text */
    .text-transparent {
        -webkit-text-fill-color: transparent;
    }

    /* Hover Effects */
    .hover-scale-105 {
        transition: transform 0.3s ease;
    }

    .hover-scale-105:hover {
        transform: scale(1.05);
    }

    /* Background Blur */
    .backdrop-blur-sm {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }