html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body1 {
    padding: 0;
    margin: 0;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh
}

h1b {
    color: #484848;
    font-size: 50px;
    font-weight: bold;
    font-family: monospace;
    letter-spacing: 7px;
    cursor: pointer
}

.glitch {
    position: center;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 5px;
    z-index: 1;
    animation: shift 1s ease-in-out infinite alternate;
}

    .glitch:before,
    .glitch:after {
        display: block;
        content: attr(data-glitch);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.8;
    }

    .glitch:before {
        animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
        color: #8b00ff;
        z-index: -1;
    }

    .glitch:after {
        animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
        color: #00e571;
        z-index: -2;
    }

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-3px, 3px);
    }

    40% {
        transform: translate(-3px, -3px);
    }

    60% {
        transform: translate(3px, 3px);
    }

    80% {
        transform: translate(3px, -3px);
    }

    to {
        transform: translate(0);
    }
}

@keyframes shift {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
    }

    41% {
        transform: skewX(10deg);
    }

    42% {
        transform: skewX(-10deg);
    }

    59% {
        transform: skewX(40deg) skewY(10deg);
    }

    60% {
        transform: skewX(-40deg) skewY(-10deg);
    }

    63% {
        transform: skewX(10deg) skewY(-5deg);
    }

    70% {
        transform: skewX(-50deg) skewY(-20deg);
    }

    71% {
        transform: skewX(10deg) skewY(-10deg);
    }
}


h1b span {
    transition: .5s linear
}

h1b:hover span:nth-child(1) {
    margin-right: 5px
}

    h1b:hover span:nth-child(1):after {
        content: "'";
    }

h1b:hover span:nth-child(2) {
    margin-left: 30px
}

h1b:hover span {
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
}


body {
    background-image: url("../Images/Retail1.jpeg");
    background-repeat: no-repeat;
    display: block;
    background-position: center; /* Centers the image horizontally and vertically */
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    width: 50%; /* Optional: Adjust width as needed, but not 100% */
}

.box {
    width: 140px;
    height: auto;
    float: left;
    transition: .5s linear;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    margin: 0 5px;
    background: transparent;
    text-transform: uppercase;
    font-weight: 900;
}

    .box:before {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        height: 4px;
        width: 100%;
        border-bottom: 4px solid transparent;
        border-left: 4px solid transparent;
        box-sizing: border-box;
        transform: translateX(100%);
    }

    .box:after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        border-top: 4px solid transparent;
        border-right: 4px solid transparent;
        box-sizing: border-box;
        transform: translateX(-100%);
    }

    .box:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    }

        .box:hover:before {
            border-color: blue;
            height: 100%;
            transform: translateX(0);
            transition: .3s transform linear, .3s height linear .3s;
        }

        .box:hover:after {
            border-color: Blue;
            height: 100%;
            transform: translateX(0);
            transition: .3s transform linear, .3s height linear .5s;
        }

button {
    color: black;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
}

.grid {
    height: 800px;
    width: 800px;
    background-image: linear-gradient(to right, #0f0f10 1px, transparent 1px), linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
    background-size: 1rem 1rem;
    background-position: center center;
    position: absolute;
    z-index: -1;
    filter: blur(1px);
}

.white,
.border,
.darkBorderBg,
.glow {
    max-height: 70px;
    max-width: 314px;
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    z-index: -1;
    /* Border Radius */
    border-radius: 12px;
    filter: blur(3px);
}

.input {
    background-color: #010201;
    border: none;
    /* padding:7px; */
    width: 301px;
    height: 56px;
    border-radius: 10px;
    color: white;
    padding-inline: 59px;
    font-size: 18px;
}

#poda {
    display: flex;
    align-items: center;
    justify-content: center;
}

.input::placeholder {
    color: #c0b9c0;
}

.input:focus {
    outline: none;
}

#main:focus-within > #input-mask {
    display: none;
}

#input-mask {
    pointer-events: none;
    width: 100px;
    height: 20px;
    position: absolute;
    background: linear-gradient(90deg, transparent, black);
    top: 18px;
    left: 70px;
}

#pink-mask {
    pointer-events: none;
    width: 30px;
    height: 20px;
    position: absolute;
    background: #cf30aa;
    top: 10px;
    left: 5px;
    filter: blur(20px);
    opacity: 0.8;
    //animation:leftright 4s ease-in infinite;
    transition: all 2s;
}

#main:hover > #pink-mask {
    //animation: rotate 4s linear infinite;
    opacity: 0;
}

.white {
    max-height: 63px;
    max-width: 307px;
    border-radius: 10px;
    filter: blur(2px);
}

    .white::before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(83deg);
        position: absolute;
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-position: 0 0;
        filter: brightness(1.4);
        background-image: conic-gradient( rgba(0, 0, 0, 0) 0%, #a099d8, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 50%, #dfa2da, rgba(0, 0, 0, 0) 58% );
        // animation: rotate 4s linear infinite;
        transition: all 2s;
    }

