body{

    font-family: poppins !important;

    position: relative;

    background-color: #fff;

}

@font-face {

    font-family: poppins;

    src: url(../css/Poppins-Regular.ttf);

}

@font-face {

    font-family: EuropeNormal;

    src: url(../css/Europe-Normal.ttf);

}

body::-webkit-scrollbar {

  width: 16px; 

}



body::-webkit-scrollbar-track {

  background: #eeeeeeba; 

}



body::-webkit-scrollbar-thumb {

  background-color: #ddd;  

  border-radius: 20px;  

  border: 1px solid #ddd; 

} 

/*custom*/

input:focus , button:focus {outline: none !important;box-shadow: none !important;}

.title {

    position: relative;

    color: #777;

    font-weight: bold;

    margin-bottom: 70px;

    margin-top: 30px;

    display: block;

    text-align: center;

}

.title img {width: 30px;}

:root {

    /* --mainColor :#cd3333; */

    --mainColor :#e01370;

    --mainColor2 :#53b6d4;

    --subColor :#e6a029;

    --subColor3 :#0d176f;

}

.w-20{

    width: 20px;

}

.titles{display:none!important}

.IB{

    display: inline-block;

}

.btn-none{

    border: none;

    background: transparent;

}

.loader {

    margin: auto;

    display: none;

    border: 5px solid #ddd;

    border-top: 5px solid var(--mainColor);

    border-radius: 50%;

    width: 35px;

    height: 35px;

    

    animation: spin 2s linear infinite;

  }

  .load1 {

    position: absolute;

    right: -17px;

    top: 52%;

}

.load2 {margin: 10px auto;}

  @keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

  }

  .success {

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0px 5px 8px 0px #ddd;

    background-color: #fff;

    border: 1px solid #ddd;

    width: 400px;

    margin: 100px auto;

    position: relative;

  }

.success img {

    width: 65px;

    position: absolute;

    top: -34px;

    left: calc(50% - 30px);

}

.success h4 {

    color: var(--mainColor);

    font-size: 20px;

    margin-top: 20px;

}

.verify {

    padding: 20px;

    border-radius: 15px;

    box-shadow: 0px 20px 20px -12px #ccc;

    border: 1px solid #eee;

    background-color: #fff;

    margin: 10px 0px;

}

.verify input {

    border-radius: 10px;

    border: 1px solid #555;

    margin-bottom: 10px;

    display: inline-block;

    width: 70px;

    padding: 7px;

    text-align: center;

}

.verify input:focus {outline: none;box-shadow: none;}

.verify input[type="submit"] {

    border: 1px solid var(--mainColor);

    background-color: var(--mainColor);

    color: #fff;

    font-size: 14px;

    cursor: pointer;

    border-radius: 30px;

    transition: all .3s ease-in-out;

    width: 115px;

    padding: 18px 22px;

    margin: 20px auto 10px auto;

    line-height: 0;

}

.verify input[type="submit"]:hover , .verify input[type="submit"]:focus {background-color: var(--mainColor) !important;box-shadow: none;}

/*custom*/



.caret{

  display: inline-block;

  width: 0;

  height: 0;

  margin-left: 2px;

  vertical-align: middle;

  border-top: 4px solid;

  border-right: 4px solid transparent;

  border-left: 4px solid transparent;

}

.navbar {

  background-color: #fff;

  transition: all .3s ease-in-out;

  border: 1px solid #ddd;

  padding: 0px;

}

@media (min-width: 992px){

.navbar-expand-lg .navbar-nav a {

  padding: 7px 9px;

  font-size: 15px;

  color: var(--mainColor);

  transition: all .3s ease-in-out;

  cursor: pointer;

}

}

.navbar-expand-lg .navbar-nav .dropdown-menu {

  position: absolute;

  top: 32px;

  left: 3px;

  min-width: 254px;

  border-radius: 0!important;

  background: #fff!important;

  border: 0!important;

  padding-bottom: 0;

  padding: 4px;

  box-shadow: 0px 0px 4px 0px #ccc;

}

.navbar-expand-lg .navbar-nav .dropdown-menu li{

  font-size: 16px;

  margin-left: 5px;

  margin-bottom: 5px;

}

.navbar-expand-lg .navbar-nav a:hover {

  color: var(--mainColor) !important;

  background-color: #cd333329;

}

.navbar img {

  width: 130px;

  border-radius: 5px;

}

.navbar #sign {

  background: none;

  border: none;

}

.navbar #sign a{

  color: var(--mainColor);

  text-decoration: none;

}

.sign-options {

  position: absolute;

  top: 70px;

  width: 450px;

  background-color: #fff;

  z-index: 8888;

  right: 0;

  border: 1px solid #eee;

  padding: 20px 20px 10px 20px;

  display: none;

}

.sign-options::before {

  position: absolute;

  content: '';

  top: 22px;

  height: 79%;

  width: 1px;

  background-color: var(--mainColor2);

}

#signSpan {

  display: inline-block;

    color: var(--mainColor);

    margin-left: 37px;

    margin-top: 4px;

    cursor: pointer;

}

.sign-options p {

  font-size: 14px;

  margin: 23px 0px;

  line-height: 1.5em;

  color: gray;

}

