@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');
@import url('https://fonts.cdnfonts.com/css/gotham-6');
@font-face {
  font-family: 'Helvetica Neue Arabic';
  src: url(../fonts/helvetica.ttf);
}
*{
    margin: 0;
    border: none;
    padding: 0px;
    box-sizing: border-box;
}
*,
*:before,
*:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  position: relative;
  overflow-x: hidden;
}

main{background: #F5F5F5 ;}
@media screen and (min-width: 1920px) and (max-width: 2100px) {html, body {width: 100%;}}
a{text-decoration: none;}p{margin-bottom: 0px;}ul{padding-left: 0px;}
button{transition: 0.4s;}button:hover{transform: scale(0.9);}
.section1{
  margin: auto;
  padding-top: 38px;
  padding-left: 142px;
}

.section1 .content-section1{  font-family: 'DM Sans';margin-top: 3rem;}
.span-public{
  font-size: 30px;
  font-weight: 700;
  font-family: 'DM Sans';
  color: #898989;
}
.h1-public{
  color: #000;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  font-family: 'Gotham';
}
.content-section1 .h1-public{margin-bottom: 12px;font-size: 50px;}
.section1 .content-section1 p{
  color: var(--Gray-50, #898989);
  font-family: 'Gotham';
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  margin-bottom: 32px;
}
.section1 .content-section1 .btns-section1{gap: 14px;margin-bottom: 18px;}
.section1 .content-section1 .btns-section1 button{
  display: inline-flex;
  padding: 14px 14px 14px 27px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  width: 235px;
  background: var(--White, #FFF);
}
    .section1 .content-section1 .btns-section1 a {
        display: inline-flex;
        padding: 14px 14px 14px 27px;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border-radius: 10px;
        width: 235px;
        background: var(--White, #FFF);
        text-decoration: none;
    }
.section1 .content-section1 .btns-section1 button span{
  color: var(--Blach, #000);
  font-family: 'Gotham';
  font-size: 18px;
  font-weight: 400;
}
    .section1 .content-section1 .btns-section1 a span {
        color: var(--Blach, #000);
        font-family: 'Gotham';
        font-size: 18px;
        font-weight: 400;
    }
.section1 .content-section1 .back-green {
    display: flex;
    width: 484px;
    padding: 14px 14px 14px 27px;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    text-decoration: none;
}
.section1 .content-section1 .back-green span{
  color: var(--White, var(--counselor-gray-500, #FFF));
  font-family: 'Gotham';
  font-size: 18px;
  font-weight: 400;
}
.back-green{background: #27ADA0;}
.back-orange{background: #EF7D00;}
.color-green{color: var(--counselor-primary, #27ADA0);}
.color-orange{color: var(--counselor-primary, #FF9A51);}
.color-blue{color: var(--counselor-primary, #167FFC);}
.section1 .section1-img img{
  display: block;
  margin-left: auto;
  width: 100%;
}

.section2{
  padding-top: 156px;
  width: 1248px;
  margin: auto;
  font-family:'DM Sans';
}
.section2 img{width: 446px;}
.section2 .flex-sec1 .text-sec{width: 60%;}
.section2 .flex-sec3 .text-sec{width: 60%;}
.section2 .flex-sec1{
  gap: 133px;
  margin-top: 121px;
}
.section2 .image-sec1 {
  position: relative;
    width: 40%;
}
.section2 .flex-sec2{
  gap: 133px;
  margin-top: 60px;
}
.section2 .flex-sec2 .text-sec{width: 60%;}
.section2 .flex-sec2 .image-sec2{position: relative;}
.section2 .flex-sec2 .image-sec2 .img2-sec1{
  position: absolute;
  left: 15rem;
  top: 100px;
  width: 177.425px;
  height: 288.016px;
}
.section2 .flex-sec3{margin-top: 30px;gap: 133px;}
.section2 .flex-sec3 .text-sec{padding-top: 5rem;}
.section2 .flex-sec3 .text-sec a{
  padding-top: 63px;
  display: block;
  text-decoration: none;
}
.section2 .flex-sec3 .text-sec img{
  margin-top: 30px;
  display: block;
  margin-left: 13rem;
  cursor: pointer;
  transition: 0.4s;
}
.section2 .flex-sec3 .text-sec img:hover{transform: scale(1.1);}
.section2 .flex-sec3 .image-sec3{position: relative;}
.section2 .flex-sec3 .image-sec3 .img2-sec1{
  position: absolute;
  right: -94px;
  top: 100px;
  width: 153.711px;
  height: 229.515px;
}
/* Section 3 */
.section3{
  margin-top: 119px;
  height: 562.63px;
  width: 100%;
  background: #FF9A51;
    position: relative;
}
.section3 .container-padding{
  width: 1248px;
  margin: auto;
  text-align: center;
}
.section3 .container-padding .section3-content{
  padding-top: 113px;
}
.section3 h1{
  color:#FFF;
  font-family: 'DM Sans';
  font-size: 50px;
  font-weight: 700;
  text-align: center;
}
.section3 button{
  margin-top: 44px;
  border-radius: 80px;
  background: #076076;
  display: inline-flex;
  padding: 14px 14px 14px 27px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.section3 button span{
  font-family: 'Gotham';
  font-size: 16px;
  font-weight: 700;
  color: #FFF;
}
.section3 button img{width: 34px;height: 34px;}
.section3 .row-section3{margin-top: 58px;}
.section3 .box-section3{
  border-radius: 20px;
  background: #FFF;
  box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.05);
  width: 100%;
  height: 210px;
  padding: 34px 8px;
  gap: 14px;
  justify-content:center;
}
.section3 .box-section3 h1{
  color: #EF7D00;
  font-family: 'Gotham';
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 0px;
}
.section3 .box-section3 p{
  color: #EF7D00;
  font-family: 'Gotham';
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0px;
}

.section3 .box-section3 .sec-desc{
    color: var(--Blach, #000);
    text-align: center;
    font-family: Gotham;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    margin-top: 10px;
    min-height: 42px
}

.section4{
  margin-top: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.section4 h1{
  color: #000;
  text-align: center;
  font-family: 'DM Sans';
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 46px;
  margin-top: 28px;
}
.section4-fx{gap: 43px;}
.section4 .section4-fx-first{
  display: flex;
  gap: 21px;
  flex-direction: column;
}
.section4 .section4-fx-first video{
  width: 100%;
  height: 301.835px;
  border-radius: 17px;
  object-fit: cover;
}
.section4 .section4-fx-first iframe {
    border: 0;
    width: 100% !important;
    border-radius: 17px;
    object-fit: cover;
    margin-top: -60px;
}
.section4 .section4-fx-first button{
  display: flex;
  width: 484px;
  height: 100px;
  padding: 14px 40px;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background: var(--Green, #27ADA0);
  color: var(--White, var(--counselor-gray-500, #FFF));
  font-family: 'Gotham';
  font-size: 20px;
  font-weight: 700;
}
.section4 .box-section4 {
  width: 474px;
  border-radius: 10px;
  background: #FFF;
  padding: 24px 28px 30px 28px;
}
.section4 .progress {
  width:100%;
  height: 9.271px;
  overflow:hidden;
  background:#e5e5e5;
  border-radius:6px;
}
.section4 .bar {
	position:relative;
  min-width:1%;
  height:100%;
}
.section4 .data-sec{
  width: 100%;
  flex-direction: column;
  gap: 27px;
  padding-top: 47px;
  display: flex;
}
.section4 .data-sec .user-skill{
  display: flex;
  gap: 19px;
  width: 100%;
}
.box-section4 .skill-name{
 cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.box-section4 .skill-name .skill-name-fx{
  display: flex;
  align-items: center;
  gap: 13px;
}
.box-section4 .skill-name span{
  color: #076076;
  font-family: 'Gotham';
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}
.section4 .data-sec .user-skill .user-data{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: column;
}
.section4 .data-sec .user-skill .user-data span{
  color: #000;
  text-align: center;
  font-family: 'DM Sans';
  font-size: 20px;
  font-weight: 700;
}
.section4 .data-sec .user-skill .user-text{
  width: 100%;
}
.section4 .data-sec .user-skill .user-text p{
  margin-bottom: 7px;
  color: #000;
  font-family: 'DM Sans';
  font-size: 15px;
  font-weight: 700;
}
.section4-fx-second{
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.section4-fx-second .section4-card{
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  background: var(--counselor-gray-500, #FFF);
  width: 474px;
  min-height: 408.398px;
  justify-content: center;
}
.section4-fx-second .section4-card .section4-icon{margin-bottom: 19px;}
.section4-fx-second .section4-card h6{
  color: var(--Dark-Green, #076076);
  font-family: 'Gotham';
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 44px;
}
.section4-fx-second .section4-card h4{
  color: #000;
  text-align: center;
  font-family: 'Gotham';
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.section4-fx-second .section4-card p{
  color: var(--Gray-50, #898989);
  text-align: center;
  font-family: 'Gotham';
  font-size: 16px;
  font-weight: 400;
  line-height: 30px; /* 187.5% */
  margin-bottom: 44px;
}
.section4-fx-second .section4-card span{
  color: var(--Blach, #000);
  text-align: center;
  font-family: 'Gotham';
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 5px;
}
.section5{
  position: relative;
  margin-top: 239px;
  padding-bottom: 7rem;
}
.section5 .lines{
  position: absolute;
  bottom: -13rem;
  left: 5rem;
  z-index: 1;
}
.section5 h1{
  text-align: center;
  color: #000;
  font-family: 'DM Sans';
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 69px;
}
.section5 .fx-section5{
  justify-content: center;
  gap: 92px;
  align-items: end;
}
.section5 .fx-section5 .section5-card{
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 25px;
  z-index: 2;
}
.section5 .fx-section5 .section5-card img{width: 100%;}
.section5 .fx-section5 .section5-card .fx-card-section5{
  display: flex;
  align-items: center;
  gap: 20px;
}
.section5 .fx-section5 .section5-card .fx-card-section5 span{
  color: #000;
  text-align: center;
  font-family: 'DM Sans';
  font-size: 30px;
  font-weight: 700;
  padding: 0 20px;
}
.section5 .fx-section5 .section5-card .fx-card-section5 .border-line{
  width: 72px;
  height: 2px;
  background: #000;
}
.section6{
 background-color:#FF9A51 ;
 height: 255px;
  position: relative;
  z-index: 3;
}
.section6 .container-section6{
  width: 1245px;
  margin: auto;
  padding-top: 36px;
}
.section6 h1{
  color: #FFF;
  font-family: 'Gotham';
  font-size: 24px;
  font-weight:400;
  margin-bottom: 24px;
}

.section-6 h1 {
  color: #FFF;
  font-family: 'Gotham';
  font-size: 24px;
  font-weight:400;
  margin-bottom: 24px;
}

.section6 .fx-section6{gap: 24px;}

.section6 button {
  display: flex;
  width: 235px;
  padding: 14px 14px 14px 27px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--White, #FFF);
}

.section-6 button {
    display: flex;
    width: 235px;
    padding: 14px 14px 14px 27px;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: var(--White, #FFF);
}

.section6 button span{
  color: var(--Blach, #000);
  font-family: 'Gotham';
  font-size: 16px;
  font-weight: 700;
}

.section-6 button span {
    color: var(--Blach, #000);
    font-family: 'Gotham';
    font-size: 16px;
    font-weight: 700;
}

.section6 button img{width: 24px;height: 24px;}
.section-6 button img {
    width: 24px;
    height: 24px;
}

.section6 input{
  border-radius: 10px;
  border: 2px solid var(--White, #FFF);
  background: transparent;
  width: 454.241px;
  color: var(--White, var(--counselor-gray-500, #FFF));
  font-family: 'Gotham';
  font-size: 18px;
  font-weight: 400;
  line-height: 34px; /* 188.889% */
}

.section-6 input {
    border-radius: 10px;
    border: 2px solid var(--White, #FFF);
    background: transparent;
    width: 454.241px;
    color: var(--White, var(--counselor-gray-500, #FFF));
    font-size: 18px;
    font-weight: 400;
    line-height: 34px; /* 188.889% */
}

.section-6 input::placeholder {
    color: #FFF;
    opacity: 0.6;
}
.section6 input::placeholder{  color: var(--White, var(--counselor-gray-500, #FFF));opacity: 0.6;}
main{position: relative;}
.main-page2{padding-top: 145px;}
.section7{
  width: 1245px;
  margin: auto;
  padding-bottom: 180px;
}
.section7 img{
  display: block;
}
.section7 .contant-section7{
  margin-left: 1rem;
}
.section7 .btn-section7{
  display: block;
   margin-top: -4rem;
}
.section7 button{
  display: inline-flex;
  padding: 14px 14px 14px 27px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 80px;
  background: #EF7D00;
 
  margin-bottom: 19px;
  margin-left: 1rem;
}
.section7 button span{
  color: #FFF;
  font-family: 'Gotham';
  font-size: 16px;
  font-weight: 700;
}
.section7 h1{
  color: #FF9A51;
  font-family: 'Gotham';
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 28px;
  padding-left: 1.4rem;
}
.section7 li{
  color: #000;
  font-family: 'DM Sans';
  font-size: 20px;
  font-weight: 400;
  line-height: 43px;
}
.section-last{padding-bottom: 15rem !important;}
.section8{padding-bottom: 80px;}
.section8 img{width: 100%;}
.section8 .content-section8{
  width: 70%;
  margin: auto;
  padding-top: 132px;
}
.section8 .content2-section8{padding-top: 50px;}
.section8 .content-section8 h1{
  color: #FF9A51;
  font-family: 'Gotham';
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 43px;
}
.section8 .content-section8 p{
  color: #000;
  font-family: 'DM Sans';
  font-size: 30px;
  font-weight: 400;
  line-height: 53px;
  padding-left: 4rem;
}
.sideSection{
  position: fixed;
  height: 100vh;
  background: #Fff;
  right: 0px;
  top: 0px;
  z-index: 999;
  width: 573px;
  padding: 16px;
  display: none;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 8rem;
}
.sideSection::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}
.sideSection::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}
.sideSection::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #EF7D00;
}
.sideSection img{cursor: pointer;transition: 0.4s;}
.sideSection img:hover{transform: scale(0.9);}

.cover {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 998;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  display: none;
}
.sideSection .first-section .first-section-text{
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align-last: center;
  margin-top: 40px;
}
.sideSection .first-section .first-section-text h3{
  color: var(--Orange, #EF7D00);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
  margin-bottom: 23px;
  direction: ltr;
  max-width: 350px;
}
.sideSection .first-section .first-section-box{
  width: 344px;
  height: 247px;
  border-radius: 14px;
  border: 1px solid #EF7D00;
  padding: 11px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 34px;
}
.sideSection .first-section .first-section-box .o-video{
  width: 322px;
  height: 197px;
  min-height: 197px;
}
.sideSection .first-section .first-section-box .o-video iframe{border-radius: 17px;}
.sideSection .first-section .first-section-box .o-video video{
 width: 100%;
 height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.sideSection .first-section .first-section-box .o-video div{
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.sideSection .first-section .first-box-p{padding: 10px;background-color: #fff;}
.sideSection .first-section .first-section-text p{
  color: var(--Orange, #EF7D00);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  margin-top:6px;
}
 .sideSection .button-next{
  display: flex;
  width: 290px;
  height: 50px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: var(--Orange, #EF7D00);
  color: var(--counselor-gray-500, #FFF);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 16px;
  font-weight: 400;
}

.monthSideSection .button-next {
    background: #91CCE6;
}

 .sideSection .steps-container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: none;
}
.sideSection .steps {
    display: flex;
    justify-content: flex-start;
    height: 100%;
    flex-direction: column;
}
.sideSection .step {
  flex: 0 0 100%;
}
.sideSection .step .prevBtnStyle{
  margin-right: auto;
  display: block;
  background: #fff;
}


.monthSideSection .step .prevBtnStyle {
    background: #91CCE6;
}

.sideSection .step h6{
  margin-top: 13px;
  color: var(--Orange, #EF7D00);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.monthSideSection .step h6, .month-assess-div {
    color: #FFFFFF;
    background-color: #91CCE6;
}

.monthSideSection .step h6 {
    padding-bottom: 15px;
}
.monthSideSection {
    padding: 0px !important;
}

.sideSection .steps .box-qa{
  width: 305px; 
  margin: auto;
  margin-top: 6rem;
}
.sideSection .steps .box-qa textarea{
  height: 140px !important;
  border: 1px solid #EF7D00;
    font-family: 'Helvetica Neue Arabic';
    padding: 10px;
    font-size: 14px;
}
.sideSection .steps .box-qa textarea:focus{box-shadow: none !important;}
.sideSection .steps .box-qa p{
  color: var(--text-1, #1F1F39);
  text-align: start;
  font-family: 'Helvetica Neue Arabic';
  font-size: 16px;
  font-weight: 700;
  line-height: 31px;
}
.sideSection .container-qa{
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  margin-top: 25px;
}
.sideSection .checkbox-custom,.sideSection  .radio-custom {
    opacity: 0;
    position: absolute;  
}
.sideSection .checkbox-custom,.sideSection .checkbox-custom-label,.sideSection .radio-custom,.sideSection .radio-custom-label {
   width: 100%;
  display: flex;
  padding: 16px 15px;
  align-items: flex-start;
  gap: 13px;
  border-radius: 12px;
  border: 1px solid var(--Green-BG, #E1F4F2);
  background: var(--white, #FFF);
  cursor: pointer;

}
.checkbox-custom-label,.radio-custom-label {
    position: relative;
}
.checkbox-custom +.checkbox-custom-label:before,.radio-custom +.radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "\f00c";
    font-family: 'FontAwesome';
    background: rebeccapurple;
    color: #fff;
}
.radio-custom +.radio-custom-label:before {
    border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
  content: "\f00c";
    font-family: 'FontAwesome';
    color: #fff;
    background-color: #EF7D00;
    font-size: 14px;
}

.monthSideSection .radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #fff;
    background-color: #91CCE6;
    font-size: 14px;
}

.radio-custom:checked ~ .radio-custom-label {
  border-radius: 12px;
  border: 1px solid var(--Orange, #EF7D00);
  background: var(--white, #FFF);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}


.monthSideSection .radio-custom:checked ~ .radio-custom-label {
    border-radius: 12px;
    border: 1px solid var(--Orange, #91CCE6);
    background: var(--white, #FFF);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}

.sideSection .radio-custom-label span{
    width: 82%;
    text-align: start;
}
.sideSection .dots {
  position:absolute;
  left: 50%;
  top:130px;
  transform: translate(-50%,-50%);
  text-align: center;
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.section-contact{
  padding: 129px 0px 157px 0px;
}
.section-contact .fx-contact-page{
  justify-content: center;
  gap: 194px;
}
.section-contact .fx-contact-page input,
.section-contact .fx-contact-page textarea{
  height: 70px;
  border: 1px solid var(--Gray-50, #898989);
  padding: 22px 30px;
  background: #F5F5F5;
}
.section-contact .fx-contact-page textarea{
  resize: none;
  height: 185.981px;
}
.section-contact h1{
  color: var(--Dgital-Orange, var(--parent-orange, #FF9A51));
  /*font-family: 'Gotham';*/
  font-size: 32px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 34px;
}
.section-contact .form-contact form{width: 529.064px;gap: 16px;}
.section-contact .form-contact form .fx-inputs{gap: 11px;width: 100%;}
.section-contact .form-contact form button{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  background: var(--Orange, #EF7D00);
  height: 62px;
  width: 180px;
}
.section-contact .form-contact form button span{
  color: var(--White, var(--counselor-gray-500, #FFF));
  /*font-family: 'Gotham';*/
  font-size: 16px;
  font-weight: 700;
}
.section-contact .form-contact form button img{
  width: 34px;
  height: 34px;
}

.section-contact .fx-contact-detail{gap: 24px;}
.section-contact .fx-contact-detail .text-contact-detail p{
  color: var(--Gray-20, #C2C2C2);
  /*font-family: 'DM Sans';*/
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0px;
}
.section-contact .fx-contact-detail .text-contact-detail h4{
  color: var(--Blach, #000);
  font-family: 'Gotham';
  font-size: 20px;
  font-weight: 700;
  line-height: 44px;
  margin-bottom: 0px;
}
.section-contact .fx-contact-detail .text-contact-detail .contact-links{
  margin-top: 20px;gap: 20px;
}
.section-contact .fx-contact-detail .text-contact-detail .contact-links img{ 
   transition: 0.4s;
   width: 30px;
    height: 30px;
}


.last-step {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 17px;
    background: #fff;
    z-index: 1;
    position: relative;
}

.last-step-div {
    margin-top: 10px;
    text-align: start;
}

.last-step-div-title {
    margin-top: 13px;
    color: #000;
    font-family: 'Helvetica Neue Arabic';
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
}

.square-list {
    list-style-type: square;
}

    .square-list li::marker {
        color: var(--Orange, #EF7D00);
    }

.last-step-div-desc {
    color: #000;
    font-family: 'Helvetica Neue Arabic';
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
    margin-top: 7px;
}


.section-contact .fx-contact-detail .text-contact-detail .contact-links img:hover{transform: scale(1.2);}


.sideSection .dot {
    display: block;
    width: 9px;
    height: 5px;
    border-radius: 5px;
    background: var(--Gray-10, #E9E9E9);
    cursor: pointer;
}
.sideSection .dot.active {
  width: 28px;
  height: 5px;
  border-radius: 5px;
  border: 1px solid var(--Orange, #EF7D00);
  background-color: #fff;
}
.sideSection .dot.filled {background: var(--Orange, #EF7D00);}
/* Adjust styles for English language */
.steps-container {text-align: center;}
.dots { margin-top: 10px;}

/* Button styles */
.sideSection .button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sideSection .button-container button{
  width: 160px;
  margin-top: 50px;
}
.sideSection .fx-step{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.sideSection .radio-custom-label{
  color: var(--text-1, #1F1F39);
  font-family: 'Helvetica Neue Arabic';
  font-size: 16px;
  font-weight: 400;
}
.sideSection .step .controls .fx-controls{
  display: flex;
  align-items: center;
  gap: 15px;
  flex-direction:column;
}
.sideSection .step .controls button {
    padding: 0 10px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
}
.sideSection .step .controls button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.sideSection .step .controls #startRecord{background-color: #fff;margin-bottom: 10px;}
.sideSection .step .controls p{text-align: center;}
.sideSection .step .controls .fx-recording{
  flex-direction: column;
  gap: 10px;
}
.sideSection .button-top .button-next{margin-top: 3rem;}
.sideSection .step .show-progress{
  border-radius: 12px;
  border: 0.5px solid var(--Orange, #EF7D00);
  background: var(--white, #FFF);
  display: flex;
  width: 335px;
  height: 50px;
  justify-content: center;
  align-items: center;
  color: var(--Orange, #EF7D00);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 16px;
  font-weight: 500;
}


.month-progress .show-progress {
    border: 0.5px solid #91CCE6 !important;
    color: #91CCE6 !important;
}

.month-progress .home-link span {
    color: #91CCE6 !important;
}

.month-progress .back-div {
    padding: 20px 0px;
    background: #91CCE6 !important;
    margin-bottom: 20px;
}

.month-progress .prevBtnStyle {
    background: #91CCE6 !important;
    display: inline !important;
}

.sideSection .progress-step {
    height: 60vh;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 17px;
    background: #fff;
    z-index: 1;
    position: relative;
}
.sideSection .progress-step p{
  color: var(--text-1, #1F1F39);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 22px;
  font-weight: 700;
  line-height: 32px; /* 145.455% */
}
.sideSection .progress-step span{
  color: var(--text-2, #858597);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.sideSection .step .button-progress{
  margin-top:5rem;
display: flex;
align-items: center;justify-content: center;
flex-direction: column;
gap: 29px;
}
.sideSection .step .button-progress .home-link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none !important;
}
.sideSection .step .button-progress .home-link span{
  color: var(--Darker-than-light, #E1B99C);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 12px;
  font-weight: 500;
}
.sideSection .last-progress{
  direction: ltr;
   width: 327px;
   margin: auto;
   position: relative;
   background-color: #fff;
}
.sideSection .last-progress-fx{
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  flex-direction: column;
}
.sideSection .p-orange{
  color: var(--Orange, #EF7D00);
  font-family: 'Helvetica Neue Arabic';
  font-size: 18px;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 30px;
}
.sideSection .last-progress .last-progress-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  background: var(--counselor-gray-500, #FFF);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
  width: 100%;
  padding: 10px;
  z-index: 10;
}
.sideSection .last-progress .last-progress-text{
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  width: 100px;
}
.sideSection .last-progress .last-progress-text p{
  color: var(--Dark-Green, #076076);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  margin-bottom: 0px;
}
.sideSection .last-progress .fx-color-progress{
  margin-top: 17px;
  gap: 22px;
  align-items: start;
  justify-content: end;
}
.sideSection .last-progress .fx-color-style {
  display: flex;
  align-items: end;
  gap: 4px;
}
.sideSection .last-progress .fx-color-style div{
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.sideSection .last-progress .fx-color-style span{
  color: var(--Blach, #000);
  font-family: 'Helvetica Neue Arabic';
  font-size: 12px;
  font-weight: 400;
  line-height: 120%;
}
.sideSection .last-progress a{
  border-radius: 12px;
  background: var(--Orange, #EF7D00);
  display: flex;
  width: 335px;
  height: 50px;
  justify-content: center;
  align-items: center;
  color: var(--counselor-gray-500, #FFF);
  text-align: center;
  font-family: 'Helvetica Neue Arabic';
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  margin-top: 29px;
}

.btn-fx-section6 {
    margin-inline-start: 20px;
}

footer {
    margin-bottom: 21px;
}
footer .container-footer{
  width: 1245px;
  margin: auto;
  padding: 85px 0px 85px 0px;
}
footer .fx-footer{
  gap: 244px;
  align-items: start;
}
footer .fx-one{gap: 31px;align-items: start;margin-bottom: 60px;}
footer .fx-one .fx-text-footer{
  display: flex;
  flex-direction: column;
  gap: 30px;
}
footer .fx-one .fx-text-footer p{ 
  color: #000;
  font-family: 'DM Sans';
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0px;
}
footer .fx-a a{
  color: #000;
  font-family: 'DM Sans';
  font-size: 12px;
  width: max-content;
  text-decoration: none;
  font-weight: 400;
}
footer .fx-a{gap:26px ;align-items: center;}
footer .footer-links{
  display: flex;
  gap: 20px;
  align-items: center;
}
footer .fx-footer-two{
    gap: 65px;
    display: flex;
    flex-direction: column;
}

footer .fx-footer-two img {
    width: 204px;
    height: 64px;
    margin-inline-start: auto;
    display: block;
}

.s-p-animation svg {
    height: 441px !important;
}

#AboutDicModal .modal-dialog 
{
    min-width: 800px;
}

.last-progress-text img {
    width: 50px;
    height: 50px;
}

.section-6 {
    z-index: 3;
    background-color: #FF9A51;
    min-height: 250px;
    position: sticky;
    padding: 40px 130px;
    overflow: hidden;
}


.ai-activate-div .switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 27px;
}

.ai-activate-div .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ai-activate-div .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    border: 1px solid #EF7D00;
    -webkit-transition: .4s;
    transition: .4s;
}
.ai-parent-activate-div .slider {
    border: 1px solid #167FFC;
}

.ai-activate-div .slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 23px;
    left: 29px;
    bottom: 1px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.ai-activate-div input:checked + .slider {
    background-color: #fff;
    border: 1px solid #EF7D00;
}

.ai-parent-activate-div input:checked + .slider {
    border: 1px solid #167FFC;
}

.ai-activate-div input:focus + .slider {
    box-shadow: 0 0 1px #EF7D00;
}

.ai-activate-div input:checked + .slider:before {
    -webkit-transform: translateX(-27px);
    -ms-transform: translateX(-27px);
    transform: translateX(-27px);
    background-color: #EF7D00;
}

.ai-parent-activate-div input:checked + .slider:before {
    background-color: #167FFC;
}

/* Rounded sliders */
.ai-activate-div .slider.round {
    border-radius: 34px;
}

.ai-activate-div .slider.round:before {
        border-radius: 50%;
        background-color: #ccc;
    }

.ai-details-text {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 10px !important;
    text-align: right !important;
    color: #737373 !important;
}

.ai-title-text {
    color: #000 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: normal !important ;
}

.ai-activate-div {
    text-align: start;
    width: 334px;
    margin-top: 15px;
    border: 1px solid #F8D3AC;
    background: #FFF9F3;
    padding: 6px 16px;
    border-radius: 10px;
}

.ai-parent-activate-div {
    border: 1px solid #C0D4ED !important;
    background: #F4F9FF !important;
}

@media (min-width:2100px) {
body{width: 1448px;margin: auto !important;}
header{position: relative !important;
}}
@media (min-width:2000px) {
  .section1{padding-left: 0px;  width: 1248px;}
.section6{width: 100% !important;margin: auto;padding-left: 0px;}
  .section8{width: 1248px;margin: auto;}
  .sideSection .steps .box-qa{margin-top: 9rem;}


}
@media (max-width:1500px){
    .section1{padding: 60px;}
    .section6{padding: 0 40px;}
    .section3 .container-padding {
        width: 1111px;
    }
    footer .container-footer {
        padding: 85px 40px 85px 40px;
    }

    .section2 {
        padding-right: 3rem;
        padding-left: 72px;
    }
}

@media (max-width:1200px){
  footer .fx-footer-two img {
        margin-inline-start: 0px !important;
        margin-inline-end: auto !important;
    }
  .section1-img{width: 71%;display: block;margin: auto;}
    .section1 {
        padding:24px !important;
        padding-top: 85px !important;
    }
  .h1-public{font-size: 35px;}
  .span-public{font-size: 24px;}
  .section1 .content-section1{margin-top: 1rem;}
  .section1 .content-section1 h1{font-size: 32px;margin-bottom: 0px;}
  .section1 .content-section1 p{font-size: 16px;line-height: 28px;line-height: 23.949px;margin-top: 6px;}
  .section1 .content-section1 p br,
  .section1 .content-section1 h1 br{display: none;}
  .section1 .content-section1 .back-green{width: 100%;}
  .section1 .content-section1 .btns-section1 a {
        width: 50%;
    }
  .section1 .content-section1 .btns-section1 button{width: 100%;padding: 16px;}
  .section1 .content-section1 .btns-section1 button span{font-size: 14px;}
  .section1 .content-section1 button{padding: 8px 10px;}
  .section1 .content-section1 button span{font-size: 14px;}
  .section1 .content-section1 button img{width: 22px;}
  .section1 .section1-img img{margin-top: 2rem; margin-left: 0px;}
  .section1 .row .col-md-6{padding-left: 0px;padding-right: 0px;}
  .section2{width: 100%;padding:45px 24px 5rem 23px;}
  .section2 br{display: none;}
  .section2 img{width: 100%;}
  .section2 .flex-sec1{flex-direction: column;gap: 21px;margin-top: 69px;}
  .section2 .flex-sec1 .text-sec,
  .section2 .image-sec1{width: 100%;}
  .section2 .flex-sec1 .image-sec1 .img2-sec1{left: 10%;width: 300.512px;}
  .section2 .flex-sec2{flex-direction: column;}
  .section2 .flex-sec2 .text-sec{width: 100%;order: 2;}
  .section2 .flex-sec2 .image-sec2 .img2-sec1{left: 40%;}
  .section2 .flex-sec2{flex-direction: column;gap: 1rem;}
  .section2 .flex-sec3{flex-direction: column;gap: 1rem;}
  .section2 .flex-sec3 .text-sec{width: 100%;}
  .section2 .flex-sec3 .image-sec3 .img2-sec1{top: 40%;left: 50%;}
  .section3 {height:100%;}
  .section3 .container-padding{width: 100%;padding: 24px;}
  .section3 .box-section3{margin-bottom: 16px;}
  .section3 h1{font-size: 30px;}
  .section3 .container-padding .section3-content{padding-top: 3rem;}
  .section3 .row-section3,.section3 button{margin-top: 2rem;}
  .section4{margin-top: 66px;padding: 24px;}
  .section4 h1{font-size:20px;margin-bottom: 28px;}
  .section4-fx{flex-direction: column;gap: 28px;width:100%;}
  .section4-fx-second .section4-card {
        width: 100%;
        margin: auto;
    }
  .section4 .section4-fx-first{width: 100%;gap: 7px;}
  .section4 .section4-fx-first video{width: 100%;height: 215.28px;}
  .section4 .section4-fx-first button {
        width: 100%;
        height: 60px;
        margin: auto;
        margin-top: 100px;
    }

   .section4 .box-section4{width: 100%;padding: 24px 20px 30px 20px;}
   .section4 .arrow{margin-left: 20px;}
   .section4-fx-second{width: 100%;}
   .box-section4 .skill-name span{font-size: 18px;}
   .section5{margin-top: 95px;padding: 24px;}
   .section5 h1{margin-bottom: 2rem;}
   .section5 .fx-section5{flex-direction: column;align-items: center;}
   .section6{height: 100%;}
   .section6 input{width: 100%;}
   .section6 .container-section6{width: 100%;padding:62px 24px 65px 24px;}
   .section6 h1{font-size: 22px;}
   .section6 br{display: none;}
   .section5 .lines{left: 0px;}
   .main-page2{padding-top: 20px;}
   .section7{width: 100%;padding: 24px;}
   .section7 .image-section7{width: 100%;}
   .section7 .btn-section7{margin-top: 1rem;}
   .section7 .contant-section7{margin-left: 0px;}
   .section7 li {font-size: 16px;line-height: 176%;}
   .section8 .content-section8{width: 100%;padding: 24px;}
   .section8 .content-section8 h1{font-size: 30px;margin-bottom: 1rem;}
   .section8 .content-section8 p{padding-left: 0px;font-size: 20px;line-height: 36px;}
   footer .container-footer{width: 100%;padding: 24px;}
   footer .fx-one,footer .fx-footer{flex-direction: column;}
   footer .fx-footer{gap: 2rem;}
   footer .fx-a{align-items: start;gap: 19px;flex-direction: column;}
   footer .fx-a a{width: 100%;display: block;}
   footer .fx-a .last-text{width: 100%;}
   .sideSection{width: 45%;}
   .sideSection .first-section .first-section-box{width: 100%; height:fit-content;}
    .sideSection .first-section .first-section-box .o-video,
    .sideSection .button-next {
        width: 100%;
        height: fit-content;
        padding: 15px;
    }
   .sideSection .button-container button{margin-top: 50px;}
   .sideSection .step .show-progress{width: 90%;padding: 5px 20px;}
   .sideSection .last-progress{width: 100%;}
   .sideSection .last-progress a{width: 100%;margin-top: 40px;height: 40px;font-size: 14px;}
   .sideSection .steps .box-qa{width: 100%;}
   .sideSection .container-qa{gap: 15px;}
   .sideSection .steps .box-qa textarea{height: 100px !important;}
   .sideSection .button-top .button-next{margin-top: 0rem;}
   .sideSection .step .controls .fx-controls{gap: 14px;margin-bottom: 2rem;}
   .section1 .col-md-12:first-child{order:2;}
   .section1 .col-md-12:last-child{order:1;}
 .section6 button{width: 100%;}
   .section-contact .fx-contact-page{gap: 50px;}

    #AboutDicModal .modal-dialog {
        min-width: 350px !important;
    }

}
@media (max-width:1150px){
  .sideSection{width: 400px;}
}
@media (max-width:1000px) {

    .sideSection .first-section .first-section-text, .output-text-student {
        text-align-last: start;
    }

    footer .fx-footer-two img {
        margin-inline-start: 0px !important;
        margin-inline-end: auto !important;
    }
   .sideSection{width: 85%;}
  .section1-img{width: 100%;margin-bottom: 66px;}
  .section1 .section1-img img{margin-top: 0px;}
  .section1 .content-section1 p{margin-bottom: 22px;}
  .h1-public{font-size: 30px;}
  .span-public{font-size: 20px;}
  .section2 .flex-sec3 .text-sec{padding-top: 0px;}
  .section2 .flex-sec2 .text-sec{padding-bottom: 70px;}
  .section3 h1{margin-bottom: 60px;}
  .section3{height: 950px;}
  .section4-fx-second .section4-card h4{font-size: 16.022px;}
  .section4-fx-second .section4-card p{color: var(--Gray-50, #898989);font-size: 11.653px;line-height: 21.849px;margin-bottom: 32px;}
  .section4 .section4-fx-first button{font-size: 14.265px;padding: 14px 28px;}
  .section5 h1{font-size: 20px;margin-bottom: 45px;line-height: 30px;}.section5{margin-top: 65px;}
  .section5 .fx-section5{gap: 86px;}
  .section6 .fx-section6{flex-direction: column;gap: 19px;}
  .section-6 {
          padding: 40px 50px;
  }

  .section-6-div {
      flex-direction:column;
  }
  .section-6 input,.section-6 button {
    width: 100%;
  }

  .new-fx-section6{flex-direction: column;}
  .btn-fx-section6{margin-top:20px; margin-inline-start: 0px;}
  .section4 .section4-fx-first button img{width: 24px;height: 24px;}
    .section1 .content-section1 .back-green span,
    .section1 .content-section1 .btns-section1 button span {
        font-size: 18px;
        font-weight: 400;
    }
  .section-contact{padding: 50px 24px;}
  .section-contact .fx-contact-page{flex-direction: column;}
  .section-contact .form-contact form{width: 100%;}
  .section-contact .form-contact form input{height: 40px;padding: 22px 20px;}
  .section-contact .form-contact form textarea{height: 100px;}
    .section-contact h1 {
        font-size: 30px;
        margin-bottom: 24px;
        margin-top: 32px;
    }
  .section-contact .form-contact form button{height: 50px;}
  .section-contact .form-contact form button img{width: 24px;height: 24px;}
  .section-contact .fx-contact-detail{gap: 16px;}
    .section1 .content-section1 .btns-section1 a {
        width: 50%;
    }
    .month-assess-div{padding:8px}
    .steplast{padding:16px;}
}

@media (max-width:670px) {
    
}
@media (max-width:300px) {
    .section5 .lines {
        display: none;
    }
    .section1 .content-section1 .btns-section1 a {
        width: 100%;
    }

    .section1 .content-section1 .btns-section1 {
        flex-direction:column;
    }
}

.parent-login-btn {
    background: #27ada0 !important;
}

.std-login-btn {
    background: #ef7d00 !important;
}
.progress-img {
    width: 70%
}

.home-animation {
    width: 460px !important;
}
@media (max-width:400px) {
    .sideSection .last-progress .fx-color-progress{justify-content:center;}
    .sideSection .first-section .first-section-text .ai-title-text {
        margin-bottom: 0px;
    }
} 
@media (max-width:400px) {
    .home-animation {
        width: 350px !important;
    }
}
@media (max-width:350px) {
    .home-animation {
        width: 300px !important;
    }
}

@media (max-width:280px) {
    .home-animation {
        width: 250px !important;
    }
}