.spheron{
color: #fc9928;
}
.ml-11 {
margin-left: 11px;
}

.pl-10 {
padding-left: 10px;
}

.spheron1{
color: #d27301;    
}
.flextextmain{
color: #000000;
font-family: Lato, sans-serif !important;
font-weight: 800;
font-size: 35px;
margin-bottom: 5px;
margin-top: 0px;
} 
.flextextmain>img{
width: 35px; 
margin-top: -17px;  
} 
.darkred{
color: #d90000;
}  
.get-mentorship-btn{
background: #ffffff;
color: #d60000;
border: 2px solid #d60000;
padding: 8px 15px;
}
.get-mentorship-btn:hover, .get-mentorship-btn:focus{
color: #d60000;
}
@keyframes shimmer_mentor{
100%{
-webkit-mask-position: left;
}}

/* mentor form */
.mentor-close-btn{
background: red !important;
z-index: 9999;
position: absolute;
right: -10px;
top: -10px;
opacity: 1;
color: #fff;
border-radius: 100%;
font-size: 25px;
padding: 2px 8px !important;
font-weight: 400;
line-height: 1;
}
.mentor-bg{
background-color: #EEF1F8;
padding: 0px 15px;
}
.mentor-form{
width: 100%;
height: 100%;
background-color: #FFFFFF;
padding: 30px 20px;
box-shadow: 2px 2px 30px rgba(66, 57, 238, .2);
position: relative;
z-index: 999;
}
.mentor-form::before{
display: table;
content: " ";
border-top: 4px solid #ff8800;
border-left: 4px solid #ff8800;
width: 100px;
height: 100px;
background: transparent;
position: absolute;
z-index: -1;
left: 0;
top: 0;
}
.mentor-form::after {
    display: table;
    content: " ";
    border-bottom: 4px solid #ff8800;
    border-right: 4px solid #ff8800;
    width: 100px;
    height: 100px;
    background: transparent;
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
}
.mentor-input {
    height: 35px;
    outline: none;
    border: 1px solid #ededed;
    font-size: 14px;
    margin: 0px 5px;
    box-shadow: 2px 6px 18px rgb(243 243 243);
    border-radius: 10px;
}
.mobile-number-flex {
    position: relative;
}
.send-otp-btn {
    position: absolute;
    top: 0;
    right: -5px;
    border-radius: 0px 10px 10px 0px;
    height: 35px;
}
.mentor-submit-btn {
    -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 40%) right / 350% 100%;
    background-repeat: no-repeat;
    animation: shimmer_mentor 2s infinite;
    margin-top: 0px;
    color: white;
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background: #d60000;
    text-align: center;
    font-weight: 400;
}
.mentor-submit-btn:hover {
    color: white;
    background: #000000;
}
.benifits-section {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        margin-right: 0px;
    margin-left: 0px;
}
.benifits-boxes {
    text-align: center;
    margin-bottom: 20px;
}
.benifits-boxes>div>span {
    width: 80px;
    background: #f3f3f3;
    border-radius: 100%;
    padding: 15px;
}
.benifits-boxes>h5 {
    font-weight: 600;
    line-height: 1.42857143;
    color: #333333;
    font-size: 15px;
}
/* pricing */
.pricing-box {
    background-color: #fff;
    padding: 14px;
    box-sizing: border-box;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 16px;
    margin-bottom: 20px;
    position: relative;
    /* min-height: 486px; */
    transition: all 1s;
}
.pricing-box:hover{
    transition: all .5s;
    transform : translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    border: 1px solid #fc9928;
}
.package-name {
    font-size: 24px;
    color: #d60000;
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 3px;
}
.feature-section{
position: relative; 
margin-bottom: 55px;   
}
.feature-section>ul {
    padding-left: 0px;
    margin-bottom: 2px;
    height: 205px;
}
.package-content-list {
  max-height: 205px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.package-content-list.scrollable {
  overflow-y: auto;
  scrollbar-width: thin;
  overflow-x: hidden;
}
.package-content-list.check-height {
  max-height: none !important;
  overflow: visible !important;
}
.toggle-scroll-btn{
    border-radius: 100%;
    padding: 3px 3px;
    width: 30px;
    height: 30px;
    line-height: 25px;
    font-size: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    animation: up-down linear 2s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    background: #fff;
    color: #000;
    border: 1px solid #dbdbdb;
}

@keyframes up-down{
0% {
    transform: translate(1px, 6px);
}
24% {
    transform: translate(1px, 6px);
}
50% {
    transform: translate(1px, 4px);
}
74% {
    transform: translate(1px, 6px);
}
100% {
    transform: translate(1px, 6px);
}
}
.more-button-container {
display: none;
position: absolute;
bottom: -1px;
z-index: 9;
background: #ffffffe6;
width: 100%;
padding: 2px 10px 10px 10px;
}
.feature-section>ul>li {
    margin-bottom: 0px;
    display: flex;
}
.feature-section>ul>li>span:nth-child(1) {
    width: 7%;
    color: #0b9651;
    line-height: 2.2;
}
.feature-section>ul>li>span:nth-child(1) svg{
      width: 16px;
}
.feature-section>ul>li>span:nth-child(2) {
    width: 93%;
}
.chat-now{
    place-items: center;
    border: 1px solid #d60000;
    width: fit-content;
    gap: 10px;
    color: #d60000;
    border-radius: 5px 7px 7px 5px;
    position: absolute;
    bottom: 20px;
}
.chat-now>span{
    padding: 0px 5px;
    font-weight: 500;
}
.start-mentorship-btn{
    color: #d60000 !important;
    border: 1px solid #d60000 !important;
    background-color: #ffffff !important;
    margin-right: 10px;
    border-radius: 5px;
    padding: 3px 10px;
    -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 40%) right / 350% 100%;
    background-repeat: no-repeat;
    animation: shimmer_mentor 2s infinite;
    position: absolute;
    bottom: 20px;
    /* width: 20%; */
}
.underline{
width: 150px;
height: 2px;
background: #d60000;  
}
.start-mentorship-btn-chat{
    position: relative;
    bottom: 0px;
    margin-right: 0px;
    color: #ffffff !important;
    border: 2px solid #d60000 !important;
    background-color: #d60000 !important;
    width: auto;
}
.who-join-section {
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
}
.col {
    flex: 1 0 3%;
    margin: 10px 10px 5px 0px;
}
.who-join-box>div {
    display: flex;
    gap: 10px;
    place-items: center;
    box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.15);
    padding: 10px;
    border-radius: 5px;
}
.join-images {
    width: 60px;
    background: #fd7e141a;
    border-radius: 100%;
    padding: 11px;
    display: inline-block;
}
.who-join-box>div>span {
    font-weight: 600;
    line-height: 1.42857143;
    color: #333333;
    font-size: 15px;
}