.border {
    max-height: 59px;
    max-width: 303px;
    border-radius: 11px;
    filter: blur(0.5px);
}

    .border::before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(70deg);
        position: absolute;
        width: 600px;
        height: 600px;
        filter: brightness(1.3);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient( #1c191c, #402fb5 5%, #1c191c 14%, #1c191c 50%, #cf30aa 60%, #1c191c 64% );
        // animation: rotate 4s 0.1s linear infinite;
        transition: all 2s;
    }

.darkBorderBg {
    max-height: 65px;
    max-width: 312px;
}

    .darkBorderBg::before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(82deg);
        position: absolute;
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient( rgba(0, 0, 0, 0), #18116a, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 50%, #6e1b60, rgba(0, 0, 0, 0) 60% );
        transition: all 2s;
    }

#poda:hover > .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(262deg);
}

#poda:hover > .glow::before {
    transform: translate(-50%, -50%) rotate(240deg);
}

#poda:hover > .white::before {
    transform: translate(-50%, -50%) rotate(263deg);
}

#poda:hover > .border::before {
    transform: translate(-50%, -50%) rotate(250deg);
}

#poda:hover > .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(-98deg);
}

#poda:hover > .glow::before {
    transform: translate(-50%, -50%) rotate(-120deg);
}

#poda:hover > .white::before {
    transform: translate(-50%, -50%) rotate(-97deg);
}

#poda:hover > .border::before {
    transform: translate(-50%, -50%) rotate(-110deg);
}

#poda:focus-within > .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(442deg);
    transition: all 4s;
}

#poda:focus-within > .glow::before {
    transform: translate(-50%, -50%) rotate(420deg);
    transition: all 4s;
}

#poda:focus-within > .white::before {
    transform: translate(-50%, -50%) rotate(443deg);
    transition: all 4s;
}

#poda:focus-within > .border::before {
    transform: translate(-50%, -50%) rotate(430deg);
    transition: all 4s;
}

