body {
  font-family: "Poppins", sans-serif;
  background: #ffffff;
  margin: 0;
  padding: 0;
  font-size: 0.83rem;
  line-height: 24px;
  color: #555;
}
a{
  transition: 0.3s;
  text-decoration: none;
  color: #42b9e2;
  transition: 0.3s;
}
a:hover{
  color: #5FE074;
}
.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 6px 3px 10px rgba(0, 0, 0, 0.1);
  padding: 25px 0;
  z-index: 1024;
}
.main-banner {
  position: relative;
  width: 100%;
  background: #e0f2fe;
  padding: 100px 0;
}

.main-banner h1 {
  font-size: 40px;
  color: #42b9e2;
  font-weight: 700;
  line-height: 45px;
  margin: 0;
  padding: 0;
}

.main-banner-content {
  margin-top: 30px;
  color: #555555;
  line-height: 31px;
  font-size: 1.035rem;
}

.main-banner img {
  position: absolute;
  bottom: 0;
}

.class-banner {
  position: relative;
  width: 100%;
  background: #2F2F2F;
  padding: 50px 0;
}

.class-banner h1 {
  font-size: 28px;
  color: #FFF;
  font-weight: 700;
  line-height: 45px;
  margin: 0;
  padding: 0;
}

.class-banner-content {
  margin-top: 20px;
  color: #FFF;
  line-height: 31px;
  font-size: .9rem;
}

.img-banner-class{
  width: 400px;
  border-radius: 30px;
}

.title-blue {
  color: #42b9e2;
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 38px;
}

.title-white {
  color: #FFF;
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 38px;
}

.title-dark {
  color: #2D3966;
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 38px;
}

.title-thin {
  color: #555;
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 200;
}

.title {
  color: #555;
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 38px;
}

.title-large{
  font-size: 2.5rem
}

.title-small{
  font-size: 1.2rem
}

.title-extra-small{
  font-size: 1rem
}

.subtitle{
  font-size: 16px;
  color: #777
}

.text-justify {
  text-align: justify;
}

.white-bg {
  position: relative;
  width: 100%;
  background: #f0f0f0;
}

.grey-bg {
  position: relative;
  width: 100%;
  background: #f0f0f0;
}

.blue-bg {
  position: relative;
  width: 100%;
  background: #42B9E2;
}

.bluegrad-bg{
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom left, #afe0ef, #42B9E2);
}

.trainer-bg{
  position: relative;
  border-radius: 0 20px;
  background: #FFF;
  box-shadow: 3px 4px 15px 0px rgba(0, 0, 0, 0.11);
}

.sky-bg{
  position: relative;
  width: 100%;
  background:#E0F7FF;
}

.listthirdlinline{}

.list-green-check {
  list-style: none;
  margin: 0;
  padding-bottom: 0;
}

.list-green-check li {
  position: relative;
  padding-left: .5rem;
  line-height: 30px;
}

.list-green-check li:before {
  content: "\ed31";
  font-family: boxicons;
  position: absolute;
  font-size: 1.4rem;
  left: -1em;
  color: #5FE074
}

.corousel-wrap{
  color: #777
}

.corousel-title{
  font-size: 16px !important;
  font-weight: bold;
  color: #555;
}

.category-list{
  list-style: none;
  margin: 0 auto;
}

.category-list li{
  display: inline;
  margin: 0 5px 0 0;
}

.category-list li a{
  padding: 8px 20px;
  border-radius: 30px;
  border: 1px solid #BBB;
  background: #FFF;
  color: #888;
  text-decoration: none;
  transition: 0.3s;
}

.category-list li a:hover{
  background: #42B9E2;
  border: 1px solid #42B9E2;
  color: #FFF;
}

.activelist{

}

.activelist a{
  border-radius: 30px !important;
  border: 1px solid #42B9E2 !important;
  background: #42B9E2 !important;
  color: #FFF !important;
  text-decoration: none !important;
  transition: 0.3s !important;
}

.activelist a:hover{
  border: 1px solid #5fe074 !important;
  background: #5fe074 !important;
}

.shadow-custom{
  box-shadow: 3px 4px 15px 0px rgba(0, 0, 0, 0.11);
}

.text-blue{
  color: #42B9E2
}

.text-green{
  color: #5FE074
}

.text-white{
  color: #FFF
}

.number-circle{
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background: #42B9E2;
  color: #FFF;
  font-weight: bold;
  font-size: 1rem;
}