/* second design start */
.second-design-btn{
color: #24292d;
border-radius: 30px;
background: #ffffff;
padding: 5px 10px;
border: none;
font-weight: 700;
min-width: 120px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.second-design-btn.active{
 border: 1px solid #d60000;   
 color: #d60000;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.second-design-btn1{
padding: 5px 10px;
}
.second-design-btn>img{
  width: 30px;
  height: 30px;
}
.mobile-second-design-btn{
display: none;    
}
/* second design end */

.mentor-subject-filter{
    position: absolute;
    right: 28px;
    top: 35px; 
}
.live-mentors-flex {
    display: flex;
    justify-content: flex-start;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: thin;
}
.live-mentor-box {
    min-width: 215px;
}
.mentors-box-width {
    max-width: 236px;
}
.teacherBox {
    padding: 5px 10px 5px;
    margin: 5px 0 0 5px;
    transition: all 0.3s ease 0s;
    background: #f7c32e26;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    display: flex;
    gap: 5px;
}
.teacherBox .teacher-icon>span>img {
    min-width: 50px;
    max-width: 50px;
    border-radius: 100%;
    min-height: 50px;
    max-height: 50px;
}
.teacherBox .title {
    color: #000000;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin: 0;
    transition: all 0.3s ease 0s;
}
.teacherBox .live-title {
    display: block;
}
.teacher-rating {
    margin-top: 0px;
    font-size: 12px;
    color: #ff9800;
    line-height: 1.3;
}
.rating-number, .review-count>a {
    color: #000;
}
.mentor-line-height{
  line-height: 1.3;
}

/* filter */
.hidden {
  display: none;
}
#filterToggle{
    text-align: right;
    width: fit-content;
}
.filter-panel{
 position: relative;   
}
.filter-panel>ul{
position: absolute;
right: 0;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background: #ffffff;
list-style-type: none;
z-index: 9;
min-width: 165px;
padding: 10px;
}
.filter-btn {
font-size: 15px;
color: #000;
display: block;
border-bottom: 1px solid #dcdcdc;
padding: 5px 0px;
}

.filter-btn.active {
  background-color: #fc9928;
  color: white;
}

