
footer{
    background-color: #F5F5F5;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    .up{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        .left{
            display: flex;
            flex-direction: column;
            gap: 20px;
            p{
                font-family: Manrope;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%; /* 24px */
            }
            .icons{
                display: flex;
                gap: 10px;
                img{
                    path{
                        fill: black;
                    }
                }
            }
        }
        .right{
            display: flex;
            flex-direction: column;
            ul{
                list-style: none;
                text-align: right;
                gap: 10px;
                display: flex;
                flex-direction: column;
                li{
                    font-feature-settings: 'liga' off, 'clig' off;
                    font-family: Manrope;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 120%; /* 19.2px */
                }
            }
            a{
                color: #0A0A0A;
            }
        }
    }
    .down{
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        position: relative;
        .info{
            display: flex;
            gap: 40px;
        }
        &::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #C6C6C6;
        }
    }
}

@media (max-width:784px){
    footer{
        padding: 20px;
        .up{
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 20px;
            .left{
                gap: 10px;
            }
            .icons{
                justify-content: center;
            }
            .right{
                ul{
                    padding: 0;
                    li{
                        text-align: center;
                    }
                }
            }
        }

    }.down{
         flex-direction: column;
         text-align: center;
         gap: 10px;
         .info{
             flex-direction: column;
             text-align: center;
             gap: 10px;
         }
     }
}
