body{
    /* mine */
    display: flex;
    flex-direction: column; 
    position: absolute;
   
}

header{
    /* mine */

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: absolute;
    width: 1103.41px;
    height: 29.46px;
    left: 171.59px;
    top: 35.02px;
  
}

.logo{
    /* From Figma */
    width: 167.02px;
    height: 29.46px;
    
}

.nav-links{
    padding: 28px 0;
}

.nav-links a{
    position: relative;
    display: inline-block;
    margin: 0 15px;
    text-decoration: none;
    color: white;
    padding: 5px 0;
    /* Figma */
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
}

.main_part{
    background-image: url("/assests/background.png");
    /* Figma */
    width: 1440px;
    height: 1093px;
    left: 0px;
    top: 0px;
    
}
.main_part h1{
    position: absolute;
    font-family: 'Source Sans Pro';
    font-style: normal;
    text-align: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 120px;
    line-height: 151px;
    left: 26.18%;
    right: 26.32%;
    top: calc(41% - 151px/2 - 251px);
    
}

.main_part .intro p{
    position: absolute;
    height: 20px;
    top: calc(48% - 20px/2 - 175.5px);
    left: 43.18%;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
}


.grin{
    padding-left: 50px;
}

.laugh{
    padding-left:50px ;
}

.main_part .intro button{
    position: absolute;
    background: #C271FF;
    width: 162px;
    height: 44px;
    border-radius: 22px;
    top: calc(55% - 20px/2 - 175.5px);
    left: 45.18%;
    border: none;
    text-align: center;
    color: white;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
}