.divider-accordion{
  padding: 0 20px;
}

.f-sm{
  font-size: 1.2rem
}

.f-md{
  font-size: 1.5rem
}

.f-xl{
  font-size: 2rem
}

.f-xxl{
  font-size: 2.5rem
}

.whatsapp-box{
  position: relative;
  background: #FFF;
  color: #42B9E2;
  border-radius: 17px;
  padding: 16px 20px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

.whatsapp-box:hover{
  background: #5fe074;
  color: #FFF
}

.whatsapp-box .bx{
  position: relative;
  top: 3px;
  font-size: 1.4rem;
}

.green-box{
  position: relative;
  background: #5fe074;
  color: #FFF;
  border-radius: 17px;
  padding: 17px 25px;
  font-weight: bold;
  font-size: 1.2rem;
  cursor: pointer;
  transition: 0.3s;
}

.green-box:hover{
  background: #14ae5c;
  color: #FFF
}

.footer{
  width: 100%;
  position: relative;;
  background: #FFF;
}

.footer a{
  color: #555;
  text-decoration: none;
  transition: 0.3s;
}

.footer a:hover{
  color: #42B9E2;
}

.footer .bx{
  position: relative;
  top: 3px;
  font-size: 1.1rem
}

.footer a .bx{
  color: #42B9E2;
  transition: 0.3s;
}

.footer a:hover .bx{
  color: #5fe074;
}

.footer-title{
  font-size: .9rem;
  font-weight: bold;
}

.footer .course a{
  color: #42B9E2;
  text-decoration: none;
  transition: 0.3s;
}

.footer .course a:hover{
  color: #5fe074
}

.footer ul li{
  line-height: 30px;
}

.badge-bluedark{
  position: relative;
  background: #42B9E2;
  color: #FFF;
  border-radius: 9px;
  padding: 5px 20px;
}

.badge-full-class{
  position: absolute;
  bottom: 40px;
  right: 0;
  padding: 0 20px;
  background: #FF5151;
  color: #FFF;
  border-top-left-radius: 20px;
  font-size: .7rem
}

.card-img, .card-img-top {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
}

.slide-read-more{
  overflow:hidden;
}
.slide-read-more-button{
  cursor: pointer;
  margin-top: 3px;
  color: #42B9E2;
  display: none;
}

.wrapMember{
  position: relative;
  width: 100%;
  top:-70px;
  /* z-index: 10 */
}

.menu-member{
  position: relative;
  width: 100%;
  background: #FFF;
  border-radius: 15px;
}

.menu-member .list-group a{
  color: #555;
  font-size: .75rem;
  ransition: 0.3s;
}

.menu-member .list-group a:hover{
  color: #5fe074;
}

.menu-member .bx{
  position: relative;
  top: 3px;
  font-size: 1.1rem
}

.menu-member a .bx{
  color: #42B9E2;
  transition: 0.3s;
}

.menu-member a:hover .bx{
  color: #5fe074;
}

.list-group-item .active{
  background:#E0F7FF;
  border-radius:8px
}

.opacity{
  opacity: .4
}

.badge-blue{
  background: #E0F7FF;
  font-size: .7rem;
  border-radius: 5px;
  color: #42B9E2
}
.badge-green{
  background: #CDFFB6;
  font-size: .7rem;
  border-radius: 5px;
  color: #555
}

/* .menu-member ul{
  list-style-type: none;
  padding: 0;
  margin: 0
}

.menu-member ul li{
  border-top: 1px solid #EEE
}

.menu-member ul li a{
  background: #E0F7FF;
  padding: 15px !important;
  color: #555;
  text-decoration: none;
  transition: 0.3s;
} */

@media(max-width:500px){
  .main-banner {
    position: relative;
    width: 100%;
    background: #e0f2fe;
    padding: 50px 0 0 0;
  }
  .main-banner img {
    position: relative;
    bottom: 0;
  }
  .title-blue,.title-white,.title-dark {
    font-size: 1.3rem;
  }
  .category-list li{
    margin: 0 2px 0 2px;
  }
  .img-banner-class{
    width: 100%;
  }
  .benefit .d-inline-block{
    display: block !important;
    margin-bottom: 10px;
  }
}

@media (min-width: 320px) and (max-width: 767px) {
    nav .container .navbar-brand {
        margin-right: 40px !important;
    }
}