body {
}
.main > div:before {
    content:"";
    background-image: url('../images/about/back.png');
    width: 100vw;
    left: calc((100vw - 100%) / -2);
    height: 106vw;
    position: absolute;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.8;
}
.main .home {
    padding-top: 5em;
}
    .main .home:before,
    .main .home:after {
        content: "";
        position: absolute;
        background: rgba(198, 88, 246, 0.1);
        filter: blur(98px);
        width: 38em;
        height: 38em;
        top: calc(50% - 16em);
        z-index: -1;
        border-radius: 40%;
    }

    .main .home:before {
        left: -20em;
    }

    .main .home:after {
        right: -20em;
    }
    .main .home h1 {
        margin-bottom: 0.5em
    }
.main .home h1 span {
    color: var(--primary);
}
.main .home img{
    width:100%;
    margin-top:2em;
    max-height:19em;
    object-fit:contain;
    object-position:center;
}

.main .about{

}
    .main .about.about1:before {
        content: "";
        position: absolute;
        width: 40em;
        height: 38em;
        left: calc(50% - 24em);
        top: 0;
        background: rgba(198, 88, 246, 0.1);
        filter: blur(6em);
        z-index: -1;
        border-radius: 40%;
        z-index: -1;
    }
    .main .about.about3:before,
    .main .about.about3:after {
        content: "";
        position: absolute;
        background: rgba(198, 88, 246, 0.1);
        filter: blur(98px);
        width: 34em;
        height: 32em;
        top: calc(50% - 10em);
        z-index: -1;
        border-radius: 40%;
    }

    .main .about.about3:before {
        left: -20em;
    }

    .main .about.about3:after {
        right: -20em;
    }
    .main .about > div{
        display:flex;
    }
    .main .about.about2 > div{
        flex-direction:row-reverse;
    }
    .main .about .about-content {
        width: 55%;
        text-align: left;
    }
        .main .about .about-content h1 {
            text-align: left;
            margin-left: 0;
            width:100%;
        }
            .main .about .about-content h1 span {
                color:var(--primary);
            }
        .main .about .about-content p {
            text-align: left;
            margin-left: 0;
            margin-right:0;
            max-width:none;
            width: 100%;
        }
    .main .about img {
        width: 45%;
        max-height: calc(13em + 2em);
        margin-top: -1em;
        object-fit: contain;
        object-position: center;
    }

.main .team {
    background-color: #080808;
    position: relative;
}
    .main .team:after {
        content: "";
        position: absolute;
        width: 42em;
        height: 36em;
        left: calc(50% - 21em);
        top: -6em;
        background: rgba(198, 88, 246, 0.1);
        filter: blur(6em);
        border-radius: 40%;
        z-index: -2;
    }
    .main .team:before {
        content: "";
        left: calc((100vw - 100%) / -2);
        width: 100vw;
        position: absolute;
        top: 0;
        height: 100%;
        background-color: #080808;
        z-index: -1;
    }
    .main .team .users {
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        padding:3em 0 1em;
    }
        .main .team .users .user {
            margin: 0.5em;
            width: calc(33.33% - 1em);
            background: #110C13;
            border-radius: 1em;
            padding: 1.2em;
        }
            .main .team .users .user .img {
                border-radius: 0.75em;
                width: 100%;
                padding-bottom:100%;
                position:relative;
            }
                .main .team .users .user .img img {
                    position:absolute;
                    left:0;
                    top:0;
                    width:100%;
                    height:100%;
                    object-fit: contain;
                    object-position: center;
                }
            .main .team .users .user h3 {
                font-weight: 500;
                font-size: 1.25em;
                line-height: 1.3;
                text-align: center;
                letter-spacing: -0.015em;
                color: #FFFFFF;
                display: block;
                text-align: center;
                margin-top:1.4em;
            }
            .main .team .users .user span {
                font-weight: 300;
                font-size: 1em;
                line-height: 1.4;
                text-align: center;
                color: #A5A5A5;
                display:block;
                text-align:center;
                margin:0.6em 0 0.8em;
            }







@media (max-width: 1200px) {
    .main > div:before {
        width: 1200px;
        left: calc((100vw - 76em) / -2);
        left:-2em;
        height: 80em;
    }
}

@media (max-width: 992px) {
    .main .home {
        padding-top: 3em;
    }
}

@media (max-width: 768px) {
    .main > div:before{
        display:none;
    }
    .main .home{
        padding-top:2em;
    }
    .main .about > div {
        flex-wrap: wrap;
    }
    .main .about .about-content,
    .main .about img {
        width: 100%;
    }
        .main .about img{
            margin-top:2em;
        }
        .main .team .users .user {
            width: calc(50% - 1em);
        }
    .main .about:before,
    .main .about:after,
    .main .team:after{
        display:none;
    }
}

@media (max-width: 576px) {
    .main .home {
        padding-top: 1em;
    }
    .main .team .users .user {
        width: calc(100% - 1em);
    }
}