footer {

    margin: 0 auto;

    border-top: 0.01px solid var(--primary);

    background-color: #fff;

}



/* فیکس: @media باید بیرون سلکتور باشد */

@media (max-width: 1259px) {

    footer {

        max-width: 97%;

        border-radius: 25px;

    }

}



.footer-elite {

    background: #fff;

    color: #222;

    padding-top: 30px;

    overflow: hidden;

    margin-top: 50px;

}



.footer-content {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-evenly;

    gap: 40px;

    max-width: 1280px;

    margin: auto;

    padding: 0 20px 40px;

    animation: fadeInUp 0.8s ease-out;

}



.footer-section {

    flex: 1 1 220px;

    min-width: 200px;

}



.footer-section h4 {

    font-size: 20px;

    margin-bottom: 16px;

    position: relative;

    color: #222;

}



.footer-section h4::after {

    content: "";

    position: absolute;

    bottom: -6px;

    right: 0;

    width: 40px;

    height: 2px;

    background: var(--primary);

}



.footer-section ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-section ul li {

    margin-bottom: 12px;

}



.footer-section ul li a {

    color: #444;

    text-decoration: none;

    position: relative;

    transition: transform .25s, color .25s, opacity .25s;

    padding-bottom: 3px;

}



.footer-section ul li a::after {

    content: "";

    position: absolute;

    width: 0;

    height: 2px;

    right: 0;

    bottom: 0;

    background: var(--primary);

    transition: width .25s;

    border-radius: 10px;

}



.footer-section ul li a:hover {

    color: var(--primary);

    transform: translateX(-6px) scale(1.02);

}



.footer-section ul li a:hover::after {

    width: 100%;

}



/* خبرنامه */

.footer-section.newsletter form {

    display: flex;

    margin-top: 12px;

    background: rgba(0, 0, 0, 0.05);

    padding: 8px;

    border-radius: 10px;

    backdrop-filter: blur(3px);

}



.footer-section.newsletter input {

    flex: 1;

    padding: 10px 12px;

    border: none;

    background: transparent;

    color: #222;

    outline: none;

}



.footer-section.newsletter input::placeholder {

    color: #888;

}



.footer-section.newsletter button {

    padding: 10px 18px;

    background: var(--primary);

    color: #fff;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: transform .2s, opacity .2s, background-color .2s;

}



.footer-section.newsletter button:hover {

    background: var(--primary-dark);

    transform: scale(1.05);

}



/* شبکه‌های اجتماعی */

.footer-social {

    display: flex;

    justify-content: center;

    gap: 24px;

    padding: 20px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.05);

    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    animation: fadeIn 1s ease-out;

}



.social-link {

    color: #222;

    font-size: 24px;

    transition: transform .2s, color .2s;

}



.social-link:hover {

    color: var(--primary);

    transform: rotate(-5deg) scale(1.12);

}



/* پایین فوتر */

.footer-bottom {

    text-align: center;

    font-size: 14px;

    color: #666;

    margin-top: 20px;

    padding-bottom: 30px;

}



.footer-bottom .legal-links {

    margin-top: 8px;

}



.footer-bottom .legal-links a {

    margin: 0 10px;

    color: #888;

    text-decoration: none;

    transition: color .2s;

}



.footer-bottom .legal-links a:hover {

    color: var(--primary);

}



/* انیمیشن‌ها */

@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



/* احترام به کاهش حرکت */

@media (prefers-reduced-motion: reduce) {



    .footer-content,

    .footer-social {

        animation: none !important;

    }



    .footer-section ul li a:hover {

        transform: none;

    }

}



/* واکنش‌گرا */

@media (max-width: 992px) {

    .footer-content {

        padding: 0 30px 50px;

    }



    .footer-section {

        text-align: center;

        flex: 1 1 45%;

    }

}



@media (max-width: 768px) {

    .footer-content {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .footer-section.newsletter form {

        flex-direction: column;

    }



    .footer-section.newsletter button {

        width: 100%;

        margin-top: 8px;

    }

}



@media (max-width: 576px) {

    .footer-section {

        flex: 1 1 100%;

        margin-bottom: 30px;

    }



    .footer-section.newsletter form {

        flex-direction: column;

        gap: 10px;

        padding: 12px;

    }



    .footer-section.newsletter input,

    .footer-section.newsletter button {

        width: 100%;

    }



    .footer-social {

        flex-wrap: wrap;

        gap: 16px;

    }

}