@media screen and (min-width: 767px) {

    .footer-links li{
        width: 100%;
    }

    .vector-ppl{
        margin-bottom: 0;
        position: absolute;
        width: 25%;

        right: 10%;
        bottom: 0;
    }

}


@media screen and (min-width: 1023px) {

    .header-wrapper{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .header-logo{
        width: 220px;
    }

    .btn-join{
        width: 130px;
    }

    .header-mobile-menu{
        display: none;
    }

    .header-menu{
        display: block;
        text-transform: uppercase;
    }

    .header-menu ul{
        display: flex;
        margin-bottom: 0;
    }

    .header-menu ul li{
        display: flex;
        padding: 0 0.5rem;
    }

    .header-menu ul li a{
        color: var(--color-black);
        transition: var(--transition);
        font-size: 16px;
    }

    .header-menu ul li a:hover{
        color: var(--color-theme);
        transition: var(--transition);
    }

    .home-banner{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .home-news-wrapper{
        display: flex;
    }

    .home-news-wrapper .content{
        display: flex;
        width: 60%;
    }

    .home-news-wrapper .content .num {
        align-self: end;
    }

    .home-news-wrapper .img img{
        width: 350px;
    }

}


@media screen and (min-width: 1199px) {

    html,body{
        font-size: 16px;
    }

    .sized-box{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

}


@media screen and (min-width: 1399px) {

    .home-banner{
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .vector-ppl{
        width: 20%;

        right: 15%;
        bottom: 0;
    }

}

@media screen and (min-width: 1599px) {

    .vector-ppl{
        width: 300px;

        right: 25%;
        bottom: 0;
    }

}