.MainTier1{
    height: auto;
    width: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
}

.BuyCartFixedBTN{
    display: flex;
    align-items: center;
    position: fixed;
    gap: 5px;
    background-color: #0f172a;
    color: white;
    
    font-weight: 600;
    font-size: 16px;
    padding: 10px 15px ;
    border-radius: 5px;

    bottom: 20px;
    right: 80px;
    z-index: 100000;
}

.Main1{
    width: 80%;
    height: auto;
    display: flex;
    margin-top: 125px;
    /* flex-direction: column; */
     /* border: 1px solid black; */
   
}
/* #D1F5EA */

.Main1Left{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
     justify-content: center;
     padding-right: 50px;
}

.Main1Text1{
display: flex;
gap: 5px;
align-items: center;
margin-bottom: 20px;
}

.TickLogo{
    width:15px ;
    height:15px ;
background-color: #09c82c33;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.TickLogoText{
font-size: 14px;
font-weight: 600;
line-height: 21px;
}

.Main1Text2{
    font-size: 48px;
    font-weight: 700;
    line-height: 58px;
    color: rgb(30, 41, 59);
    margin-bottom: 20px;
}

.Main1Text3{
color: rgb(100, 116, 139);
font-weight: 400;
font-size: 14px;
line-height: 22px;
margin-bottom: 30px;
}

.MainBTNfileld1{
display: flex;
gap: 10px;
margin-bottom: 30px;
}

.MainBTNfileld1BTN1{
    height: 40px;
width: 130px;
background-color: #754ffe;
display: flex;
align-items: center;
border-radius: 3px;
font-size: 14px;
font-weight: 600;
line-height: 22px;
color: white;
justify-content: center;
}

.MainBTNfileld1BTN2{
    height: 40px;
width: 140px;
display: flex;
align-items: center;
justify-content: space-between;
/* border: 1px solid black; */

font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgb(30, 41, 59);
}

/* .MainBTNfileld1BTN2BTN{

} */

.MainBTNfileld1BTN2Text{
    display: flex;
}

.Main1Right{
    width:40vw;
    height: 59vh;
    display: flex;
    justify-content: flex-end;
   padding: 0;
    
}

.Main1RightZindexItems{
    width:100%;
    height: 100%;
        display: flex;
    justify-content: center;
}