.sign-options h5 {color: #777;}

.sign-options a {

  background-color: var(--mainColor2);

  color: #fff !important;

  font-size: 14px;

  padding: 9px 18px;

  border-radius: 25px;

  margin: 5px 0px;

  width: 170px;

  display: inline-block;

}

.log-option{

  position: absolute;

  background-color: #fff;

  padding: 20px;

  width: 150px;

  box-shadow: 0px 0px 4px 0px #ddd;

  top: 70px;

  right: 108px;

  border-radius: 5px;

  text-align: justify;

  display: none;

}

.log-option::before{content: unset;}

.log-option a{

    color: var(--mainColor2) !important;

    font-size: 14px;

    transition: all .4s ease-in-out;

    background-color: unset;

    padding: 0;

    display: block;

    border-radius: unset;

}

.log-option a:hover{color: var(--mainColor) !important;}

.log-option a i{width: 18px;}



/* Start Top Header */

.head {margin: 30px 0;}

.head a{

  float: right;

    font-size: 16px;

    color: #ffff;

    background-color: var(--mainColor);

    box-shadow: 0px 20px 10px -15px var(--mainColor);

    margin-top: 14px;

    width: 105px;

    height: 42px;

    padding-top: 10px;

    text-align: center;

    text-decoration: none;

    border-radius: 6px;

}

.head .logo img{

  width: 200px;

}

/* End Top Header */

/* signup */

.holderSing{

    margin: 30px auto;

    box-shadow: 0px 20px 20px -12px #ccc;

}

.holderSing .col-md-6{

    padding: 0;

}

.holderSing .imgSign {

  height: 100%;

}

.holderSing .imgSign img{

    width: 100%;

    border-radius: 15px 0px 0px 15px;

    height: 100%;

}

.holderSing .g-up{

    background-color: #fff;

    padding: 20px;

    border-radius: 0px 15px 15px 0px;

    overflow: hidden;

}

.holderSing .g-up h3{

    color: #777;

    font-weight: bold;

    margin-top: 22px;

    margin-bottom: 30px;

    display: inline-block;

    text-align: left;

}

/* .holderSing .g-up h3 img{

    width: 20px;

} */

/* form starting stylings ------------------------------- */

.holderSing .g-up .group 			  { 

    position:relative; 

    margin-bottom: 23px;

  }

  .holderSing .g-up .group i{

    position: absolute;

    top: 0px;

    z-index: 1;

    right: 2px;

    color: var(--mainColor)91;

    width: 50px;

    height: 46px;

    border-radius: 25px;

    text-align: center;

    padding-top: 14px;

    font-size: 17px;

  }

  .holderSing .g-up input 				{

    font-size: 15px;

    padding: 10px 11px 10px 10px;

    display: block;

    width: 100%;

    border: 1px solid #ddd;

    height: 48px;

    border-radius: 25px;

  }

  .holderSing .g-up input:focus{ outline:none; }

  

  /* LABEL ======================================= */

  .holderSing .g-up label 				 {

    color:#999; 

    font-size:14px;

    font-weight:normal;

    position:absolute;

    pointer-events:none;

    left:20px;

    top:14px;

    transition:0.2s ease all; 

    -moz-transition:0.2s ease all; 

    -webkit-transition:0.2s ease all;

  }

  

  /* active state */

  .holderSing .g-up input:focus ~ label, input:valid ~ label 		{

    top:-10px;

    background-color:#fff;

    margin: 0px 10px;

    padding: 0px 10px;

    font-size:14px;

    color:var(--mainColor2);

  }

  

  /* BOTTOM BARS ================================= */

  .holderSing .g-up .bar 	{ position:relative; display:block; width:300px; }

  .holderSing .g-up .bar:before, .bar:after 	{

    content: '';

    height: 100%;

    width: 100%;

    left: 18px;

    bottom: 1px;

    position: absolute;

    background: var(--mainColor2);

    transition:0.2s ease all; 

    -moz-transition:0.2s ease all; 

    -webkit-transition:0.2s ease all;

  }

  .holderSing .g-up .bar:before {

    left:50%;

  }

  .holderSing .g-up .bar:after {

    right:50%; 

  }

  /* active state */

  .holderSing .g-up input:focus ~ .bar:before, input:focus ~ .bar:after {

    width:100%;

  }

  

  /* HIGHLIGHTER ================================== */

  .holderSing .g-up .highlight {

    position:absolute;

    height:60%; 

    width:100px; 

    top:25%; 

    left:0;

    pointer-events:none;

    opacity:0.5;

  }

  

  /* active state */

  .holderSing .g-up input:focus ~ .highlight {

    -webkit-animation:inputHighlighter 0.3s ease;

    -moz-animation:inputHighlighter 0.3s ease;

    animation:inputHighlighter 0.3s ease;

  }

  

  /* ANIMATIONS ================ */

  @-webkit-keyframes inputHighlighter {

      from { background:var(--mainColor2); }

    to 	{ width:0; background:transparent; }

  }

  @-moz-keyframes inputHighlighter {

      from { background:var(--mainColor2); }

    to 	{ width:0; background:transparent; }

  }

  @keyframes inputHighlighter {

      from { background:var(--mainColor2); }

    to 	{ width:0; background:transparent; }

  }

.holderSing .g-up .check{

    margin: 30px 0;

    text-align: center;

}

.holderSing .g-up .check input{

    width: 20px;

    height: 20px;

    display: inline-block !important;

}

.holderSing .g-up .check p{

    display: inline-block;

}

.holderSing .g-up .check a{

    color: #13bcb7;

}

.holderSing .g-up .submit {

    text-align: center;

    margin: 20px 0;

}

.holderSing .g-up .submit button{

    color: var(--mainColor);

    width: 80%;

    height: 40px;

    border-radius: 7px;

    border: 1px solid #ccc;

    background: 0;

    box-shadow: 0px 18px 4px -13px #dedede;

    transition: all .3s ease-in-out;

}

.holderSing .g-up .submit button:hover{

    background-color: var(--mainColor);

    color: #ffff;

    box-shadow: none;

    border:0;

}



/* header */

.logo img {width: 200px;margin: 40px 0px 20px 0px;}

.home a {

    display: inline-block;

    background-color: var(--mainColor);

    color: #fff !important;

    padding: 11px 20px;

    border-radius: 6px;

    box-shadow: 0px 20px 10px -15px var(--mainColor);

    margin-top: 55px;

    cursor: pointer;

}

/* End header */



/* signup */

.wrapper {

    background-color: #fff;

    margin: 20px auto;

    border: 1px solid #eee;

    box-shadow: 0px 20px 20px -12px #ccc;

    border-radius: 12px;

}

.bg {overflow: hidden;}

.bg img {width: 100%;border-bottom-left-radius: 12px;border-top-left-radius: 12px;}

#signIn {

    padding: 70px 20px 50px 20px;

    position: relative;

}

#signIn label ,#signIn input {display: block;}

#signIn label {color:#777;font-weight: bold;margin: 5px 0px;}