.glow {
    overflow: hidden;
    filter: blur(30px);
    opacity: 0.4;
    max-height: 130px;
    max-width: 354px;
}

    .glow:before {
        content: "";
        z-index: -2;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(60deg);
        position: absolute;
        width: 999px;
        height: 999px;
        background-repeat: no-repeat;
        background-position: 0 0;
        /*border color, change middle color*/
        background-image: conic-gradient( #000, #402fb5 5%, #000 38%, #000 50%, #cf30aa 60%, #000 87% );
        /* change speed here */
        //animation: rotate 4s 0.3s linear infinite;
        transition: all 2s;
    }

@keyframes rotate {
    100% {
        transform: translate(-50%, -50%) rotate(450deg);
    }
}

@keyframes leftright {
    0% {
        transform: translate(0px, 0px);
        opacity: 1;
    }

    49% {
        transform: translate(250px, 0px);
        opacity: 0;
    }

    80% {
        transform: translate(-40px, 0px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

#filter-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    max-height: 40px;
    max-width: 38px;
    height: 100%;
    width: 100%;
    isolation: isolate;
    overflow: hidden;
    /* Border Radius */
    border-radius: 10px;
    background: linear-gradient(180deg, #161329, black, #1d1b4b);
    border: 1px solid transparent;
}

.filterBorder {
    height: 42px;
    width: 40px;
    position: absolute;
    overflow: hidden;
    top: 7px;
    right: 7px;
    border-radius: 10px;
}

    .filterBorder::before {
        content: "";
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        position: absolute;
        width: 600px;
        height: 600px;
        background-repeat: no-repeat;
        background-position: 0 0;
        filter: brightness(1.35);
        background-image: conic-gradient( rgba(0, 0, 0, 0), #3d3a4f, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, #3d3a4f, rgba(0, 0, 0, 0) 100% );
        animation: rotate 4s linear infinite;
    }

#main {
    position: relative;
}

#search-icon {
    position: absolute;
    left: 20px;
    top: 15px;
}

.cardmod {
    justify-content: center;
    max-width: 100%;
    height: auto; /* Maintains the aspect ratio */
    align-items: center;
    width: auto;
    height: auto;
    background: rgb(223, 225, 235);
    border-radius: 50px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.navbarblue {
    color: cyan;
    padding: 10px;
    background-color: cornflowerblue;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.cardwhite {
    width: auto;
    height: auto;
    background: white;
    border-radius: 10px;
    transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shadow {
    box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(190, 190, 190), 0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.containermod {
    max-width: auto;
    justify-items: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    background: #F8F9FD;
    background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
    border-radius: 40px;
    padding: 1px 35px;
    border: 5px solid rgb(255, 255, 255);
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
    margin: 20px;
}

.headingmod {
    text-align: center;
    font-weight: 900;
    font-size: 30px;
    color: rgb(16, 137, 211);
}

.formmod {
    margin-top: 20px;
}

.form .input {
    width: 100%;
    background: white;
    border: none;
    padding: 15px 20px;
    border-radius: 20px;
    margin-top: 15px;
    box-shadow: #cff0ff 0px 10px 10px -5px;
    border-inline: 2px solid transparent;
}

    .form .input::-moz-placeholder {
        color: rgb(170, 170, 170);
    }

    .form .input::placeholder {
        color: rgb(170, 170, 170);
    }

    .form .input:focus {
        outline: none;
        border-inline: 2px solid #12B1D1;
    }

.form .forgot-password {
    display: block;
    margin-top: 10px;
    margin-left: 10px;
}

    .form .forgot-password a {
        font-size: 11px;
        color: #0099ff;
        text-decoration: none;
    }

.form .login-button {
    display: block;
    width: 100%;
    font-weight: bold;
    background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
    color: white;
    padding-block: 15px;
    margin: 20px auto;
    border-radius: 20px;
    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
    border: none;
    transition: all 0.2s ease-in-out;
}

    .form .login-button:hover {
        transform: scale(1.03);
        box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
    }

    .form .login-button:active {
        transform: scale(0.95);
        box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
    }

.social-account-container {
    margin-top: 25px;
}

    .social-account-container .title {
        display: block;
        text-align: center;
        font-size: 10px;
        color: rgb(170, 170, 170);
    }

    .social-account-container .social-accounts {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 5px;
    }

        .social-account-container .social-accounts .social-button {
            background: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(112, 112, 112) 100%);
            border: 5px solid white;
            padding: 5px;
            border-radius: 50%;
            width: 40px;
            aspect-ratio: 1;
            display: grid;
            place-content: center;
            box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 12px 10px -8px;
            transition: all 0.2s ease-in-out;
        }

            .social-account-container .social-accounts .social-button .svg {
                fill: white;
                margin: auto;
            }

            .social-account-container .social-accounts .social-button:hover {
                transform: scale(1.2);
            }

            .social-account-container .social-accounts .social-button:active {
                transform: scale(0.9);
            }

.agreement {
    display: block;
    text-align: center;
    margin-top: 15px;
}

    .agreement a {
        text-decoration: none;
        color: #0099ff;
        font-size: 9px;
    }

.semicircle,
.semicircle div {
    /*  Adjust the size of the entire animation here.
      (Remove max size below to go above 300px.) */
    width: 170px;
    height: 170px;
    /* Adjust the speed or timing function of the animation here. */
    animation: 6s rotate141 infinite linear;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

    .semicircle div {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

        .semicircle:before,
        .semicircle div:before {
            content: '';
            width: 100%;
            height: 50%;
            display: block;
            background: radial-gradient(transparent, transparent 65%, #000 65%, #000);
            background-size: 100% 200%;
        }

@keyframes rotate141 {
    to {
        transform: rotate(360deg);
    }
}


.inputradio {
    -webkit-appearance: none;
    /* remove default */
    margin: 6px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: hsla(0, 0%, 100%, 0.15) 0 1px 1px, inset hsla(0, 0%, 0%, 0.5) 0 0 0 1px;
    background-color: hsla(0, 0%, 0%, 0.2);
    background-repeat: no-repeat;
    -webkit-transition: background-position 0.15s cubic-bezier(0.8, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.8, 0, 1, 1);
    outline: none;
}

    .inputradio.green {
        background-image: -webkit-radial-gradient( hsla(118, 100%, 90%, 1) 0%, hsla(118, 100%, 70%, 1) 15%, hsla(118, 100%, 60%, 0.3) 28%, hsla(118, 100%, 30%, 0) 70% );
    }

    .inputradio.yellow {
        background-image: -webkit-radial-gradient( hsla(50, 100%, 90%, 1) 0%, hsla(50, 100%, 70%, 1) 15%, hsla(50, 100%, 60%, 0.3) 28%, hsla(50, 100%, 30%, 0) 70% );
    }

    .inputradio.red {
        background-image: -webkit-radial-gradient( hsla(0, 100%, 90%, 1) 0%, hsla(0, 100%, 70%, 1) 15%, hsla(0, 100%, 60%, 0.3) 28%, hsla(0, 100%, 30%, 0) 70% );
    }

    .inputradio:checked {
        -webkit-transition: background-position 0.2s 0.15s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
    }

    .inputradio:active {
        -webkit-transform: scale(1.5);
        -webkit-transition: -webkit-transform 0.1s cubic-bezier(0, 0, 0.2, 1);
    }

    /* The up/down direction logic */

    .inputradio,
    .inputradio:active {
        background-position: 24px 0;
    }

        .inputradio:checked {
            background-position: 0 0;
        }

            .inpuradiot:checked ~ .inputradio,
            .inputradio:checked ~ .inputradio:active {
                background-position: 0 0;
            }




.fullscreen-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 20px 0;
    box-sizing: border-box;
}

.radio-group-container {
    background-color: rgba(26, 27, 40, 0.7);
    padding: 20px 35px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 90%;
    max-width: 280px;
    transition: all 0.3s ease;
}

.radio-label {
    display: flex;
    align-items: center;
    margin: 30px 0;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.radio-input {
    display: none;
}

.radio-custom {
    width: 22px;
    height: 22px;
    background-color: transparent;
    border: 2px solid #5c5e79;
    border-radius: 50%;
    margin-right: 18px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .radio-custom::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #8a8b9f;
        border-radius: 50%;
        transform: scale(0);
        transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .radio-custom::after {
        content: "";
        position: absolute;
        width: 34px;
        height: 34px;
        border: 2px solid transparent;
        border-radius: 50%;
        border-top-color: #00a6ff;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.4s ease;
    }

.radio-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: #c1c3d9;
    transition: color 0.3s ease;
}

.radio-label:hover .radio-input:not(:checked) + .radio-custom {
    transform: scale(1.1);
    border-color: #8a8daf;
}

.radio-label:hover .radio-text {
    color: #e2e4f4;
}

.radio-input:checked + .radio-custom {
    border-color: #00a6ff;
    transform: scale(0.9);
}

    .radio-input:checked + .radio-custom::before {
        transform: scale(1);
        background-color: #00a6ff;
    }

    .radio-input:checked + .radio-custom::after {
        opacity: 1;
        transform: scale(1.3);
        animation: orbit 2.5s infinite linear;
        box-shadow: 0 0 30px #00a6ff, 0 0 80px rgba(0, 166, 255, 0.2);
    }

.radio-input:checked ~ .radio-text {
    color: #ffffff;
    font-weight: 700;
}




@keyframes orbit {
    from {
        transform: rotate(0deg);
    }

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

/* Media Query for Mobile Responsiveness */
@media (max-width: 400px) {
    .radio-group-container {
        padding: 15px 25px;
    }

    .radio-label {
        margin: 25px 0;
    }

    .radio-text {
        font-size: 1rem;
    }
}

.checkbox-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-input {
    display: none;
}

.checkbox-label {
    position: relative;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border: 2px solid #00ff00;
    border-radius: 50%;
    box-shadow: 0 0 12px #00ff00;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid background */
.grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient( 45deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.1) 2px, transparent 2px, transparent 6px );
    opacity: 0.3;
    transition: opacity 0.3s ease;
    z-index: 0;
    animation: grid-shift 1.5s linear infinite paused;
}

/* Checkmark */
.checkmark {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 3px solid #00ff00;
    border-radius: 25%;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

    .checkmark::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 6px;
        border-left: 3px solid #00ff00;
        border-bottom: 3px solid #00ff00;
        transform: translate(-50%, -70%) rotate(-45deg);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

/* Glitch effects */
.glitch-overlay-h {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(0, 255, 0, 0.2), transparent );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.glitch-overlay-v {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 0deg, transparent, rgba(0, 255, 0, 0.15), transparent );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Binary particles */
.binary-particles {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

.particle {
    position: absolute;
    color: #00ff00;
    font-size: 10px;
    opacity: 0;
    animation: particle-rise 1.2s linear infinite;
}

/* Hover state */
.checkbox-label:hover {
    box-shadow: 0 0 20px #00ff00;
    transform: scale(1.05);
}

    .checkbox-label:hover .glitch-overlay-h {
        opacity: 1;
        animation: glitch-h 1s infinite;
    }

    .checkbox-label:hover .glitch-overlay-v {
        opacity: 1;
        animation: glitch-v 0.8s infinite;
    }

/* Checked state */
.checkbox-input:checked + .checkbox-label {
    background: rgba(0, 255, 0, 0.2);
    border-color: #00ff00;
    box-shadow: 0 0 25px #00ff00;
}

    .checkbox-input:checked + .checkbox-label .grid-bg {
        opacity: 0.6;
        animation-play-state: running;
    }

    .checkbox-input:checked + .checkbox-label .checkmark {
        opacity: 1;
        transform: rotate(360deg);
        animation: check-rotate 0.5s ease-in-out;
    }

        .checkbox-input:checked + .checkbox-label .checkmark::before {
            opacity: 1;
            animation: check-bounce 0.4s ease-in-out 0.1s;
        }

    .checkbox-input:checked + .checkbox-label .glitch-overlay-h {
        opacity: 0.8;
        animation: glitch-h 0.6s infinite;
    }

    .checkbox-input:checked + .checkbox-label .glitch-overlay-v {
        opacity: 0.8;
        animation: glitch-v 0.5s infinite;
    }

/* Animations */
@keyframes grid-shift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 6px 6px;
    }
}

@keyframes glitch-h {
    0% {
        transform: translateX(-100%);
    }

    20% {
        transform: translateX(100%) skewX(5deg);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes glitch-v {
    0% {
        transform: translateY(-100%);
    }

    30% {
        transform: translateY(100%) skewY(3deg);
    }

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

@keyframes check-rotate {
    0% {
        transform: scale(0) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(180deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}

@keyframes check-bounce {
    0% {
        opacity: 0;
        transform: translate(-50%, -70%) rotate(-45deg) scale(0);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -70%) rotate(-45deg) scale(1.2);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -70%) rotate(-45deg) scale(1);
    }
}

@keyframes particle-rise {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    20% {
        opacity: 0.7;
    }

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



@property --p {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@property --fill {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

@property --glow {
    syntax: "<number>";
    initial-value: 0;
    inherits: false;
}

.cbx {
    --saffron: #ff9933;
    --orange: #ff4500;
    --ink: #fff;
    --size: 42px;
    --bw: 2.5px;
    --radius: 12px;
    --stroke: 3px;
    display: inline-block;
}

.cbx__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.cbx__label {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.cbx__text {
    font: 700 1.2rem/1 system-ui, Segoe UI, Roboto, sans-serif;
    letter-spacing: 0.02em;
    padding: 10px 1px;
    background: linear-gradient(90deg, var(--saffron), var(--orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.9;
    transition: opacity 0.25s ease, transform 0.2s ease;
}

.cbx__box {
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius);
    border: var(--bw) solid color-mix(in oklab, var(--saffron), transparent 55%);
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.06) ) padding-box;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), inset 0 -1px 2px rgba(0, 0, 0, 0.25), 0 0 calc(10px * var(--glow)) calc(2px * var(--glow)) color-mix(in oklab, var(--saffron), transparent 78%);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    --p: 0;
    --fill: 0;
    --glow: 0;
}

    .cbx__box::before {
        content: "";
        position: absolute;
        inset: calc(var(--bw) * -1);
        padding: var(--bw);
        border-radius: inherit;
        background: conic-gradient( from -90deg, color-mix(in oklab, var(--saffron), white 12%) 0 calc(var(--p) * 1turn), transparent 0 1turn );
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.28;
        pointer-events: none;
    }

    .cbx__box::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--orange), var(--saffron));
        transform-origin: left center;
        transform: scaleX(var(--fill));
        opacity: 0.18;
        pointer-events: none;
    }

.cbx__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cbx__path {
    fill: none;
    stroke: #fff;
    stroke-width: var(--stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) 0.06s, filter 0.2s;
    filter: drop-shadow( 0 0 0.2rem color-mix(in oklab, var(--saffron), white 20%) );
}

.cbx__input:focus-visible + .cbx__label .cbx__box {
    border-color: color-mix(in oklab, var(--saffron), white 16%);
    box-shadow: 0 0 0 0.18rem color-mix(in oklab, var(--saffron), transparent 72%), 0 0 0 0.38rem color-mix(in oklab, var(--orange), transparent 86%);
}

.cbx__input:checked + .cbx__label .cbx__box {
    --p: 1;
    --fill: 1;
    --glow: 1;
}

.cbx__input:checked + .cbx__label .cbx__path {
    stroke-dashoffset: 0;
}

.cbx__input:checked + .cbx__label .cbx__text {
    opacity: 1;
    transform: translateY(-1px);
}




.cardmod2 {
    position: relative;
    width: auto;
    height: auto;
    border-radius: 14px;
    z-index: 1111;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
    ;
}

.bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 190px;
    height: 240px;
    z-index: 2;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid white;
}

.blob {
    position: absolute;
    z-index: 1;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    border-radius: 50%;
    background-color: #ff0000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 5s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }

    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }

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

    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }

    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}



.svg-frame {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .svg-frame svg {
        position: absolute;
        transition: .5s;
        z-index: calc(1 - (0.2 * var(--j)));
        transform-origin: center;
        width: 344px;
        height: 344px;
        fill: none;
    }

    .svg-frame:hover svg {
        transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
    }

    .svg-frame svg #center {
        transition: .5s;
        transform-origin: center;
    }

    .svg-frame:hover svg #center {
        transform: rotate(-30deg) translateX(45px) translateY(-3px);
    }

#out2 {
    animation: rotate16 7s ease-in-out infinite alternate;
    transform-origin: center;
}

#out3 {
    animation: rotate16 3s ease-in-out infinite alternate;
    transform-origin: center;
    stroke: #ff0;
}

#inner3,
#inner1 {
    animation: rotate16 4s ease-in-out infinite alternate;
    transform-origin: center;
}

#center1 {
    fill: #ff0;
    animation: rotate16 2s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes rotate16 {
    to {
        transform: rotate(360deg);
    }
}



.loader {
    position: relative;
    width: 150px;
    height: 150px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .loader::before {
        content: '';
        position: absolute;
        inset: 20px;
        background: transparent;
        border: 1px dashed#444;
        border-radius: 50%;
        box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25), inset 5px 5px 35px rgba(0,0,0,0.25);
    }

    .loader::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px dashed#444;
        box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25), inset 5px 5px 35px rgba(0,0,0,0.25);
    }

    .loader span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 100%;
        background: transparent;
        transform-origin: top left;
        animation: radar81 2s linear infinite;
        border-top: 1px dashed #fff;
    }

        .loader span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: seagreen;
            transform-origin: top left;
            transform: rotate(-55deg);
            filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
        }

