*{
    margin: 0;padding: 0;
    box-sizing: border-box;
     font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 14px;
  font-style: normal;
    
}

:root{
    --LightGrayColor:rgb(82, 82, 82);
    --VeryLightGrayColor:rgba(82, 82, 82, 0.75);
    --LightGreenColor:rgb(9, 200, 44);

}

h1{
    /* background-color: red; */
}

.main1{
    /* background-color:gray; */
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    overflow: hidden;
    position: relative;
}


.nav{
    background-color: #fff;
    height: 60px;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    align-items: center;
    position: fixed;
    border-bottom: 3px solid #F2F2F3;
    top: 0px;
    z-index: 900;
 
}

.logotext{
    font-weight:bold;
    font-size: 20px;
    font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.divn1{
    display: flex;
    align-items: center;
    display: flex;
    gap: 5px;
    
}

.divn2ul1{
    display: flex;
    list-style: none;
    font-size: 16px;
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
gap: 40px;
}
.btnnav{
           /* font-size: 16px; */
    font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 15px;
  font-style: normal;
  background-color: #0bc22d;
  padding: 21px 22px 21px 22px;
  height:40px;
  display: flex;
  justify-content: center ;
  align-items: center;
  
  text-align: center;
  border-radius: 20px;
  color: white;
  
  
}

.navcont{
    width: 80vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: green; */
}

.divn2ul1 li:hover{
    color: green;
    cursor: pointer;
    
}

/* @media ( width <413px){
   .Main6Box1 .Main6Box1text2{
        color: blue;
        font-size: 6vw;
    }

   .Main6Box1 .Main6Box1text2 span{
        color: blue;
        font-size: 6vw;
    }
} */





.div22{
    /* border: 1px solid  gray;; */
    padding:4px  10px;
    border-radius: 20px;
    color: gray;
}

.main2{
    margin-top: 50px;
    /* background-color:red; */
    height: auto;
    width: 80vw;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    padding-top: 6rem ;
    /* flex-wrap: wrap; */
}

.Main1{
    width: 100%;
    height: auto;
    /* background-color: blue; */
    display: flex;
    /* flex-direction: column; */
    /* border: 1px solid red; */

}

.Main1left{
    width: 50%;
    height: 100%;
    /* background-color: red; */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.Main1leftParagraph{
    color: var(--LightGrayColor);
}

.Main1right{
    width: 50%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resh{
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

/* @media(width<965px){
.FooterStartContent{
    flex-direction: column;
}

 .FooterStartContent  .NologoStartFooter .NologoHeader{

   flex-direction: column;
    }
} */



.NewCourses{
    border-radius: 20px;
    padding: 5px 2px;
    
    gap: 5px;
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
    background-color: #E6F9E9;
    border: 1px solid #0bc22d;
    color: #0bc22d;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* display: inline-block; */
    
}

.dot{
    width:5px;
    height:5px ;
    background-color: green;
    border-radius: 50%;
    
}

.Main1leftHead{
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 14px;
    font-style: normal;
}
.h1,.h3{
    /* color: rgb(82, 82, 82); */
    font-weight: 600;
    color: black;
    font-size: 56px;
}
.h2{
    font-size: 56px;
    color:rgb(9, 200, 44);
    font-weight: 600;
}

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    
    border-left: 7px solid red;
}



.startbtn{gap: 10px;
    background-color:rgb(9, 200, 44);
    display: inline;
    color: white;
    padding: 13px 27px;
    border-radius: 20px;
    width: 190px;
    display: flex;
    
    justify-content: space-between;
    align-items: center;
}

/* .fa-solid{
    padding-left: 10px;
    } */
    
    .ytlogo{
    font-weight: 400;
    font-size: 16px;
    display: flex;
    /* border: 1px solid black; */
    /* display: inline; */
    color: rgb(82, 82, 82);
    width: 190px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    gap: 5px;
    background-color: #E9F3EB;
}

.btnsdiv1{
    display: flex;
    flex-wrap: wrap;
    
}

.detailsdiv{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    
}


.yt{
    padding-top: 5px;
    align-self:center;
    color: red;
}
.logo{
    
    display: inline;
    font-size: 21px;
     color: #0bc22d;
}

.d1{
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--LightGrayColor);
}
.d2{
    display: flex;
    align-items: center;
     gap: 5px;
      color: var(--LightGrayColor);
}
.d3{
    display: flex;
    align-items: center;
     gap: 5px;
      color: var(--LightGrayColor);
}

.iframe{
    width: 100%;
    height: 100%;
  
}

.back{
    width: 94%;
    height: 94%;
    background: url("./Images/hero-img.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* border: 1px solid black; */
       border-radius: 32px;
}
.backcover{
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
        border: 1px solid rgba(128, 128, 128, 0.452);
        border-radius: 32px;
        position: relative;
}

.divgroup1{
  background-color: white;
    padding-left: 5px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(128, 128, 128, 0.74);
    width: 100px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 50px;
    z-index: 5;
    
}

.imgdivgroup1{
    width: 40%;
    height: 90%;
    background: url("./Images/avatar-3.jpg");
    background-size: cover;
    border-radius: 50%;
}

.smf{
    font-size: 10px;
    padding-left: 10px;
}

.divgroup2{
  background-color: white;
    padding-left: 5px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(128, 128, 128, 0.74);
    width: 100px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 29px;
    border-radius: 50px;
     z-index: 4;
    
}

.imgdivgroup2{
   width: 30%;
    height: 90%;
    background: url("./Images/avatar-2.jpg");
    background-size: cover;
    border-radius: 50%;
}

.divgroup3{
  background-color: white;
    padding-left: 5px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(128, 128, 128, 0.74);
    width: 100px;
    height: 30px;
    position: absolute;
    top: 0;
    right: 58px;
    border-radius: 50px;
     z-index: 3;
    
}

.imgdivgroup3{
   width: 30%;
    height: 90%;
    background: url("./Images/avatar-3.jpg");
    background-size: cover;
    border-radius: 50%;
}

.new1box{
    position: absolute;
    width: 160px;
    height: 50px;
    border: 1px solid rgba(128, 128, 128, 0.452);
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 50px;
    justify-content: space-evenly;
    background-color: white;
    bottom: 0;
left: -30px;
}

.new1img{
    height: 70%;
width: 30px;
    color: #0bc22d;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #89d889ab;
}

.playbtn{
    width: 60px;
    height: 60px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    /* border: 1px solid black; */
    position: absolute;
    background-color: #0bc22dd3;
    color: white;
}

.fixedbtn{
    position: fixed;
    top: 85vh;
    right: 1vw;
color: white;
background-color: black;
padding: 10px 10px;
border-radius: 50px;
z-index: 500;
}

.Main2{
    width: 100%;
    height: 100%;
    /* background-color: white; */
    /* background-color: gray; */
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    /* border: 1px solid black; */
    margin-top: 200px;
}

.textpart{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;

    margin-bottom: 200px;
}

.Main2p1{
    letter-spacing: 1.25;
    color: #0bc22dd3;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
.Main2p2 {
display: flex;
 flex-wrap: wrap;
 justify-content: center;
gap: 6px;
    margin-bottom: 10px;

}

.Main2p2 span{
    font-weight: 700;
font-size: 31px;
}

.gp1Main2{
    color: #0bc22dd3;
}

.Main2p3{
display: flex;
flex-wrap: wrap;
font-size:16px ;
font-weight: 400 ;
    margin-bottom: 5px;
    color: 
rgb(82, 82, 82);
justify-content: center;
align-items: center;
margin-bottom: 60px;

}

.boxes{
       /* padding-top: 30px; */
    width: 100%;
    height: auto;
    /* background-color: blue; */
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    position: relative;
    /* gap: 30px; */
}


.data1{
     width:279px;
    height: 493px;
     /* width: 292.594px;
    height: 215.px; */
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid hsl(0, 19%, 87%);
    /* #F0F0F0 */
    position: relative;
}

.imagedata1{
background: url("./Images/Card/course-img-1.jpg");
width: 100%;
height: 50%;
background-size: 100% 100%;
}
.imagedata2{
background: url("./Images/Card/course-img-2.jpg");
width: 100%;
height: 50%;
background-size: 100% 100%;
}
.imagedata3{
background: url("./Images/Card/course-img-3.jpg");
width: 261px;
height: 261px;
background-size: 100% 100%;
}
.imagedata4{
background: url("./Images/Card/course-img-4.jpg");
width: 261px;
height: 261px;
background-size: 100% 100%;
}

.profiledata{
    display: flex;
/* justify-content: center; */
align-items: center;
gap: 10px;
margin-bottom: 20px;
}

.profileimage1{
    width: 20px;
    height: 20px;
    background-color: black;
    background: url("./Images//avatar-2.jpg");
    background-size: 100% 100%;
    border-radius: 50%;
}

.eldata1{
    display: flex;
    /* margin-bottom:; */
    justify-content: space-between;
    margin-top: -10px;
}

.price1{
    display: flex;
     margin-top: 15px;
}

.enbtn{
    display: flex;
}

.text1data{
        padding-right: 25px;
  background-color: white;
    display: flex;
    flex-direction: column;
   
    /* background-color: green; */
    width: 100%;
height: 50%;
    padding-left: 25px;
    margin-top: 10px;
}

.datahead1{
    padding-top: 20px;
    font-size: 16px;
    font-weight: 600;
}

.profiledata{
      padding-top: 10px;
}

.eldata1{
    padding-top: 25px;
}

.time1{
    display: flex;
    align-items: center;
}

.peo1{
    display: flex;
    align-items: center;
}



.rating1 .star{
 color: #F0B100;
 padding-top: 3px;
 margin-right: 3px;

}

.rating1{
    display: flex;
}

.price1{
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    
}

.price1 .dprice1{
font-size: 20px;
font-weight: 700;

}
.price1 .entxt1{
font-size: 14px;
color: rgb(7, 160, 35);
}

.price1 .arrow1{
color: rgb(7, 160, 35);
}

.ViewAllCourses{
    /* background-color: red; */
    /* position: absolute; */
    /* padding: 10px 20px; */
    display: flex;
    border-radius: 50px;
    border: 1px solid black;
    /* bottom: 100px; */
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    margin-top: 30px;
    /* display: none; */
}
.ViewAllCourses:hover{
    color: white;
   background-color: black;
   cursor: pointer;
}

.absolutebox1{
    position: absolute;
    top: 10px;
    /* border: 1px solid black; */
    /* width: 120px; */
    /* display: flex; */
    text-align: center;
    padding: 7px 11px;
    border-radius: 50px;
    background-color: #F0B100;
    color: white;
    left: 10px;

}
.absolutebox2{
    position: absolute;
    top: 10px;
    /* border: 1px solid black; */
    /* width: 120px; */
    /* display: flex; */
    text-align: center;
    padding: 7px 11px;
    border-radius: 50px;
    background-color: #FB2C36;
    color: white;
    left: 10px;

}
.absolutebox3{
    position: absolute;
    top: 10px;
    /* border: 1px solid black; */
    /* width: 120px; */
    /* display: flex; */
    text-align: center;
    padding: 7px 11px;
    border-radius: 50px;
    background-color: #00B8DB;
    color: white;
    left: 10px;

}
.absolutebox4{
    position: absolute;
    top: 10px;
    /* border: 1px solid black; */
    /* width: 120px; */
    /* display: flex; */
    text-align: center;
    padding: 7px 11px;
    border-radius: 50px;
    background-color: #09C82C;
    color: white;
    left: 10px;

}











.Main3{
    height: auto;
    width: 100%;
    /* background-color: red; */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    margin-top: 90px;
}

.Main3text{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    /* background-color: blue; */
}

.textbox{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    background-color: white;
    margin-bottom: 50px;
}

.text1{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
     color:rgb(9, 200, 44)
}

.text2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

.text2text1, .text2text2{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-weight: 600;
    font-size: 28px;
}

.text2text2{
    color:rgb(9, 200, 44)
}
.text3{
    display: flex;
    flex-wrap: wrap;
    /* flex-direction: column; */
    /* gap: 2px; */
    align-items: center;
    justify-content: center;
    /* word-spacing: 3px; */
}

.text3text1{
    display: flex;
    gap: 10px;
}

.Main3UserBoxes{
    background-color: white;
    width: 100%;
    height: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /* justify-content: center; */
    align-items: center;
    gap: 10px;
    /* margin-bottom: 100vh; */
   
}

.Main3UserBox1{
    /* background-color: black; */
    border: 1px solid hsl(0, 19%, 87%);
    width: 263px;
    height: 380px;
     border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding-top: 2%;
    gap: 25px;
    background-color: white;
}

.Main3UserBoxesprofileImage1{
    position: relative;
    /* background-color: red; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.Main3UserBox1Image{
    background: url("./Images/Main3/avatar-4.jpg");
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    border-radius: 50%;
    border: 3px solid #F2BB27;
   
}
.Main3UserBox2Image{
    background: url("./Images/Main3/avatar-5.jpg");
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    border-radius: 50%;
    border: 3px solid #F2BB27;
   
}



.Main3UserBox3Image{
    background: url("./Images/Main3/avatar-6.jpg");
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    border-radius: 50%;
    border: 3px solid #F2BB27;
   
}
.Main3UserBox4Image{
    background: url("./Images/Main3/avatar-5.jpg");
    width: 80px;
    height: 80px;
    background-size: 100% 100%;
    border-radius: 50%;
    border: 3px solid #F2BB27;
   
}

.Main3UserBox1ImageRatingBox{
    color: white;
    background-color: #F0B100;
    position: absolute;
    /* left: 22px; */
    bottom: -5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 1px 10px;
    border-radius: 5px;
}

.Main3UserBox1ImageRatingBox span{
    padding-top: 4px;
}

.Main3UserBoxesdata1{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 10px; */
}

.Main3UserBoxesdata1 .line1{
    font-size: 14px;
    font-weight: 700;
}

.Main3UserBoxesdata1 .line2{
    font-size: 13px;
    font-weight: 400;
    color: rgba(82, 82, 82, 0.75);
    margin-top: 2px;
}

.Main3UserBoxesdetail1{
   display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -8px;
    /* margin-bottom: 10px; */
}

.Main3UserBoxesdetail1 .line1,.line2,.line3{
font-size: 13px;
font-weight: 400;

color:rgb(82, 82, 82);
}

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

.flexline3 .text11{
   font-size: 13px;
font-weight: 400;

color:rgb(82, 82, 82);
}

.flexline3 .text22{
   font-size: 13px;
font-weight: 400;

color:rgb(82, 82, 82);
}

.Main3UserBoxesdata2{
   display: flex;
    /* flex-direction: column; */
    align-items: center;
    /* margin-bottom: 20px; */
        margin-top: -10px;

    gap: 10px;
}

.Main3UserBoxesdata2 .line1{
    display: flex;
    gap: 5px;
}

.Main3UserBoxesdata2 .line1 .o{
font-size: 14px;
font-weight: 700;
}
.Main3UserBoxesdata2 .line .t{
font-size: 14px;
font-weight: 400;
}

.Main3UserBoxeslogobox{
   display: flex;
    /* flex-direction: column; */
    align-items: center;
    /* margin-bottom: 20px; */
    gap: 20px;
    margin-top: -10px;

}

.Main3UserBox1icon1,.Main3UserBox1icon2,.Main3UserBox1icon3{
    background-color: #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}


.Main4{
    width: 100%;
    height: auto;
    /* background-color: red; */
    display: flex;
    /* background-color: red; */
    /* overflow: hidden; */
    margin-top: 50vh;
    align-items: center;
    margin-bottom: 50vh;
}

.Main4Left{
    width: 50%;
    height: auto;
    /* background-color: red; */
}

.toptext{
    color: rgb(9, 200, 44);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
}

.firstlinetext1{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 1rem;
    /* margin-top: 16px; */
}

.firstlinetext1 .spanblack{
    font-size: 31px;
    font-weight: 700;
    display: flex;
    color: rgb(23, 23, 23);
}

.firstlinetext1 span{
    font-size: 31px;
    font-weight: 700;
    color: rgb(9, 200, 44);
}

/* .firstlinetext2{
    font-size: 31px;
    font-weight: 700;
    color: rgb(9, 200, 44);
} */

.secondline{
    font-weight: 400;
    font-size: 16px;
    color: rgb(82, 82, 82);
    margin-top: 25px;
}

.center{
       display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 60px;
    
}

.box1{
      display: flex;
    gap: 22px;
    /* border: 1px solid black; */
    height: 100px;
    width: 224px;
    justify-content: space-between;
    
}


.box1image1{
    padding: 10px;
  border: 1px soild black;
    color: rgb(9, 200, 44);
    background-color: #09c82c33;
 
    height: 40px;
    border-radius: 50%;
  
}

.box1header{
    font-weight: 500;
    font-size: 16px;
    margin-bottom: 10px;
}

.box1paragraph{
      font-weight: 400;
    font-size: 14px;
    
color:rgb(82, 82, 82)
}

.bottom{
    background-color: rgb(9, 200, 44);
    display: inline;
    padding: 12px 24px;
  
    color: white;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
}



.Main4Right{
        width:50%;
        height:100%;
        /* background-color: #A2DFA2; */
        
        
         display: flex;
    align-items: center;
    justify-content: center;
    }

.BigImageBlock{
width: 40vw;
    height: 40vw;
    border: 1px solid hsl(0, 19%, 87%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    border-radius: 40px;
    background-color: white;
    /* box-shadow: 10px 10px 10px 10px #A2DFA2; */
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.315);
    position: relative;
}

.image1{
    height:13vw;
    width:13vw;
    border: 1px solid skyblue;
    background: url("./Images/Avatars/avatar-1.jpg");
    border-radius: 50%;
    background-size: 100% 100%;

}

.image2{
    height: 13vw;
    width: 13vw;
border: 1px solid skyblue;
    background: url("./Images/Avatars/avatar-2.jpg");
        border-radius: 50%;
    background-size: 100% 100%;
}

.image3{
    height: 13vw;
    width: 13vw;
border: 1px solid skyblue;    background: url("./Images/Avatars/avatar-3.jpg");
        border-radius: 50%;
    background-size: 100% 100%;
}

.image4{
    height: 13vw;
    width: 13vw;
border: 1px solid skyblue;
    background: url("./Images/Avatars/avatar-4.jpg");
        border-radius: 50%;
    background-size: 100% 100%;
}

.image5{
    height: 13vw;
    width: 13vw;
    border: 1px solid orange;
    background: url("./Images/Avatars/avatar-5.jpg");
        border-radius: 50%;
    background-size: 100% 100%;
}

.image6{
    height: 13vw;
    width: 13vw;
    border: 1px solid black;
    background: url("./Images/Avatars/avatar-6.jpg");
        border-radius: 50%;
    background-size: 100% 100%;
}

.rightbox{
   width: 151px;
        height: 48px;
    border-radius: 50px;
    border: 1px solid hsl(0, 19%, 87%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    background-color: white;
    top: -2vw;
    right: -6vw;
    
}

.innerimgmsg{
     padding: 10px;
    border: 1px soild black;
    color: rgb(9, 200, 44);
    background-color: #09c82c33;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lineone{
font-weight: 700;
font-size: 10px;
display: flex;
}
.linetwo{
font-weight: 400;
font-size: 3vh;
font-size: 10px;
}

.leftbox{
  width: 151px;
        height: 48px;
    border-radius: 50px;
    border: 1px solid hsl(0, 19%, 87%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    background-color: white;
    bottom:-24px ;
    left: -60px;
    
}

.Main5{
    height: auto;
    width: 100%;
    /* background-color: red; */
}

.Main5Box1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: blue; */
    align-items: center;
    /* width: 100%; */
}

.Main5Box1text1{
font-size: 14px;
font-weight: 600;
color: rgb(9, 200, 44);
letter-spacing: 2px;
}

.Main5Box1text2{
font-size: 31px;
font-weight: 700;
color: rgb(23, 23, 23);
margin-top: 20px;
display: flex;
align-items: center;
/* justify-content: space-around; */
flex-wrap: wrap;
/* background-color: red; */
gap: 10px;
text-align: center;
}

.Main5Box1text3{
font-size: 16px;
font-weight: 400;
color: rgb(82, 82, 82);
margin-top: 20px;
}

.commentBoxesMain5{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
   row-gap: 30px;
   margin-top: 70px;
 
}

.CommentBox1{
    width: 322px;
    /* width: 100%; */
    height: 299px;
    background-color: white;
    border-radius: 30px;
    padding: 10px;
    border: 1px solid hsl(0, 19%, 87%);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: space-evenly;
}

.UserProfileInformation{
    display: flex;
    gap: 10px;
}

.Manystart{
    color: #F0B100;
}

.weiricon{
    color: #0bc22d;
}

.commentdata{
    font-weight: 500;
    font-size: 17px;
    color: rgb(82, 82, 82);
    /* font-family: ; */
}

.CommentprofileImage{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    background: url("./Images/Avatars/avatar-1.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.CommentprofileImage2{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    background: url("./Images/Avatars/avatar-2.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.CommentprofileImage3{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    background: url("./Images/Avatars/avatar-3.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.CommentprofileImage4{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    background: url("./Images/Avatars/avatar-4.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.CommentprofileImage5{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    background: url("./Images/Avatars/avatar-5.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.CommentprofileImage6{
    width: 40px;
    height: 40px;
    /* background-color: black; */
    background: url("./Images/Avatars/avatar-6.jpg");
background-size: 100% 100%;
border-radius: 50%;
}

.commenthorizontalline{
      border: none;
  height: 1px;
  background-color: hsl(0, 19%, 87%);
  margin: 20px 0;
}



.ProfileCommentHeader{
    font-weight: 600;
    font-size: 16px;
}

.ProfileCommentSmallText{
font-weight: 400;
font-size: 14px;
color: 
rgb(82, 82, 82);
}

.Main6{
    width: 100%;
    height: auto;
    /* background-color: gray; */
    margin-top: 30vh;
    margin-bottom: 30vh;
}

.Main6Box1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: blue; */
    align-items: center;
}

.Main6Box1text1{
font-size: 11px;
font-weight: clamp(400, 600, 600);
color: rgb(9, 200, 44);
letter-spacing: 2px;
}

.Main6Box1text2{
   /* background-color: red; */
   display: flex-start;
   flex-wrap: wrap;
   text-align: center;
font-size: clamp(15px, 6vw, 31px);
font-weight: 700;
color: rgb(23, 23, 23);
margin-top: 20px;
}

.Main6Box1text2 span{
font-size: clamp(15px, 6vw, 31px);
font-weight: 700;
color: rgb(9, 200, 44);
margin-top: 20px;
}

.Main6Box1text3{
font-size: 16px;
font-weight: 400;
color: rgb(82, 82, 82);
margin-top: 20px;
}

.Main6SubscriptionPart{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 70px;
    
    flex-wrap: wrap;
}

.Main6SubBox1{
    width: 344px;
    height: 500px;
    border: 1px solid hsl(0, 19%, 87%);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-evenly; */
    padding-top: 3%; 
}

.Main6SubBox2{
    width:344px;
    height: 500px;
    border: 1px solid #11cc34;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: space-evenly; */
    padding-top: 3%; 
    position: relative;
}

.onelinetext{
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 10%;
}

.starterline{
font-size:20px ;
font-weight:700 ;
}

.middleline{
font-size:16px ;
font-weight:400 ;
margin-top: 8px;
}

.endingline{
font-size:31px ;
font-weight:700 ;
margin-top: 14px;
display: flex;
/* justify-content: end; */
align-items:flex-end;

}
.endingline span{
font-size:16px ;
font-weight:400 ;
/* margin-top: 14px;
display: flex; */
/* justify-content: end; */
align-items:flex-end;
color: rgb(82, 82, 82);
}

.listMain6div{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 10px;
    /* background-color: blue; */
    width: 90%;
}

.linelistMain6{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 10px;
}

.logoslisttickmark{
color:rgb(9, 200, 44) ;
background-color: #CEF4D5;;
/* border: 1px solid black; */
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.listtextmainlower{
font-size:14px ;
font-weight:400 ;
color: rgb(82, 82, 82) ;
}

.LastBTN{
    width: 100%;
    height: 42px;
    background-color: #F5F5F5;
    /* border: 1px solid black; */
    border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 15px;
color: rgba(38, 38, 38, 0.767);
margin-top: 10px;
}

.LastBTN2{
    width: 100%;
    height: 42px;
    background-color: #11cc34;
    /* border: 1px solid black; */
    border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 15px;
color: rgba(38, 38, 38, 0.767);
margin-top: 10px;
color: white;
}

.MostPopularBTN{
    /* display: flex; */
    position:absolute;
    /* display: block; */
    top: -10px;
/* right: 50%; */
left: 35%;
    /* border: 1px solid green; */
    background-color: #11cc34;
    /* top: ; */
    padding: 2px 10px;
    border-radius: 50px;
    color: white;

}

.smallMain6lastText{
    text-align: center;
    margin-top: 30px;
}

/* .Footer{
   height: auto;
    width: 100vw;
    background-color: red;
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 0;
    left: 0;
} */



.FooterMainBox{
    width: 100%;
    height: auto;
    background-color: #F5F5F5;
    position: relative;
    /* z-index: 100; */
    /* align-content: center; */
    display: flex;
    align-items: center;

    flex-direction: column;
    justify-content: center;
    margin-top: -120px;
    /* padding-top: 100px; */
    
}

.logoStartFooter{
      width: auto;
    height: auto;   
    display: flex;
    flex-direction: column;
    background-color: #F5F5F5;
    justify-content: flex-start;
    width: auto;
}

.Content1Start1{
    display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
 margin-bottom: 5px;
 /* background-color: blue; */
}

.LogoText{
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.767);
}

.Content2Start1{
    clear: flex;
    flex-wrap: wrap;
    margin-bottom: 25px;
    color: #525252;
}

.FooterStartContent{
    display: flex;
    width: 100%;
    display: flex;
    padding-bottom: 30px;
    gap: 30px;
    /* flex-wrap: wrap; */
}

.WithLogo{
    color: #11cc34;
}

.logoMainHai{
    /* font-size: 30px; */
    color: #11cc34;
    padding-top: 7px;
}

.WithLogoContent1{
    display: flex;
    margin-bottom: 4px;
    gap: 15px;
}

.WithLogoContent{
    color:#525252 ;
}






.Footerbox1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;

}

.FooterHeaderbox1{
    display: flex;
    justify-content: space-between;
     flex-direction: column;
     gap: 10px;

}

.header1{
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    font-size: 20px;
    color: rgb(23, 23, 23);
    

}

.content{
    font-weight: 400;
    font-size: 14px;
    color: #525252;
}

ul .headfoot{
    /* display: flex; */
    font-weight: 600;
    font-size: 20px;
}

ul li{
    list-style: none;
}



.FooterEndContent{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-wrap: wrap;
}

.EndLeft{
    display: flex;
color: rgb(82, 82, 82);
font-weight: 400;
font-size: 14px;
margin-bottom: 10px;
}

.EndLeft span{
    font-size: 14px;
    font-weight: 400;
    color: rgb(7, 160, 35);
}

.EndRight{
    display: flex;
    gap: 10px;
    
color: rgb(82, 82, 82);

}


.MainContentBox{
    margin-top: 71px;
    width: 80%;
    /* background-color: blue; */
}



.NologoHeader{
    
    /* background-color: red; */
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: space-between;
   
 
}

.NologoHeader2{
    width: 100%;
    display: flex;
    align-items: center;
    /* background-color: blue; */
    justify-content: space-between;
    flex-wrap: wrap;
   
}



.ffg{

display: flex;
flex-direction: column;
gap: 30px;
}



.playBTNBORDER{
    /* background-color: red; */
    border: 5px solid white;
    height: 80px;
    width: 80px;
    position: absolute;
    border-radius: 50%;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: BecomeBig 1s infinite ;

}

@keyframes BecomeBig {
   0%{width: 80px;
    height: 80px;
    border-color: white;
} 

    100%{
 width: 90px;
    height: 90px;
    border-color: rgba(255, 255, 255, 0.205);     
}

}

/* .playBTNBORDER:{
  border-color: red;

    transform: scale(2);
    transition:1s;

} */