/* بداية كود التذييل */

/* =========================================================
   PREMIUM FOOTER
========================================================= */

#main-footer {

    position: relative;

    margin-top: 100px;
    padding: 80px 20px 30px;

    background:
        linear-gradient(180deg, #0d0d0f 0%, #09090b 100%);

    border-top:
        1px solid color-mix(in srgb, var(--beam-color) 20%, transparent);

    overflow: hidden;
}

/* Glow */

#main-footer::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top,
            color-mix(in srgb, var(--beam-color) 10%, transparent),
            transparent 70%
        );

    pointer-events: none;
}

/* =========================================
   TOP
========================================= */

.footer-top {

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin-bottom: 70px;
}

.footer-logo-wrapper {

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;
}

.footer-logo-svg {

    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid color-mix(in srgb, var(--beam-color) 20%, transparent);

    color: var(--beam-color);

    box-shadow:
        0 0 30px color-mix(in srgb, var(--beam-color) 15%, transparent);
}

.footer-heading {

    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
}

/* =========================================
   SOCIALS
========================================= */

.footer-socials {

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 14px;

    margin-top: 30px;
}

.footer-social-btn {

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.06);

    color: #d4d4d8;

    transition: all 0.3s ease;

    text-decoration: none;
}

.footer-social-btn:hover {

    transform: translateY(-4px);

    color: #fff;

    border-color: var(--beam-color);

    background:
        color-mix(in srgb, var(--beam-color) 12%, transparent);

    box-shadow:
        0 10px 25px color-mix(in srgb, var(--beam-color) 20%, transparent);
}

/* =========================================
   BOXES
========================================= */

.footer-boxes {

    position: relative;
    z-index: 2;

    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.footer-box {

    padding: 30px;

    border-radius: 28px;

    background:
        rgba(255,255,255,0.025);

    border:
        1px solid rgba(255,255,255,0.05);

    transition: all 0.3s ease;
}

.footer-box:hover {

    transform: translateY(-4px);

    border-color:
        color-mix(in srgb, var(--beam-color) 25%, transparent);

    box-shadow:
        0 10px 30px color-mix(in srgb, var(--beam-color) 12%, transparent);
}

.footer-box-title {

    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;

    margin-bottom: 20px;
}

.footer-links {

    display: flex;
    flex-direction: column;

    gap: 14px;
}

.footer-links a {

    color: #a1a1aa;

    text-decoration: none;

    transition: all 0.3s ease;
}

.footer-links a:hover {

    color: #fff;

    transform: translateX(-4px);
}

/* =========================================
   BOTTOM
========================================= */

.footer-bottom {

    position: relative;
    z-index: 2;

    margin-top: 50px;
    padding-top: 25px;

    text-align: center;

    border-top:
        1px solid rgba(255,255,255,0.06);

    color: #71717a;
    font-size: 14px;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 992px) {

    .footer-boxes {
        grid-template-columns: 1fr;
    }

    .footer-box {

        text-align: center;
    }

    .footer-links a:hover {

        transform: none;
    }

    .footer-heading {

        font-size: 1.2rem;
    }
}

/* =========================================
   REVEAL ANIMATIONS
========================================= */

.ameer-reveal {

    opacity: 0;

    transform:
        translateY(40px);

    filter:
        blur(8px);

    transition:
    opacity 2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ameer-reveal.active {

    opacity: 1;

    transform:
        translateY(0);

    filter:
        blur(0);
}