footer{

    background-color: var(--dark-green-color);
    background-image: url("../assets/images/footer-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}



.footer-content{

    display: flex;
    justify-content: space-between;
    align-items: center;
    row-gap: 20px;
    padding: 20px 0;
    flex-wrap: wrap;
    
}


.footer-logo{
    height: 120px;
}


.footer-links ul{
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-links ul,
.footer-social ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: var(--white-color);
}

.footer-links ul li{
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



.footer-links ul li::after{
    content: "";
    position: absolute;
    width: 40px;
    height: 20px;
    background-image: url("../assets/images/hover.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 4px;
    right: 0;
    transform:rotate(50deg) translateY(-10px) ;
    opacity: 0;
    transition: all .4s ease;
}
.footer-links ul li:hover::after{
    opacity: 1;
    transform:rotate(5deg) translateY(0px) ;
    left: -10px;
}

.footer-links ul li::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    background:linear-gradient(to bottom, #004B22, #007E39 , #53753E , #FFFFFF);
    top: 50%;
    transform: translateY(-50%);
    left: -8px
}
.footer-links ul li:last-child::before{
    display: none;
}

.footer-social{
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.footer-social h3{
    font-size: 16px;
    font-weight: 500;
    color: var(--white-color);
    font-family: "font-SemiBold";
    position: relative;
    width: 100%;
    text-align: center;
    max-width: 150px;
    
}
.footer-social h3::after{
    content: "";
    position: absolute;
    width: 27%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: linear-gradient(to right, #004B22, #007E39 , #53753E , #FFFFFF);
}
.footer-social h3::before{
    content: "";
    position: absolute;
    width: 27%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background:linear-gradient(to left, #004B22, #007E39 , #53753E , #FFFFFF);
}

.footer-social ul li{
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EFE2D5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dark-green-color);
    transition: all .4s ease;
}


.footer-social ul li a{
    transition: all .4s ease;
}
.footer-social ul li:hover{
    background-color: var(--main-color);
}

.footer-social ul li:hover a {
    transform: rotate(360deg);
}
.footer-social ul li:hover img{
    filter: brightness(0) invert(1);
}


.footer-copyright{
    border-top: 1px solid #007e39;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--white-color);
    font-size: clamp(14px, 2vw, 16x);
    font-weight: 500;
    font-family: "font-SemiBold";
    padding: 20px 0;
    flex-wrap: wrap;
}




@media (max-width:1400px) {
        footer{
    background-size: contain;
}    
}

@media (max-width: 650px) {

    .footer-content{
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }
    .footer-links ul{
        height: auto;
        flex-wrap: wrap;
    }
    .footer-links ul li::before{
        display: none;
    }
}

@media (max-width: 550px) {

.footer-copyright{
    flex-direction: column;
    align-items: center;
    text-align: center;
}
}