@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500&display=swap');*/

@font-face {
    font-family: 'GE SS Two';
    src: url('../fonts/GESSTwoMedium-Medium.eot');
    src: url('../fonts/GESSTwoMedium-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GESSTwoMedium-Medium.woff2') format('woff2'),
        url('../fonts/GESSTwoMedium-Medium.woff') format('woff'),
        url('../fonts/GESSTwoMedium-Medium.ttf') format('truetype'),
        url('../fonts/GESSTwoMedium-Medium.svg#GESSTwoMedium-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GE SS Two Light';
    src: url('../fonts/GESSTwoLight-Light.eot');
    src: url('../fonts/GESSTwoLight-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GESSTwoLight-Light.woff2') format('woff2'),
        url('../fonts/GESSTwoLight-Light.woff') format('woff'),
        url('../fonts/GESSTwoLight-Light.ttf') format('truetype'),
        url('../fonts/GESSTwoLight-Light.svg#GESSTwoLight-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}



@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');




/*.slidermobile{padding:0 15px;}*/

.courseAddComments  ul.children {

    padding: 9px 40px;

    background: #f9f7f7;

    position: relative;

}

.courseAddComments ul.children:before {

    content: "الردود";

    top: -36px;

    display: block;

    color: #333;

    margin-bottom: 5px;

    position: relative;

    right: -35px;

}

.popup-alert {

  width: 100%;

  height: 100vh;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 9999 !important;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -ms-flex-line-pack: center;

      align-content: center;

}



.popup-alert .overlay {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background-color: rgba(0, 0, 0, 0.5);

}



.popup-alert .content {

  width: 50%;

  height: 50%;

  background-color: #fff !important;

  border-radius: 10px;

  position: relative;

  z-index: 999 !important;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

      -ms-flex-direction: column;

          flex-direction: column;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -ms-flex-line-pack: center;

      align-content: center;

}



.popup-alert .content .close-popup-alert {

  position: absolute;

  top: 20px;

  left: 20px;

  opacity: 1;

  cursor: pointer;

}



.popup-alert .content .close-popup-alert i {

  color: #115FAF;

  font-size: 20px;

}



.popup-alert .content .image-content {

  width: 100px;

  height: 100px;

  overflow: hidden;

  margin: 10px 0px;

}



.popup-alert .content .image-content img {

  width: 100%;

  height: 100%;

  -o-object-fit: contain;

     object-fit: contain;

}



.popup-alert .content .data {

  text-align: center;

}



.popup-alert .content .data h4, .popup-alert .content .data h5, .popup-alert .content .data h6, .popup-alert .content .data p {

  margin: 20px 0px;

}



.popup-alert .content .data h4 {

  color: #115FAF;

}



.popup-alert .content .data p {

  color: #6B6B6B;

}



.popup-alert .content .data h5 {

  color: #FF8B6F;

}



.popup-alert .content .data h6 {

  color: #41C0F0;

}



@media (max-width: 900px) {

  .popup-alert .content {

    width: 100% !important;

    height: 70%;

  }

  .popup-alert .content .data h4 {

    font-size: 20px !important;

  }

}





span#customnumber {

    background: red;

    width: 19px;

    height: 19px;

    display: inline-block;

    text-align: center;

    color: #fff;

    border-radius: 50%;

    line-height: 19px;

    position: absolute;
    right: 28px;
    top: -5px;
    font-size: 10px;

}

.quizQuestionBody label{    position: relative;

z-index:9;

    

}

.quizQuestionBody li.fdfdfd{margin-bottom:10px;padding-right:25px;color: #333 !important;}







.quizQuestionBody li{position:relative;}

.quizQuestionBody li i {

   padding: 15px 4px 15px 0;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;

}





.wrongasnwer {

    background: #F2DEDE;

    width: 100%;

    position: absolute;

    right: 0;

    top: 0;

    color: #a94442!important;

    font-weight:bold;

    height: 100%;

}

.trueasnwer {

    background: #D9EDF7;

    width: 100%;

    color:#3c763d;

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;
    font-weight: bold;
}

.mbdd{margin-bottom:30px;}

.correcttanswer{background:#1D71B8;color:#fff;padding:15px;margin:8px 0;}



.correctansswers {

    background: #1D71B8;

    color: #fff;

    padding: 15px;

    line-height: 1.8;

}

.specialclass{

    color:#999999!important;

    border:0;

    cursor: pointer;

    background:transparent!important;

    

}
.specialclass:hover{
    color:#000000!important;
}

img.abc {

    width: 95px!important;

    height: 95px!important;

    border-radius: 50%!important;

    margin-bottom: 10px;

}

/* fonts*/
/*
@font-face {

    font-family: JFFlat;

    src: url('../fonts/JFFlat-Regular.eot');

    src: url('../fonts/JFFlat-Regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/JFFlat-Regular.woff2') format('woff2'),

        url('../fonts/JFFlat-Regular.woff') format('woff'),

        url('../fonts/JFFlat-Regular.ttf') format('truetype'),

        url('../fonts/JFFlat-Regular.svg#JFFlat-Regular') format('svg');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: JFFlat;

    src: url('../fonts/JFFlat-Medium.eot');

    src: url('../fonts/JFFlat-Medium.eot?#iefix') format('embedded-opentype'),

        url('../fonts/JFFlat-Medium.woff2') format('woff2'),

        url('../fonts/JFFlat-Medium.woff') format('woff'),

        url('../fonts/JFFlat-Medium.ttf') format('truetype'),

        url('../fonts/JFFlat-Medium.svg#JFFlat-Medium') format('svg');

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: URW DIN Arabic;

    src: url('../fonts/URWDINArabic-Black.eot');

    src: url('../fonts/URWDINArabic-Black.eot?#iefix') format('embedded-opentype'),

        url('../fonts/URWDINArabic-Black.woff2') format('woff2'),

        url('../fonts/URWDINArabic-Black.woff') format('woff'),

        url('../fonts/URWDINArabic-Black.ttf') format('truetype'),

        url('../fonts/URWDINArabic-Black.svg#URWDINArabic-Black') format('svg');

    font-weight: 900;

    font-style: normal;

    font-display: swap;

}*/



/*==========================||---------------------------||========================*/

/*==========================||            popUp          ||========================*/

/*==========================||---------------------------||========================*/



.popUp {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

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

    z-index: 99;

    padding: 30px 20px;

    opacity: 0;

    visibility: hidden;

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

}



.popUp.show {

    opacity: 1 !important;

    visibility: visible !important;

}



.popUp .popUpHeader {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.popUp .closePopup {

    color: var(--white);

    font-size: 40px;

    cursor: pointer;

}



.popUp .closePopup:hover {

    color: var(--secondColor);

}



.popUp .popupContent {

    display: flex;

    align-items: center;

    justify-content: center;

    padding-top: 50px;

    width: 100%;

    max-width: 700px;

    margin: auto;

}



.popUp .popupContent iframe {

    width: 100%;

    height: 100%;

    min-height: 300px;

}



.centerPopup {

    display: flex;

    justify-content: center;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 99;

    padding: 160px 30px 20px;

    opacity: 0;

    visibility: hidden;

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

    overflow-y: auto;

    min-height: 100vh;

    background: rgba(0, 0, 0, .6);

}



.centerPopup.show {

    opacity: 1;

    visibility: visible;

}

.togglePopup{

    border-radius: 12px;

    padding:12px 0;

}

.pageFormBody button{

padding:10px 0;

    width: 100%;

}

.centerPopup .overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: block;

    z-index: 0;

}

.centerPopup h1{

    font-size: 18px;

}

.centerPopup .pageFormBox {

    position: relative;

    z-index: 1;

    max-width: 650px;

    background:#fff;

    min-width: 310px;

    padding: 40px 15px;

    margin: 0;

    margin-bottom: 30px;

}



@media (min-width:992px) {

    .popUp .popupContent iframe {

        min-height: 500px;

    }

}







/**** Init ****/

body {

    font-family: 'GE SS Two', sans-serif;

    overflow-x: hidden;

    direction: rtl;

    text-align: right;
    padding-top: 114px;

}



.stopScroll {

    overflow: hidden;

}



.secPadding {

    padding: 50px 0;

}



.greyBg {

    background: #FCFCFC;

}



p {

    color: #8A8A8A;

    margin: 0;

}



a {

    text-decoration: none !important;

}



ul {

    padding: 0;

    margin: 0;

    list-style: none;

}



button {

    border: 0;

}



button:focus,

button:active,

input:active,

input:focus,

select:active,

select:focus,

textarea:focus,

textarea:active {

    box-shadow: none;

    outline: 0;

}



/*==========================||---------------------------||========================*/

/*==========================||         MAIN BUTTONS      ||========================*/

/*==========================||---------------------------||========================*/



.btnBlue {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #115FAF;

    color: #fff;

    cursor: pointer;

    border: 0;

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

}



.btnBlue:hover {

    color: #fff;

    background: #41C0F0;

}



.btnGrey {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #EFEFEF;

    color: #6B6B6B;

    border: 0;

    cursor: pointer;

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

}



.btnGrey:hover {

    background: #41C0F0;

    color: #fff;

}



.btnOrange {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #41C0F0;

    color: #fff;

    cursor: pointer;

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

}



.btnOrange:hover {

    color: #fff;

    background: #878787;

}



.btnArrow i {

    margin-right: 10px;

    font-size: 20px;

    transform: translateY(2px);

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

}



.btnArrow:hover i {

    transform: translateX(-300%);

}



.btnArrow span {

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

}



.btnArrow:hover span {

    transform: translateX(-15px);

}



.btnPurple {

    background: #878787;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    cursor: pointer;

    border: 0;

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

}



.btnPurple:hover {

    background: #41C0F0;

    color: #fff;

}



.btnRed {

    background: #FF0000;

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border: 0;

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

}



.btnRed:hover {

    background: #878787;

    color: #fff;

}



.btnOpacity {

    color: #41C0F0;

    background: rgba(255, 173, 31, 0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    border: 0;

    border-radius: 6px;

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

}



.btnOpacity:hover {

    background: #41C0F0;

    color: #fff;

}



button:active,

button:hover,

button:focus {

    box-shadow: none;

    outline: 0;

}

.infoWrapper {

    margin-bottom: 40px;

    background: var(--white) 0% 0% no-repeat padding-box;

    border: 1px solid #DDDDDD;

    border-radius: 9px 9px 0 0;

}

.infoWrapperHead {

    height: 60px;

    background: #fcfcfc  0% 0% no-repeat padding-box;

    border: 1px solid #eee;

    border-radius: 9px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

    width: calc(100% + 2px);

    margin: -1px -1px 0 0;

}

.infoWrapperHead h1 {

    font-size:  20px;

    color: #333333;

    margin: 0;

}

ul.acf-actions a.acf-button.button.button-primary, .infoWrapperHead .link {

    background: #FF7100;

    color: #fff;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 35px 0 20px;

    margin: 0 0 0 -20px;

    border-radius: 9px 23px 23px 9px;

    font-size: 15px;

    cursor: pointer;

}



.infoWrapperBody {

    padding: 20px;

}



.customTable {

    border:1px solid #DDDDDD;

    border-width: 1px 1px 0 0;

    display: table;

    width: 100%;
    overflow-x: scroll;

}

.customTableRow {

    display: table;

    width: 100%;

    display: table-header-group;

}

.rowHead {

    background: #f5f9ff 0% 0% no-repeat padding-box;

    display: none;

}

.customTableRow:first-of-type .rowHead {

    display: table-row;

}



.rowHead>div, .rowBody>div {

    display: table-cell;

    border-bottom: 1px solid #DDDDDD;

    border-left: 1px solid #DDDDDD;

    text-align: center;

    vertical-align: middle;

    padding: 14px 10px;

}



.rowBody a ,

.rowHead a ,

.rowHead>div {

    color: #333333;

}



.rowHead, .rowBody {

    display: table-row;

}



.rowHead>div, .rowBody>div {

    display: table-cell;

    border-bottom: 1px solid #DDDDDD;

    border-left: 1px solid #DDDDDD;

    text-align: center;

    vertical-align: middle;

    padding: 14px 20px;

}



.rowBody a:hover {

    color: #3387ff;

}

@media screen and (max-width:767px) {

    .profileCardData p {

        font-size: 12px;

        margin-bottom: 5px;

    }



    .customTable {

        border: 0;

        display: block;

    }



    .customTableRow {

        display: flex;

        margin-bottom: 10px;

        border: 1px solid #DDDDDD;

        border-width: 1px 1px 0 0;

    }



    .customTableRow:first-of-type .rowHead,

    .rowHead {

        display: block;

        width: 40%;

    }



    .rowBody {

        display: block;

        width: 60%;

    }



    .rowHead>div,

    .rowBody>div {

            display: flex;

    align-items: center;

        padding: 5px;

        font-size: 10px;

        display: block;

        min-height: 41px;

    }

    .infoWrapperHead h1 {

    font-size: 11px;

}



ul.acf-actions a.acf-button.button.button-primary, .infoWrapperHead .link {

    padding: 10px;

    font-size: 12px;

}



.infoWrapperHead {

    height: 45px;

}



.infoWrapperBody {

    padding: 10px;

}



.customTableRow {}

}



@media (min-width:768px) and (max-width:1024px) {

    .rowHead>div,

    .rowBody>div {

        padding: 5px;

        font-size: 10px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||           HEADER          ||========================*/

/*==========================||---------------------------||========================*/



.header {

    background: url('../images/headerBg.png') no-repeat;

    background-size: cover;

    overflow: hidden;

    position: relative;

}



.header::before {

    content: url('../images/shape2.png');

    position: absolute;

    bottom: -35px;

    left: -43px;

    z-index: 0;

    transform: rotate(270deg);

}



.header::after {

    content: url('../images/shape4.png');

    position: absolute;

    bottom: 0;

    right: -35px;

    z-index: 0;

}



.headerBox {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 0;

}



.logo a {

    display: inline-block;

}



.navMenu ul {

    display: flex;

}

.navMenu .menu-item-has-children ul.sub-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    background: #f9f4eb;
    padding: 14px;
    border-radius: 10px;
    width: 230px;
    z-index: 9999;
    /*top: 40px;*/

}

.navMenu .menu-item-has-children ul.sub-menu li{
    padding: 5px 2px;

}

.navMenu .menu-item-has-children{
    position: relative;
}

.navMenu .menu-item-has-children:hover ul.sub-menu{
    display: flex;    
}


.navMenu a {    
    color: #585858;
    font-size: 16px;
    line-height: 30px;
    margin-left: 15px;
    font-weight: 500;

}



.navMenu a:hover {

    color: #41C0F0;

}



.openSearch {

    height: 35px;

    width: 35px;

    border-radius: 50%;

    font-size: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    /*margin-left: 10px;*/

}



.openSearch:hover {

    transform: translateY(-4px);

    background: #41C0F0;

    color: #fff;

}



.searchPopup {

    opacity: 0;

    visibility: hidden;

    width: 0;

    height: 0;

    position: fixed;

    top: 0;

    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

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

    border-radius: 50%;

}



.searchPopup.show {

    opacity: 1;

    visibility: visible;

    background: #EFEFEF;

    width: 100vw;

    height: 100vh;

    z-index: 9;

    border-radius: 0;

}



.searchPopup .close {

    position: absolute;

    top: 19px;

    right: 40px;

    cursor: pointer;

    font-size: 40px;

}



.searchPopup .close:hover {

    color: #41C0F0;

    opacity: 1;

}



.searchForm {

    width: 100%;

    max-width: 600px;

}



.searchBox {

    width: 100%;

    max-width: 600px;

    height: 55px;

    background: #fff;

    display: flex;

    padding: 5px;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: 0px 3px 6px #00000029;

}



.searchBox input {

    width: calc(100% - 70px);

    padding: 0 15px;

    border-radius: inherit;

    border: 0;

    font-size: 17px;

    text-transform: capitalize;

    font-weight: 500;

}



.searchBox .greyBtn {

    width: 100px;

}



.searchBox .btnGrey {

    width: 70px;

    border-radius: 25px;

    font-size: 20px;

}



.leftSide {

    display: flex;

    align-items: center;

}



.loginActions {

    display: flex;

    align-items: center;

}



.loginActions a {

    width: 100px;

    height: 40px;

    border-radius: 8px;

    font-size: 11px;

    line-height: 33px;

    font-weight: 500;

    margin-right: 10px;

}



.user {

    background: rgba(255, 173, 31, .06);

    border-radius: 18px;

    height: 64px;

    padding: 0 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: pointer;

}



.user .userIcon {

    width: 40px;

    height: 40px;

    border: 2px dashed #41C0F0;

    border-radius: 50%;

    /*margin-left: 12px;*/
    position: relative;

}



.user .userIcon img {

    border-radius: inherit;

    width: 100%;

    height: 100%;

}



.userText {
    color: #404040;
    font-size: 10px;
    font-weight: 500;
    /*margin-left: 10px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.dropToggle {

    position: relative;

}



.dropList {

    background: #fff;

    width: 100%;

    min-width: 230px;

    position: absolute;

    top: 100%;

    left: 0;

    z-index: 5;

    border-radius: 0px 0px 7px 7px;

    padding: 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(30px);

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

}



.dropList.show {

    visibility: visible;

    opacity: 1;

    transform: translateY(0);

}



.dropList a {

    display: block;

    border-bottom: 1px solid #F3F3F3;

    font-size: 13px;

    line-height: 55px;

    font-weight: 500;

    padding: 0 10px;

    color: #484848;

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

}



.dropList a:last-of-type {

    border: 0;

}



.dropList a:hover {

    background: #41C0F0;

    color: #fff;

}



.dropList a img {

    width: 17px;

    height: 17px;

    margin-left: 10px;

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

}



.dropList a:hover img {

    filter: brightness(0) invert(1);

}



.loginMobile {

    display: none;

}



.loginMobileIcon {

    width: 30px;

    height: 30px;

    margin: 0 0 0 15px;

    border-radius: 50%;

}





.mobile {

    display: none;

}



.headerData {

    position: relative;

    z-index: 1;

}



.headerData h1 {

    font-size: 25px;

    font-family: 'GE SS Two';

    margin-bottom: 20px;

}


.headerData h2 {

    font-size: 23px;

    /*font-family: 'GE SS Two';
*/
    margin-bottom: 20px;
    color: #1D71B8;

}

.headerData .headerVector img

 {

     width: 100%;

     height: 270px;

     object-fit: contain;

 }

.headerData p {

    font-size: 16px;

    line-height: 28px;

    margin-bottom: 40px;

}



.headerData .btnOrange {

    width: fit-content;

    height: 45px;

    padding: 0 20px;

    border-radius: 10px;

    font-size: 14px;

    line-height: 30px;

}





@media screen and (max-width:425px) {

    .headerBox {

        padding:15px;

    }



    .logo {

        max-width: 45px;

    }



    .dropList {

        min-width: 120px;

        top: 100%;

        margin-top: 10px;

        left: calc(-50% - 8px);

        border-radius: 7px;

    }



    .dropList::before {

        content: "";

        border-left: 4px solid transparent;

        border-right: 4px solid transparent;

        border-bottom: 7px solid #fff;

        position: absolute;

        top: -7px;

        right: calc(50% - 2px);

    }



    .dropList a {

        font-size: 10px;

        line-height: 35px;

        padding: 0 12px;

    }

   /* .headerBox {

    display: table!important;

        

    }*/

.logo {

    /*max-width: 70px!important;*/

    margin: 0  12px;

}

    .loginMobile {

        /*display: block;*/

    }



    .loginActions {

        /*display: none;*/

    }



    .user {

        padding: 0;

        height: 35px;

        width: 35px;

        margin-left: 10px;

    }



    .user .userIcon {

        margin: 0;

        width: 35px;

        height: 35px;

        border: 0;

    }



    .userText {

        display: none;

    }



    .user i {

        display: none;

    }



    .dropList a img {

        margin-left: 2px;

    }



    .user .dropList {

        left: calc(-50% - 24px);

    }



   /* .headerData .row {

        flex-direction: column-reverse;

    }
*/


    .headerVector img {

        max-height: 120px;

        display: block;

        margin: 0 auto 10px;

    }

}



@media screen and (max-width:768px) {

    .openSearch {

        height: 35px;

        width: 35px;

        border-radius: 50%;

        padding: 0;

        font-size: 15px;

    }



    .searchBox {

        height: 45px;

    }



    .searchBox input {

        font-size: 12px;

        width: calc(100% - 35px);

        padding: 0 10px;

    }



    .searchBox .btnGrey {

        width: 35px;

        height: 35px;

        font-size: 15px;

    }



    .searchPopup .close {

        right: 10px;

        font-size: 25px;

    }



    .header {

        background-size: contain;

    }



    .headerData {

        padding: 10px 0;

    }



    .headerData h1 {

        font-size: 14px;

        line-height: 30px;

        margin-bottom: 3px;

    }



    .headerData p {

        font-size: 12px;

        line-height: 24px;

        margin-bottom: 10px;

    }



    .headerData .btnOrange {

        height: 35px;

        font-size: 12px;

        padding: 0 13px;

        margin-bottom: 20px;

    }

}



@media (min-width:575px) and (max-width:1024px) {

    .headerBox {

        padding: 20px 0;

    }



    .logo {

        max-width: 55px;

    }



    .loginActions a {

        width: 90px;

        height: 35px;

        border-radius: 7px;

        font-size: 10px;

        margin: 0 0 0 15px;

    }



    .user {

        border-radius: 10px;

        height: 45px;

        padding: 0 12px;

        margin-left: 20px;

    }



    .user .userIcon {

        width: 35px;

        height: 35px;

        border-width: 1px;

    }



    .headerData {

        padding: 30px 0;

    }

}



@media screen and (max-width:1024px) {

    .navMenu {

        position: fixed;

        top: 0;

        right: 0;

        width: 240px;

        height: 100vh;

        background: #fcfcfc;

        z-index: 999;

        padding: 30px 0;

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

        transform: translateX(100%);
        overflow-y: scroll;

    }



    .navMenu.show {

        transform: translateX(0);

    }



    .navMenu ul {

        flex-direction: column;

    }



    .navMenu a {

        display: block;

        margin: 8px 0;

        padding: 0 20px;

        font-size: 13px;

    }

    .navMenu .menu-item-has-children ul.sub-menu{
        position: relative;
    }


    .navMenu a::after {

        width: 4px;

        height: 100%;

        top: 0;

    }



    .mobile {

        display: block;

    }



    .navOverlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100vw;

        height: 100vh;

        background: rgba(0, 0, 0, .85);

        z-index: 998;

        opacity: 0;

        visibility: hidden;

    }



    .navOverlay.show {

        opacity: 1 !important;

        visibility: visible !important;

    }



    .menuBtn {

        width: 20px;

        height: 16px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

        align-items: flex-end;

        margin: 0 10px 0 0;

        cursor: pointer;

    }



    .menuBtn span {

        width: 100%;

        background: #585858;

        height: 2px;

        display: block;

        border-radius: 5px;

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

    }



    .menuBtn span:nth-child(2) {

        width: 75%;

    }



    .menuBtn:hover span {

        width: 100%;

        background: #878787;

    }

}



@media (min-width:992px) and (max-width:1200px) {

    .headerData h1 {

        font-size: 25px;

        line-height: 40px;

        margin-bottom: 15px;

    }

}



@media (min-width:1200px) {

    .user {

        min-width: 170px;

    }



    .dropList {

        left: 0;

        /*right: 15px;*/

        width: calc(100% - 30px);

    }

}



/*==========================||---------------------------||========================*/

/*==========================||         Container         ||========================*/

/*==========================||---------------------------||========================*/



@media (min-width: 1300px) {

    .container {

        max-width: 1200px;

    }

}



@media (min-width: 1400px) {

    .container {

        max-width: 1300px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||        COURSES CATS       ||========================*/

/*==========================||---------------------------||========================*/



.coursesCats {

    position: relative;

}



.coursesCatsss::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 90px;

    background: #fff;

    z-index: 0;

}



.secHeader {

    text-align: center;

    margin-bottom: 50px;

}



.secHeader h2 {

    font-size: 40px;

    line-height: 70px;

    font-weight: 500;

}



.secHeader p {

    font-size: 16px;

    line-height: 28px;

    color: #929292;

}



.secHeaderWhite {

    color: #fff;

}



.secHeaderWhite p {

    color: inherit;

}



.courseCat {

    background: #fff;

    box-shadow: 0px 0px 23px #ACACAC29;

    /*padding: 20px;*/

    text-align: center;

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

    cursor: pointer;

    position: relative;

    z-index: 1;

}



.courseCat .icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    margin: 0 auto 20px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 15px;

}


.courseCat img {
   
    max-width: 100%;
    /*height: 150px;*/
}

.courseCat .courseText {
   padding:10px; 
}



.courseCat .icon::after {

    content: '';

    width: 100%;

    height: 100%;

    position: absolute;

    left: -5px;

    border: 1px solid transparent;

    border-radius: inherit;

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

}



.courseCat h3 {

    font-size: 17px;

    line-height: 30px;

    font-weight: 500;

    color: #1C1C1C;

}



.courseCat h5 {

    font-size: 14px;

    line-height: 30px;

    color: #6B6B6B;

    margin: 0;

}



.courseCat1 .icon {

    background: #FF8B6F;

}



.courseCat1 .icon::after {

    border-color: #FF8B6F;

}



.courseCat2 .icon {

    background: #54C9A4;

}



.courseCat2 .icon::after {

    border-color: #54C9A4;

}



.courseCat3 .icon {

    background: #878787;

}



.courseCat3 .icon::after {

    border-color: #878787;

}



.courseCat4 .icon {

    background: #41C0F0;

}



.courseCat4 .icon::after {

    border-color: #41C0F0;

}



.courseCat:hover {

    transform: translateY(-10px);

}



.courseCat:hover .icon::after {

    left: 0;

}



@media screen and (max-width:768px) {

    .secPadding {

        padding: 30px 0;

    }



    .secHeader {

        margin-bottom: 20px;

    }



    .secHeader h2 {

        font-size: 18px;

        line-height: 30px;

    }



    .secHeader p {

        font-size: 13px;

        line-height: 24px;

    }



    .courseCat {

        margin-bottom: 15px;

        padding: 15px 10px;

    }



    .courseCat .icon {

        width: 50px;

        height: 50px;

        margin: 0 auto 10px;

    }



    .courseCat h3 {

        font-size: 14px;

    }

}



@media (min-width:575px) and (max-width:1024px) {

    .col-12 {

        padding: 0 5px;

    }

}



@media (min-width:769px) and (max-width:992px) {

    .secHeader h2 {

        font-size: 27px;

        line-height: 30px;

        font-weight: 500;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||       RECENT COURSES      ||========================*/

/*==========================||---------------------------||========================*/



.course {

    background: #FFFFFF 0% 0% no-repeat padding-box;

    box-shadow: 0px 0px 12px #0000000F;

    border-radius: 13px 13px 5px 5px;

    overflow: hidden;

    padding: 7px;

    margin-bottom: 30px;

}



.coursePic {

    width: 100%;

    border-radius: 13px 13px 5px 5px;

    overflow: hidden;

    /*height: 250px;*/

}



.coursePic img {
    max-width: 100%; 
    /*max-height: 180px!important;*/
    display: block;
    margin: 0 auto;
}



.recentCourses .owl-item {

    padding: 10px;

}



.courseBody {

    padding: 15px 10px 5px;

}



.courseTrainer {

    display: flex;

    align-items: center;

    font-size: 14px;

    line-height: 30px;

    margin-bottom: 10px;

}



.courseTrainerAvatar {

    width: 33px;

    height: 33px;

    border-radius: 50%;

    margin-left: 10px;

}



.courseTrainer label {

    margin: 0 0 0 10px;

    color: #565656;

}



.courseTrainer a {

    color: #41C0F0;

}



.courseTrainer a:hover {

    color: #878787;

}



.course h2 {

    color: #565656;

    font-size: 17px;

    line-height: 30px;

    font-weight: 500;

    margin-bottom: 0;

}
.course h4{
    margin-bottom: 0
}
.course h4 a{

    color: #1D71B8;
    font-size: 14px;   
}



.course p {

    color: #929292;

    font-size: 12px;

    line-height: 20px;

}



.courseCounts {

    display: flex;

    align-items: center;

    padding: 10px 0;

}



.courseCount {

    display: flex;

    align-items: center;

    height: 17px;

    position: relative;

}



.courseCount::after {

    content: '';

    background: #DDDDDD;

    display: inline-block;

    width: 1px;

    height: 17px;

    margin: 0 10px;

}



.courseCount:last-of-type::after {

    display: none;

}



.courseCount img {

    margin-left: 7px;

}



.courseCount h5 {

    color: #929292;

    font-size: 12px;

    margin: 0;
    margin-left: 5px;
}



.courseFooter {

    border-top: 1px solid #EFEFEF;

    padding: 12px 0 0 0;

}



.course .btnGrey {

    max-width: 257px;

    height: 40px;

    border-radius: 8px;

    margin: auto;

    font-size: 12px;

    font-weight: 500;

}



.course .btnGrey img {

    margin-right: 10px;

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

}



.course .btnGrey:hover img {

    filter: brightness(0) invert(1);

}



.owlNav .owl-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 45px;

}



.owlNav .owl-nav>div {

    margin: 0 15px;

    color: #BFBFBF;

    position: relative;

}



.owlNav .owl-nav>div:hover {

    color: #878787;

}



.owlNav .owl-nav>div::before {

    content: '';

    position: absolute;

    width: 30px;

    background: #878787;

    height: 3px;

    top: calc(50% - 2px);

    opacity: 0;

    visibility: hidden;

}



.owlNav .owl-prev::before {

    left: -15px;

}



.owlNav .owl-next::before {

    right: -15px;

}



.owlNav .owl-nav>div:hover::before {

    opacity: 1;

    visibility: visible;

}



@media screen and (max-width:768px) {

    .course {

        margin-bottom: 20px;

    }



    .coursePic {

        height: 200px;

    }



    .courseBody {

        padding: 10px 5px 5px;

    }



    .course h2 {

        font-size: 13px;

        margin-bottom: 0px;

    }



    .courseTrainer {

        margin-bottom: 3px;

        font-size: 12px;

    }



    .course p {

        font-size: 11px;

    }



    .courseCounts {

        padding: 10px 0;

    }



    .courseCount h5 {

        font-size: 10px;

    }



    .courseCount::after {

        height: 12px;

        margin: 0 7px;

    }



    .course .btnGrey {

        font-size: 10px;

    }



    .owlNav .owl-nav {

        font-size: 25px;

    }



    .owlNav .owl-nav>div::before {

        height: 2px;

        top: calc(50% - 1px);

        width: 22px;

    }

}



@media (min-width:1024px) {

    .course p {

        min-height: 65px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||            WHY US         ||========================*/

/*==========================||---------------------------||========================*/



.whyUs {

    background: url('../images/whyBg.png') no-repeat;

    background-size: cover;

    overflow: hidden;

    padding: 40px 0 20px;

}



.whyBox {

    position: relative;

    background: #3C96C7 0% 0% no-repeat padding-box;

    border-radius: 17px;

    color: #fff;

    text-align: center;

    padding: 20px;

    margin-bottom: 20px;

    cursor: pointer;

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

}



.whyBox .icon {

    width: 50px;

    height: 50px;

    margin: 10px auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.whyBox h3 {

    font-size: 22px;

    line-height: 38px;

    font-weight: 500;

    margin-bottom: 10px;

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

}



.whyBox p {

    font-size: 13px;

    line-height: 23px;

    color: inherit;

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

}



.whyBox:hover {

    background: #115FAF;

    transform: scale(1.15);

    transform: scale(1.20);

    z-index: 1;

}



@media screen and (max-width:992px) {

    .whyBox {

        padding: 10px;

        margin-bottom: 15px;

    }



    .whyBox .icon {

        width: 40px;

        height: 40px;

        margin: 10px auto;

    }



    .whyBox .icon img {

        max-height: 100%;

    }



    .whyBox h3 {

        font-size: 13px;

        line-height: 25px;

        margin: 0;

    }



    .whyBox p {

        font-size: 12px;

    }

}



@media (min-width:1024px) and (max-width:1199px) {

    .whyBox h3 {

        font-size: 17px;

        line-height: 30px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||           TRAINERS        ||========================*/

/*==========================||---------------------------||========================*/



.trainer {

    position: relative;

    border-radius: 17px;

    margin-bottom: 30px;

}



.trainer .trainerAvatar {

    border-radius: inherit;

    border: 1px solid #f2f2f2;

}



.trainer img {

    width: 100%;

    border-radius: inherit;

}



.trainer .trainerHover {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 20px 20px 0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    border-radius: inherit;

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

}



.trainer .trainerData {

    background: #FFFFFF 0% 0% no-repeat padding-box;

    box-shadow: 0px 3px 11px #B8B8B829;

    border-radius: 8px;

    padding: 20px 15px;

    text-align: center;

    width: 100%;

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

    margin-bottom: -20px;

}



.trainer h6 {

    color: #565656;

    font-size: 18px;

    line-height: 38px;

    font-weight: 500;

}



.trainer h6:hover {

    color: #41C0F0;

}



.trainer p {

    font-size: 13px;

    line-height: 23px;

}



.trainer:hover .trainerHover {

    height: 100%;

    background: rgba(0, 0, 0, .7);

}



.trainer:hover .trainerData {

    margin-bottom: 20px;

}



@media screen and (max-width:992px) {

    .trainer {

        margin-bottom: 40px;

    }



    .trainer .trainerAvatar {

        height: 250px;

    }



    .trainer .trainerAvatar img {

        max-height: 100%;

    }



    .trainer .trainerData {

        padding: 10px 10px 20px;

    }



    .trainer a {

        font-size: 14px;

    }



    .trainer p {

        font-size: 12px;

    }

}



@media (min-width:1024px) {

    .trainer img {

        height: 290px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||        RECENT BLOGS       ||========================*/

/*==========================||---------------------------||========================*/



div.blog {

    margin-bottom: 30px;

}



div.blog .blogHead {

    position: relative;

    height: 276px;

    overflow: hidden;

}



div.blog .blogHead img {

    width: 100%;

    /*height: 100%;*/

}



.blogDate {

    width: 62px;

    height: 62px;

    background: rgba(0, 0, 0, .79);

    border-radius: 5px;

    position: absolute;

    top: 20px;

    right: 20px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 9px;

    text-align: center;

    font-size: 13px;

    line-height: 19px;

}



.blogDate::before {

    content: '';

    border: 1px solid #34A949;

    width: 52px;

    height: 52px;

    position: absolute;

    top: 5px;

    right: 5px;

    border-radius: inherit;

    opacity: 0.79;

}



div.blog .blogHover {

    position: absolute;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, .79);

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

}



div.blog .blogLink {

    width: 50px;

    height: 50px;

    background: #41C0F0 0% 0% no-repeat padding-box;

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 23px;

    transform: translateY(400%);

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

}



div.blog .blogLink:hover {

    background: #878787;

    color: #fff;

}



.recentBlogs  .blog:hover .blogHover {

    opacity: 1;

    visibility: visible;

}



.blog:hover .blogLink {

    transform: translateY(0);

}



.blogCounts {

    display: flex;

    align-items: center;

    padding: 20px 0;

}



.blogCount {

    display: flex;

    align-items: center;

    height: 17px;

    position: relative;

}



.blogCount::after {

    content: '';

    background: #DDDDDD;

    display: inline-block;

    width: 1px;

    height: 17px;

    margin: 0 10px;

}



.blogCount:last-of-type::after {

    display: none;

}



.blogCount img {

    margin-left: 7px;

}



.blogCount span {

    color: #929292;

    font-size: 13px;

    margin: 0;

}



div.blog h3 {

    color: #565656;

    font-size: 20px;

    line-height: 34px;

    font-weight: 500;

    margin-bottom: 12px;

}



div.blog p {

    color: #929292;

    font-size: 13px;

    line-height: 23px;

}



div.blog p a {

    color: #41C0F0;

    margin-right: 5px;

}



div.blog p a:hover {

    color: #878787;

}



@media screen and (max-width:768px) {

    div.blog {

        margin-bottom: 20px;

    }



    div.blog .blogHead {

        height: 200px;

    }



    .blogDate {

        width: 45px;

        height: 45px;

        font-size: 10px;

        line-height: 13px;

        top: 12px;

        right: 12px;

    }



    .blogDate::before {

        top: 3px;

        right: 3px;

        width: 39px;

        height: 39px;

    }



    .blogCounts {

        padding: 10px 0 3px;

    }



    .blogCount span {

        font-size: 11px;

    }



    .blogCount img {

        max-width: 11px;

    }



    .blogCount::after {

        height: 10px;

        margin: 0 6px;

    }



    div.blog h3 {

        font-size: 14px;

        line-height: 25px;

        margin-bottom: 5px;

    }



    div.blog p {

        font-size: 12px;

        line-height: 20px;

    }



    div.blog .blogLink {

        width: 40px;
 
        height: 40px;

        font-size: 20px;

    }

}



@media (min-width:992px) and (max-width:1024px) {

    .blogCounts {

        padding: 10px 0;

    }



    div.blog h3 {

        font-size: 16px;

        line-height: 30px;

        margin-bottom: 0;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||            CONTACT        ||========================*/

/*==========================||---------------------------||========================*/



.contact {

    background: url('../images/contactBg.png') no-repeat;

    background-size: cover;

}



.contactBox {

    max-width: 750px;

    margin: auto;

}



.field {

    margin-bottom: 30px;

}



.form-control {

    background: #FFFFFF 0% 0% no-repeat padding-box;

    border-radius: 12px;

    border: 0;

    height: 50px;

    color: #585858;

    direction: rtl;

    text-align: right;

    font-size: 14px;

}



.form-control::placeholder {

    color: #ABABAB;

    font-size: 14px;

}



.form-control:focus {

    color: #585858;

    border-color: #ffc107;

    outline: 0;

    box-shadow: 0 0 0 0.2rem #ffc1075e;

}



textarea.form-control {

    height: 155px;

    resize: none;

    padding: 15px;

}



.contactBox .btnOrange {

    height: 50px;

    width: 156px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 500;

    margin: 0 auto;

}



@media screen and (max-width:768px) {

    .field {

        margin-bottom: 15px;

    }



    .form-control {

        height: 40px;

        font-size: 13px;

    }



    .form-control::placeholder {

        font-size: 12px;

    }



    textarea.form-control {

        height: 140px;

        padding: 10px;

    }



    .contactBox .btnOrange {

        height: 40px;

        width: 110px;

        font-size: 12px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||         NEWSLETTER        ||========================*/

/*==========================||---------------------------||========================*/



.newsletterBox {

    padding: 20px 0 40px;

    text-align: center;

}



.newsletterBox h1 {

    color: #565656;

    font-size: 35px;

    line-height: 61px;

    font-weight: 500;

}



.newsletterBox h3 {

    color: #929292;

    font-size: 15px;

    line-height: 28px;

}



.newsletterForm {

    margin: 30px auto 0;

    height: 55px;

    background: #FCFCFC 0% 0% no-repeat padding-box;

    border-radius: 5px;

    max-width: 630px;

    overflow: hidden;

    display: flex;

}



.newsletterForm input {

    width: calc(100% - 125px);

    border: 0;

    background: transparent;

    padding: 0 15px;

    font-size: 14px;

}



.newsletterForm .btnOrange {

    width: 125px;

    height: 100%;

    border-radius: 9px;

}



.newsletterForm input::placeholder {

    color: #C8C8C8;

}



@media screen and (max-width:768px) {

    .newsletterBox {

        padding: 0;

    }



    .newsletterBox h1 {

        font-size: 14px;

        line-height: 35px;

    }



    .newsletterBox h3 {

        font-size: 12px;

    }



    .newsletterForm {

        height: 40px;

        max-width: 450px;

    }



    .newsletterForm .btnOrange {

        width: 60px;

        font-size: 12px;

    }



    .newsletterForm input {

        width: calc(100% - 60px);

        font-size: 12px;

        padding: 0 10px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||            FOOTER         ||========================*/

/*==========================||---------------------------||========================*/



.footer {

    background: #353535 0% 0% no-repeat padding-box;

    padding: 40px 0 0 0;

    color: #fff;

}



.footer .logo {

    margin: 0 0 20px 0;

}



.footer p {

    font-size: 12px;

    line-height: 28px;

    color: inherit;

    display: flex;

    align-items: baseline;

    margin-bottom: 15px;

}



.footer p a {

    color: #fff;

}



.footer p a:hover {

    color: #41C0F0;

}



.footerBlocks {

    display: flex;

}



.footerBlock {

    width: 50%;

}



.footer h3 {

    font-size: 20px;

    line-height: 28px;

    margin-bottom: 20px;

}



.footer a {

    color: inherit;

    display: block;

}



.footerBlock a {

    font-size: 12px;

    line-height: 45px;

}



.footerBlock a:hover {

    color: #41C0F0;

}



.footer p img {

    margin-left: 10px;

}



.social {

    display: flex;

    align-items: center;

}



.social a {

    width: 30px;

    height: 30px;

    opacity: 1;

    margin-left: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

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

}



.social a:last-of-type {

    margin: 0;

}



.google {

    background: #DD4B39;

}



.twitter {

    background: #50ABF1;

}



.facebook {

    background: #4267B2;

}



.youtube {

    background: #DD4B39;

}

.whatsapp {

    background: #6dbe0a;

}


.instagram {

    background: #878787;

}


.social a:hover {

    transform: translateY(-5px);

}



.copyright {

    border-top: 1px solid #5f5f5f;

    margin: 20px 0 0 0;

    padding: 15px 0;

    display: flex;

    justify-content: center;

}



.copyright p {

    margin: 0;

}



.copyright a {

    color: #878787;

    margin-right: 5px;

}



.copyright a:hover {

    color: #41C0F0;

}



@media screen and (max-width:768px) {

    .footer {

        padding: 20px 0 0 0;

    }



    .footer .logo {

        margin: 0 0 10px 0;

    }



    .footer p {

        font-size: 11px;

        line-height: 23px;

        margin-bottom: 5px;

    }



    .footerBlock {

        margin: 10px 0;

    }



    .footer h3 {

        font-size: 12px;

        margin-bottom: 0;

    }



    .footerBlock a {

        font-size: 11px;

        line-height: 30px;

    }



    .social {

        margin: 10px 0 0 0;

    }



    .social a {

        width: 25px;

        height: 25px;

    }



    .copyright {

        padding: 8px 0;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||        SignUp - Login     ||========================*/

/*==========================||---------------------------||========================*/

.internalHeader {

    background: transparent linear-gradient(279deg, #F8F8F800 0%, #F8F8F857 41%, #F8F8F8 100%) 0% 0% no-repeat padding-box;

    border-radius: 0px 0px 0px 152px;

    overflow: visible !important;

}



.internalHeader::before,

.internalHeader::after {

    display: none;

}



.pageInfo {

    text-align: center;

}



.pageInfo h1 {

    color: #6B6B6B;

    font-size: 28px;

    line-height: 50px;

    font-weight: 500;

}



.bradCrumbBox {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 5px 0 40px;

}



.breadcrumb {

    background: transparent;

    padding: 0;

    margin: 0;

    text-transform: capitalize;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

}



.bradCrumbBox,

.bradCrumbBox a {

    color: #6B6B6B;

    font-size: 14px;

    line-height: 30px;

    font-weight: 500;

}



.breadcrumb-item.active {

    color: #41C0F0;

}



.bradCrumbBox a:hover {

    color: #41C0F0;

}



.usersTypes {

    display: flex;

    align-items: center;

    justify-content: center;

}



.userType {

    width: calc(50% - 10px);

    max-width: 320px;

    height: 264px;

    background: #FCFCFC 0% 0% no-repeat padding-box;

    border-radius: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 12px;

}



.userType:first-of-type {

    margin-left: 20px;

}



.userType img {

    max-width: 90px;

    margin-bottom: 25px;

}



.userType h3 {

    color: #6B6B6B;

    font-size: 20px;

    line-height: 44px;

}



.userType:hover {

    background: rgba(255, 173, 31, .06);

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

}



.userType:hover h3 {

    color: #41C0F0;

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

}



.loginBox {

    border: 1px solid #EEEEEE;

    margin: 15px 0;

}



.loginBox .row {

    margin: 0;

}



.loginBox .col-12 {

    padding: 0;

}



.loginFormBox {

    padding: 40px 7%;

}



.loginFormHead {

    text-align: center;

    margin-bottom: 20px;

}



.loginFormHead h3 {

    color: #565656;

    font-size: 20px;

    line-height: 30px;

    font-weight: 500;

}



.loginFormHead p {

    color: #929292;

    font-size: 12px;

    line-height: 20px;

    max-width: 360px;

    margin: auto;

}



.fieldIcon {

    position: relative;

}



.fieldIcon .form-control {

    padding-left: 40px;

}



.fieldIcon span {

    width: 40px;

    height: 50px;

    font-size: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    left: 0;

    bottom: 0;

    color: #BFBFBF;

    cursor: pointer;

}



.fieldIcon span:hover {

    color: #41C0F0;

}



.loginBox .field label {

    color: #6B6B6B;

    font-size: 16px;

    line-height: 28px;

    font-weight: 500;

}



.loginBox .form-control {

    background: #FBFBFB;

    font-size: 14px;

}



.loginBox .from-control::placeholder {

    color: #BFBFBF;

}



.loginBox .btnOrange {

    height: 55px;

    width: 100%;

    border-radius: 12px;

}



.formFooter {

    padding: 15px 0 0 0;

    text-align: center;

}



.formFooter a,

.formFooter p {

    color: #8A8A8A;

    font-size: 14px;

    line-height: 35px;

    font-weight: 500;

}



.formFooter p a,

.formFooter a:hover {

    color: #41C0F0;

}



.formFooter p a:hover {

    color: #878787;

}



.loginVector {

    height: 100%;

}



.loginVector img {

    width: 100%;

    height: 100%;

}



.required label {

    position: relative;

}


/*
.required label::after {

    content: '*';

    color: #FF0000;

}*/



.flexInput {

    display: flex;

    justify-content: space-between;

}



.flexInput .inputSmall {

    width: 85px;

    text-align: center;

    margin-right: 10px;

}



.signUpMobileVector {

    display: none;

}



.customSelect {

    position: relative;

}



.customSelect select.form-control:not([size]):not([multiple]) {

    height: 50px;

    appearance: inherit;

}



.customSelect::after {

    content: "";

    border: solid #BFBFBF;

    border-width: 0 1px 1px 0;

    width: 8px;

    height: 8px;

    display: block;

    position: absolute;

    top: 19px;

    left: 15px;

    transform: rotate(45deg);

    -webkit-transform: rotate(45deg);

}



option:disabled {

    color: #BFBFBF;

}



.customSelect option:hover {

    background: #41C0F0;

}



.signUpPolicy {

    padding: 35px 20px 30px;

}



.signUpPolicy h4 {

    color: #1C1C1C;

    font-size: 20px;

    line-height: 34px;

    font-weight: 500;

    position: relative;

}



.signUpPolicy h4::before {

    content: "";

    background: #41C0F0;

    width: 5px;

    height: 21px;

    display: inline-block;

    position: absolute;

    right: -18px;

    top: 6px;

    border-radius: 5px;

}



.signUpPolicy p {

    font-size: 16px;

    line-height: 30px;

    color: #929292;

}



.customCheckBox {

    font-size: 16px;

    position: relative;

    margin-bottom: 20px;

}



.customCheckBox input {

    position: absolute;

    top: 0;

    right: 0;

    width: 20px;

    height: 100%;

    opacity: 0;

    z-index: 1;

    cursor: pointer;

}



.customCheckBox label {

    font-size: 13px;

    line-height: 28px;

    color: #8A8A8A;

    margin: 0;

    padding-right: 25px;

    position: relative;

}



.customCheckBox a {

    color: #41C0F0;

}



.customCheckBox label::before {

    content: '';

    border: 1px solid #e9ecef;

    border-radius: 3px;

    width: 16px;

    height: 16px;

    position: absolute;

    top: 4px;

    right: 0;

}



.customCheckBox input:checked+label::before,

.customCheckBox:hover input+label::before {

    border-color: #41C0F0;

}



.customCheckBox label::after {

    content: '';

    position: absolute;

    right: 6px;

    top: 5px;

    width: 5px;

    height: 10px;

    border: solid white;

    border-width: 0 1px 1px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

    display: block;

}



.customCheckBox input:checked+label::after {

    border-color: #41C0F0;

}



@media screen and (max-width:575px) {

    .loginBox .row {

        flex-direction: column-reverse;

    }



    .signUpPcVector {

        display: none;

    }



    .signUpMobileVector {

        display: block;

    }



    .signUpPolicy .loginBox .row {

        flex-direction: column-reverse;

    }

}



@media screen and (max-width:768px) {

    .internalHeader {

        border-radius: 0 0 0 25px;

    }



    .pageInfo {

        padding: 30px 0 0 0;

    }



    .pageInfo h1 {

        font-size: 16px;

        line-height: 35px;

    }



    .bradCrumbBox {

        padding: 0 0 20px 0;

    }



    .bradCrumbBox,

    .bradCrumbBox a {

        font-size: 11px;

    }



    .breadcrumb-item+.breadcrumb-item::before {

        padding: 0 3px;

    }



    .userType {

        width: calc(50% - 5px);

        border-radius: 10px;

        padding: 10px;

        height: 130px;

    }



    .userType:first-of-type {

        margin-left: 10px;

    }



    .userType img {

        max-width: 60px;

        margin-bottom: 10px;

    }



    .userType h3 {

        font-size: 13px;

        margin: 0;

        line-height: 30px;

    }



    .loginBox {

        margin: 0;

    }



    .loginFormBox {

        padding: 10px;

    }



    .loginFormHead h3 {

        font-size: 15px;

    }



    .loginFormHead p {

        font-size: 11px;

    }



    .loginBox .field label {

        font-size: 12px;

    }



    .loginBox .form-control,

    .loginBox .customSelect select.form-control:not([size]):not([multiple]) {

        height: 40px;

        border-radius: 0;

        font-size: 12px;

    }



    .customSelect::after {

        width: 6px;

        height: 6px;

        top: 16px;

        left: 11px;

    }



    .fieldIcon span {

        height: 40px;

        font-size: 15px;

    }



    .loginBox .btnOrange {

        height: 50px;

        margin-top: 20px;

    }



    .formFooter a,

    .formFooter p {

        font-size: 12px;

    }



    .signUpPolicy {

        padding: 15px 10px;

    }



    .signUpPolicy h4 {

        font-size: 13px;

        line-height: 25px;

    }



    .signUpPolicy h4::before {

        top: 2px;

        right: -13px;

    }



    .signUpPolicy p {

        font-size: 12px;

        line-height: 22px;

    }

}



@media (min-width:992px) {

    .signUpPage .secHeader h2 {

        font-size: 27px;

        line-height: 50px;

    }

}



@media (min-width: 1200px) {

    .signUpPage .container {

        max-width: 1140px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||        Trainer Page       ||========================*/

/*==========================||---------------------------||========================*/



.trainerPageHead {

    padding: 30px 0 40px;

    text-align: center;

    border-bottom: 1px solid #E6E6E6;

}



.trainerPageAvatar {

    width: 180px;

    height: 180px;

    border-radius: 13px;

    margin: 0 auto 10px;

}



.trainerPageAvatar img {

    width: 100%;

    height: 100%;

    border-radius: inherit;

}



.trainerPageHead h2 {

    color: #1C1C1C;

    font-size: 22px;

    line-height: 38px;

    font-weight: 500;

}



.trainerPageHead p {

    color: #929292;

    font-size: 14px;

    line-height: 20px;

}



.trainerCourses {

    padding: 30px 0 40px;

}



.trainerCoursesHead {

    display: flex;

    justify-content: space-between;

}



.trainerCoursesInfo {

    margin-bottom: 40px;

}



.trainerCoursesInfo h3 {

    color: #565656;

    font-size: 40px;

    line-height: 50px;

    margin-bottom: 11px;

}



.trainerCoursesInfo p {

    color: #929292;

    font-size: 16px;

    line-height: 28px;

}



.addNewCourse {

    width: 172px;

    height: 60px;

    font-size: 14px;

    margin-right: 15px;

}



.addNewCourse i {

    margin-left: 10px;

}



@media screen and (max-width:425px) {

    .trainerCoursesHead {

        flex-direction: column;

    }



    .addNewCourse {

        margin: 0 0 20px 0;

    }

}



@media screen and (max-width:768px) {

    .trainerPageHead {

        padding: 0 0 20px;

    }



    .trainerPageAvatar {

        width: 100px;

        height: 100px;

    }



    .trainerPageHead h2 {

        font-size: 15px;

        line-height: 30px;

    }



    .trainerPageHead p {

        font-size: 13px;

    }



    .trainerCourses {

        padding: 20px 0;

    }



    .trainerCoursesInfo {

        margin-bottom: 20px;

    }



    .trainerCoursesInfo h3 {

        font-size: 20px;

        line-height: 30px;

        margin-bottom: 5px;

    }



    .trainerCoursesInfo p {

        font-size: 13px;

        line-height: 22px;

    }



    .addNewCourse {

        height: 45px;

        width: 150px;

    }

}





/*==========================||---------------------------||========================*/

/*==========================||          New Course       ||========================*/

/*==========================||---------------------------||========================*/



.uploadWrapper {

    text-align: center;

    margin-bottom: 30px;

}



.uploadWrapper>label {

    color: #6B6B6B;

    font-size: 14px;

    line-height: 24px;

    margin: 0;

}



.uploadBox {

    width: 99px;

    height: 88px;

    border: 1px dashed #41C0F0;

    border-radius: 6px;

    margin: 0 auto 10px;

    position: relative;

}



.uploadBtn {

    width: 100%;

    height: 100%;

    border-radius: inherit;

    position: absolute;

    z-index: 1;

}



.uploadBtn input {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

    opacity: 0;

    cursor: pointer;

}



.uploadBtn label {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.uploadBtn label img {

    max-width: 40px;

}



.uploadBtn input:hover+label {

    background: rgba(255, 173, 31, 0.6);

}



.uploadBtn input:hover+label img {

    filter: brightness(0) invert(1);

}



.uploadBox .previewBox,

.uploadBox .previewBox img {

    width: 100%;

    height: 100%;

    border-radius: inherit;

}



/*==========================||---------------------------||========================*/

/*==========================||          Course Page      ||========================*/

/*==========================||---------------------------||========================*/



.coursePageHead {

    padding: 0 0 40px 0;

}



.coursePageHead .courseCounts {

    background: #FCFCFC;

    border-radius: 8px;

    padding: 18px 20px;

    margin-bottom: 15px;

}



.coursePageHead .courseCount::after {

    margin: 0 15px;

}



.coursePageHead h2 {

    color: #565656;

    font-size: 30px;

    font-weight: 500;

    line-height: 50px;

}



.coursePageHead p {

    color: #929292;

    font-size: 14px;

    line-height: 25px;

    margin-bottom: 5px;

}



.coursePrice {

    color: #1A1818;

    font-size: 30px;

    line-height: 57px;

    font-weight: 500;

}



.joinCourse,

.deleteCourse {

    width: 174px;

    height: 50px;

    border-radius: 12px;

    margin: 20px 0;

}



.cursePageVector {

    margin-bottom: 30px;

    border-radius: 10px;

}



.cursePageVector img {

    width: 100%;

    border-radius: inherit;

}



.tabsBtns {

    margin-bottom: 30px;

    display: flex;

    flex-wrap: wrap;

}



.tabBtn {

    background: #F6F6F6;

    border-radius: 9px;

    padding: 11px 20px;

    color: #585858;

    font-size: 16px;

    font-weight: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 12px;

    min-width: 180px;

    cursor: pointer;

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

}



.tabBtn:last-of-type {

    margin-left: 0;

}



.tabBtn:hover,

.tabBtn.active {

    background: #41C0F0;

    color: #fff;

}



.tabContent {

    display: none;

}



.tabContent.show {

    display: block;

}



.courseForm {

    border: 1px solid #41C0F0;

}



.tabPadding {

    padding: 30px;

    border-radius: 17px;

}



.courseForm textarea {

    background: transparent;

    width: 100%;

    color: #929292;

    font-size: 14px;

    line-height: 28px;

    border: 0;

    margin-bottom: 20px;

}



.courseTitle {

    color: #1C1C1C;

    font-size: 20px;

    line-height: 35px;

    display: flex;

    align-items: center;

}



.courseTitle::before {

    content: '';

    width: 5px;

    height: 20px;

    background: #41C0F0;

    display: inline-block;

    margin-left: 12px;

    border-radius: 5px;

}



.lectures {

    border: 1px solid #ECECEC;

    margin-bottom: 30px;

}



.leturesHead {

    background: #FCFCFC;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

}



.addLetureForm {

    padding: 5px 15px;

    width: calc(100% - 125px);

}



.addLetureForm label {

    margin: 0;

    color: #404040;

    font-size: 16px;

    line-height: 30px;

    font-weight: 500;

}



.addLessonForm {

    display: flex;

}



.addLessonForm>* {

    width: 50%;

}



.lectures .btnOrange {

    width: 55px;

    height: 54px;

    border-radius: 6px;

}



.lecture {

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    padding: 10px 15px 10px 0;

    border-bottom: 1px solid #E7E7E7;

}



.lecture:last-of-type {

    border: 0;

}



.lecture::before {

    content: url(../images/icon-play.svg);

    position: absolute;

    top: 21px;

    right: 0;

}



.lecture input {

    background: transparent;

    height: 40px;

    padding: 0 15px;

    border: 0;

    color: #929292;

    font-size: 14px;

    font-weight: 500;

}



.lecture input.focused {

    color: #BFBFBF;

}



.lectureAction {

    display: flex;

    align-items: center;

}



.lectureBtn {

    width: 60px;

    height: 35px;

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

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

    cursor: pointer;

}



.lectureBtn:hover {

    color: #fff;

}



.lectureBtn:hover img {

    filter: brightness(0) invert(1);

}



.editLecture {

    background: #F6F6F6;

    color: #585858;

}



.editLecture:hover {

    background: #388add;

}



.deleteLecture {

    color: #FF0D0D;

    background: rgba(255, 12, 12, .04);

    margin-right: 5px;

}



.deleteLecture:hover {

    background: #FF0D0D;

}



.lectureBtn span {

    margin-right: 5px;

}



.courseTrainerBox {

    border: 1px solid #ECECEC;

}



.courseTrainerWrapper {

    display: flex;

}



.courseTrainerBoxPic {

    width: 77px;

    height: 77px;

    border-radius: 50%;

    margin-left: 10px;

}



.courseTrainerBoxPic img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

}



.courseTrainerBoxData {

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.courseTrainerBoxData h3 {

    font-size: 18px;

    line-height: 30px;

    color: #484848;

}



.courseTrainerBoxData p {

    color: #929292;

    font-size: 14px;

    line-height: 20px;

}



.trainerCoursePrice {

    font-size: 20px;

    line-height: 45px;

    color: #404040;

    font-weight: 500;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    height: 100%;

}



.trainerCoursePrice label {

    margin: 0 0 0 10px;

}



.trainerCoursePrice .btnOrange {

    border-radius: 12px;

    width: 174px;

    height: 50px;

    margin-right: 40px;

}



.comments {

    border: 1px solid #ECECEC;

}



.comment {

    display: flex;

    border-bottom: 1px solid #ECECEC;

    padding: 20px 0;

}



.comment:first-of-type {

    padding-top: 0;

}



.commentPic {

    width: 80px;

    height: 80px;

    border-radius: 16px;

    margin-left: 12px;

}



.commentPic img {

    width: 100%;

    height: 100%;

    border-radius: inherit;

}



.commentBox {

    width: calc(100% - 92px);

}



.commentHead {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

}



.commentUser h2 {

    font-size: 16px;

    color: #707070;

    line-height: 28px;

}



.stars {

    color: #E5E5E5;

    margin-bottom: 5px;

}



.stars>* {

    display: inline-block;

}



.stars .stared {

    color: #FFC107;

}



.comment .stars {

    margin-top: -5px;

}



.commentDate {

    font: normal 14px/19px Roboto;

    letter-spacing: 0px;

    color: #A7A7A7;

    margin-bottom: .5rem;

}



.commentBody p {

    color: #828282;

    font-size: 14px;

    line-height: 24px;

}



.addCommentWrapper {

    padding: 40px 0 0 0;

}



.addCommentWrapper h3 {

    color: #565656;

    font-size: 25px;

    line-height: 44px;

    margin-bottom: 30px;

}



.addRate {

    margin-bottom: 15px;

    font-size: 21px;

    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-end;

}



.addRate input {

    display: none;

}



.addRate input:checked~label {

    color: #FFC107;

}



.addRate label {

    margin-left: 8px;

    cursor: pointer;

}



.addRate label:hover {

    color: #FFC107;

}



.commentInput {

    margin-bottom: 20px;

}



.commentInput textarea {

    width: 100%;

    border: 0;

    resize: none;

    height: 145px;

    background: #FBFBFB;

    border-radius: 12px;

    padding: 15px;

    font-size: 14px;

}



.commentInput textarea::placeholder {

    color: #ABABAB;

}



.addCommentWrapper .btnOrange {

    width: 156px;

    height: 50px;

    border-radius: 12px;

    font-size: 15px;

}



.modalContent {

    bottom: 0;

    margin: 0;

}



.modalContent .loginFormHead {

    margin-bottom: 30px;

}



@media screen and (max-width:575px) {

    .order1 {

        order: 1;

    }



    .order2 {

        order: 2;

    }



    .order3 {

        order: 3;

    }



    .leturesHead {

        flex-direction: column;

        position: relative;

        margin-bottom: 10px;

    }



    .addLetureForm {

        width: calc(100% - 30px);

        margin-left: auto;

        padding: 5px;

        align-items: center;

    }



    .addLetureForm label {

        font-size: 11px

    }



    .lectures .btnOrange {

        position: absolute;

        top: 5px;

        left: 5px;

        width: 25px;

        height: 25px;

        font-size: 10px;

    }



    .lectures {

        padding: 5px;

    }



    .lecture {

        padding: 5px;

    }



    .lecture::before {

        content: url(../images/icon-play.png);

        top: 4px;

    }



    .lecture input {

        padding: 0 5px;

        font-size: 10px;

        height: 25px;

        width: calc(100% - 55px);

    }



    .lectureAction span {

        display: none;

    }



    .lectureBtn {

        width: 25px;

        height: 25px;

    }



    .lesson {

        flex-direction: column;

        position: relative;

    }



    .lesson input {

        width: calc(100% - 25px);

        margin-left: auto;

    }



    .lesson .lectureAction {

        position: absolute;

        left: 0;

        flex-direction: column;

    }



    .lesson .lectureAction .lectureBtn:last-of-type {

        margin: 2px 0 0 0;

    }



    .courseTrainerWrapper {

        margin-bottom: 15px;

    }



    .commentPic {

        width: 45px;

        height: 45px;

        margin-left: 5px;

        border-radius: 50%;

    }



    .commentBox {

        width: calc(100% - 50px);

    }



    .commentHead {

        flex-direction: column;

        align-items: flex-start;

    }



    .commentUser .stars {

        font-size: 12px;

        margin: 0;

    }



    .commentUser h2 {

        font-size: 14px;

    }



    .commentDate {

        font-size: 12px;

        margin: 0;

    }



    .addCommentWrapper {

        padding: 20px 0 0 0;

    }



    .addCommentWrapper h3 {

        font-size: 16px;

        margin-bottom: 0;

    }



    .commentInput textarea {

        height: 180px;

    }



    .addCommentWrapper .btnOrange {

        width: 125px;

        height: 45px;

        margin-bottom: 10px;

    }

}



@media screen and (max-width:768px) {

    .cursePageVector {

        margin-bottom: 15px;

    }



    .coursePageHead .courseCounts {

        padding: 10px;

    }



    .coursePageHead h2 {

        font-size: 16px;

        line-height: 30px;

    }



    .coursePage p {

        font-size: 12px;

        line-height: 23px;

    }



    .coursePrice {

        font-size: 13px;

        display: inline-block;

        margin-left: 50px;

    }



    .joinCourse,

    .deleteCourse {

        height: 40px;

        width: 110px;

        font-size: 13px;

        float: left;

        margin: 10px auto;

    }



    .tabBtn {

        min-width: 67px;

        padding: 8px 5px;

        border-radius: 6px;

        font-size: 10px;

        margin-left: 5px;

    }



    .tabBtn:last-of-type {

        margin: 0;

    }



    .tabsBtns {

        margin-bottom: 20px;

    }



    .tabPadding {

        padding: 10px;

        border-radius: 10px;

    }



    .courseForm textarea {

        font-size: 12px;

        line-height: 23px;

        margin-bottom: 15px;

    }



    .courseTitle {

        font-size: 15px;

    }



    .courseTrainerBoxPic {

        width: 50px;

        height: 50px;

    }



    .courseTrainerBoxData h3 {

        font-size: 14px;

        margin: 0;

    }



    .trainerCoursePrice {

        font-size: 13px;

    }



    .trainerCoursePrice .btnOrange {

        font-size: 11px;

        height: 39px;

        width: 85px;

        border-radius: 5px;

        margin-right: auto;

    }

}



@media (min-width:768px) and (max-width:992px) {

    .addLetureForm {

        padding: 0 10px 0 0;

        width: calc(100% - 75px);

    }



    .addLetureForm label {

        font-size: 11px;

    }



    .lectures .btnOrange {

        width: 40px;

        height: 40px;

        font-size: 13px;

    }



    .lecture {

        padding: 5px 5px 5px 0;

    }



    .lecture::before {

        content: url(../images/icon-play.png);

        top: 8px;

    }



    .lectureAction>* {

        width: 35px;

        height: 35px;

    }



    .lectureAction span {

        display: none;

    }



    .lecture input {

        font-size: 11px;

        height: 35px;

        padding: 0 5px;

    }



    .addCommentWrapper h3 {

        font-size: 16px;

        margin-bottom: 0;

    }



    .addCommentWrapper .btnOrange {

        width: 125px;

        height: 45px;

        margin-bottom: 10px;

    }



    .modal-dialog {

        max-width: 700px;

    }

}



@media (max-width: 1024px) and (min-width: 575px) {

    .courseTrainerBox .col-12 {

        padding: 0 15px;

    }

}



@media (min-width:1024px) {

    .lecture input {

        width: calc(100% - 125px);

    }



    .addLessonForm label:nth-child(2) {

        padding-right: 20px;

    }



    .modal-dialog {

        max-width: 800px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||   New Lesson - Question   ||========================*/

/*==========================||---------------------------||========================*/



.addQuestionBox {

    display: none;

}



.addedForm {

    display: flex;

    justify-content: space-between;

}



.addedForm input {

    width: calc(100% - 69px);

}



.addedForm .btnOpacity {

    width: 57px;

    height: 50px;

    margin-right: 12px;

}



.addedQuestion {

    border: 1px solid #EEEEEE;

    padding: 20px;

    margin-bottom: 30px;

}



.answer {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}



.questionTitle,

.answerContent {

    width: calc(100% - 69px);

    background: #FBFBFB;

    font-size: 14px;

    line-height: 26px;

    padding: 12px;

    color: #BFBFBF;

    border-radius: 12px;

}



.deleteQuestion,

.answer .btnGrey {

    width: 57px;

    height: 50px;

    margin-right: 12px;

    border-radius: 6px;

    font-size: 20px;

}



@media screen and (max-width:768px) {



    .addedForm .btnOpacity,

    .deleteQuestion,

    .answer .btnGrey {

        width: 40px;

        height: 40px;

        font-size: 13px;

        border-radius: 0;

        margin-right: 5px;

    }



    .addedForm input {

        width: calc(100% - 45px);

    }



    .addedQuestion {

        padding: 5px;

        margin-bottom: 10px;

    }



    .questionTitle,

    .answerContent {

        border-radius: 0;

        width: calc(100% - 45px);

        padding: 0 5px;

        line-height: 30px;

        display: flex;

        align-items: center;

        height: auto;

        word-break: break-word;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||           Profile         ||========================*/

/*==========================||---------------------------||========================*/



.profileBox {

    border: 1px solid #EEEEEE;

    padding: 30px 20px;

    text-align: center;

    margin: 15px 0;

}

.courseTrainerAvatar img {

    border-radius: 50%;

    height: 100%;

    width: 100%;

}

.profileAvatar {

    position: relative;
    width: 210px;
    /* height: 140px; */
    margin: 0 auto 20px;
    border: 2px solid #ddd;
    padding: 10px 0;
    border-radius: 10px;

}



.profileAvatarPreview {

   /* width: 100%;

    height: 100%;*/

    border-radius: 50%;

}



.profileAvatarPreview img {

    width: auto;
    height: 120px;

 

}
/*
#basic-user-avatar{
    margin-top: 40px;
}*/


.uploadAvatar {

    width: 30px;

    height: 30px;

    position: absolute;

    top: calc(50% - 23px);

    left: -6px;

    border-radius: 50%;

    cursor: pointer;

}



.uploadAvatar input {

    width: 100%;

    height: 100%;

    border-radius: inherit;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    opacity: 0;

    cursor: pointer;

}



.uploadAvatar label {

    width: 100%;

    height: 100%;

    background: #41C0F0;

    border-radius: inherit;

    display: flex;

    align-items: center;

    justify-content: center;

}



.uploadAvatar input:hover+label {

    background: #878787;

}



.profileBox h2 {

    color: #6B6B6B;

    font-size: 19px;

    line-height: 34px;

    font-weight: 500;

}



.profileTabs {

    padding-top: 30px;

}



.profileTab,

.profileLogout a {

    color: #6B6B6B;

    font-size: 14px;

    line-height: 28px;

    font-weight: 500;

    display: block;

    padding: 12px 15px;

    border-bottom: 1px solid #F6F6F6;

}



.profileTab:hover,

.profileLogout a:hover {

    color: #41C0F0;

}



.profileTab.active {

    background: #41C0F0;

    color: #fff;

    border-radius: 9px;

}



.profileLogout a {

    border: 0;

}



.profileTabsContent , 

.profileTabsContent .tabContent.show  {

    min-height: 100%;

}



.profileTabsContent .loginFormBox {

    padding: 30px;

}



.profileTabsContent .tabContent.show {

    height: auto;

}



.ProfileTabContent {

    padding: 30px 30px 0;

    border: 1px solid #EEEEEE;

    margin: 15px 0;

    min-height: 100%;

}



.profileProgess {

    padding: 15px;

    border: 1px solid #EEEEEE;

    margin: 15px 0;

}



.profilePrgressHead {

    background: #FCFCFC 0% 0% no-repeat padding-box;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 12px;

    margin-bottom: 15px;

}



.profilePrgressHead>* {

    color: #404040;

    font-size: 14px;

    font-weight: 500;

    margin: 0;

    line-height: 30px;

}



.profilePrgressHead>*:first-of-type {

    width: 50%;

}



.profilePrgressHead>*:last-of-type {

    width: 40%;

}



.progressItem {

    padding: 12px 0;

    border-bottom: 1px solid #EEEEEE;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.progressItem:last-of-type {

    border: 0;

}



.progressItem>*:first-of-type {

    width: 50%;

}



.progressItem>*:last-of-type {

    width: 40%;

}



.progressTitle {

    color: #929292;

    font-size: 13px;

    line-height: 38px;

    font-weight: 500;

    padding-left: 10px;

}



.progressBox span {

    color: #929292;

    font-size: 13px;

    line-height: 30px;

    font-weight: 500;

}



.progress {

    width: 100%;

    max-width: 255px;

    height: 8px;

    background: #F6F6F6;

    border-radius: 4px;

}



.progress-bar {

    -webkit-transition: width 5s ease;

    transition: width 5s ease;

}



.progress1 .progress-bar {

    background: #FF1F1F;

}



.progress2 .progress-bar {

    background: #41C0F0;

}



.progress3 .progress-bar {

    background: #F8FF1F;

}



.progress4 .progress-bar {

    background: #1D71B8;

}



.progress5 .progress-bar {

    background: #5BFF1F;

}



.progress6 .progress-bar {

    background: #3A901B;

}



.studentProfile .row {

    margin: 0 -15px;

}



.studentProfile .col-12 {

    padding: 0 15px;

}



@media screen and (max-width:575px) {



    .progressItem>*:first-of-type,

    .progressItem>*:last-of-type {

        width: 100%;

    }



    .progressItem {

        padding: 0;

        flex-direction: column;

        align-items: flex-start;

    }



    .studentProfile {

        margin: 15px 0;

    }

}



@media screen and (max-width:768px) {

    .profileTabsContent .loginFormBox {

        padding: 20px 15px;

    }



    .profileBox {

        margin: 0;

        padding: 10px;

    }



    .profileTabs {

        padding: 0;

    }



    .ProfileTabContent {

        padding: 10px 10px 0;

    }



    .profileProgess {

        padding: 10px;

    }



    .profilePrgressHead>* {

        font-size: 12px;

    }



    .progressTitle {

        font-size: 11px;

    }



    .progressBox {

        display: flex;

        align-items: center;

    }



    .progressBox span {

        margin-left: 10px;

    }



    .progress {

        height: 5px;

    }

}



@media (min-width:768px) and (max-width:991px) {

    .ProfileTabContent {

        margin: 0;

        padding: 10px 15px;

    }



    .ProfileTabContent .courseCount::after {

        margin: 0 5px;

    }



    .profileProgess {

        margin: 0;

    }

}



/*==========================||---------------------------||========================

/*==========================||         About Page        ||========================*/

/*==========================||---------------------------||========================*/



.aboutPageVector {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 40px;

    padding: 0 15px;

}



.aboutPageVector img {

    width: 600px;

}



.mainTitle {

    color: #41C0F0;

    font-size: 20px;

    line-height: 34px;

    font-weight: 100;

    display: flex;

    align-items: center;

}



.mainTitle::before {

    content: '';

    width: 33px;

    height: 1px;

    background: #41C0F0;

    display: inline-block;

    margin-left: 7px;

    margin-top: 2px;

}



.aboutContent h2 {

    color: #202020;

    font-size: 44px;

    line-height: 77px;

}



.aboutContent p {

    color: #212529;

    font-size: 16px;

    line-height: 28px;

    margin-bottom: 10px;

}

.aboutContent p , .aboutContent ol , .aboutContent ul
{
    font-family: 'GE SS Two Light';
}




.aboutBlocks {

    padding: 20px 0;

}



.aboutBlock {

    margin: 15px 0;

    box-shadow: 0px 0px 31px #E9E9E930;

    border: 1px solid #F3F3F3;

    border-radius: 5px;

    padding: 30px;

    cursor: pointer;

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

}



.aboutBlock:hover {

    transform: translateY(-10px);

}



.aboutBlockIcon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px;

/*    background: rgba(255, 173, 31, 0.1);*/

    border-radius: 7px;

    margin-bottom: 15px;

}



.aboutBlock h3 {

    color: #484848;

    font-size: 20px;

    line-height: 40px;

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

}



.aboutBlock:hover h3 {

    color: #41C0F0;

}



.aboutBlock p {

    color: #929292;

    font-size: 14px;

    line-height: 20px;

    margin: 0;

}



@media screen and (max-width:768px) {

    .aboutContent h2 {

        font-size: 20px;

        line-height: 45px;

    }



    .aboutContent p {

        font-size: 13px;

        line-height: 25px;

    }



    .aboutBlock {

        margin: 0 0 15px 0;

        padding: 10px;

    }



    .aboutBlockIcon {

        width: 40px;

        height: 40px;

        margin-bottom: 5px;

    }



    .aboutBlock h3 {

        font-size: 17px;

        margin: 0;

    }

}



@media (min-width:1024px) {

    .pageVectors {

        position: relative;

        overflow: hidden;

    }



    .pageVectors::before {

        content: url('../images/shape4.png');

        position: absolute;

        top: 300px;

        right: -35px;

        z-index: 0;

    }



    .pageVectors::after {

        content: url('../images/shape2.png');

        position: absolute;

        top: 300px;

        left: -20px;

        z-index: 0;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||         Pagination        ||========================*/

/*==========================||---------------------------||========================*/



.pagination {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    padding: 30px 0;

    width: 100%;

}

.pagination span,

.pagination a {

    width: 34px;

    height: 34px;

    display: inline-block;

    text-align: center;

    line-height: 34px;

    color: #707070;

    font-weight: normal;

    margin: 8px;

    font-size: 15px;

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

}



.pagination a:hover {

    box-shadow: 0px 20px 15px #E0ECF6;

}



.pagination a:first-of-type,

.pagination a:last-of-type {

    background: #EBEBEB;

    border-radius: 7px;

}



.pagination a:first-of-type:hover,

.pagination a:last-of-type:hover {

    background: #41C0F0;

    color: #fff;

}



.pagination .active {

    color: #41C0F0;

}



hr {

    border-top-color: #EBEBEB;

}



.pt0 {

    padding-top: 0;

}



@media screen and (max-width:575px) {

    .pagination a {

        margin: 3px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||             Blog          ||========================*/

/*==========================||---------------------------||========================*/



.blogPageBox {

    border: 1px solid #EBEBEB;

    border-radius: 19px;

    padding: 20px;

    margin-bottom: 30px;

}



.blogHead img {

    width: 100%;

    min-height: 150px;

}



.blogContent .blogDate {

    top: 40px;

    right: 55px;

}



.blogContent p {

    color: #000000;

    font-size: 16px;

    line-height: 30px;

    margin: 10px 0;

}



.blogContent h3 {

    color: #1C1C1C;

    font-size: 25px;

    line-height: 44px;

}



.infoBox {

    padding: 0 15px 0 0;

    border-right: 5px solid #41C0F0;

    margin: 20px 0;

}



.infoBox h4 {

    color: #1C1C1C;

    font-size: 20px;

    line-height: 34px;

}



.blogPageBoxHead {

    color: #565656;

    font-size: 22px;

    line-height: 44px;

    font-weight: 500;

    border-bottom: 1px solid #ECECEC;

    padding-bottom: 10px;

    margin-bottom: 20px;

}



.blogComments .comment {

    padding: 15px 0;

}



.blogComments .addCommentWrapper {

    padding: 20px 0 0 0;

}



.relatedBlog {

    display: flex;

    justify-content: space-between;

    border: 1px solid #E6E6E6;

    border-radius: 10px;

    margin-bottom: 20px;

    padding: 12px;

}



.relatedBlog:last-of-type {

    margin: 0;

}



.relatedBlogPic {

    width: 90px;

    height: 90px;

    border-radius: 8px;

}



.relatedBlogPic img {

    width: 100%;

    height: 100%;

    border-radius: inherit;

}



.relatedBlogContent {

    width: calc(100% - 100px);

}



.relatedBlog .blogCounts {

    padding: 0 0 5px 0;

}



.relatedBlog .blogCount span {

    font-size: 12px;

}



.relatedBlog .blogCount img {

    max-width: 11px;

}



.relatedBlog .blogCount::after {

    height: 10px;

}



.relatedBlog h3 {

    color: #1C1C1C;

    font-size: 13px;

    line-height: 24px;

    margin: 0;

}



.relatedBlog p {

    font-size: 10px;

    line-height: 17px;

    color: #6A6A6A;

}



.relatedBlog p a {

    color: #41C0F0;

    margin-right: 5px;

}



@media screen and (max-width:768px) {

    .blogPageBox {

        padding: 10px;

        border-radius: 10px;

        margin-bottom: 15px;

    }



    .blogContent .blogDate {

        top: 20px;

        right: 35px;

    }



    .blogContent h3 {

        font-size: 15px;

        line-height: 30px;

    }



    .blogContent p {

        font-size: 12px;

        line-height: 22px;

        margin: 0 0 10px 0;

    }



    .infoBox {

        margin: 10px 0;

        padding: 0 10px 0 0;

        border-right-width: 3px;

    }



    .infoBox h4 {

        font-size: 14px;

        line-height: 25px;

        margin: 0;

    }



    .blogPageBoxHead {

        font-size: 14px;

        line-height: 20px;

        margin-bottom: 10px;

    }



    .blogComments .comment {

        padding: 10px 0;

    }



    .commentBody p {

        font-size: 12px;

        line-height: 21px;

    }



    .blogComments .addCommentWrapper {

        padding: 0;

    }



    .addRate {

        font-size: 13px;

    }



    .relatedBlog {

        padding: 5px;

        margin-bottom: 10px;

    }



    .relatedBlog:last-of-type {

        margin: 0;

    }



    .relatedBlogPic {

        width: 50px;

        height: 50px;

    }



    .relatedBlogContent {

        width: calc(100% - 55px);

    }



    .relatedBlog h3 {

        font-size: 12px;

    }



    .relatedBlog .blogCounts {

        padding: 5px 0 0 0;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||       contact Page        ||========================*/

/*==========================||---------------------------||========================*/



.contactBlocks {

    max-width: 800px;

    margin: auto;

}



.contactBlocks .col-12:nth-child(2) {

    position: relative;

}



.contactBlocks .col-12:nth-child(2)::before,

.contactBlocks .col-12:nth-child(2)::after {

    content: '';

    height: 45px;

    background: #DBDBDB;

    width: 2px;

    position: absolute;

    top: 40%;

}



.contactBlocks .col-12:nth-child(2)::before {

    right: 0;

}



.contactBlocks .col-12:nth-child(2)::after {

    left: 1px;

}



.contactBlock {

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 20px;

    position: relative;

}



.contactBlockIcon {

    background: #878787;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 5px;

}



.contactBlock h3 {

    color: #6B6B6B;

    font-size: 18px;

    line-height: 35px;

}



.contactBlock p,

.contactBlock p a {

    font-size: 14px;

    color: #6B6B6B;

}



.contactBlock p a:hover {

    color: #41C0F0;

}



.contactMap {

    margin: 20px 0 40px;

}



.contactMap .map {

    height: 400px;

}



.contactPageWrapper {

    background: url(../images/contactBg2.png) no-repeat;

    background-size: cover;

}



.contactPageWrapper .form-control {

    background: #FBFBFB;

}



.contactPageWrapper {

    padding-bottom: 50px;

}



@media screen and (max-width:575px) {



    .contactBlocks .col-12:nth-child(2)::before,

    .contactBlocks .col-12:nth-child(2)::after {

        display: none;

    }



    .contactBlock {

        border-bottom: 1px solid #f8f9fa;

    }

}



@media screen and (max-width:768px) {

    .contactBlock {

        padding-bottom: 15px;

        margin-bottom: 15px;

    }



    .contactBlockIcon {

        width: 35px;

        height: 35px;

    }



    .contactBlock h3 {

        font-size: 13px;

        margin: 0;

    }



    .contactMap {

        margin: 0 0 20px;

    }



    .contactMap .map {

        height: 250px;

    }



    .contactPage {

        padding-bottom: 10px;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||            Courses        ||========================*/

/*==========================||---------------------------||========================*/



.coursesPage .coursesCats {

    padding: 30px 5px;

}



.coursesPage .courseCat {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    text-align: initial;

    border-radius: 5px;

    border: 1px solid #fff;

}



.active .courseCat1 {

    border-color: #FF8B6F;

}



.active .courseCat2 {

    border-color: #54C9A4;

}



.active .courseCat3 {

    border-color: #878787;

}



.active .courseCat4 {

    border-color: #41C0F0;

}



.active .courseCat .icon::after {

    left: 0;

}



.coursesPage .courseCat .icon {

    margin: 0 0 0 15px;

}



.coursesPage .courseCat h3 {

    font-size: 15px;

}



.coursesPage .courseCat h5 {

    font-size: 13px;

}



.coursesList {

    margin: 30px 0;

}



@media screen and (max-width:768px) {

    .coursesPage .coursesCats {

        padding: 0;

    }



    .coursesPage .courseCat h3 {

        font-size: 14px;

    }

}



@media (min-width:768px) and (max-width:992px) {

    .coursesPage .courseCat {

        flex-direction: column;

        text-align: center;

    }



    .coursesPage .courseCat .icon {

        margin: 0px 0 5px;

    }



    .coursesPage .courseCat h3 {

        margin: 0;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||     Course Before Pay     ||========================*/

/*==========================||---------------------------||========================*/



.courseBeforePay .lecture {

    padding: 15px 15px 15px 0;

}



.courseBeforePay .lecture::before {

    top: 18px;

}



.courseBeforePay .lecture h5 {

    padding: 0 15px;

    border: 0;

    color: #929292;

    font-size: 13px;

    font-weight: 500;

    line-height: 25px;

    margin: 0;

}



.lecture .BeforePayInfo {

    display: flex;

    align-items: center;

    flex-direction: row-reverse;

}



.lecture .BeforePayInfo .lock {

    margin-right: 15px;

}



.lecture .BeforePayInfo .exTime {

    font: 500 12px/25px Roboto;

    color: #929292;

    margin: 0 20px;

}



.lecture .BeforePayInfo .exQuestion {

    height: 25px;

    background: #1D71B8;

    border-radius: 5px;

    color: #fff;

    font-size: 12px;

    padding: 0 11px;

    display: flex;

    align-items: center;

}



@media screen and (max-width:575px) {

    .courseBeforePay .lecture {

        flex-direction: column;

        align-items: flex-start;

        padding: 5px 5px 5px 0;

    }



    .courseBeforePay .lecture::before {

        top: 4px;

    }



    .courseBeforePay .lecture h5 {

        font-size: 11px;

    }



    .lecture .BeforePayInfo {

        width: 100%;

        align-items: flex-end;

    }



    .lecture .BeforePayInfo .exQuestion {

        font-size: 10px;

        padding: 0 8px;

        height: 20px;

    }



    .lecture .BeforePayInfo .exTime {

        font-size: 10px;

        line-height: 20px;

        margin: 0 15px 0 0;

    }

}



@media (min-width:768px) and (max-width:992px) {

    .courseBeforePay .lecture {

        padding: 8px 5px 8px 0;

    }



    .courseBeforePay .lecture::before {

        content: url(../images/icon-play.png);

        top: 8px;

    }



    .courseBeforePay .lecture h5 {

        font-size: 12px;

    }



    .lecture .BeforePayInfo .exQuestion {

        font-size: 11px;

        padding: 0 10px;

        height: 20px;

    }



    .lecture .BeforePayInfo .exTime {

        font-size: 11px;

        margin: 0 15px 0 0;

    }

}



/*==========================||---------------------------||========================*/

/*==========================||            Banks          ||========================*/

/*==========================||---------------------------||========================*/



.banksBox {

    border: 1px solid #EEEEEE;

    padding: 4%;

}



.bankBox {

    box-shadow: 0px 0px 30px #B4B4B40A;

    border: 1px solid #EAEAEA;

    border-radius: 20px;

    margin-bottom: 30px;

    padding: 20px;

    display: flex;

    align-items: center;

}



.bankLogo {

    width: 120px;

    height: 100px;

    overflow: hidden;

    padding-left: 20px;

    border-left: 1px solid #EAEAEA;

    display: flex;

    align-items: center;

    justify-content: center;

}



.bankLogo img {

    /*border-radius: 50%;*/

    max-height: 100%;

}



.bankInfo {

    padding-right: 20px;

}



.bankInfo label {

    margin: 0;

    font-size: 18px;

    color: #565656;

    line-height: 30px;

    font-weight: 500;

}



.bankInfo p {

    margin-bottom: 10px;

    font-size: 18px;

    color: #8A8A8A;

}



.bankInfo p:last-of-type {

    margin: 0;

}



.banksBox .btnOrange {

    max-width: 520px;

    height: 50px;

    border-radius: 10px;

    margin: 15px auto 0;

}



.successBox {

    text-align: center;

}



.successBox h1 {

    color: #878787;

    font-size: 56px;

    line-height: 92px;

}



.successBox h3 {

    color: #585858;

    font-size: 23px;

    line-height: 54px;

}



.successBox .btnOrange {

    width: 185px;

    height: 55px;

    border-radius: 12px;

    margin: 30px auto 20px;

}



@media screen and (max-width:425px) {

    .banksBox {

        padding: 30px 10px;

    }



    .bankBox {

        padding: 15px 10px;

        flex-direction: column;

        margin-bottom: 10px;

    }



    .bankLogo {

        border: 0;

        padding: 0;

        margin-bottom: 10px;

        width: 70px;

        height: 70px;

    }



    .bankInfo p {

        font-size: 12px;

        margin-bottom: 0px;

    }



    .bankInfo label {

        font-size: 12px;

    }

}



@media (min-width:575px) and (max-width:768px) {

    .banksBox {

        padding: 30px 20px;

    }



    .bankBox {

        padding: 10px;

        margin-bottom: 20px;

    }



    .bankLogo {

        width: 80px;

        height: 70px;

        padding-left: 10px;

    }



    .bankInfo {

        padding-right: 10px;

    }



    .bankInfo p {

        font-size: 12px;

        margin-bottom: 0px;

    }



    .bankInfo label {

        font-size: 12px;

    }

}



@media screen and (max-width:768px) {

    .successBox h1 {

        font-size: 30px;

        line-height: 50px;

    }



    .successBox h3 {

        font-size: 17px;

    }



    .successBox .btnOrange {

        width: 140px;

        height: 45px;

    }

}





/*==========================||---------------------------||========================*/

/*==========================||             FaQ           ||========================*/

/*==========================||---------------------------||========================*/



.faqBox {

    border: 1px solid #E8E8E8;

    border-radius: 10px;

}



.faqHead {

    border-radius: 10px;

    background: #F9F9F9;

    padding: 15px 20px;

    color: #333333;

    font-size: 20px;

    line-height: 34px;

    width: calc(100% + 2px);

    margin: -1px;

}



.faqBody {

    padding: 20px;

}



.question {

    margin-bottom: 30px;

    border: 1px solid #EEEEEE;

    border-radius: 10px;

}



.questionHead {

    border-radius: inherit;

    background: #F9F9F9;

    padding: 15px 40px 15px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

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

    cursor: pointer;

}



.questionHead span {

    position: absolute;

    top: 15px;

    right: 20px;

    width: 20px;

    text-align: right;

    line-height: 28px;

}



.questionHead h3 {

    color: #6B6B6B;

    font-size: 16px;

    line-height: 28px;

    margin: 0;

}



.questionIcon {

    width: 20px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

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

}



.questionBody {

    display: none;

}



.questionBodyBox {

    padding: 20px;

}



.questionBody p {

    color: #484848;

    font-size: 14px;

    line-height: 24px;

}



.open .questionHead {

    background: #41C0F0;

    color: #fff;

}



.open .questionHead h3 {

    color: #fff;

}



.open .questionIcon {

    transform: rotate(180deg);

    justify-content: end;

}





@media screen and (max-width:767px) {

    .faqHead {

        padding: 5px 12px;

        font-size: 14px;

        font-weight: 500;

    }



    .faqBody {

        padding: 10px 5px;

    }



    .questionHead {

        padding: 5px 25px 5px 5px;

        align-items: flex-start;

    }



    .question {

        margin-bottom: 10px;

    }



    .questionHead span {

        font-size: 12px;

        top: 5px;

        right: 5px;

        text-align: center;

    }



    .questionBodyBox {

        padding: 10px;

    }



    .questionBody p {

        font-size: 11px;

        line-height: 20px;

    }

}



@media screen and (max-width:768px) {

    .questionHead h3 {

        font-size: 11px;

        line-height: 20px;

        padding: 0 6px;

    }

}



@media (min-width:768px) and (max-width:992px) {

    .faqHead {

        padding: 8px 20px;

    }



    .faqBody {

        padding: 15px;

    }



    .question {

        margin-bottom: 15px;

    }



    .questionHead {

        padding: 12px 35px 12px 12px;

    }



    .questionHead {

        padding: 12px 35px 12px 12px;

    }



    .questionHead span {

        font-size: 12px;

        top: 8px;

        right: 11px;

    }



    .questionBodyBox {

        padding: 15px;

    }



    .questionBody p {

        font-size: 12px;

        line-height: 23px;

    }

}





/*==========================||---------------------------||========================*/

/*==========================||    Course Details Page    ||========================*/

/*==========================||---------------------------||========================*/



.courseViewBox {

    margin-bottom: 30px;

}



.courseView {

    position: relative;

    border-radius: 8px;

}



.courseView video {

    width: 100%;

    height: 100%;

    object-fit: fill;

    border-radius: inherit;

    position: relative;

    z-index: 0;

    border: 1px solid #E7E7E7;

}



.playVideo {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 65px;

    height: 65px;

    transform: translateX(-50%) translateY(-50%);

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #41C0F0;

    z-index: 3;

    cursor: pointer;

}



.playVideo::before,

.playVideo::after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translateX(-50%) translateY(-50%);

    display: block;

    width: 94px;

    height: 94px;

    border-radius: inherit;

    background: rgba(255, 173, 31, 0.2);

    z-index: 0;

}



.playVideo::before {

    animation: pulse-border 1500ms ease-out infinite;

}



.playVideo::after {

    transition: all 200ms;

}



.playVideo:hover::after {

    transition: all 200ms;

    background-color: darken(rgba(255, 173, 31, 0.2), 10%);

}



.playVideo span {

    display: block;

    position: relative;

    width: 0;

    height: 0;

    border-left: 26px solid #fff;

    border-top: 16px solid transparent;

    border-bottom: 16px solid transparent;

    z-index: 2;

}



.playVideo:hover {

    background: #878787;

}



.playVideo:hover::before,

.playVideo:hover::after {

    background: rgba(232, 71, 159, .3);

}



.courseList {

    border: 1px solid #E7E7E7;

    border-radius: 8px;

}


.card-header,
.courseListHead {

    background: #1D71B8;

    color: #fff;

    border-radius: 8px!important;

    padding: 13px 15px;

    font-size: 17px;

}



.listItem {

    padding: 15px 10px;

    border-bottom: 1px solid #E7E7E7;

}



.listItem:last-of-type {

    border: 0;

}



.listItemHead {

    color: #929292;

    font-size: 16px;

    line-height: 35px;

    font-weight: bold;

    padding-right: 25px;

    position: relative;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

}



.listItemHead::before {

/*    content: url('../images/icon-play.svg');*/
    content:"\f04b";
    font-family: 'Font Awesome 5 Free';
/*    transform: rotate(180deg);*/

}



.open .listItemHead span {

    width: 3px;

    height: 20px;

    background: #41C0F0;

    border-radius: 5px;

    display: inline-block;

    margin: 0 10px;

    position: relative;

}



.open .listItemHead span::before,

.open .listItemHead span::after {

    content: '';

    width: 3px;

    height: 14px;

    background: #41C0F0;

    border-radius: 5px;

    position: absolute;

    bottom: 0;

}



.open .listItemHead span::before {

    right: -7px;

}



.open .listItemHead span::after {

    left: -7px;

}



.listItemBody {

    padding: 0 25px 0 10px;

    display: none;

}



.listItemBody>* {

    font-size: 16px;

    line-height: 36px;

    color: #A0A0A0;

}



.listItemBody>*:hover {

    color: #41C0F0;

    cursor: pointer;

}



.open .listItemHead {

    color: #41C0F0;

}



.open .listItemHead::before {

/*    content: url('../images/icon-play-orange.svg');*/
    content:"\f04b";
    font-family: 'Font Awesome 5 Free';
/*    transform: rotate(180deg);*/
    color:#41C0F0;

}



.open .listItemBody {

    display: flex;
    flex-direction: column;

}



.courseControls {

    padding: 5px 0 0 0;

    display: flex;

}



.courseControl {

    width: 50%;

    text-align: center;

}



.courseControl label {

    color: #565656;

    font-size: 20px;

    font-weight: 500;

    line-height: 38px;

    margin: 0;

}



.courseControl h5 {

    color: #929292;

    font-size: 15px;

    line-height: 28px;

    margin: 0;

}



.controlIcon {

    width: 34px;

    height: 34px;

    font-size: 25px;

    background: rgba(255, 173, 31, 0.2);

    color: #41C0F0;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

    border-radius: 7px;

    cursor: pointer;

}



.controlIcon:hover {

    background: #41C0F0;

    color: #fff;

}

.courseVideoView{
    border: 1px solid #ECECEC;
    border-radius: 3px;
    padding: 25px;
}
/*.courseDetails {

    border: 1px solid #ECECEC;

    border-radius: 3px;

    padding: 25px;

}*/



.detailsBlock {

    margin-bottom: 15px;

}



.detailsBlock p {

    color: #929292;

    font-size: 14px;

    line-height: 30px;

    margin-bottom: 10px;

}



.courseAddComments {

    padding: 20px 30px 30px;

    border: 1px solid #ECECEC;

    border-radius: 3px;

    margin-top: 30px;

}



.courseAddComments h3 {

    margin-bottom: 10px;

}



.courseAddComments textarea {

    border-radius: 0;

}



.quizBox {

    border: 1px solid #ECECEC;

    border-radius: 3px;

    padding: 30px;

}



.quizCounts {

    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
    padding: 10px 0;
    background: #ffffff;
    top: -1px;
}

.quizCounts.is-pinned{
    top:113px;
}



.quizCount {

    width: 86px;

    height: 86px;

    background: rgba(255, 173, 31, 0.2);

    border: 2px dashed #41C0F0;

    border-radius: 50%;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.quizCount>* {

    font-size: 12px;

    line-height: 28px;

    color: #404040;

    font-weight: 500;

    margin: 0;

}



.quizQuestions {

    margin-bottom: 30px;

}



.quizQuestion {



    display: none;

}



.quizQuestion.active {

    display: block;

}



.quizQuestionHead {

    background: #FCFCFC;

    border-radius: 8px;

    color: #404040;

    font-size: 16px;

    line-height: 30px;

    padding: 12px 15px;

    font-weight: 500;

    margin-bottom: 20px;

}



.quizQuestionBody li {

    display: flex;

    align-items: center;

    color: #929292;

    font-size: 14px;

    line-height: 30px;

    padding: 10px 0;

    border-bottom: 1px solid #ECECEC;

    /*cursor: pointer;*/

}



.quizQuestionBody label {

    margin: 0 5px 0 0;
    display: block;
    cursor: pointer;

}

.quizQuestionBody label input{
    margin-left: 10px;
    transform: scale(1.4);
}



.quizQuestionBody input {

    cursor: pointer;

}



.testControls .controlIcon {

    margin-top: 12px;

}



.countTmer.finished {

    background: #878787;

    border-color: #878787;

    color: #fff;

    font-size: 15px;

    line-height: 24px;

    font-weight: 500;

}



@keyframes pulse-border {

    0% {

        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);

        opacity: 1;

    }



    100% {

        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);

        opacity: 0;

    }

}





@media screen and (max-width:768px) {

    .courseView video {

        min-height: 250px;

    }



    .playVideo {

        width: 40px;

        height: 40px;

    }



    .playVideo span {

        border-left: 18px solid #fff;

        border-top: 10px solid transparent;

        border-bottom: 10px solid transparent;

    }



    .playVideo::before,

    .playVideo::after {

        width: 55px;

        height: 55px;

    }



    .courseControl label {

        font-size: 12px;

    }



    .courseControl h5 {

        font-size: 11px;

    }



    .courseControls {

        margin-bottom: 30px;

    }



    .courseListHead {

        padding: 10px 15px;

        font-size: 14px;

    }



    .listItem {

        padding: 5px 10px;

    }



    .listItemHead {

        font-size: 11px;

        padding-right: 15px;

    }



    .listItemHead::before {

        content: url(../images/icon-play.png);

        top: 4px;

    }



    .listItemBody {

        padding: 0 15px;

    }



    .listItemBody>* {

        font-size: 11px;

        line-height: 30px;

    }



    .open .listItemHead::before {

/*        content: url(../images/icon-play-orange-sm.png);*/
    content:"\f04b";
    font-family: 'Font Awesome 5 Free';
/*    transform: rotate(180deg);*/
    color:#41C0F0;

    }



    .courseDetails {

        padding: 12px;

    }



    .detailsBlock p {

        font-size: 12px;

        line-height: 25px;

    }



    .detailsBlock .courseTitle {

        margin-bottom: 0;

    }



    .quizBox {

        padding: 20px 15px;

        margin-bottom: 20px;

    }



    .quizCount {

        width: 70px;

        height: 70px;

    }



    .quizCount>* {

        font-size: 11px;

        line-height: 21px;

    }



    .countTmer.finished {

        font-size: 12px;

        line-height: 20px;

    }



    .quizQuestionHead {

        font-size: 12px;

        line-height: 25px;

        padding: 5px 10px;

        margin-bottom: 10px;

    }



    .quizQuestionBody li {

        font-size: 12px;

        padding: 5px 0;

    }

}





/*==========================||---------------------------||========================*/

/*==========================||            Loader         ||========================*/

/*==========================||---------------------------||========================*/



.loader {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    width: 100vw;

    height: 100vh;

    z-index: 99;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #275EFE;

}



.book {

    width: 32px;

    height: 12px;

    position: relative;

    margin: 32px 0 0 0;

    zoom: 1.5;

}



.book .bookInner {

    width: 32px;

    height: 12px;

    position: relative;

    -webkit-transform-origin: 2px 2px;

    transform-origin: 2px 2px;

    -webkit-transform: rotateZ(-90deg);

    transform: rotateZ(-90deg);

    -webkit-animation: book 6.8s ease infinite;

    animation: book 6.8s ease infinite;

}



.book .bookInner .bookLeft,

.book .bookInner .bookRight {

    width: 60px;

    height: 4px;

    top: 0;

    border-radius: 2px;

    background: #fff;

    position: absolute;

}



.book .bookInner .bookLeft:before,

.book .bookInner .bookRight:before {

    content: '';

    width: 48px;

    height: 4px;

    border-radius: 2px;

    background: inherit;

    position: absolute;

    top: -10px;

    left: 6px;

}



.book .bookInner .bookLeft {

    right: 28px;

    -webkit-transform-origin: 58px 2px;

    transform-origin: 58px 2px;

    -webkit-transform: rotateZ(90deg);

    transform: rotateZ(90deg);

    -webkit-animation: left 6.8s ease infinite;

    animation: left 6.8s ease infinite;

}



.book .bookInner .bookRight {

    left: 28px;

    -webkit-transform-origin: 2px 2px;

    transform-origin: 2px 2px;

    -webkit-transform: rotateZ(-90deg);

    transform: rotateZ(-90deg);

    -webkit-animation: right 6.8s ease infinite;

    animation: right 6.8s ease infinite;

}



.book .bookInner .bookMiddle {

    width: 32px;

    height: 12px;

    border: 4px solid #fff;

    border-top: 0;

    border-radius: 0 0 9px 9px;

    -webkit-transform: translateY(2px);

    transform: translateY(2px);

}



.book ul {

    margin: 0;

    padding: 0;

    list-style: none;

    position: absolute;

    left: 50%;

    top: 0;

}



.book ul li {

    height: 4px;

    border-radius: 2px;

    -webkit-transform-origin: 100% 2px;

    transform-origin: 100% 2px;

    width: 48px;

    right: 0;

    top: -10px;

    position: absolute;

    background: #fff;

    -webkit-transform: rotateZ(0deg) translateX(-18px);

    transform: rotateZ(0deg) translateX(-18px);

    -webkit-animation-duration: 6.8s;

    animation-duration: 6.8s;

    -webkit-animation-timing-function: ease;

    animation-timing-function: ease;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

}



.book ul li:nth-child(0) {

    -webkit-animation-name: page-0;

    animation-name: page-0;

}



.book ul li:nth-child(1) {

    -webkit-animation-name: page-1;

    animation-name: page-1;

}



.book ul li:nth-child(2) {

    -webkit-animation-name: page-2;

    animation-name: page-2;

}



.book ul li:nth-child(3) {

    -webkit-animation-name: page-3;

    animation-name: page-3;

}



.book ul li:nth-child(4) {

    -webkit-animation-name: page-4;

    animation-name: page-4;

}



.book ul li:nth-child(5) {

    -webkit-animation-name: page-5;

    animation-name: page-5;

}



.book ul li:nth-child(6) {

    -webkit-animation-name: page-6;

    animation-name: page-6;

}



.book ul li:nth-child(7) {

    -webkit-animation-name: page-7;

    animation-name: page-7;

}



.book ul li:nth-child(8) {

    -webkit-animation-name: page-8;

    animation-name: page-8;

}



.book ul li:nth-child(9) {

    -webkit-animation-name: page-9;

    animation-name: page-9;

}



.book ul li:nth-child(10) {

    -webkit-animation-name: page-10;

    animation-name: page-10;

}



.book ul li:nth-child(11) {

    -webkit-animation-name: page-11;

    animation-name: page-11;

}



.book ul li:nth-child(12) {

    -webkit-animation-name: page-12;

    animation-name: page-12;

}



.book ul li:nth-child(13) {

    -webkit-animation-name: page-13;

    animation-name: page-13;

}



.book ul li:nth-child(14) {

    -webkit-animation-name: page-14;

    animation-name: page-14;

}



.book ul li:nth-child(15) {

    -webkit-animation-name: page-15;

    animation-name: page-15;

}



.book ul li:nth-child(16) {

    -webkit-animation-name: page-16;

    animation-name: page-16;

}



.book ul li:nth-child(17) {

    -webkit-animation-name: page-17;

    animation-name: page-17;

}



.book ul li:nth-child(18) {

    -webkit-animation-name: page-18;

    animation-name: page-18;

}

.whats-app-icon

{

    width: 50px;

    height: 50px;

    padding: 0px;

    background-color: #6dbe0a;

    color: #fff;

    position: fixed;

    bottom: 0px;

    left: 10px;

    border-radius: 50px;

    cursor: pointer;

    display: inline-block;

 

    margin: 10px;

    z-index: 993;

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

    overflow: hidden;

}



.whats-app-icon .icon

{

    width: 50px !important; 

    height: 50px !important;

    border-radius: 50px;

    display: inline-block;

    box-sizing: border-box;

    line-height: 50px;

    text-align: center !important;

    float: left;

    border: 2px solid #6dbe0a;

}

.whats-app-icon a {

    color: #fff;

}

.whats-app-icon a .icon i 

{

    line-height: 60px;

    font-size: 25px;

}

.whats-app-icon .message

{

    display: flex;

    height: 100%;

    justify-content: center;

    align-items: center;

}

.whats-app-icon  span 

{

    font-size: 15px;

    font-weight: 500;

    line-height: 60px;

    margin-left: 20px;

}

.whats-app-icon:hover{

    width: 250px;

}

.whats-app-icon:hover .icon

{

    color: #6dbe0a;

    background-color: #fff;

    border-color: #fff;

}



.success-app-icon

{

    width: fit-content;

    padding: 10px 30px;

    background-color: #41C0F0;

    color: #fff;

    position: fixed;

    bottom: 72px;

    left: 10px !important;

    border-radius: 20px;

    z-index: 993;

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

}

.success-app-icon 

{

    color: #fff;

}


.success-app-icon:hover

{

    color: #fff;

}



@-webkit-keyframes page-0 {

    4% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    13%,

    54% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    63% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-0 {

    4% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    13%,

    54% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    63% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-1 {

    5.86% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    14.74%,

    55.86% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    64.74% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-1 {

    5.86% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    14.74%,

    55.86% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    64.74% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-2 {

    7.72% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    16.48%,

    57.72% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    66.48% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-2 {

    7.72% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    16.48%,

    57.72% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    66.48% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-3 {

    9.58% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    18.22%,

    59.58% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    68.22% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-3 {

    9.58% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    18.22%,

    59.58% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    68.22% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-4 {

    11.44% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    19.96%,

    61.44% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    69.96% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-4 {

    11.44% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    19.96%,

    61.44% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    69.96% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-5 {

    13.3% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    21.7%,

    63.3% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    71.7% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-5 {

    13.3% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    21.7%,

    63.3% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    71.7% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-6 {

    15.16% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    23.44%,

    65.16% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    73.44% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-6 {

    15.16% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    23.44%,

    65.16% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    73.44% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-7 {

    17.02% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    25.18%,

    67.02% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    75.18% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-7 {

    17.02% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    25.18%,

    67.02% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    75.18% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-8 {

    18.88% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    26.92%,

    68.88% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    76.92% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-8 {

    18.88% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    26.92%,

    68.88% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    76.92% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-9 {

    20.74% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    28.66%,

    70.74% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    78.66% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-9 {

    20.74% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    28.66%,

    70.74% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    78.66% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-10 {

    22.6% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    30.4%,

    72.6% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    80.4% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-10 {

    22.6% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    30.4%,

    72.6% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    80.4% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-11 {

    24.46% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    32.14%,

    74.46% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    82.14% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-11 {

    24.46% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    32.14%,

    74.46% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    82.14% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-12 {

    26.32% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    33.88%,

    76.32% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    83.88% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-12 {

    26.32% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    33.88%,

    76.32% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    83.88% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-13 {

    28.18% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    35.62%,

    78.18% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    85.62% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-13 {

    28.18% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    35.62%,

    78.18% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    85.62% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-14 {

    30.04% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    37.36%,

    80.04% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    87.36% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-14 {

    30.04% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    37.36%,

    80.04% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    87.36% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-15 {

    31.9% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    39.1%,

    81.9% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    89.1% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-15 {

    31.9% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    39.1%,

    81.9% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    89.1% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-16 {

    33.76% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    40.84%,

    83.76% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    90.84% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-16 {

    33.76% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    40.84%,

    83.76% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    90.84% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-17 {

    35.62% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    42.58%,

    85.62% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    92.58% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-17 {

    35.62% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    42.58%,

    85.62% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    92.58% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes page-18 {

    37.48% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    44.32%,

    87.48% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    94.32% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@keyframes page-18 {

    37.48% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }



    44.32%,

    87.48% {

        -webkit-transform: rotateZ(180deg) translateX(-18px);

        transform: rotateZ(180deg) translateX(-18px);

    }



    94.32% {

        -webkit-transform: rotateZ(0deg) translateX(-18px);

        transform: rotateZ(0deg) translateX(-18px);

    }

}



@-webkit-keyframes left {

    4% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }



    10%,

    40% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    46%,

    54% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }



    60%,

    90% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    96% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }

}



@keyframes left {

    4% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }



    10%,

    40% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    46%,

    54% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }



    60%,

    90% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    96% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }

}



@-webkit-keyframes right {

    4% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }



    10%,

    40% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    46%,

    54% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }



    60%,

    90% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    96% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }

}



@keyframes right {

    4% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }



    10%,

    40% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    46%,

    54% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }



    60%,

    90% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

    }



    96% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }

}



@-webkit-keyframes book {

    4% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }



    10%,

    40% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

        -webkit-transform-origin: 2px 2px;

        transform-origin: 2px 2px;

    }



    40.01%,

    59.99% {

        -webkit-transform-origin: 30px 2px;

        transform-origin: 30px 2px;

    }



    46%,

    54% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }



    60%,

    90% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

        -webkit-transform-origin: 2px 2px;

        transform-origin: 2px 2px;

    }



    96% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }

}



@keyframes book {

    4% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }



    10%,

    40% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

        -webkit-transform-origin: 2px 2px;

        transform-origin: 2px 2px;

    }



    40.01%,

    59.99% {

        -webkit-transform-origin: 30px 2px;

        transform-origin: 30px 2px;

    }



    46%,

    54% {

        -webkit-transform: rotateZ(90deg);

        transform: rotateZ(90deg);

    }



    60%,

    90% {

        -webkit-transform: rotateZ(0deg);

        transform: rotateZ(0deg);

        -webkit-transform-origin: 2px 2px;

        transform-origin: 2px 2px;

    }



    96% {

        -webkit-transform: rotateZ(-90deg);

        transform: rotateZ(-90deg);

    }

}



.tranining-bag {

  width: 100%;

  padding: 50px 0px;

}



.tranining-bag .image-content {

  width: 100%;

  height: 100%;

  overflow: hidden;

  border-radius: 20px;

}



.tranining-bag .image-content img {

  width: 100%;

 /* height: 100%;

  -o-object-fit: cover;

     object-fit: cover;*/

}



.tranining-bag .content {

  width: 100%;

}



.tranining-bag .content h4 {

  color: #6b6b6b;

  margin-bottom: 20px;

}



.tranining-bag .content p {

  color: #6b6b6b;

  line-height: 1.8rem;

  font-size: 15px;

  margin: 10px 0px;

  text-align: justify;

}



.tranining-bag .content .custom-btn {

  color: #ffffff;

  background-color: #41C0F0;

  padding: 10px 20px;

  border-radius: 10px;

  position: relative;

  overflow: hidden !important;

}



.tranining-bag .content .custom-btn span {

  position: relative;

  z-index: 999;

}



.tranining-bag .content .custom-btn::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #1D71B8;

  top: 0%;

  left: -100%;

  border-radius: 10px;

  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);

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

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .content .custom-btn:hover {

  color: #fff;

}



.tranining-bag .content .custom-btn:hover::before {

  left: 00%;

}



.tranining-bag .content .data-price {

  padding: 10px 0px;

}



.tranining-bag .content .data-price p {

  color: #6b6b6b;

  margin: 0px;

}



.tranining-bag .content .data-price h6 {

  margin: 0px;

}



.tranining-bag .content .data-price .price {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-pack: justify;

      -ms-flex-pack: justify;

          /*justify-content: space-between;*/

  -ms-flex-line-pack: center;

      align-content: center;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  padding: 20px 0px;

  border-bottom: 2px solid #6b6b6b;

}



.tranining-bag .content .data-price .price h6 {

  color: #115faf;

  /*font-weight: bold;*/
  font-size: 24px;

}



.tranining-bag .content .data-price .price .table {

  padding: 0px 20px;

  position: relative;

  width: -webkit-fit-content;

  width: -moz-fit-content;

  width: fit-content;

}



.tranining-bag .content .data-price .price .table::after {

  content: '\f543';

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  color: #6b6b6b;

  position: absolute;

  right: 0;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .content .data-price .price .table:hover {

  color: #115faf;

}



.tranining-bag .content .data-price .price .table:hover::after {

  color: #115faf;

  -webkit-transform: translateX(5px) translateY(-50%);

          transform: translateX(5px) translateY(-50%);

}



.tranining-bag .content .data-price .price .download-btn {

  color: #115faf;

  border: 2px solid #115faf;

  padding: 10px  20px;

  border-radius: 10px;

  position: relative;

  overflow: hidden;

}



.tranining-bag .content .data-price .price .download-btn span {

  z-index: 999;

  position: relative;

  font-size: 20px;

}



.tranining-bag .content .data-price .price .download-btn::after {

  content: '\f1c1';

  font-size: 20px;

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  color: #115faf;

  position: absolute;

  right: 2px;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .content .data-price .price .download-btn::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #115faf;

  top: 0%;

  left: -100%;

  -webkit-transition: .5s linear;

  transition: .5s linear;

  border: 2px solid #115faf;

}



.tranining-bag .content .data-price .price .download-btn:hover {

  color: #fff;

  border-color: #115faf;

}



.tranining-bag .content .data-price .price .download-btn:hover::before {

  left: 00%;

  border-radius: 10px;

}



.tranining-bag .content .data-price .price .download-btn:hover::after {

  color: #fff;

}



.tranining-bag .content .info {

  color: #115faf;

  padding: 0px 30px;

  margin: 20px 0px;

  position: relative;

}



.tranining-bag .content .info::after {

  content: '\f05a';

  font-size: 20px;

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  color: #115faf;

  position: absolute;

  right: 0px;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .content .done-btn {

  width: 100%;

  padding: 15px 20px;

  background-color: #115faf;

  border-radius: 10px;

  position: relative;

  overflow: hidden;

}



.tranining-bag .content .done-btn span {

  color: #fff;

  position: relative;

  padding: 0px 10px;

  z-index: 999;

  font-size: 20px;

  font-weight: 500;

}



.tranining-bag .content .done-btn span::after {

  content: '\f058';

  font-size: 20px;

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  color: #ffd231;

  position: absolute;

  right: -20px;

  top: 50%;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  display: inline-block;

  font-style: normal;

  font-variant: normal;

  text-rendering: auto;

  -webkit-font-smoothing: antialiased;

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .content .done-btn::before {

  content: '';

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #fff;

  top: 0%;

  left: -100%;

  border-radius: 10px;

  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);

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

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .content .done-btn:hover span {

  color: #115faf;

  font-weight: 500;

}



.tranining-bag .content .done-btn:hover span::after {

  color: #115faf;

}



.tranining-bag .content .done-btn:hover::before {

  left: 0%;

}



.tranining-bag .nav {

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  border-bottom: 1px solid #6b6b6b;

  width: 100%;

}



.tranining-bag .nav .nav-item .nav-link {

  position: relative;

  border-radius: 0px;

  color: #6b6b6b;

  margin: 0px 10px;

}



.tranining-bag .nav .nav-item .nav-link::after {

  content: '';

  position: absolute;

  width: 100%;

  height: 4px;

  background-color: #115faf;

  bottom: -3px;

  left: 0;

  -webkit-transform: scaleX(0);

          transform: scaleX(0);

  -webkit-transition: .5s linear;

  transition: .5s linear;

}



.tranining-bag .nav .nav-item .nav-link.active, .tranining-bag .nav .nav-item .nav-link:hover {

  background-color: transparent;

  background: transparent;

  border-color: transparent;

  color: #115faf;

  font-weight: bold;

}



.tranining-bag .nav .nav-item .nav-link.active::after, .tranining-bag .nav .nav-item .nav-link:hover::after {

  -webkit-transform: scaleX(1);

          transform: scaleX(1);

}



.tranining-bag .tab-content p {

  color: #6b6b6b;

  line-height: 1.8rem;

  font-size: 15px;

  text-align: justify;

}