:root{
    --font: Arial, Helvetica, sans-serif;
    --mainWidth: 106rem;
    --sectionGridHeight: 66rem;
    --sectionGap: 6rem;
    --mainGridHeight: 41rem;
    --radius: 60px;
    --pFontSize: 28px;
    --defaultPWidth: 94rem;
    --sectionPWidth: 43rem;
    --positionH1: -7.5rem;
    --h1FontSize: 150px;
    --screen: 2200;

    --NEWmainWidth: calc(var(--NEWscreen)*var(--mainWidth)/var(--screen));
    --NEWsectionGridHeight: calc(var(--NEWscreen)*var(--sectionGridHeight)/var(--screen));
    --NEWsectionGap: calc(var(--NEWscreen)*var(--sectionGap)/var(--screen));
    --NEWmainGridHeight: calc(var(--NEWscreen)*var(--mainGridHeight)/var(--screen));
    --NEWradius: calc(var(--NEWscreen)*var(--radius)/var(--screen));
    --NEWpFontSize: calc(var(--NEWscreen)*var(--pFontSize)/var(--screen));
    --NEWdefaultPWidth: calc(var(--NEWscreen)*var(--defaultPWidth)/var(--screen));
    --NEWsectionPWidth: calc(var(--NEWscreen)*var(--sectionPWidth)/var(--screen));
    --NEWpositionH1: calc(var(--NEWscreen)*var(--positionH1)/var(--screen));
    --NEWh1FontSize: calc(var(--NEWscreen)*var(--h1FontSize)/var(--screen));
}

.main-about-us{
    width: var(--mainWidth);
    height: 85%;
    margin: 0 auto;
    margin-top: 12rem;
    display: -ms-grid;
    display: grid;
    grid-template-areas: 
        'section'
        'section'
        'three';
    grid-template-rows: repeat(3, var(--mainGridHeight));
}

.container-about-us{
    grid-area: section;
    display: -ms-grid;
    display: grid;
    gap: var(--sectionGap);
    grid-template-areas: 
        'one two';
    grid-template-rows: repeat(1, var(--sectionGridHeight));
}

.main-about-us article{
    background-color: #1E1E1E;
    border-radius: var(--radius);
}

.main-about-us article > p{
    color: white;
    font-family: var(--font);
    font-size: var(--pFontSize);
    width: var(--defaultPWidth);
    margin: 0 auto;
    text-align: center;
}

.container-about-us > article > p{
    width: var(--sectionPWidth);
}

.main-about-us article > h1{
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font);
    position: relative;
    top: var(--positionH1);
    margin: 0 auto;
    font-size: var(--h1FontSize);
    width: fit-content;
}

.main-about-us article h1, .main-about-us span{
    font-weight: bolder;
}

.main-about-us .about-us h1 span{
    background: linear-gradient(130deg, #FA00FF 50%, #00E0FF 89%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}

.main-about-us .our-goal h1 span{
    background: linear-gradient(150deg, #FFD600, #FF0000);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main-about-us .choose-us h1 span{
    background: linear-gradient(to right, #00FF2C, #358F86, #0029FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main-about-us .about-us{
    grid-area: one;
}

.main-about-us .our-goal{
    grid-area: two;
}

.main-about-us .choose-us{
    grid-area: three;
}

@media screen and (max-width: 1778px) {
    :root{
        --NEWscreen: 1778;
    }

    .main-about-us{
        width: var(--NEWmainWidth);
        grid-template-rows: repeat(3, var(--NEWmainGridHeight));
    }
    
    .main-about-us > section{
        gap: var(--NEWsectionGap);
        grid-template-rows: repeat(1, var(--NEWsectionGridHeight));
    }
    
    .main-about-us article{
        border-radius: var(--NEWradius);
    }
    
    .main-about-us article > p{
        font-size: var(--NEWpFontSize);
        width: var(--NEWdefaultPWidth);
    }
    
    .container-about-us > article > p{
        width: var(--NEWsectionPWidth);
    }
    
    .main-about-us article > h1{
        top: var(--NEWpositionH1);
        font-size: var(--NEWh1FontSize);
    }
}

@media screen and (max-width: 1767px){
    :root{
        --NEWscreen: 1767;
    }
}

@media screen and (max-width: 1600px){
    :root{
        --NEWscreen: 1600;
    }
}

@media screen and (max-width: 1500px){
    :root{
        --NEWscreen: 1500;
    }
}

@media screen and (max-width: 1400px){
    :root{
        --NEWscreen: 1400;
    }
}

@media screen and (max-width: 1300px){
    :root{
        --NEWscreen: 1300;
    }

    .main-about-us{
        margin-top: 10rem;
    }
}

@media screen and (max-width: 1200px){
    :root{
        --NEWscreen: 1200;
    }
}

@media screen and (max-width: 1150px){
    :root{
        --NEWscreen: 1150;
    }
}

@media screen and (max-width: 1030px){
    :root{
        --NEWscreen: 1000;
    }
}

@media screen and (max-width: 970px){
    :root{
        --NEWscreen: 900;
    }
}

@media screen and (max-width: 770px){
    :root{
        --NEWscreen: 750;
        --pFontSize: 56px;
        --defaultPWidth: 94rem;
        --sectionPWidth: 86rem;
        --mainWidth: 140rem;
        --padding: 3rem;

        --NEWpadding: calc(var(--NEWscreen)*var(--padding)/750);
    }

    .main-about-us{
        display: block;
        width: auto;
    }

    .container-about-us{
        display: -ms-flexbox;
        display: block;
        width: fit-content;
        margin: auto;
    }

    .main-about-us article{
        width: fit-content;
        padding: var(--NEWpadding);
    }

    .main-about-us > article{
        margin: auto;
    }

    .container-about-us > article{
        margin: calc(var(--NEWsectionGap)*2);
    }

    .container-about-us article{
        min-height: max-content;
    }

    .container-about-us article > p{
        padding-bottom: var(--NEWpadding);
    }

    .our-goal{
        margin-top: 3rem !important;
    }

    .main-about-us{
        margin-top: 6rem;
    }
}

@media screen and (max-width: 750px){
    :root{
        --NEWscreen: 740;
    }
}

@media screen and (max-width: 680px){
    :root{
        --NEWscreen: 680;
    }
}

@media screen and (max-width: 600px){
    :root{
        --NEWscreen: 600;
    }
}

@media screen and (max-width: 560px){
    :root{
        --NEWscreen: 500;
    }
}

@media screen and (max-width: 470px){
    :root{
        --NEWscreen: 400;
    }
}

@media screen and (max-width: 380px){
    :root{
        --NEWscreen: 300;
    }
}