@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
:root{
    --primary: #121212;
    --secondary: #414141;
    --acent: #3B9D9C;
    --white: #FFFFFF;
    --grey: #EEEEEE;

    --padding-sm: 0.5rem;
    --padding-md:0.75rem;
    --padding-lg: 1rem;

    --txt-sm: 16px;
    --txt-md: 20px;
    --txt-lg: 36px;
}
html, body, *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
footer{
    background: var(--primary);
    color: var(--white);
    width: 100vw;
    padding: 100px 150px;
    padding-bottom: 50px;
}
footer .logo-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 2rem;
}
.footer-content{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.team-description p{
    font-size: var(--txt-sm);
    max-width: 330px;
    color: var(--grey);
    padding: 1rem 0;
}

.team-description h3, .team-description h6{
    padding: 0;
    font-weight: 500;
    margin: 0;
}
.team-description h3{
    font-size: 24px;
}
.team-description h6{
    font-size: 16px;
}
.footer-content .footer-ul ul{
    list-style-type: none;
}
.footer-ul ul li{
    padding: 7.5px 0;
}
.footer-ul ul li.Head{
    font-weight: 500;
    color: var(--white);
    font-size: var(--txt-md);
}
.footer-ul ul li a{
    color: var(--grey);
    text-decoration: none;
    font-size: var(--txt-sm);
}
.footer-ul ul li a:hover{
    color: var(--acent)
}
.icon-group{
    font-size: 24px;
}
.list-container{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

@media only screen and (max-width: 1024px) {
    footer{
        padding: 100px 2rem;
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 721px) {
    .footer-content{
        flex-direction: column;
    }
    .team-description p{
        max-width: 100%;
    }
    .list-container{
        justify-content: space-between;
    }
}

@media only screen and (max-width: 540px) {
    .list-container{
        justify-content: space-between;
    }
    .team-description p{
        font-size: 12px;
    }
    .team-description h3{
        font-size: 20px;
    }
    .team-description h6{
        font-size: 14px;
    }
    .footer-ul ul li.Head{
        font-size: 14px;
    }
    .footer-ul ul li a{
        font-size: 12px;
    }
}

@media only screen and (max-width: 340px) {
    .footer-ul:first-child{
        display: none;
    }
}