#signIn input {

    border: 1px solid #ddd;

    border-radius: 25px;

    width: 80%;

    height: 48px;

    margin: 15px 0px;

    padding: 10px 12px;

}

#signIn .absolute {

    background-color: var(--mainColor);

    color: #fff;

    border-radius: 50%;

    box-shadow: 0px 0px 15px 0px var(--mainColor);

    height: 60px;

    width: 60px;

    text-align: center;

    border: none;

    position: absolute;

    display: block;

    right: -30px;

    top: 47%;

    transition: all .4s ease-in-out;

}

#signIn .absolute img {width: 30px;}

#signIn span {

    display: block;

    margin-top: 30px;

}

#signIn span a {color: #007BE9;cursor: pointer;}

/* End signup */



/* forgotPass */

.forgotPass h5 {

    font-size: 16px;

    text-align: center;

    line-height: 1.4em;

}

#forgotPass input {

    border: 1px solid #ddd;

    border-radius: 25px;

    width: 100%;

    height: 48px;

    font-size: 14px;

    margin: 15px 0px;

    padding: 10px 12px;

}

.forgotPass img.f {width: 110px;}

.forgotPass .modal-header {padding-bottom: 0px;}

.forgotPass .modal-body {text-align: center;padding-top: 0;}



/* Start Courses */

.RateCourse b {

  margin-bottom: 10px;

  display: block;

  color: #024da1;

  font-size: 14px;

}

.RateCourse p {font-size: 14px;    margin-bottom: 8px;

  margin-top: 3px;}

.RateCourse input , .RateCourse textarea {margin-bottom: 10px;}

.RateCourse textarea {height: 100px;}

.rates label {

  margin-right: 20px;

  cursor: pointer;

  font-size: 14px;

}

.courses{

  margin: 20px 0;

  /* border-top: 1px solid #eee; */

  /* overflow: hidden; */

  padding: 30px 0;

}

.courses .sideNav{

  background-color: #fff;

  padding: 20px;

  box-shadow: 0px 0px 4px 0px #ddd;

  /* border: 1px solid #ccc; */

  border-radius: 15px;

  margin: 0px 2px

}

.courses .sideNav .TopSide img{

  width: 100px;

  display: block;

  margin: 10px auto 30px auto;

}

.courses .sideNav .group 			  { 

  position:relative; 

  margin-bottom:10px; 

}

.courses .sideNav input{

  font-size: 18px;

  padding: 10px 10px 10px 5px;

  display: inline-block;

  width: 100%;

  border: none;

  border-bottom: 1px solid #757575;

  border-radius:unset;

}

.courses .sideNav input:focus{ outline:none; }

/* LABEL ======================================= */

.courses .sideNav label{

color:#999; 

font-size:14px;

font-weight:normal;

position:absolute;

pointer-events:none;

left:5px;

top:10px;

transition:0.2s ease all; 

-moz-transition:0.2s ease all; 

-webkit-transition:0.2s ease all;

}

/* active state */

.courses .sideNav input:focus ~ label, input:valid ~ label 		{

top:-20px;

font-size:14px;

color:var(--mainColor2);

}

/* BOTTOM BARS ================================= */

.courses .sideNav .bar{

  position: relative;

  display: inline-block;

  /* width: 250px;  */

}

.courses .sideNav .bar:before, .bar:after 	{

content:'';

height:2px; 

width:0;

bottom:1px; 

position:absolute;

background:var(--mainColor2); 

transition:0.2s ease all; 

-moz-transition:0.2s ease all; 

-webkit-transition:0.2s ease all;

}

.courses .bar:before {

left:50%;

}

.courses .bar:after {

right:50%; 

}

/* active state */

.courses .sideNav input:focus ~ .bar:before, input:focus ~ .bar:after {

width:50%;

}

/* HIGHLIGHTER ================================== */

.courses .highlight {

position:absolute;

height:60%; 

width:100px; 

top:25%; 

left:0;

pointer-events:none;

opacity:0.5;

}

/* active state */

.courses .sideNav input:focus ~ .highlight {

-webkit-animation:inputHighlighter 0.3s ease;

-moz-animation:inputHighlighter 0.3s ease;

animation:inputHighlighter 0.3s ease;

}

/* ANIMATIONS ================ */

@-webkit-keyframes inputHighlighter {

  from { background:var(--mainColor2); }

to 	{ width:0; background:transparent; }

}

@-moz-keyframes inputHighlighter {

  from { background:var(--mainColor2); }

to 	{ width:0; background:transparent; }

}

@keyframes inputHighlighter {

  from { background:var(--mainColor2); }

to 	{ width:0; background:transparent; }

}

.courses .group button{

  border-radius: 25px;

  width: 35px;

  height: 35px;

  border: 1px solid #ccc;

  background-color: var(--mainColor2);

  position: absolute;

  top: 0;

  right: 0px;

}

.courses .group button:focus{outline: none;}

.courses .group button i{

  font-size: 12px;

  color: #fff;

}

.courses .sideNav .Links h2 {

  font-size: 23px;

  color: var(--mainColor);

}

.courses .sideNav .Links h2 img{

  width: 26px;

  display: inline-block;

  margin: 0px 10px;

}

.courses .Links ul{

  padding: 15px 0px;

  position: relative;

}

.courses .Links ul li {

  border-radius: 25px;

  display: block;

  padding: 9px 10px;

  transition: all .3s ease-in-out;

}

.courses .Links ul li a span {font-size: 17px;}

.courses .Links ul li a img {

  width: 20px;

  height: 20px;

  border-radius: 3px;

}

.courses .Links ul li.active{background-color:var(--mainColor)21;}

.courses .Links .active{

  position: relative;

  transform: all .3s ease-in-out;

}

.courses .Links .active::before{

  content: '';

  position: absolute;

  top: 5px;

  left: -21px;

  width: 3px;

  height: 35px;

  background-color: var(--mainColor2);

}

.courses .Links ul li i{

  color: var(--mainColor2);

  font-size: 16px;

}

.courses .Links ul li a{

  color: #333;

  font-size: 18px;

  text-decoration: none;

}