.BigGraph{
     width: 65%;
    height: 100%;
    background: url("./Material Folder/bg-thumb.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    
}

.BigGraphCollegeGirl{
    width: 100%;
    height: 100%;
    background: url("./Material Folder/girl-image.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
  right: 30px;
}

.BigGraphTopRight{
      width: 55%;
    height: 100%;
    background: url("./Material Folder/frame-1.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -120px;
    right: -100px;
  
}

.BigGraphRightBottomTarget{
     width: 35%;
    height: 100%;
    background: url("./Material Folder/target.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 70px;
    right: -120px;
}

.BigGraphLeftTopTrophy{
  width: 35%;
    height: 100%;
    background: url("./Material Folder/trophy.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -140px;
    left: -50px;
}

.BigGraphLeftBottomMick{
  width: 30%;
    height: 100%;
    background: url("./Material Folder/sound.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -15px;
    left: -90px;
}

.BigGraphLeftBottomGraph{
  width: 50%;
    height: 100%;
    background: url("./Material Folder/frame-2.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -180px;
    left: -35px;
}















.Main2{
    margin-top: 120px;
    margin-bottom: 120px;
    width: 80%;
    height: auto;

/* background-color: red; */
display: flex;
flex-wrap: wrap;
}

.Main2Logo1{
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 20px;
    color: #0EA5E9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Main2Logo2{
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 20px;
    color: #F59E0B;
      display: flex;
    align-items: center;
    justify-content: center;
}
.Main2Logo3{
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 20px;
    color: #754FFE;
      display: flex;
    align-items: center;
    justify-content: center;
}
.Main2Logo4{
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    margin-bottom: 20px;
    color: #38A169;
      display: flex;
    align-items: center;
    justify-content: center;
}

.Main2Text{
    display: flex;
    flex-direction: column;
    justify-content:center ;
    align-items: center;
      display: flex;
    align-items: center;
    justify-content: center;
}

.Main2TextBigText{
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
      display: flex;
    align-items: center;
    justify-content: center;
}

.Main2TextSmallText{
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    color: rgb(100, 116, 139);
      display: flex;
    align-items: center;
    /* flex-direction: row;
    justify-content: center; */
}

.Main2Box1{
   
    width:25%;
height: 220px;
/* background-color: red; */
border-top: 1px solid  #E2E8F0;
border-bottom: 1px solid  #E2E8F0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.Main2Box2{
   
    width:25%;
height: 220px;
/* background-color: red; */
border-top: 1px solid  #E2E8F0;
border-bottom: 1px solid  #E2E8F0;
border-left: 1px solid  #E2E8F0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.Main2Box3{
   
    width:25%;
height: 220px;
/* background-color: red; */
border-top: 1px solid  #E2E8F0;
border-bottom: 1px solid  #E2E8F0;
border-left: 1px solid  #E2E8F0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.Main2Box4{
   
    width:25%;
height: 220px;
/* background-color: red; */
border-top: 1px solid  #E2E8F0;
border-bottom: 1px solid  #E2E8F0;
border-left: 1px solid  #E2E8F0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


















.Main3{
    width: 80%;
    height: auto;
    /* border: 1px solid black; */
    /* background-color: red; */
}

.Main3TextTier{

}

.Main3TextTierHeadingTier{
font-weight: 600;
font-size: 32px;
line-height: 48px;
color: rgb(30, 41, 59);
}

.Main3TextTierSmallTextTier{
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: rgb(100, 116, 139)   ;
}



.ChooseOtionsinMain3{
    width: 100%;
    height: 60px;
    background-color: #E2E8F0;
    /* border: px solid black; */
    display: flex;
    align-items: center;
    padding-left: 30px;
    gap: 10px;
    border-radius: 10px;
    margin-top: 40px;
    position: relative;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    overflow: hidden;
}




.ChooseOtionsinMain3 span{
    position: relative;
    flex-direction: column;
    color: #64748B;
    height: 100%;
    padding: 20px;
    font-size:14px ;
    font-weight:500 ;
    line-height: 22px;
    z-index: 3;
    
}

.ChooseOtionsinMain3 span:first-child{
    border-bottom: 3px solid rgb(117, 79, 254);
    color: rgb(117, 79, 254);
}

.ChooseOtionsinMain3 span:hover{
    border-bottom: 3px solid rgb(117, 79, 254);
    color: rgb(117, 79, 254);
    /* padding: 10px; */
}

.Main3BoxesTier1{
    height:auto;
    width: 100%;
    /* background-color: red; */
  
justify-content: space-between;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 70px;
}

.Main3BoxesTier1BOX1{
width: 24%;
height: 400px;
/* border: 1px solid black; */
    border: 1px solid rgb(242, 242, 243);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 10px;
overflow: hidden;
}

.Main3BoxesTier1BOX1IMG{
    background: url("./Material Folder/course-angular.jpg");
    width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

.Main3BoxesTier1BOX1IMG2{
    background: url("./Material Folder/course-laravel.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

.Main3BoxesTier1BOX1IMG3{
    background: url("./Material Folder/course-node.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

.Main3BoxesTier1BOX1IMG4{
    background: url("./Material Folder/course-python.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

.Main3BoxesTier1BOX1IMG5{
    background: url("./Material Folder/course-laravel.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

.Main3BoxesTier1BOX1IMG6{
    background: url("./Material Folder/course-react.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}

.Main3BoxesTier1BOX1IMG7{
    background: url("./Material Folder/course-angular.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}   

.Main3BoxesTier1BOX1IMG8{
    background: url("./Material Folder/course-gatsby.jpg");
   width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  
}




.Main3BoxesTier1BOX1TextPlace1{
/* background-color: blue; */
display: flex;
flex-direction: column;
gap: 10px;

margin: 0% 10%;
}

.Main3BoxesTier1BOX1LikeBox{
display: flex;
justify-content: space-between;
}

.intermediate{
color: #0EA5E9;
background-color: #E6F6FD;
font-weight: 500;
font-size: 12px;
line-height: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 10px;
border-radius: 10px;
}

.likebtn{
    color: #64748B;
}


.likebtn:hover{
color: #754FFE;
}

.Main3BoxesTier1BOX1TextPlace1Heading{
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: rgb(30, 41, 59);
}

.Main3BoxesTier1BOX1TextPlace1Para{
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: rgb(100, 116, 139);
}

.Main3BoxesTier1BOX1StarRatingWorld{
    display: flex;
    gap: 4px;
}

.Main3BoxesTier1BOX1Stars{
color: #F59E0B;
}

.Main3BoxesTier1BOX1Average{
color: #F59E0B;
font-weight: 400;
font-size: 14px;
line-height: 14px;
}

.Main3BoxesTier1BOX1Counting{
color: rgb(100, 116, 139);
font-weight: 400;
font-size: 12px;
line-height: 12px;
}

.Main3BoxesTier1BOX1HorizantalLine{
    height: 1px;
    /* background-color: red; */
      border: 1px solid rgb(242, 242, 243);
}

/* #754FFE */

.Main3BoxesTier1BOX1BuyItemPrice{
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
}

.Main3BoxesTier1BOX1Price{
font-size:14px ;
font-weight:600 ;
color: rgb(30, 41, 59);
line-height:21px ;
}

.Main3BoxesTier1BOX1BuyBTN{
display: flex;
gap: 2px;
justify-content: center;
align-items: center;
}

.Main3BoxesTier1BOX1BuyBTNBuyBTN{
font-size:14px ;
font-weight:400 ;
color:rgb(117, 79, 254) ;
line-height: 14px;
}

.Main3BoxesTier1BOX1BuyBTNBuyText{
font-size: 14px;
font-weight: 400;
color:rgb(30, 41, 59) ;
line-height:22px ;
}


















.Main4{
      height: 80vh;
    width: 80%;
    /* background-color: red; */

    display: flex;
    margin-bottom: 100px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    align-items: flex-end;

  
}

.Main4Left{
    width: 50%;
    height: 46%;
    background-color: #754FFE;
   border-top-left-radius: 10px;
    display: flex;
      /* align-items: center; */
      justify-content: center;
      position: relative;
}

.Main4LeftDoller{
background: url("./Material Folder/dollor.svg");
    height: 100px;
    width: 100px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
   top: 90px;
    left:20px;
}

.Main4LeftGraph{
background: url("./Material Folder/graph.svg");
    height: 95px;
    width: 95px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;  
    right: 50px;
}

.Main4instructorIMG{
background: url("./Material Folder/cta-instructor-1.png");
    height: 347px;
    width: 316px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;


}

.Main4Right{
   
    width: 50%;
    height: 46%;
    background-color: #754FFE;
    display: flex;
   border-top-right-radius: 10px;
    gap: 15px;
    align-items: center;
    /* justify-content: center; */
}

.Main4RightContainer{
    width: 430px;
    height: 150px;
    margin-top: 40px;
    /* background-color: red; */
}

.Main4RightBigText{
font-weight:600 ;
font-size: 32px;
line-height: 48px;
color: rgb(255, 255, 255);
}

.Main4RightSmallText{
    font-weight:400 ;
font-size:14px ;
line-height:22px ;
color:rgb(255, 255, 255) ;
}

.Main4RightBTN{
    width: 170px;
font-weight: 600;
font-size: 14px;
line-height:22px ;
color:rgb(0, 0, 0) ;
padding: 10px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
margin-top: 10px;
}











.Main5Coverer{
    width: 100%;
    background-color: #E2E8F0;
    display: flex;
    justify-content: center;
    padding-top: 100px;
}

.Main5{
    width: 80%;
    height: auto;
    background-color: #E2E8F0;
    padding-bottom: 150px;  
 
}



.Main5Text1Field{
    width: 100%;
display: flex;
padding: 0px 100px;
height: auto;
padding-bottom: 100px;
/* background-color: green; */
}

.Left{
display: flex;
flex-direction: column;
width: 45%;
gap: 20px;
flex-wrap: wrap;
}

.Left .Main5Text1FieldRatingField{
    display: flex;
}

.Left .Main5Text1FieldHeadingField{
font-weight:600 ;
font-size: 32px;
line-height: 48px;
color:rgb(30, 41, 59) ;
}

.Left .Main5Text1FieldSmallTextField{
font-weight:400 ;
font-size: 14px;
line-height: 22px;
color:rgb(100, 116, 139) ;
}

.Left .Main5Text1FieldRatingField p{ 
font-weight: 600;
font-size: 14px;
line-height: 22px;
color: rgb(15, 23, 42);
}

.Left .StarsForMain5Field { 

color:  rgb(245, 158, 11);
}

.Left .Main5Text1FieldRatingField .Graypara { 
font-size: 14px;
line-height: 22px;
font-weight: 400;
color: rgb(100, 116, 139);
}

.Main5Text1Field .Right{
width: 55%;
height: auto;
display: flex;
justify-content: flex-end;
align-items: center;
}

.Right .Main5Text1FieldRightViewReviews{
width: 130px;
height: 39px;
background-color: #6343D8;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
line-height: 22px;
border-radius: 5px;
}

.Main5 .Main5ScrollBoxes{
    background-color: green;
    display: flex;
    justify-content: space-between;
}

.Main5ScrollBoxesBox1{
    height: 100px;
    width: 300px;
    background-color: gray;
 
}

.Main5Boxes{
width: 100%;
height: auto;
   
    /* background-color: blue; */
    display: flex;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;

}


.Main5BoxesBox1{
    height: auto;
    width: 400px;
    background-color: white;
    /* border: 1px  solid black; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    align-items: center;
    padding: 30px 0px;
    border-radius: 5px;
    
   
}

.Main5BoxesBox1ProfileImage{
    background: url("./Material Folder/avatar-1\ \(3\).jpg");
    height: 50px;
    width: 50px;
    background-size:cover;
    border-radius: 50%;
}

.Main5BoxesBox1Details{
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: rgb(100, 116, 139);
display: flex;
flex-wrap: wrap;
align-items: center;
text-align: center;
justify-content: center;
padding: 0px 20px   ;

}

.Main5BoxesBox1Stars{
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: rgb(245, 158, 11);
}

.Main5BoxesBox1NameAndProfession{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Main5BoxesBox1NameAndProfessionBoldText{
  font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: rgb(30, 41, 59);
}

.Main5BoxesBox1NameAndProfessionSmallText{
  font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: rgb(100, 116, 139);
}

.Main5BoxesLeftRightButton{
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
}

.Main5BoxesLeftRightButtonLeft{
  width: 30px;
    height: 30px;
    background-color: white;
    color: #AFBACA;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.Main5BoxesLeftRightButtonRight{
    width: 30px;
    height: 30px;
    background-color: white;
    color: #AFBACA;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.Footer{
    width: 100%;
    height: auto;
    /* background-color: red; */
    display: flex;
    justify-content: center ;
}

.FooterMainBox{
    width: 80%;
    height: auto;
    padding-top: 150px;
    /* background-color: green; */
}

.Start{

display: flex;
height: auto;
width: auto;
}
.FooterStartLeft{
width: 100%;
/* padding-right: 200px; */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}

.smallullileftfooter{
    width:auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 40px;
}

.FooterStartLeftLogo{
background: url("./Material Folder/logo.svg");
width: 100px;
height: 50px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.FooterStartLeftText{
font-weight:400 ;
font-size: 14px;
color: rgb(71, 85, 105);
line-height: 22px;
}
.FooterStartLeftLogos{
color: #754FFE;
}

.OneBoxFooterLeft{
    width: 380px;
    height: auto;
}

.FooterStartRight{
    display: flex;
  gap: 50px;
    width: 100%;
    height: auto;
  
    flex-wrap: wrap;
    /* background-color: red; */
}

.FooterStartRight ul{
    width: auto;
    height: auto;
    /* background-color: green; */
}

ul li{
list-style: none;
}

.FooterStartRightulHeading{
    padding-bottom:10px;
width: auto;
height: auto;
font-weight:700 ;
font-size: 20px;
color: rgb(30, 41, 59);
line-height: 30px;
}

.FooterStartRightulContent{
width: auto;
height: auto;
font-weight:400 ;
font-size: 14px;
color:rgb(71, 85, 105) ;
line-height: 24px;
}

.FooterStartRightulContentEmail{
    display: flex;
    color:rgb(71, 85, 105) ;
}

.DifferColor{
    color: #754FFE;
}

.FooterStartRightulContentAppAndGooglePlayLogo{
display: flex;
}

.FooterStartRightAppStore{
background: url("./Material Folder/appstore.svg");
    width: 52%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.phno{
    color: black;
}

.FooterStartRightGooglePlay{
background: url("./Material Folder/playstore.svg");
    width: 52%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

.End{
    width: auto;
    height: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.Text1{
font-size: 14px;
color:rgb(71, 85, 105) ;
font-weight: 400;
line-height:22px ;
}

.Text2{
font-size: 14px;
color:rgb(71, 85, 105) ;
font-weight: 400;
line-height:22px ;
}

.Text3{
font-size: 14px;
color:rgb(71, 85, 105) ;
font-weight: 400;
line-height:22px ;
}

.Text4{
font-size: 14px;
color:rgb(71, 85, 105) ;
font-weight: 400;
line-height:22px ;
}

.Text5{
font-size: 14px;
color:rgb(71, 85, 105) ;
font-weight: 400;
line-height:22px ;
}

.Text6{
font-size: 14px;
color:rgb(71, 85, 105) ;
font-weight: 400;
line-height:22px ;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}


.FooterMainBoxHorizontalline{
border: 0;
height: 3px;
margin-top: 100px;
background-color: #E2E8F0;
}