@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* CSS FILE */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    position: relative;
    width: 1440px;
    height: 1046px;
    font-family: 'Roboto';
}

h1 {
    position: absolute;
    width: 365px;
    height: 93px;
    left: 124px;
    top: 91px;
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: bold;
    font-size: 55px;
    line-height: 101.38%;
}

p {
    position: absolute;
    width: 662px;
    height: 374px;
    left: 124px;
    top: 202px;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 150%;
}

.picture1 {
    position: absolute;
    width: 314px;
    height: 315px;
    left: 976px;
    top: 226px;
}

.ellipse1 {
    position: absolute;
    width: 366px;
    height: 59px;
    border-radius: 366%;
    left: 950px;
    top: 511px;
    z-index: -1;
    background: #EFEFEF;
}

.picture2 {
    position: absolute;
    width: 232px;
    height: 203px;
    left: 124px;
    top: 670px;
}

.ellipse2 {
    position: absolute;
    width: 189px;
    height: 32px;
    border-radius: 189%;
    left: 157px;
    top: 857px;
    z-index: -1;
    background: #EFEFEF;
    }

section h2{
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 130%;
    width: 150px;
    top: 740px;
    position: absolute;
    height: 39px;
}

section p {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 130%;
    position: absolute;
    width: 150px;
    height: 39px;
    top: 780px;
}

.one h2 {
    left: 488px;
}

.two h2 {
    left: 733px;
    }

.three h2 {
    left: 976px;
}

.one p {
    left: 488px;
}

.two p {
    left: 733px;   
}

.three p {
    left: 976px;
}

@media (max-width: 834px) {
    .container {
        position: relative;
        width: 834px;
        height: 633px;
        font-family: 'Roboto';
    }
    
    h1 {
        position: absolute;
        width: 211.4px;
        height: 53.86px;
        left: 72px;
        top: 56px;
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: bold;
        font-size: 32px;
        line-height: 101.38%;
    }
    
    p {
        position: absolute;
        width: 383.41px;
        height: 216.61px;
        left: 72px;
        top: 120.29px;
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 150%;
    }
    
    .picture1 {
        position: absolute;
        width: 181.86px;
        height: 182.44px;
        left: 565.45px;
        top: 134.19px;
    }
    
    .ellipse1 {
        position: absolute;
        width: 211.98px;
        height: 34.17px;
        left: 550.39px;
        top: 299.25px;
        background: #EFEFEF;
    }
    
    .picture2 {
        display: none;
    }
    
    .ellipse2 {
        display: none;
        }
    
    section h2{
        font-style: normal;
        font-weight: bold;
        font-size: 15px;
        line-height: 130%;
        width: 86.88px;
        top: 407px;
        position: absolute;
        height: 22.59px;
    }
    
    section p {
        font-style: normal;
        font-weight: normal;
        font-size: 11px;
        line-height: 130%;
        position: absolute;
        width: 86.88px;
        height: 22.59px;
        top: 430.17px;
    }
    
    .one h2 {
        left: 72px;
    }
    
    .two h2 {
        left: 213.9px;
        }
    
    .three h2 {
        left: 354.63px;
    }
    
    .one p {
        left: 72px;
    }
    
    .two p {
        left: 213.9px; 
    }
    
    .three p {
        left: 354.63px;
    }
}

@media (max-width: 375px) {
    .container {
        position: relative;
        width: 375px;
        height: 776px;
        font-family: 'Roboto';
    }
    
    h1 {
        position: absolute;
        width: 170.08px;
        height: 43.34px;
        left: 36px;
        top: 56px;
        font-family: 'Roboto Slab';
        font-style: normal;
        font-weight: bold;
        font-size: 26px;
        line-height: 101.38%;
    }
    
    p {
        position: absolute;
        width: 308.47px;
        height: 174.27px;
        left: 36px;
        top: 107.72px;
        font-family: 'Roboto';
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        line-height: 150%;
    }
    
    .picture1 {
        position: absolute;
        width: 146.32px;
        height: 146.78px;
        left: 113.12px;
        top: 338px;
    }
    
    .ellipse1 {
        position: absolute;
        width: 170.55px;
        height: 27.49px;
        left: 101px;
        top: 470.8px;
        background: #EFEFEF;
    }
    
    .picture2 {
        display: none;
    }
    
    .ellipse2 {
        display: none;
    }

    section {
        display: flex;
        justify-content: space-around;
    }

    section h2 {
        font-style: normal;
        font-weight: bold;
        font-size: 12px;
        line-height: 130%;
        width: 69.9px;
        top: 544px;
        position: absolute;
        height: 18.17px;
    }
    
    section p {
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: 130%;
        position: absolute;
        width: 86px;
        height: 18px;
        top: 563px;
    }
    
    .one h2 {
        position: absolute;
        width: 69.9px;
        height: 18.17px;
        left: 35px;
        top: 544px;

        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 12px;
        line-height: 130%;
    }
    
    .two h2 {
        position: absolute;
        width: 69.9px;
        height: 18.17px;
        left: 154.16px;
        top: 544px;

        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 12px;
        line-height: 130%;
        }
    
    .three h2 {
        position: absolute;
        width: 69.9px;
        height: 18.17px;
        left: 35px;
        top: 615px;
        font-family: Roboto;
        font-style: normal;
        font-weight: bold;
        font-size: 12px;
        line-height: 130%;
    }
    
    .one p {
        position: absolute;
        width: 86px;
        height: 18px;
        left: 35px;
        top: 563px;
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: 130%;
    }
    
    .two p {
        position: absolute;
        width: 86.89px;
        height: 18.5px;
        left: 154.33px;
        top: 562.46px;
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: 130%;
    }
    
    .three p {
        position: absolute;
        width: 76px;
        height: 18px;
        left: 35px;
        top: 634px;
        font-family: Roboto;
        font-style: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: 130%;
    }
}