.courses .CoursesView{

  background-color: #fff;

  padding: 40px;

  border-radius: 15px;

  box-shadow: 0px 0px 4px 0px #ddd

}

.courses .CoursesView .topFilt{

  border-bottom: 1px solid #eee;

  margin-bottom: 30px;

}    

.courses .CoursesView .topFilt h3{

  color: var(--mainColor2);

  margin: 0px 0 40px 0;

  font-size: 24px;

}    

.courses .CoursesView .topFilt .price{

  display: block;

  float: right;

}

.courses .CoursesView .topFilt .price label{

  border: 1px solid #ccc;

  margin: 0px 5px;

  padding: 5px 21px;

  cursor: pointer;

  border-radius: 5px;

  box-shadow: 0px 10px 8px -10px #ccc;

}

.courses .CoursesView .topFilt .price .labelClicked{

  background-color: var(--mainColor) !important;

}

.courses .CoursesView .topFilt .price .labelClicked span{color: #fff;}

.courses .CoursesView .content .box{

  background-color: #fefefe;

  /* box-shadow: 0px 0px 8px 0px #ccc; */

  border-radius: 13px;

  padding: 15px;

  border: 1px solid #ccc;

  margin: 20px 0;

  position: relative;

}

.courses .CoursesView .content .box .Price-Co{

  position: absolute;
  right: 14px;

  top: -17px;

  background-color: #3c9a55;

  color: #fff;

  font-size: 14px;

  width: 70px;

  padding: 5px 0;

  text-align: center;

  border-radius: 4px;

}

.courses .CoursesView .content .box h3{

  text-align: left;

  font-size: 17px;

  margin-top: 6px;

  color: var(--mainColor);

  font-weight: bold;

}

.courses .CoursesView .content .box .details{

  margin: 20px 0;

}

.courses .CoursesView .content .box .details img{

  width: 100px;

  height: 100px;

  display: block;

  margin: auto;

  border-radius: 50px;

  box-shadow: 0px 0px 8px 0px #e3e3e3;

  padding: 5px;

}

.course-description {

  line-height: 1.5em;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  font-size: 15px;

}

.courses .CoursesView .content .box .details h4{

  font-size: 16px;

  margin-bottom: 4px;

  color: var(--mainColor2);

}

.courses .CoursesView .content .box .details span{

  color: #777;

  font-weight: bold;

}

.courses .CoursesView .content .box .details .time p{

  text-align: left;

  margin-top: 5px;

  font-size: 12px;

  color: #777;

}

.courses .CoursesView .content .box .details a.join{

  background-color: var(--mainColor2);

  color: #fff;

  margin: auto;

  width: 130px;

  display: block;

  font-size: 14px;

  height: 35px;

  border-radius: 6px;

  text-align: center;

  padding-top: 5px;

  border: 2px solid var(--mainColor2);

  margin-top: -16px;

  float: right;

  box-shadow: 0px 23px 8px -15px #ccc;

  text-decoration: none;

  transition: all .3s ease-in-out;

}

.courses .CoursesView .content .box .details a:hover{

 background-color:#fff;

 color: var(--mainColor2);

 border: 2px solid var(--mainColor2)

}

.courses .CoursesView .content .box .des{margin: 10px 0;overflow: hidden;}

.courses .CoursesView .content .box .des h5{color: var(--mainColor2);font-size: 16px;}

.courses .CoursesView .content .box .des p{color: #777;font-size: 14px;line-height: 1.5em;height: 130px;}

/* End Courses */

/* Start BreadCrumb  */

.Bread_rumb{margin: 30px 0;}

.Bread_rumb .breadcrumb{

    background-color: #eee;

    padding: 0;

    margin-bottom: 0;

    padding: 20px;

    border-radius: 50px;

    margin: auto;

}

.Bread_rumb .breadcrumb li a

{

    border: 1px solid #eee;

    margin: 10px;

    text-decoration: none;

    padding: 10px 30px;

    border-radius: 25px;

    background-color: #fff;

}

/* End BreadCrumb  */

/*  Start Details Course*/

.Details-Course{margin: 40px 0;}

.holder_De{

    background-color: #fff;

    border: 1px solid #eee;

    border-radius: 15px;

    position: relative;

    margin: 40px 0;

    overflow: hidden;

    box-shadow: 0px 0px 4px 1px #eee;

}

.holder_De .Price-Co{

    position: absolute;

    right: -8px;

    top: 23px;

    background-color: #3c9a55;

    color: #fff;

    border-radius: 0px 0px 0px 25px;

    padding: 9px 10px;

    font-size: 13px;

    /* clip-path: polygon(100% 0%, 75% 49%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); */

    width: 109px;

    text-align: center;

    height: 34px;

}

.holder_De .topDe{

    border-bottom: 1px solid #ccc;

    /* margin-bottom: 40px; */

    padding: 5px 20px;

}

.holder_De .tit h3{

    margin: 20px 0;

    color: var(--mainColor2);

    font-size: 22px;

}

.holder_De .tit h3 img{

  width: 30px;

    height: 30px;

    border-radius: 6px;

    margin-right: 6px;

}

.holder_De .imgDe{height: 100%;}

.holder_De .imgDe img{

    width: 100%;

    height: 100%;

    /* border-radius: 15px; */

}

.holder_De .clickRate{text-align: left;margin: 16px 0;}

.holder_De .clickRate li {display: inline-block;margin-left: 5px;color: #dddddd96;font-size: 22px;cursor: pointer;transition: all .3s ease-in-out;}

.holder_De .fillStar {color: var(--mainColor2) !important;}

.holder_De .dateCourse{margin: 20px 0;}

.holder_De .dateCourse strong{color: var(--mainColor2);}

.holder_De .dateCourse span{color: #999;font-size: 14px;}

.holder_De .Content-de{margin: 20px 0;padding: 0px 10px;}

.holder_De .Content-de span{color: #777;margin-bottom: 10px;display: block;font-size: 13px;}

.holder_De .Content-de h3{ 

  color: var(--mainColor);

  font-size: 22px;

    display: flex;

}

.holder_De .Content-de h3 i{

  font-size: 20px;

  margin-right: 7px;

  margin-top: 3px;

}

.holder_De .Content-de p{color: #777;font-size: 14px;margin: 20px 0px;line-height: 1.6em;}

.holder_De .Join{    text-align: right !important;margin: 20px;}

.holder_De .Join a{

    background-color: var(--mainColor);

    color: #fff;

    /* border: 1px solid var(--mainColor2); */

    width: 115px;

    text-decoration: none;

    display: inline-block;

    text-align: center;

    height: 35px;

    border-radius: 5px;

    padding-top: 7px;

    font-size: 14px;

    box-shadow: 0px 12px 8px -9px #ddd;

}

.holder_De .Join a:hover{

    background-color: #fff;

    color: var(--mainColor2);

    border: 1px solid var(--mainColor2);

    box-shadow: 0px 12px 8px -9px var(--mainColor2);

}

.De{

    background-color: #fff;

    border: 1px solid #eee;

    border-radius: 15px;

    position: relative;

    margin: 40px 0;

    padding: 20px;

    overflow: hidden;

    box-shadow: 0px 0px 4px 1px #eee;

}

.De h3{    color: var(--mainColor2);font-size: 20px;}

.De p{line-height: 1.6em;}

.De h3 img{width: 30px;}

.Detail_Tech .img-Tech{margin: 40px 20px;}

.Detail_Tech .img-Tech img{

    width: 120px;

    border-radius: 50%;

    padding: 3px;

}

.Detail_Tech .De-tech{margin: 20px 0;}

.Detail_Tech .De-tech h2{font-size: 22px;color: var(--mainColor);}

.Detail_Tech .De-tech span{color: #777;margin-bottom: 12px;display: block;}

.Detail_Tech .De-tech ul li{margin-bottom: 7px;color: #777;font-size: 15px;}

.Detail_Tech .De-tech ul li i{font-size: 12px;color:#eb8a2f;padding-right: 10px;}

.De-tech .showMore{display: none;}

.De-tech .ClickMore{display: block;padding:0;margin: 10px 0;border: 0;background: 0;color: var(--mainColor);transition: all .3s ease-in-out;}

.De-tech .ClickMore:focus{outline: none;}

.De-tech .ClickMore:hover{color: var(--mainColor2);}

.De p{color: #777;font-size: 14px;}

.Details-Course .Join{text-align: center;margin: 20px;}

.Details-Course .Join a{

    background-color: var(--mainColor);

    color: #fff;

    border: 1px solid transparent;

    width: 115px;

    display: inline-block;

    text-align: center;

    height: 35px;

    border-radius: 5px;

    padding-top: 7px;

    font-size: 14px;

    text-decoration: none;

    box-shadow: 0px 12px 8px -9px #ddd;

    transition: all .3s ease-in-out;

}

.Details-Course .Join a:hover{

    background-color: #fff;

    color: var(--mainColor2);

    border: 1px solid var(--mainColor2);

    box-shadow: 0px 12px 8px -9px var(--mainColor2);    

}

.axes ul{margin: 20px;}

.axes ul li{margin-bottom: 2px;color: #777;}

.axes ul li i{    font-size: 11px;color: var(--mainColor);padding: 10px;}

.Outcomes .bo{margin: 20px;}

.Outcomes .bo span{  display: inline;   font-size: 15px;margin-right: 13px;margin-bottom: 15px;color: #777;}

.Outcomes .bo i{font-size:12px;margin-right: 13px; color:var(--mainColor);}

.FeaturedReview{border: 1px solid #ccc;background-color: #f7f7f7;padding: 20px;border-radius: 10px;}

.FeaturedReview h2{color: var(--mainColor2);font-size: 22px;margin: 20px;}

.FeaturedReview img{width: 100px;display: block;margin: auto; border-radius: 50px;}

.FeaturedReview .feat_De {margin-left: -30px;}

.FeaturedReview .feat_De h5{font-size: 16px;color: #000;font-weight: bold;}

.FeaturedReview .feat_De span{    display: block;font-size: 14px;color: #777;margin-bottom: 2px;}

.FeaturedReview .rate{margin: 10px 20px;}

.FeaturedReview .rate ul li{display: inline-block;}

.FeaturedReview .rate ul li i{color:#eb8a2f;}

.FeaturedReview .rate ul li span{color: #777;margin-left: 10px;font-size: 13px;font-weight: bold;}

.FeaturedReview .rate p{font-size: 14px;line-height: 1.6em;color: #777;}

/*  End Details Course*/



/* dashboard */

.dashboard {

  background-color: #fff;

  box-shadow: 0px 20px 20px -12px #ccc;

  border: 1px solid #eee;

  border-radius: 7px;

  margin: 30px 0px;

  overflow: hidden;

}

.side-menu {

  overflow: hidden;

  background-color: aliceblue;

  padding: 20px 10px;

  height: 100%;

}

.dash-title {

  color: var(--mainColor);

  font-weight: bold;

}

.side-menu ul {position: relative;}

.side-menu ul li a {color: var(--mainColor2);}

.side-menu ul li a:hover {text-decoration: none;}

.side-menu ul li {

  margin: 12px 0px;

  padding: 12px 20px;

  border-radius: 25px;

  border: 1px solid transparent;

  font-weight: bold;

  background-color: #fff;

  box-shadow: 0px 0px 4px 0px #eee;

  transition: all .3s ease-in-out;

  border: 1px solid #eee;

  font-size: 15px;

  cursor: pointer;

}

.side-menu ul li.activeLi {

  border: 1px solid var(--mainColor);

  background-color: #f8f9fa;

}

.side-menu ul li img {width: 23px;}

.content-wrapper {

  padding: 25px 30px 25px 0px;

}

.content-wrapper .btn {border: none;}

.content-wrapper hr {margin: 3px 0px;}

.content-wrapper h4 {color: #777;margin: 10px 0px 20px;}

.content-wrapper h4 i {font-size: 14px;}

.contents .btn {border: none;box-shadow: none;}

.contents video {

width: 300px;

  border-radius: 10px;

  box-shadow: 0px 20px 20px -12px #aaa;

}

.core-points {position: relative;}

.core-points::before {

position: absolute;

content: '';

left: 0;

top: 0;

height: 100%;

width: 1px;

background-color: #3c8dbc;

}

.core {color: #2373c9;}

.core-points li {position: relative;margin: 10px;}

.core-points li::before {

position: absolute;

content: '';

left: -15px;

top: 6px;

height: 10px;

width: 10px;

border-radius: 4px;

background-color: #3c8dbc;

}

.contents .card {box-shadow: none;}

.contents .card-header {cursor: pointer;background-color: #f8f9fa;border: none;}

.contents .card-header button {

  color: var(--mainColor);

  font-weight: bold;

}

.contents .card-header button:hover {text-decoration: none;}

.contents .card-header i {

  float: right;

  background-color: var(--mainColor2);

  color: #fff;

  width: 30px;

  height: 30px;

  text-align: center;

  border-radius: 50px;

  padding-top: 6px;

  margin-top: 5px;

  }

  .contents .card-body {

      color: #777;

      font-size: 15px;

      line-height: 1.6em;

  }

  .lectures button {padding: 5px 12px;border: none;font-size: 15px;}

  .lectures .table {

      box-shadow: 0px 0px 4px 0px #eee;

  }

  .lectures .table > thead > tr > th {background-color: #f8f9fa;}

  .lectures .table-striped tbody tr {background: none;}

  .answers {

      background-color: #eeeeee1f;

  padding: 20px;

  border: 1px solid #eee;

  }

  .answers a {

      color: #3c8dbc !important;

  font-weight: bold;

  margin: 10px 0px;

  display: block;

  cursor: pointer;

  }

  .answers a i {font-size: 13px;}

  .answers p {

      margin: 20px 0px;

      color: #777;

  }

  .answers a span {

      float: right;

  font-size: 13px;

  display: block;

  }

  .answers a span img {width: 20px;}

  .answers .date {font-size: 13px;color: #777;}

  .newQ {

      padding: 20px;

      display: none;

  box-shadow: 0px 0px 4px 0px #ddd;

  }

  .newQ h5 img {width: 23px;}

  .newQ input {height: 48px;border-radius: 25px;}

  .newQ b , .newQ input{

      margin: 10px 0px;

      display: block;

  }

  .notifications .note {

      padding: 20px;

  background-color: #fdfdfd;

  margin: 10px 0px;

  border: 1px solid #eee;

  border-radius: 7px;

  }

  .notifications .note p {

      color: #777;

      line-height: 1.6em;

  font-size: 15px;

  word-break: break-word;

  margin-left: 35px;

  }

  .notifications .note h5 {

      font-size: 19px;

      color: #17a2b8;

  }

  .notifications .note i {

      font-size: 13px;

  color: #fff;

  background-color: #17a2b8;

  height: 30px;

  width: 30px;

  text-align: center;

  padding-top: 9px;

  border-radius: 50%;

  box-shadow: 0px 0px 4px 0px #17a2b8;

}

.chat {

  padding: 20px;

  background-color: #fff;

  box-shadow: 0px 0px 4px 0px #ddd;

}



.chat img {width: 50px;margin-top: -45px;}

.chat .message , .chat .reply {margin-bottom: 20px;}

.chat span {

  color: #777;

  position: relative;

  width: 320px;

  display: inline-block;

  border-radius: 25px;

  padding: 10px 20px;

}

.chat .message span {background-color: antiquewhite;margin-left: 25px;}

.chat .message span::before {

  position: absolute;

  height: 0;

  width: 0;

  content: '';

  top: 23px;

  left: -6px;

  transform: rotate(-45deg);

  border-left: 17px solid antiquewhite;

  border-bottom: 17px solid transparent;

}

.chat .reply span{background-color: aliceblue;margin-right: 25px;text-align: left;}

.chat .reply span::before {

  position: absolute;

  height: 0;

  width: 0;

  content: '';

  top: 23px;

  right: -6px;

  transform: rotate(-45deg);

  border-right: 17px solid aliceblue;

  border-top: 17px solid transparent;

}

.chat .time , .chat .name {font-size: 13px;}

.chat form button {

  background-color: #2accc8;

  border: none;

  display: inline-block;

  margin: 10px;

  height: 40px;

  width: 40px;

  border-radius: 50%;

  box-shadow: 0px 0px 4px 0px #2accc8;

}

.chat form button img {width: 20px;margin-top: 0px !important;}

.chat form input {

  display: inline-block;

  width: 90%;

  height: 48px;

  border-radius: 25px;

}

.new-discuss {

padding: 40px 20px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0px 0px 4px 0px #eeee;

text-align: center;

}

.new-discuss img {

width: 100px;

display: block;

margin: 20px auto;

}

.notifications, .lectures, .questions, .discussions, .dashboard .contents , .RateCourse {display: none;}

/* End dashboard */



.scroll_up {

  display: inline-block;

  position: fixed;

    bottom: 70px;

    left: 30px;

    z-index: 444;

    display: none;

}

.scroll_up img {

  width: 38px;

  margin-left: 30px;

  cursor: pointer;

}

.partners {padding: 40px 0px;}

#partners .item img {

  height: 192px;

  border-radius: 10px;

  background-color: #fff;

  border: 1px solid #eee;

  padding: 16px;

}

/* Contact Us */

.contact {

  padding: 40px 0px;

  background-image: url(../images/bg-12.svg);

  height: 100%;

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

.contact ul {

  padding: 40px 20px;

  /* background-color: #fff; */

  border-radius: 4px;

  margin: 10px 0px;

  /* box-shadow: 0px 0px 4px 0px #ddd; */

}

.contact ul li {

  display: inline-block;

  padding: 10px 50px;

  font-size: 22px;

  /* border-right: 1px solid #eee; */

  background-color: #fff;

  border-radius: 10px;

  margin: 0px 15px;

  box-shadow: 0px 0px 8px 0px #ddd;

}

.contact ul li:nth-child(4) {border: none;}

.contact ul li span{color: #666;font-size:18px;}

.contact ul li span , .contact ul li i {display: block;}

.contact ul li i {

  font-size: 25px;

  line-height: 1.9em;

  border: 1px dotted #0066b830;

  color: var(--mainColor);

  height: 50px;

  width: 50px;

  border-radius: 50%;

  margin: 10px auto;

}

/* End Contact Us */



.rights {

  text-align: center;

  color: #fff;

  background-color: #024da1;

  font-size: 12px;

}

.rights a {color: #fff;}

.separator {

  width: 100%;

  height: 15px;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

.mentorDiploma {

  padding: 10px 0px 40px 0;

}

.mentorDiploma h3 {color: var(--subColor);text-align: center;margin: 20px 0;}

.mentorDiploma b {color: var(--mainColor2);margin: 20px 0;font-size: 18px;}

.mentorDiploma ul {margin: 20px 0;}

.mentorDiploma ul li {

  font-size: 15px;

  margin-bottom: 9px;

}

.mentorDiploma p {line-height: 1.7em;margin: 20px 0;}



.up-down{

  animation: up-down linear 4s;

  animation-iteration-count: infinite;

  transform-origin: 50% 50%;

  -webkit-animation: up-down linear 4s;

  -webkit-animation-iteration-count: infinite;

  -webkit-transform-origin: 50% 50%;

  -moz-animation: up-down linear 4s;

  -moz-animation-iteration-count: infinite;

  -moz-transform-origin: 50% 50%;

  -o-animation: up-down linear 4s;

  -o-animation-iteration-count: infinite;

  -o-transform-origin: 50% 50%;

  -ms-animation: up-down linear 4s;

  -ms-animation-iteration-count: infinite;

  -ms-transform-origin: 50% 50%;

}



@keyframes up-down{

  0% {

    transform:  translate(1px,20px)  ;

  }

  24% {

    transform:  translate(1px,30px)  ;

  }

  50% {

    transform:  translate(1px,12px)  ;

  }

  74% {

    transform:  translate(1px,22px)  ;

  }

  100% {

    transform:  translate(1px,22px)  ;

  }

}



  .media-center .card {position: relative;}

  .play{

border: none;

height: 30px;

width: 30px;

position: absolute;

left: 20px;

top: 20px;

border-radius: 50%;

transform: translatey(0px);

animation: pulse 1.5s infinite;

box-shadow: 0 0 0 0 #1099E9;

-webkit-animation: pulsing 1.5s infinite cubic-bezier(0.66, 0, 0, 1);

-moz-animation: pulsing 1.5s infinite cubic-bezier(0.66, 0, 0, 1);

-ms-animation: pulsing 1.5s infinite cubic-bezier(0.66, 0, 0, 1);

animation: pulsing 1.5s infinite cubic-bezier(0.66, 0, 0, 1);

text-decoration: none !important;

transition: all .5s ease-in-out;
z-index:999;

}



@keyframes pulsing {

to {

box-shadow: 0 0 0 10px #1099e991;

border-radius: 50%;

}

 }

  .media-center p {line-height: 1.6em;font-size: 13px;color: #777;}

  .media-center h5 {color: var(--subColor);}

  .sp .img {

    width: 120px;

    height: 120px;

    padding: 3px;

    border-radius: 50%;

    background-color: #fff;

    margin: auto;

    border: 2px dotted var(--subColor);

  }

  .sp .img img {width: auto;max-height: 80px;display: block;margin: 15px auto 0;}



  /* start section testimonials */

.testimonials span {

    border-bottom: 8px solid #006699;

    border-radius: 5px;

    padding-bottom: 5px;

}

.testimonials p {

    line-height: 2em;

    font-weight: 300;

    padding-left: 30px;

    padding-right: 30px;

    font-size: 16px;

    color: #777;

}

.testimonials h5 {

    font-weight: bold;

    color: var(--mainColor2);

    font-size: 18px;

}

@media (max-width: 576px) {

    .testimonials h5{

    font-size: 17px;

    

}

}



@media (max-width: 768px) {

    .carousel-indicators {

    margin-left: 0px;

    margin-right: 0px;

}

}

@media (max-width: 576px) {

    .carousel-indicators{

    width: 100%;

    height: 100%;

    

    

}

}

@media (max-width: 576px) {

    .carousel-indicators li img{

    width: 100%;

    height: 100%;

}

}

.testimonials .carousel-indicators {

    position: static;

    padding-top: 20px;

}

.testimonials .carousel-indicators li {

    width: 60px;

    height: 60px;

    text-indent: 000;

    border: 2px solid #fff;

    border-radius: 50%;

    overflow: hidden;

    transition: all .4s ease-in-out;

}





.carousel-indicators li.active {

    background:none;

    border: 2px solid var(--mainColor2);

}

.carousel-indicators li img {

    max-width: 100%;

    max-height: 100%;

    border-radius: 50%;

    text-indent: 000;

    

}

/* End section testimonials */



  .stats {

    display: flex;

    justify-content: space-around;

    flex-wrap: nowrap;

    align-items: center;

    align-content: space-between;

  }



  .stats li {

    text-align: center;

  }



  .stats li span {

    color: #fff;

    display: block;

  }



  .stats li img {

    width: 80px;

    margin: auto;

    display: block;

  }



  .statistics {

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    background-attachment: fixed;

    background-image: url(../images/close-up-pen-market-research_1098-3465.webp);

    box-shadow: inset 0px 0px 0px 1000px #0d176fb8;

  }



  .statistics h4,

  .statistics h5 {

    color: #fff;

  }



  .statistics p {

    color: #ddd;

    font-size: 13px;

    line-height: 1.6em;

    margin-top: 20px;

    margin-bottom: 0;

  }



/* footer */

footer {

  padding: 20px 0px;

  /* background-image: url(../images/download.jpg); */

  /* background-color: var(--subColor3); */

  margin-top: 20px;

  position: relative;

  overflow: hidden;

  background: linear-gradient(to top, #024da1 0%, #333 100%);

}

/* footer::before {

  position: absolute;

  left: 0;

  top: 0;

  background-color: rgba(0, 0, 0,.9);

  width: 100%;

  height: 100%;

  content:'';

} */

footer .Logo{

    width: 100%;

    height: 100%;

    display: block;

    overflow: visible;

    position: relative;

}

footer .Logo::before {

  background-color: #fff;

  left: 48px;

  top: -73px;

  position: absolute;

  content: '';

  width: 76%;

  height: 112%;

  border-radius: 0px 0px 15% 15%;

  box-shadow: 0px 5px 18px 0px #6c757d;

}

/* footer .Logo::before {

  position: absolute;

  left: -13px;

  top: -41px;

  width: 108%;

  height: 350px;

  background-color: #fff;

  content: '';

  clip-path: polygon(17% 0%, 100% 0%, 80% 100%, 0% 100%);

  z-index: 0;

} */

footer img {

  width: auto ;

  height: 100px !important;

  position: relative;

  border-radius: 5px;

  padding: 7px 20px;

}

footer h5 {

  color: var(--mainColor);

  margin: 10px 0px;

  font-weight: bold;

}

footer .navigation {margin-top: 20px;}

footer .navigation a {

  display: block;

  text-decoration: none;

  color: #fff !important;

  margin: 5px 0px 5px 10px;

}

footer .social-links {margin-top: 20px;}

footer .social-links ul li {color: #fff}

footer .social-links ul li a{color: #fff}

footer .social-links ul li i {

  color: #fff;

  font-size: 20px;

  text-align: center;

  padding-top: 8px;

  margin: 4px 0px;

  margin-right: 12px;

  height: 35px;

  width: 35px;

  background-color: var(--mainColor);

  border-radius: 25px;

}

footer hr {background-color: #cec9c9;}

footer span  {color: #e8f6f5;}

footer span b {color: var(--mainColor)}





/* Media Query */

@media(min-width:767px) {

  .show-list , .side-menu .fa-times {display: none;}

}

@media(max-width: 768px){

  .sign-options {

    position: static !important;

    width: unset !important;

    border: none;

    height: 300px;

    overflow: scroll;

    padding-bottom: 40px;

  }

  .sign-options::before {display: none;}

  .show-list {

    display: block;

    margin: 10px;

    padding: 10px;

    color: #777;

    cursor: pointer;

    font-weight: bold;

  }

  .side-menu .fa-times {

    display: none;

    height: 32px;

    width: 32px;

    text-align: center;

    color: var(--mainColor);

    border-radius: 50%;

    border: 1px solid var(--mainColor)6b;

    float: right;

    padding-top: 7px;

  }

  .side-menu {

    height: unset;

    display: none;

    z-index: 77777;

  }

  .side-menu ul {

    margin-top: 45px;

  }

  #signSpan {margin-bottom: 25px;}

  .Bread_rumb .breadcrumb li a{margin: 5px;padding: 10px 15px;font-size: 12px;}

  .Bread_rumb .breadcrumb li i{font-size: 12px;}

  .Bread_rumb .breadcrumb li.active{font-size: 12px;display: inline-block;margin-top: 4px;}

  .holder_De .Price-Co{top: 0px;z-index: 1;}

  .Detail_Tech .img-Tech {margin: 20px 0px;}

  .Detail_Tech .De-tech h2{font-size: 20px;}

  .Detail_Tech .img-Tech img{width: 80px;}

  .Detail_Tech .De-tech ul li{font-size: 12px;}

  .De h3{font-size: 18px;}

  .De-tech .ClickMore {font-size: 14px;}

  .axes ul{margin: 0;}

  .axes ul li{font-size: 11px;}

  .axes ul li i{font-size: 6px;}

  .Outcomes .bo span{font-size: 13px;}

  .FeaturedReview .feat_De{margin-left: 10px;}

  .FeaturedReview .feat_De h5{font-size: 14px;}

  .FeaturedReview .feat_De span{font-size: 12px;}

  .FeaturedReview .rate p , .De p {

    font-size: 13px;

    line-height: 1.7em;

  }

  .FeaturedReview img{width: 80px;}

  .content-wrapper {

    padding: 15px;

}

.modal-dialog{max-width: unset !important}

.answers a span {margin-top: 3px;}

.chat span {width: 175px;font-size: 11px;}

.chat form input {width: 75%;}

.courses .CoursesView .topFilt .price label 

{

  margin: 0px 0px;

  padding: 5px 9px;

}

.courses .CoursesView .content .box .details a.join 

{

  float: none;

  margin-top: 18px;

}

.courses .CoursesView .topFilt .price {float: none;text-align: center;margin-bottom: 10px;}

.contact ul{  padding: 0;}

.contact ul li{display: block;margin: 10px 15px;}

footer .Logo::before {display: none;}

footer .Logo img {background-color: #fff;}

}

@media(max-width:414px) {

  .header {margin-bottom: 0px;}

  /* .header .row {flex-direction: column-reverse;} */

  .header .content {

    margin-top: 27px;

    text-align: center !important;

}

.header .content h3 {

  font-size: 30px;

}

.header .head img {

  width: 237px;

  margin-top: 0px;

}

.head {margin: 0px;}

  .navbar-nav .nav-link {

    color: var(--mainColor) !important;

    margin-left: 37px;

    padding: 4px 0px;

}

.navbar #sign {

  margin-left: 0px;

  margin-top: 10px;

}

  .navbar img {

    margin-left: 12px;

    width: 100px;

    margin-top: 7px;

  }

  .navbar .navbar-toggler {margin-top: 10px;}

  #signIn .absolute img {width: 22px;}

  #signIn .absolute {

    width: 40px;

    height: 40px;

    right: -13px;

  }

  .scroll_up {right: 30px;left: unset;}

  .services .serv {margin: 50px 0px 35px 0px;}

  .services .serv div {left: 123px;width: 85px;height: 85px;}

  .services .serv img {left: 110px;width: 70px;}

  .courses .CoursesView {

    padding: 40px 17px;

    margin: 15px 0px;}



    .stats {margin-top: 22px;}

    .stats li img {width: 50px;}

    .testimonials p {font-size: 14px;}

    .statistics h4, .statistics h5 {font-size: 17px;}

    .testimonials .carousel-indicators li {

      width: 45px;

      height: 45px;

    }

  }