* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

.footer {
    position: absolute;
    top:   170%;
     left: 33%;
    transform: translate(-50%, -50%);
    width: 137%;
    background: #0f003c;
    border-radius: 6px;
}
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
/* Overlay background */
#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6); /* white with transparency */
    backdrop-filter: blur(5px); /* blur effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none; /* hidden by default */
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background: linear-gradient(0deg,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%, linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
}

    .loader::before,
    .loader::after {
        content: "";
        grid-area: 1/1;
        border-radius: 50%;
        background: inherit;
        opacity: 0.915;
        transform: rotate(30deg);
    }

    .loader::after {
        opacity: 0.83;
        transform: rotate(60deg);
    }

@keyframes l23 {
    100% {
        transform: rotate(1turn)
    }
}

    .footer .footer-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 3.5rem;
        padding: 31px;
    }

    .footer-row .footer-col h4 {
        color: #fff;
        font-size: 1.2rem;
        font-weight: 400;
    }

    .footer-col .links {
        margin-top: 20px;
    }

    .footer-col .links li {
        list-style: none;
        margin-bottom: 10px;
    }

    .footer-col .links li a {
        text-decoration: none;
        color: #bfbfbf;
    }

    .footer-col .links li a:hover {
        color: #fff;
    }

    .footer-col p {
        margin: 20px 0;
        color: #bfbfbf;
        max-width: 300px;
    }

    .footer-col form {
        display: flex;
        gap: 5px;
    }

    .footer-col input {
        height: 40px;
        border-radius: 6px;
        background: none;
        width: 100%;
        outline: none;
        border: 1px solid #7489C6;
        caret-color: #fff;
        color: #fff;
        padding-left: 10px;
    }

    .footer-col input::placeholder {
        color: #ccc;
    }

    .footer-col form button {
        background: #fff;
        outline: none;
        border: none;
        padding: 10px 15px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: 0.2s ease;
    }

    .footer-col form button:hover {
        background: #cecccc;
    }

    .footer-col .icons {
        display: flex;
        margin-top: 30px;
        gap: 30px;
        cursor: pointer;
    }

    .footer-col .icons i {
        color: #afb6c7;
    }

    .footer-col .icons i:hover {
        color: #fff;
    }

    @media (max-width: 768px) {
        .footer {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        border-radius: 0;
    }

        .footer .footer-row {
            padding: 20px;
            gap: 1rem;
        }

    .footer-col form {
        display: block;
    }

        .footer-col form :where(input, button) {
            width: 100%;
        }

        .footer-col form button {
            margin: 10px 0 0 0;
        }
}