/* PRELOADER ANIMATION */

    /* SETTINGS */
    :root {
        /* Colors */
        --grey: #212121;
        --spot: #68ebbc;

        /* Animation */
        --animation-speed: 1s;
    }

    .preloader {
        display: block;
        position: relative;
        width: 16px;
        height: 6px;
        margin: 10px auto;
        background: var(--grey);
        animation-name: loader;
        animation-duration: var(--animation-speed);
        animation-timing-function: ease-out;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }

    .preloader::before,
    .preloader::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: var(--grey);
        animation-duration: var(--animation-speed);
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }

    .preloader::before {
        left: 0;
        transform: translate(-100%, -50%);
        border-right-color: transparent;
        animation-name: loader-left;
    }

    .preloader::after {
        right: 0;
        transform: translate(100%, -50%);
        border-left-color: transparent;
        animation-name: loader-right;
    }

    @keyframes loader {

        0%,
        10% {
            transform: scale(1);
        }

        15% {
            transform: scale(0.7, 1.2);
        }

        40%,
        60% {
            transform: scale(1);
        }

        65% {
            transform: scale(0.7, 1.2);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes loader-left {
        0% {
            transform: translate(-400%, -50%) scale(1.3, 0.6);
        }

        10%,
        60% {
            transform: translate(-100%, -50%) scale(1);
        }

        65%,
        85% {
            transform: translate(-300%, -50%);
        }

        87.5% {
            transform: translate(-310%, -50%);
        }

        90% {
            transform: translate(-290%, -50%);
        }

        92.5% {
            transform: translate(-310%, -50%) scale(1);
        }

        95% {
            transform: translate(-290%, -50%);
        }

        100% {
            transform: translate(-400%, -50%);
        }
    }

    @keyframes loader-right {

        0%,
        10% {
            transform: translate(100%, -50%) scale(1);
        }

        15%,
        35% {
            transform: translate(300%, -50%);
        }

        15% {
            transform: scale(1.3, 0.6);
        }

        20% {
            transform: scale(1);
        }

        37.5% {
            transform: translate(310%, -50%);
        }

        40% {
            transform: translate(290%, -50%);
        }

        42.5% {
            transform: translate(310%, -50%);
        }

        45% {
            transform: translate(290%, -50%) scale(1);
        }

        50% {
            transform: translate(400%, -50%) scale(1.3, 0.6);
        }

        60%,
        100% {
            transform: translate(100%, -50%) scale(1);
        }
    }

    /* BASE STYLING */
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        font-family: "Poppins", sans-serif;
        /* background: var(--spot); */
        text-rendering: geometricprecision;
    }

    /* .pre_loader {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        padding: 20px;
        box-sizing: border-box;
    } */

    #pre_loader {
        position: fixed;
        display: flex;
        top: 0;
        left: 0;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        z-index: 9999999;
        background-repeat: no-repeat;
        background-position: center;
        right: 0;
        bottom: 0;
    }

    #pre_loader-status {
        height: 210px;
        width: 210px;
        justify-content: center;
        align-items: center;
        background-repeat: no-repeat;
        background-position: center;
        margin: -100px 0 0 -100px;
        position: absolute;
        left: 50%;
        top: 50%;
    }

    .text {
        display: block;
        padding: 30px;
        color: var(--grey);
        text-transform: uppercase;
        font-size: 60px;
        letter-spacing: 4px;
        font-weight: 800;
    }

    .text:hover {
        background: var(--grey);
        color: var(--spot);
    }

    .text:hover .preloader,
    .text:hover .preloader::before,
    .text:hover .preloader::after {
        background: var(--spot);
    }

    /* Responsive Preloader */
    @media (max-width: 768px) {
        .preloader {
            width: 12px;
            height: 4px;
        }

        .text {
            font-size: 40px;
            /* Smaller font size for mobile */
        }
    }

    @media (max-width: 480px) {
        .preloader {
            width: 10px;
            height: 3px;
        }

        .text {
            font-size: 30px;
            /* Even smaller font size for small mobile screens */
        }
    }