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

.footer{
    
    background:var(--primary);

    color:#fff;

    margin-top:0px;

    padding:80px 0 30px;

    position:relative;

    overflow:hidden;
background-image:

radial-gradient(circle at top right,
rgba(255,255,255,.05),
transparent 40%);
}

/* خط ذهبي أعلى الفوتر */

.footer::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--secondary),
        #ffd34d,
        var(--secondary)
    );

}


/*==============================
Grid
==============================*/

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.5fr;

    gap:45px;

    margin-bottom:50px;

}
/*==============================
Logo
==============================*/

.footer-logo{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.footer-box ul li{

transition:.35s;

}

.footer-box ul li:hover{

color:var(--secondary);

padding-right:8px;

}
.footer-logo img{
   width:75px;
   height:75px;

    border-radius:50%;

    background:#fff;

    padding:5px;
    transition:.35s;

}
.footer-logo h2{

font-size:28px;

font-weight:900;

}
.footer-logo:hover img{

    transform:rotate(8deg) scale(1.08);

}
.footer-logo-text h2{

    color:#fff;

    font-size:25px;

    font-weight:900;

}

.footer-logo-text span{

    color:var(--secondary);

    font-size:14px;

}

/*==============================
Text
==============================*/

.footer p{

    color:rgba(255,255,255,.75);

    line-height:2;

    font-size:15px;

}

.footer h3{

    font-size:20px;

    margin-bottom:22px;

    color:var(--secondary);

    position:relative;

    display:inline-block;

}
.footer h3::after{

    content:"";

    position:absolute;

    right:0;

    bottom:-8px;

    width:40px;

    height:2px;

    background:var(--secondary);

}
/*==============================
Footer Links
==============================*/

.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links li{

    transition:.35s;

}

.footer-links a:hover{

color:var(--secondary);

letter-spacing:.5px;

}

.footer-links a{

color:rgba(255,255,255,.82);

font-size:15px;

transition:.35s;

}




/*==============================
Contact Info
==============================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:rgba(255,255,255,.82);

    line-height:1.8;

}

.footer-contact i{

    color:var(--secondary);

    font-size:18px;

    margin-top:4px;

    min-width:20px;

}


/*==============================
Social Icons
==============================*/

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:18px;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--secondary);
    transform:translateY(-6px) scale(1.1);

}
/*==================================================
            FOOTER BOTTOM
==================================================*/

.footer-bottom{

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

    margin-top:50px;

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-copy{

    color:rgba(255,255,255,.7);

    font-size:15px;

}

.footer-copy span{

    color:var(--secondary);

    font-weight:700;

}

.footer-bottom-links{

    display:flex;

    gap:25px;

}

.footer-bottom-links a{

    color:rgba(255,255,255,.75);

    font-size:14px;

    transition:.3s;

}

.footer-bottom-links a:hover{

    color:var(--secondary);

}


/*==================================================
                Responsive
==================================================*/

@media(max-width:992px){

.footer-grid{

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

gap:40px;

}

}


@media(max-width:768px){

.footer{

text-align:center;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-logo{

justify-content:center;

}

.footer-contact li{

justify-content:center;

}

.footer-social{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

text-align:center;

font-size:15px;

color:rgba(255,255,255,.75);

}

.footer-bottom-links{

justify-content:center;

flex-wrap:wrap;

}

}


@media(max-width:480px){

.footer{

padding:60px 0 25px;

}

.footer h3{

font-size:18px;

}

.footer-logo img{

width:55px;

height:55px;

}

.footer-social a{

width:40px;

height:40px;

font-size:16px;

}

}