@keyframes radar81 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}



.loader1 {
    position: relative;
    margin: auto;
    box-sizing: border-box;
    background-clip: padding-box;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
    transform-origin: 50% 60%;
    transform: perspective(200px) rotateX(66deg);
    animation: spinner-wiggle 1.2s infinite;
}

    .loader1:before,
    .loader1:after {
        content: "";
        position: absolute;
        margin: -4px;
        box-sizing: inherit;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        opacity: .20;
        border: inherit;
        border-color: blue;
        animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
    }

    .loader1:before {
        border-top-color: #66e6ff;
    }

    .loader1:after {
        border-top-color: #f0db75;
        animation-delay: 0.3s;
    }

@keyframes spinner-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner-fade {
    20% {
        opacity: .1;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: .1;
    }
}



.loader__balls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.loader__balls__group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    height: 100px;
    width: 40px;
}

.ball {
    height: 30px;
    width: 30px;
    border-radius: 15px;
    position: absolute;
    transform-origin: bottom;
}

/* ANIMATION BALL 1*/
.loader__balls__group :nth-child(1) {
    background-color: #99e2d0;
    animation-name: jumpinBallAnimation1;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

@keyframes jumpinBallAnimation1 {
    0% {
        transform: translateY(0) scale(1, 1);
    }

    10% {
        transform: translateY(0) scale(1.3, 0.8);
    }

    11% {
        transform: translateY(0) scale(0.7, 1.2);
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
    }

    39% {
        transform: translateY(-75px) scale(1);
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
    }

    40% {
        transform: translateY(-75px) scale(1);
    }

    41% {
        transform: translateY(-75px) scale(1);
        animation-timing-function: cubic-bezier(1, 0, 1, 0);
    }

    69% {
        transform: translateY(0px) scale(1, 1);
        animation-timing-function: cubic-bezier(1, 0, 1, 0);
    }

    70% {
        transform: translateY(0) scale(1.5, 0.4);
    }

    80% {
        transform: translateY(0) scale(0.8, 1.2);
    }

    90% {
        transform: translateY(0) scale(1.1, 0.8);
    }

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

/* ANIMATION BALL 2*/
.loader__balls__group :nth-child(2) {
    background-color: #ff79da;
    animation-name: jumpinBallAnimation2;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

@keyframes jumpinBallAnimation2 {
    0% {
        transform: translateY(0) scale(1, 1);
    }

    10% {
        transform: translateY(0) scale(1.3, 0.8);
    }

    11% {
        transform: translateY(0) scale(0.7, 1.2);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }

    39% {
        transform: translateY(-75px) scale(1);
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
    }

    40% {
        transform: translateY(-75px) scale(1);
    }

    41% {
        transform: translateY(-75px) scale(1);
        animation-timing-function: cubic-bezier(1, 0, 1, 0.5);
    }

    69% {
        transform: translateY(0px) scale(1, 1);
        animation-timing-function: cubic-bezier(1, 0, 1, 0.5);
    }

    70% {
        transform: translateY(0) scale(1.5, 0.4);
    }

    80% {
        transform: translateY(0) scale(0.8, 1.2);
    }

    90% {
        transform: translateY(0) scale(1.1, 0.8);
    }

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

/* ANIMATION BALL 3*/
.loader__balls__group :nth-child(3) {
    background-color: #9356dc;
    animation-name: jumpinBallAnimation3;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
}

@keyframes jumpinBallAnimation3 {
    0% {
        transform: translateY(0) scale(1, 1);
    }

    10% {
        transform: translateY(0) scale(1.3, 0.8);
    }

    11% {
        transform: translateY(0) scale(0.7, 1.2);
        animation-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }

    39% {
        transform: translateY(-75px) scale(1);
        animation-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }

    40% {
        transform: translateY(-75px) scale(1);
    }

    41% {
        transform: translateY(-75px) scale(1);
        animation-timing-function: cubic-bezier(1, 0, 1, 1);
    }

    69% {
        transform: translateY(0px) scale(1, 1);
        animation-timing-function: cubic-bezier(1, 0, 1, 1);
    }

    70% {
        transform: translateY(0) scale(1.5, 0.4);
    }

    80% {
        transform: translateY(0) scale(0.8, 1.2);
    }

    90% {
        transform: translateY(0) scale(1.1, 0.8);
    }

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

.loader__balls__group .item1 {
    animation-delay: 0ms;
}

.loader__balls__group .item2 {
    animation-delay: 100ms;
}

.loader__balls__group .item3 {
    animation-delay: 200ms;
}




.containerloader {
    width: 600px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.content {
    display: inline-flex;
    position: sticky;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    font-size: 35px;
    line-height: 40px;
    color: blue;
}

.content__container {
    font-weight: 600;
    overflow: hidden;
    height: 40px;
    padding: 0 40px;
}

    .content__container:before {
        content: '[';
        left: 0;
    }

    .content__container:after {
        content: ']';
        position: absolute;
        right: 0;
    }

    .content__container:after, .content__container:before {
        position: absolute;
        top: -2px;
        color: #16a085;
        font-size: 42px;
        line-height: 40px;
        -webkit-animation-name: opacity;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        animation-name: opacity;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

.content__container__text {
    display: inline;
    float: left;
    margin: 0;
}

.content__container__list {
    margin-top: 0;
    padding-left: 110px;
    text-align: left;
    list-style: none;
    -webkit-animation-name: change;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-name: change;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.content__container__list__item {
    line-height: 40px;
    margin: 0;
}

@keyframes opacity {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes change {
    0%, 12.66%, 100% {
        transform: translate3d(0, 0, 0);
    }

    16.66%, 29.32% {
        transform: translate3d(0, -25%, 0);
    }

    33.32%, 45.98% {
        transform: translate3d(0, -50%, 0);
    }

    49.98%, 62.64% {
        transform: translate3d(0, -75%, 0);
    }

    66.64%, 79.3% {
        transform: translate3d(0, -50%, 0);
    }

    83.3%, 95.96% {
        transform: translate3d(0, -25%, 0);
    }
}






@keyframes square-animation {
    0% {
        left: 0;
        top: 0;
    }

    10.5% {
        left: 0;
        top: 0;
    }

    12.5% {
        left: 32px;
        top: 0;
    }

    23% {
        left: 32px;
        top: 0;
    }

    25% {
        left: 64px;
        top: 0;
    }

    35.5% {
        left: 64px;
        top: 0;
    }

    37.5% {
        left: 64px;
        top: 32px;
    }

    48% {
        left: 64px;
        top: 32px;
    }

    50% {
        left: 32px;
        top: 32px;
    }

    60.5% {
        left: 32px;
        top: 32px;
    }

    62.5% {
        left: 32px;
        top: 64px;
    }

    73% {
        left: 32px;
        top: 64px;
    }

    75% {
        left: 0;
        top: 64px;
    }

    85.5% {
        left: 0;
        top: 64px;
    }

    87.5% {
        left: 0;
        top: 32px;
    }

    98% {
        left: 0;
        top: 32px;
    }

    100% {
        left: 0;
        top: 0;
    }
}

.loadercube {
    position: relative;
    width: 96px;
    height: 96px;
    transform: rotate(45deg);
}

.loader-square {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    margin: 2px;
    border-radius: 0px;
    background: red;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: square-animation 10s ease-in-out infinite both;
}

    .loader-square:nth-of-type(0) {
        animation-delay: 0s;
    }

    .loader-square:nth-of-type(1) {
        animation-delay: -1.4285714286s;
    }

    .loader-square:nth-of-type(2) {
        animation-delay: -2.8571428571s;
    }

    .loader-square:nth-of-type(3) {
        animation-delay: -4.2857142857s;
    }

    .loader-square:nth-of-type(4) {
        animation-delay: -5.7142857143s;
    }

    .loader-square:nth-of-type(5) {
        animation-delay: -7.1428571429s;
    }

    .loader-square:nth-of-type(6) {
        animation-delay: -8.5714285714s;
    }

    .loader-square:nth-of-type(7) {
        animation-delay: -10s;
    }

.wrapper-grid {
    --animation-duration: 2.1s;
    --cube-color: #0000;
    --highlight-color: #00cc44;
    --cube-width: 48px;
    --cube-height: 48px;
    --font-size: 1.8em;
    position: relative;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, var(--cube-width));
    grid-template-rows: auto;
    grid-gap: 0;
    width: calc(7 * var(--cube-width));
    height: var(--cube-height);
    perspective: 350px;
    font-family: "Poppins", sans-serif;
    font-size: var(--font-size);
    font-weight: 800;
    color: transparent;
}

.cube {
    position: relative;
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cube-width);
    height: var(--cube-height);
    background-color: var(--cube-color);
}

.face-left,
.face-right,
.face-back,
.face-front {
    box-shadow: inset 0 0 2px 1px #0001, inset 0 0 12px 1px #fff1;
}

.face-front {
    transform: rotateY(0deg) translateZ(calc(var(--cube-width) / 2));
}

.face-back {
    transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2));
    opacity: 0.6;
}

.face-left {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
    opacity: 0.6;
}

.face-right {
    transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));
    opacity: 0.6;
}

.face-top {
    height: var(--cube-width);
    transform: rotateX(90deg) translateZ(calc(var(--cube-width) / 2));
    opacity: 0.8;
}

.face-bottom {
    height: var(--cube-width);
    transform: rotateX(-90deg) translateZ(calc(var(--cube-height) - var(--cube-width) * 0.5));
    opacity: 0.8;
}

.cube:nth-child(1) {
    z-index: 0;
    animation-delay: 0s;
}

.cube:nth-child(2) {
    z-index: 1;
    animation-delay: 0.2s;
}

.cube:nth-child(3) {
    z-index: 2;
    animation-delay: 0.4s;
}

.cube:nth-child(4) {
    z-index: 3;
    animation-delay: 0.6s;
}

.cube:nth-child(5) {
    z-index: 2;
    animation-delay: 0.8s;
}

.cube:nth-child(6) {
    z-index: 1;
    animation-delay: 1s;
}

.cube:nth-child(7) {
    z-index: 0;
    animation-delay: 1.2s;
}

.cube {
    animation: translate-z var(--animation-duration) ease-in-out infinite;
}

    .cube .face {
        animation: face-color var(--animation-duration) ease-in-out infinite,
        /* face-glow var(--animation-duration) ease-in-out infinite, */ edge-glow var(--animation-duration) ease-in-out infinite;
        animation-delay: inherit;
    }

        .cube .face.face-front {
            animation: face-color var(--animation-duration) ease-in-out infinite, face-glow var(--animation-duration) ease-in-out infinite, edge-glow var(--animation-duration) ease-in-out infinite;
            animation-delay: inherit;
        }

@keyframes translate-z {
    0%, 40%, 100% {
        transform: translateZ(-2px);
    }

    30% {
        transform: translateZ(16px) translateY(-1px);
    }
}

@keyframes face-color {
    0%, 50%, 100% {
        background-color: var(--cube-color);
    }

    10% {
        background-color: var(--highlight-color);
    }
}

@keyframes face-glow {
    0%, 50%, 100% {
        color: #fff0;
        filter: none;
    }

    30% {
        color: #fff;
        filter: drop-shadow(0 14px 10px var(--highlight-color));
    }
}

@keyframes edge-glow {
    0%, 40%, 100% {
        box-shadow: inset 0 0 2px 1px #0001, inset 0 0 12px 1px #fff1;
    }

    30% {
        box-shadow: 0 0 2px 0px var(--highlight-color);
    }
}



.loader-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: auto;
    margin: 2rem;
    font-family: "Poppins", sans-serif;
    font-size: 1.6em;
    font-weight: 600;
    user-select: none;
    color: #fff;
    scale: 2;
}

.loader {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: transparent;
    mask: repeating-linear-gradient( 90deg, transparent 0, transparent 6px, black 7px, black 8px );
}

    .loader::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(circle at 50% 50%, #ff0 0%, transparent 50%), radial-gradient(circle at 45% 45%, #f00 0%, transparent 45%), radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%), radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%), radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
        mask: radial-gradient( circle at 50% 50%, transparent 0%, transparent 10%, black 25% );
        animation: transform-animation 2s infinite alternate, opacity-animation 4s infinite;
        animation-timing-function: cubic-bezier(0.6, 0.8, 0.5, 1);
    }

@keyframes transform-animation {
    0% {
        transform: translate(-55%);
    }

    100% {
        transform: translate(55%);
    }
}

@keyframes opacity-animation {
    0%, 100% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    65% {
        opacity: 0;
    }
}

.H5 {
    line-height: 0.5;
    max-width: auto;
    height: auto; /* Maintains the aspect ratio */
}

img {
    max-width: 100%;
    height: auto; /* Maintains the aspect ratio */
}

/* Default styles for all screen sizes (mobile-first approach is recommended) */
.container {
    width: 100%;
    padding: 10px;
}

/* Styles for screens wider than 600px */
@media screen and (min-width: 600px) {
    .container {
        width: 80%;
        margin: auto; /* Center the container on larger screens */
    }
}

/* Styles for screens wider than 800px */
@media screen and (min-width: 800px) {
    .left, .main, .right {
        float: left; /* Display as columns on large screens */
        width: 33.3%;
    }
}

.loader-letter {
    display: inline-block;
    opacity: 0;
    animation: loader-letter-anim 4s infinite linear;
    z-index: 2;
}

    .loader-letter:nth-child(1) {
        animation-delay: 0.1s;
    }

    .loader-letter:nth-child(2) {
        animation-delay: 0.205s;
    }

    .loader-letter:nth-child(3) {
        animation-delay: 0.31s;
    }

    .loader-letter:nth-child(4) {
        animation-delay: 0.415s;
    }

    .loader-letter:nth-child(5) {
        animation-delay: 0.521s;
    }

    .loader-letter:nth-child(6) {
        animation-delay: 0.626s;
    }

    .loader-letter:nth-child(7) {
        animation-delay: 0.731s;
    }

    .loader-letter:nth-child(8) {
        animation-delay: 0.837s;
    }

    .loader-letter:nth-child(9) {
        animation-delay: 0.942s;
    }

    .loader-letter:nth-child(10) {
        animation-delay: 1.047s;
    }

@keyframes loader-letter-anim {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
        text-shadow: 0 0 4px #fff;
        transform: scale(1.1) translateY(-2px);
    }

    20% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
    }
}