.content-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.content-card {
  padding: 12px 16px;
  background: #e8f5e9;
  border-radius: 6px;
  border: 1px solid #ccc;
  min-width: 150px;
}
.mobile-tabs-section{
 display: none;   
}
.live-circle{
display: none;
}
.desktop-justify-text{
text-align: justify;    
}
 /* responsive start */
 @media only screen and (max-width:991px){
.who-join-section{
    width: 100%;
    flex-wrap: wrap;
    padding-left: 0px;
}    
.who-join-box.col{
    flex: 50%;
    padding-right: 5px;
    padding-left: 5px; 
    margin: 0px 0px 15px 0px;
}    
.mentor-subject-filter{
top: 0px;
}}
@media only screen and (max-width:767px) {
  .flextextmain{
    font-size: 28px;
  }
  .flextextmain>img {
    width: 25px;
    margin-top: -10px;
}
  .mobile-font-12, .benifits-boxes>h5, .who-join-box>div>span, 
  .teacherBox .title, .feature-section>ul>li, .free-mock-test-flex>a>span,
  .popular-course-box>p, .mobile-tabs-section>.nav-tabs>li.active>a, .start-mentorship-btn{
    font-size: 12px !important;
  }
  .feature-section>ul>li>span:nth-child(1) svg{
        width: 14px;
  }
  .second-design{
   display: flex;
   place-items: center;
   gap: 10px;
  }
  .second-design>.col-md-6{
    padding-left: 0px;
    padding-right: 0px;
  }
  .second-design>.col-md-6>.mobile-text-center{
    display: flex;
    justify-content: space-around;
    gap: 5px;
  }
  .second-design>.col-md-6>.mobile-mentor-btns{
    display: flex;
    justify-content: start;
    display: none;
  }
 .mobile-mentor-btns{
    text-align: left;
 } 
 .second-design-btn{
    min-width: 152px;
    font-size: 12px;
 }
 .second-design-btn1 {
    padding: 5px 2px;
}
  .pricing-box{
  min-height: auto;
  padding-top: 15px;
 } 
 .start-mentorship-btn, .chat-now{
      bottom: 10px;
      font-size: 12px;
 }
 .start-mentorship-btn-chat{
    bottom: 0px;
 }
 .benifits-boxes>div>span, .join-images{
      width: 60px;
      padding: 10px;
 }
 .benifits-section{
    display: flex;
    flex-wrap: wrap;
 }
  .benifits-section>.col-md-12{
    width:100%
  }
    .benifits-section>.col-xs-6{
    width:50%
  }
  .who-join-section{
  white-space: normal;
  }
  .mobile-second-design-btn{
        display: block;
        position: absolute;
        right: 20px;
        top: -38px;  
}
.mobile-second-design-btn>button{
    border-radius: 100%;
    border: 1px solid #fc9928;
    padding: 0px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
.mobile-second-design-btn>button>img{
    width: 35px;
    height: 35px;
}
.mobile-second-design-btn>button>i{
    position: absolute;
    z-index: 9;
    right: -5px;
    background: #fff;
    border-radius: 100%;
}
.mobile-second-design-btn>button>p{
    position: absolute;
    font-size: 8px;
    line-height: 1;
    width: 55px;
    right: -8px;
}
.mobile-tabs-section{
 display: block;   
}
.mobile-tabs-section>.tab-content{
    padding-left: 0px;
    padding-right: 0px;
}
#source, #source1, #source2, .mobile-package-none{
    display: none;
}
.mobile-tabs-section>.nav-tabs{
gap: 5px;    
}
.mobile-tabs-section>.nav-tabs>li.active>a{
    border: 1px solid #d60000;
    border-radius: 5px;
    color: #d60000;
    padding: 5px 10px;
    font-weight: normal;
}
.mobile-tabs-section>.nav-tabs>li>a{
    border: 1px solid #24292d;
    border-radius: 5px;
    color: #24292d;
    padding: 5px 10px;
    font-weight: normal;
    margin-right: 5px;
}
.more-button-container{
display: block;    
}
}
@media only screen and (max-width:570px){
.justify-text{
    text-align: justify;
}    
.mobile-text-center, .mobile-mentor-btns{
  text-align: center;
}
.live-mentor-box{
min-width: auto;
}
.mentors-box-width.col{
    margin: 10px 4px 5px 0px;
}
.teacherBox{
    display: block;
    text-align: center;
    background: none;
    box-shadow: none;
    padding: 5px 2px 5px;
}
.teacherBox .title {
   font-weight: normal;
}
.teacher-rating>.stars, .teacher-rating>.rating-number, .teacher-rating>
.review-count,.teacherBox>div>.mentor-line-height{
    display: none;
}
.review-count,.teacherBox>div>.mentor-line-height.subject{
    display: block;
}
.start-mentorship-btn{
   width: auto; 
}
.mobile-font-18,.package-name{
font-size: 18px;
}
.benifits-boxes>div>span, .join-images{
    width: 45px;
}
.teacherBox .teacher-icon>span>img{
    min-width: 45px;
    max-width: 45px;
    min-height: 45px;
    max-height: 45px;
    border: 2px solid green;
}
.live-mentors-flex{
    scrollbar-width: none;
}
.live-circle{
    display: block;
    position: absolute;
    top: 20px;
    right: 6px;
    z-index: 1;
    color: green;  
}}
@media only screen and (max-width:373px){
.flextextmain{
  font-size: 21px;
}
.second-design-btn {
    min-width: 100px;
    padding: 5px 2px;
    margin-right: 5px;
}
.second-design>.col-sm-6{
  padding-left: 0px;
  padding-right: 0px;
}
}