@font-face {
    font-family:Montserrat-normal;
    src: url(../assets/Montserrat-normal.ttf);
}
body {
    background-color: black;
    margin: 0;
}
.what__bg {
    background-image: url("../assets/what-bg.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -3;
}

.what__container {
    position: absolute;
    top: 30vh;
    display: flex;
    right: 0;
   
    width: 100%;
    padding-left: 50px;
    align-items: center;
    flex-direction: row-reverse;
}

.what__info__container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 0 0 4rem;
}

.what__info__title {
    width: 40vw;
    padding: 0 0 2rem 0;
    margin: 0 0 0 3rem;
}

.what__img {
    width: 35vw;
    height: auto;
}

.what__text {
    font-size: 1.3vw;
    font-family: Montserrat-normal;
    color: #ffffff;
    padding: 0 0 0 0;
    text-align: justify;
}

.what__info__principle__container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 1vw 0 0 1vw;
}

.circle {
    width: 1.5vw;
    height: 1.5vw;
    background-image: none;
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: auto;
    border-radius: 100rem 100rem 100rem 100rem;
}

.circle-orange {
    background-image: linear-gradient(rgb(254, 136, 100), rgb(254, 136, 100));
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: auto;
}

.circle-pink {
    background-image: linear-gradient(rgb(198, 32, 104), rgb(198, 32, 104));
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: auto;
}

.space{
    width: 7rem;
}
@media only screen and (max-device-width: 640px) {
    .what__container {
        position: absolute;
        top: 15vh;
        display: flex;
        right: -50px;
        width: 100%;
        
        align-items: center;
        flex-direction: column;
        background-color: rgba(62, 41, 255, 0.719);
        border-radius: 100px;
        
    }
    .what__text {
        font-size:3.4vw;
        font-family: Montserrat-normal;
        color: #ffffff;
        padding: 0 0 0 0;
        text-align: justify;
        width: 80vw;
    }
    .what__info__title {
        width: 80vw;
        padding: 0 0 1rem 0;
        margin: 0 0 0 1rem;
    }
    .what__img {
        width: 70vw;
        height: auto;
        padding-top: 2rem;
        padding-bottom: 5rem;
    }

    .circle {
        width: 4vw;
        height: 4vw;
        background-image: none;
        background-repeat: repeat;
        background-position: left top;
        background-attachment: scroll;
        background-size: auto;
        border-radius: 100rem 100rem 100rem 100rem;
        background-image: linear-gradient(rgb(198, 32, 104), rgb(198, 32, 104));
    }

    .what__info__principle__container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 4vw 0 
        0 4vw;
    }
 
}
    

@media screen and (max-width: 1000px) {
   
    
    .what__container {
        position: absolute;
        top: 20%;
        display: flex;
        right: 16%;
        width: 60%;
        padding-right: 50px;
        align-items: center;
        flex-direction: column;
        background-color: rgba(62, 41, 255, 0.719);
        border-radius: 100px;
    }
    .what__text {
        font-size: 2.7vw;
        font-family:Montserrat-normal;
        color: #ffffff;
        padding: 0 0 0 0;
        text-align: justify;
        width: 55vw;
    }
    .what__info__title {
        width: 50vw;
        padding: 0 0 1rem 0;
        margin: 0 0 0 1rem;
    }
    .what__img {
        width: 47vw;
        height: auto;
        padding-top: 2rem;
    }
    .circle {
        width: 2.5vw;
        height: 2.5vw;
        background-image: none;
        background-repeat: repeat;
        background-position: left top;
        background-attachment: scroll;
        background-size: auto;
        border-radius: 100rem 100rem 100rem 100rem;
        background-image: linear-gradient(rgb(198, 32, 104), rgb(198, 32, 104));
    }
    
}