.main_part h2{
    position: absolute;
    height: 40px;
    left: 39.94%;
    right: 34.93%;
    top: calc(40% - 40px/2 + 104.5px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    text-align: center;

    color: white;
}

.learn{
    color: #C271FF;
}

.pros{
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 1009px;
    height: 237px;
    left: 217px;
    top: 588px;
}

.pro_1{
    position: absolute;
    left: 15.07%;
    right: 74.51%;
    top: 69.35%;
    bottom: 8.97%;
}

.pro_2{
    position: absolute;
    left: 35.14%;
    right: 54.44%;
    top: 69.35%;
    bottom: 8.97%;
}

.pro_3{
    position: absolute;
    left: 54.65%;
    right: 34.93%;
    top: 69.35%;
    bottom: 8.97%;
}

.pro_4{
    position: absolute;
    left: 74.72%;
    right: 14.86%;
    top: 69.35%;
    bottom: 8.97%;
}

.pros h3{
    position: absolute;
    height: 27px;
    width: 150px;
    top: 160px;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-size: 18px;
    line-height: 27px;
    text-align: center;

    color: #FFFFFF;
}

.pros p{
    width: 150px;
    height: 48px;
    top: 189px;
    position: absolute;
    height: 48px;
    left: 0%;
    right: 0%;

    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;

    text-align: center;

    color: #FFFFFF;
}

.part_1_testimonials{
    position: absolute;
    width: 1440px;
    height: 392px;
    left: -1px;
    top: 1093px;
    background: #C271FF;
}

.part_1_testimonials img{
    position: absolute;
    width: 160px;
    height: 160px;
    left: 259px;
    top: 100px;
}

.text{
    position: absolute;
    width: 730px;
    height: 158px;
    left: 450px;
    top: 123px;
    color: #FFFFFF;
}

.blockquote{
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 56.96%;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 34px;
}

.text .name {
    position: absolute;
    height: 34px;
    left: 5%;
    /* right: 82.33%; */
    top: calc(25% - 34px/2 + 28px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 34px;

    /* identical to box height, or 153% */

    color: #FFFFFF;
}

.text .role{
    position: absolute;
    height: 34px;
    left: 5%;
    top: calc(25% - 34px/2 + 62px);
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 34px;

    /* identical to box height, or 153% */

    color: #FFFFFF;
}

.part_2_tutorials{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 1228px;
    height: 450px;
    left: 106px;
    top: 1572px;
    
}

.part_2_tutorials h1{
    position: absolute;
    height: 40px;
    left: 39.25%;
    right: 36.81%;
    top: calc(40% - 40px/2 - 205px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 32px;
    line-height: 40px;
    text-align: center;

    color: #071629;
}
.part_2_tutorials h1 span{
    color: #C271FF;

}

.tutors{
    display: flex;
    flex-direction: row;
}

.tuto_1{
    width: 255px;
    height:335px;
    position: absolute;
    left: 2.72%;
    right: 74.51%;
    top: 25.56%;
    bottom: 0%;

}

.tuto_2{
    width: 255px;
    height:335px;
    position: absolute;
    left: 28.01%;
    right: 51.22%;
    top: 25.56%;
    bottom: 0%;
}

.tuto_3{
    width: 255px;
    height:335px;
    position: absolute;
    left: 51.22%;
    right: 28.01%;
    top: 25.56%;
    bottom: 0%;
}

.tuto_4{
    width: 255px;
    height:335px;
    position: absolute;
    left: 74.43%;
    right: 4.8%;
    top: 25.56%;
    bottom: 0%;
}

.tuto_1 .play{
    position: absolute;
    width: 64px;
    height: 64px;
    left: 37.65%;
    right: 37.25%;
    top: 13.43%;
    bottom: 67.46%;
    border-radius: 32px;
    background: #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.86;
}

.tuto_2 .play{
    position: absolute;
    width: 64px;
    height: 64px;
    left: 37.65%;
    right: 37.25%;
    top: 13.43%;
    bottom: 67.46%;
    border-radius: 32px;
    background: #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.86;
}

.tuto_3 .play{
    position: absolute;
    width: 64px;
    height: 64px;
    left: 37.65%;
    right: 37.25%;
    top: 13.43%;
    bottom: 67.46%;
    border-radius: 32px;
    background: #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.86;
}

.tuto_4 .play{
    position: absolute;
    width: 64px;
    height: 64px;
    left: 37.65%;
    right: 37.25%;
    top: 13.43%;
    bottom: 67.46%;
    border-radius: 32px;
    background: #FFFFFF;
    mix-blend-mode: normal;
    opacity: 0.86;
}

.tutors h2 {
    position: absolute;
    height: 20px;
    left: 5.1%;
    right: 53.33%;
    top: calc(50% - 20px/2 + 14.5px);
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #071629;
}

.tutors p{
    position: absolute;
    height: 48px;
    left: 5.1%;
    right: 0%;
    top: calc(50% - 48px/2 + 56.1px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    /* or 171% */

    color: rgba(7, 22, 41, 0.501584);
}

.rater{
    display: flex;
    flex-direction: row;
    top: 80%;
}

.rater img{
    position: absolute;
    left: 5.1%;
    right: 83.14%;
    top: 77.91%;
    bottom: 13.13%;
    height: 30px;
    width: 30px;
}

.rater h3{
    position: absolute;
    height: 27px;
    width: 86px;
    left: 21.96%;
    right: 44.31%;
    top: calc(46% - 27px/2 + 109px);
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 27px;

    color: #C271FF;
}

.rate{
    display: flex;
    flex-direction: row;
}

.rating{
    display: flex;
    flex-direction: row;
    position: absolute;
    width: 15px;
    height: 15px;
    left: 13px;
    top: 305px;
}

.rating img{
    height: 15px;
    width: 15px;
}

 .rate p{
    position: absolute;
    height: 27px;
    left: 60.04%;
    right: 8.63%;
    top: calc(47% - 27px/2 + 143px);
    width: 60px;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 27px;
    /* identical to box height, or 193% */
    text-align: right;

    color: #C271FF;
 }

 .part_3_free_membership{
    position: absolute;
    width: 1440px;
    height: 502px;
    left: 0px;
    top: 2109px;
    background: #071629;
 }

 .part_3_free_membership h1{
    position: absolute;
    height: 40px;
    left: 40.85%;
    right: 40.9%;
    top: calc(50% - 40px/2 - 161px);
    width: 234px;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    color: #FFFFFF;
 }

 .part_3_free_membership h1 span{
    color: #C271FF;
 }

 .dots{
    display: flex;
    flex-direction: row;
    top: 300px;

 }

.dot_1{
    position: absolute;
    left: 15.39%;
    right: 70.76%;
    top: 33.47%;
    bottom: 36.06%;
}

.dot_2{
    position: absolute;
    left: 31.11%;
    right: 51.04%;
    top: 33.47%;
    bottom: 36.06%;
}

.dot_3{
    position: absolute;
    left: 50.9%;
    right: 31.25%;
    top: 33.47%;
    bottom: 36.06%;
}

.dot_4{
    position: absolute;
    left: 70.76%;
    right: 11.39%;
    top: 33.47%;
    bottom: 36.06%;
}
.dots h2{
    position: absolute;
    height: 26px;
    left: 0.19%;
    right: 0.19%;
    top: calc(50% - 26px/2 - 1.5px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;

    /* identical to box height, or 144% */
    text-align: center;

    color: #FFFFFF
}

.dots img{
    position: absolute;
    width: 43.67px;
    height: 35.35px;
    left: 90.71px;
    top: 0.03px;
}

.dots p{
    position: absolute;
    height: 52px;
    left: 8.75%;
    right: 8.75%;
    top: calc(50% - 52px/2 + 50.5px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;

    /* or 186% */
    text-align: center;

    color: #FFFFFF;
}
.part_3_free_membership button{
    position: absolute;
    background: #C271FF;
    width: 162px;
    height: 44px;
    border-radius: 22px;
    top: 80%;
    left: 45.18%;
    border: none;
    text-align: center;
    color: white;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    
}

.part_4_FAQ{
    position: absolute;
    width: 920px;
    height: 707px;
    left: 249px;
    top: 2678px;
}

.part_4_FAQ h1{
    position: absolute;
    height: 75px;
    left: 44.24%;
    right: 40.98%;
    top: calc(50% - 75px/2 - 316px);
    width: 136px;
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-size: 60px;
    line-height: 75px;
    text-align: center;

    color: #071629;
}

.Q_1{
    position: absolute;
    width: 350px;
    height: 242px;
    left: 0%;
    right: 61.96%;
    top: 21.07%;
    bottom: 44.7%;
}

.Q_2{
    position: absolute;
    width: 350px;
    height: 242px;
    left: 61.96%;
    right: 0%;
    top: 21.07%;
    bottom: 44.7%;
}
.Q_3{
    width: 350px;
    height: 242px;
    position: absolute;
    left: 0%;
    right: 61.96%;
    top: 65.77%;
    bottom: 0%;
}
.Q_4{
    width: 350px;
    height: 242px;
    position: absolute;
    left: 61.96%;
    right: 0%;
    top: 65.77%;
    bottom: 0%;
}

.Q h2{
    position: absolute;
    height: 20px;
    left: 0%;
    right: 58.57%;
    top: calc(50% - 20px/2 - 111px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;

    color: #071629;
}

.Q p{
    position: absolute;
    height: 192px;
    left: 0%;
    right: 0%;
    top: calc(50% - 192px/2 + 25px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    /* or 171% */

    color: rgba(7, 22, 41, 0.501584);
}

.part_5_footer{
    position: absolute;
    width: 1440px;
    height: 249px;
    left: 0px;
    top: 3469px;
    background: #071629;
}

.footer_about{
    display: flex;
    flex-direction: row;
    
}

.footer_logo{
    position: absolute;
    left: 11.46%;
    right: 76.81%;
    top: 38.15%;
    bottom: 49.8%;
    height: 30px;
    width: 169px;
}

.social_icons{
    position: absolute;
    width: 130px;
    height: 30px;
    left: 1070px;
    top: 90px;
    justify-content: space-between;
    align-items: center;
}

.footer_cont{
    display: flex;
    flex-direction: column;
}

.footer_cont p{
    position: absolute;
    height: 15px;
    width: 96px;
    left: 46.67%;
    right: 46.67%;
    top: calc(50% - 15px/2 + 78px);

    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    /* identical to box height */

    color: #FFFFFF;

    mix-blend-mode: normal;
    opacity: 0.35;
}