@charset "UTF-8";
:root {
  --font-color: #ffffff;
  --font-gray: #919192;
  --font-red: #b30909;

  --font-white: #ffffff;
  --font-title: #03233c;
  --font-faq: #032138;
  --main-bg: #03233c;
}

* {box-sizing: border-box; scroll-behavior: smooth;}

/*========================------- CUSTOM CSS  ------========================*/
html {
  min-width: 320px;
  scroll-behavior: smooth;
}
body {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  background-color: #03233c;
  background-color: var(--main-bg);
  min-width: 320px;
  color: var(--font-white);
}
p { margin: 0 0 20px 0; font-family: 'Roboto Condensed', Arial, sans-serif; color: var(--font-white); }
h1, h2, h3 {color:var(--font-white); font-weight: 600; margin-bottom: 20px;}
h4, h5, h6 {color:var(--font-white); font-weight: 600; margin-bottom: 16px;}

/*------ MAIN ---------*/
.main-container { margin: 0 auto; max-width: 960px; }

/*---- Header ----*/
header { position: relative; margin: 0; padding: 0; clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);}

.header-container {display: flex; justify-content:space-between; align-items: center; margin: 0; padding: 10px 20px; background-color: var(--main-bg);}

.header-logo {margin: 0; padding: 0; text-align: center; text-decoration: none;}
.header-logo img {display: inline-block; margin: 0; padding: 0; width: 150px;}

.header-btn-container {margin: 0; padding: 0;}

.login-btn,
.login-btn:link,
.login-btn:visited,
.login-btn:hover,
.login-btn:active {
  display: inline-block;
  margin: 0;
  padding: 12px 12px;
  min-width: 120px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-color);
  text-align: center;
  border: 0;
  border-radius: 15px;
  cursor: pointer;
  text-decoration: none;
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
}

@media only screen and (max-width: 768px) {
  .header-container {padding: 10px 10px;}

  .header-logo img {width: 120px;}

  .login-btn,
  .login-btn:link,
  .login-btn:visited,
  .login-btn:hover,
  .login-btn:active {
    padding: 8px 12px;
    font-size: 16px;
  }
}

/*------- header main image -------*/
.header-main-panel { position: relative; margin: 0 auto; padding: 0; max-width: 100%; }
.header-bg {margin: 0; padding: 0; max-width: 100%;}
/*---- end: Header ----*/


/*--- Section Main ---*/
.section { /*display: none;*/ background-color: inherit; }

.section-path {margin: 0; padding: 2rem 0 2rem 0;
  background: url('../img/path/section_path_bg.png');
  background-repeat: repeat;
  background-position: left top;
  background-size: 100%;
  background-color: var(--main-bg);
}

.section-foryou {margin: 0; padding: 2rem 0 0 0;
  background: url('../img/foryou/section_foryou_bg.png');
  background-repeat: repeat;
  background-position: right bottom;
  background-size: 100%;
  background-color: #f2f7fb;
  clip-path: polygon(50% 5%, 0 0, 0 100%, 100% 100%, 100% 0);
}

.section-personal {margin: 0; padding: 2rem 0 4rem 0;
  background: url('../img/personal/personal_section_bg.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%;
  background-color: var(--main-bg);
  clip-path: polygon(100% 0, 100% 95%, 50% 100%, 0 95%, 0 0);
}

.section-promo {margin: 0; padding: 7rem 0 2rem 0;
  background: url('../img/promo/promo_bg.png'), url('../img/promo/section_shevron_bg.png');
  background-repeat: repeat, no-repeat;
  background-position: left top, top center;
  background-size: 100%, 100%;
  background-color: #f2f7fb;
  clip-path: polygon(50% 5%, 0 0, 0 95%, 50% 100%, 100% 95%, 100% 0);
}

.section-course { margin: 0; padding: 2rem 0; background-color: #ffffff; overflow: hidden; background-color: var(--main-bg);}

.section-faq { margin: 0; padding: 2rem 0;
  background: url('../img/faq/faq_bg.png');
  background-repeat: repeat;
  background-position: left top;
  background-color: #f2f7fb;
  background-size: 100%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 50% 2%);
}

@media only screen and (max-width: 576px) {
  .section-promo {padding: 5rem 0 2rem 0;}
  .section-course {padding: 1rem 0;}
}
/*--- end: Section Main ---*/


/*--- Path section ---*/
.path-top-panel { margin: 0 0 40px 0; padding: 0 10px; text-align: center; }

.path-main-image {margin: 0 auto; padding: 0; width: 200px; height: 150px; background: url('../img/path/main_logo.png'); background-repeat: no-repeat; background-position: center top; background-size: 160px;}
/*-----------*/
.path-collection {display: flex; justify-content: space-between; margin: 0 0 20px 0; padding: 0 30px; }

.path-item {width: 30%; margin: 0 0 10px 0; padding: 10px 10px; min-height: 150px; border-radius: 16px; background-color: #ffffff;}
.path-item-inner {margin: 0; padding: 20px 0px; height: 100%; border-radius: 16px; border: 1px dashed #03233c;}

.path-item-title {
  position: relative;
  margin: 0 0 20px 0;
  padding: 8px 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-title);
  text-align: center;
  background-color: var(--main-bg);
}
.path-item-title span {
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.path-icon-01::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -30px;
  bottom: -15px;
  display: block;
  margin: 0;
  padding: 0;
  width: 70px;
  height: 70px;
  background: url('../img/path/path_icon_01.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100%;
}
.path-icon-02::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -30px;
  bottom: -15px;
  display: block;
  margin: 0;
  padding: 0;
  width: 70px;
  height: 70px;
  background: url('../img/path/path_icon_02.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100%;
}
.path-icon-03::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -30px;
  bottom: -15px;
  display: block;
  margin: 0;
  padding: 0;
  width: 70px;
  height: 70px;
  background: url('../img/path/path_icon_03.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100%;
}

.path-item-text {
  margin: 0;
  padding: 0 20px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-title);
  text-align: left;
}

@media only screen and (max-width: 768px) {
  .path-top-panel { margin: 0 0 20px 0; padding: 0 10px; }
  .path-main-image { width: 200px; height: 140px; background-size: 140px;}

  .path-collection { margin: 0 0 10px 0; padding: 0; flex-direction: column;}
  .path-item {width: 100%; margin: 0 0 20px 0;}

  .path-icon-01::after,
  .path-icon-02::after,
  .path-icon-03::after { left: -10px;}
}
@media only screen and (max-width: 400px) {
  .path-item-title { font-size: 22px; }
  .path-item-text { font-size: 16px; }
}
/*--- end: Path section ---*/

/*--- ForYou section ---*/
.foryou-top-panel {position: relative; margin: 0; padding: 0; text-align: center; }

.foryou-top-group {display: inline-flex; align-items: center; margin: 0; padding: 0; transform: rotate(5deg);}

.foryou-top-img {margin: 0; padding: 0; width: 140px;}
.foryou-top-img img {margin: 0; padding: 0; max-width: 100%;}
.foryou-top-title {margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.2; color: var(--font-title); text-align: left; }

/*-----------*/
.foryou-collection {display: flex; flex-wrap: wrap; justify-content:space-between; margin: 0 0 20px 0; padding: 0 0 20px 0; }

.foryou-main-image {position:relative; width:40%; margin: 0; padding: 0; overflow: hidden;}
.foryou-main-image img {margin: 0; padding: 0; max-width: 100%;}

.foryou-info {width: 60%; display: flex; justify-content: center; flex-direction: column; margin: 0; padding: 10px 20px;}

.foryou-info-text { position: relative; margin: 0 0 20px 0; padding: 0; text-align: left; }
.foryou-info-text p {margin: 0 0 20px 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.2; color: #537fa2; text-align: left; }
.foryou-info-text p.select {margin: 0 0 20px 0; padding: 0; font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--font-title);}

.path-item-title span {
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/*-----------------*/
.foryou-circle {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 20px;
  display: block;
  margin: 0;
  padding: 0;
  width: 160px;
  height: 160px;
  background: url('../img/foryou/foryou_circle.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 160px;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*----------*/
.foryou-btn-container {margin: 0; padding: 10px 0; text-align: left;}

.foryou-btn,
.foryou-btn:link,
.foryou-btn:visited,
.foryou-btn:hover,
.foryou-btn:active {
  position: relative;
  z-index: 6;
  display: inline-block;
  margin: 0;
  padding: 12px 10px;
  min-width: 150px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color:var(--font-color);
  text-align: center;
  border: 0;
  border-radius: 15px;
  background: #ffffff;
  cursor: pointer;
  text-decoration: none;
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background-repeat: repeat;
  background-position: left top;
  background-size: 100%;
  box-shadow: 0px 10px 19px 1px rgba(0, 191, 255, 0.64);
}

.foryou-btn::after {
  content: "";
  position: absolute;
  z-index: 5;
  right:-50px;
  top: -35px;
  display: block;
  margin: 0;
  padding: 0;
  width: 60px;
  height: 85px;
  background: url('../img/foryou/foryou_btn_icon.png');
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 60px;
}

@media only screen and (max-width: 768px) {
  .foryou-collection { flex-direction: column; }

  .foryou-main-image {width:100%; margin: 0; padding: 0; }
  .foryou-main-image img {margin: 0 auto; padding: 0; max-width: 100%;}

  .foryou-info {width: 100%; margin: 0; padding: 20px 10px;}
  .foryou-info-text { margin: 0;}
  .foryou-info-text p {font-size: 18px;}
  .foryou-info-text p.select {font-size: 20px;}
  /*-----------*/
  .foryou-btn::after {
    right:-40px;
    top: -15px;
    padding: 0;
    width: 50px;
    height: 71px;
    background-size: 50px;
    display: none;
  }
}
@media only screen and (max-width: 400px) {

}
/*--- end: ForYou section ---*/


/*--- Personal section ---*/
.personal-top-panel { margin: 0 0 40px 0; padding: 0 10px; text-align: center; }

.personal-top-title { margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size:30px; font-weight: 600; line-height: 1.2; color:var(--font-white); text-transform:uppercase; text-align: center; }
/*-----------*/

.personal-manifest {position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 0 20px; }

.personal-gradient-line {
  margin: 2em 0 2rem 0;
  padding: 0;
  width: 100%;
  height: 1px;
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 15%, rgba(255,255,255,1) 19%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 83%, rgba(255,255,255,0.8) 85%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 15%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 83%,rgba(255,255,255,0.8) 85%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 15%,rgba(255,255,255,1) 19%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 83%,rgba(255,255,255,0.8) 85%,rgba(255,255,255,0) 100%);
}

.personal-manifest-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 20px 0 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-white);
  text-align: left;
  text-transform: uppercase;
}
.personal-manifest-title img { margin: 0; padding: 0; width: 150px; }

.personal-manifest-text {
  margin: 0;
  padding: 0 0 0 20px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color:var(--font-white);
  text-align: left;
}

/*-----------------*/
.personal-targets {display: flex; flex-wrap: wrap; gap:20px; justify-content: center; margin: 0 0 100px 0; padding: 0 20px;}

.personal-targets-item {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 30px 90px 30px 15px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color:var(--font-title);
  text-align: left;
  white-space: nowrap;
  border-radius: 20px;
  box-shadow: 0px 10px 19px 1px rgba(0, 191, 255, 0.64);
}

.personal-targets-item.type-01 {
  background: url('../img/personal/personal_target_01.png');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 94px;
  background-color: #ffffff;
}
.personal-targets-item.type-02 {
  background: url('../img/personal/personal_target_02.png');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 94px;
  background-color: #ffffff;
}
.personal-targets-item.type-03 {
  background: url('../img/personal/personal_target_03.png');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 100px;
  background-color: #ffffff;
}

.personal-targets-item.type-01::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 34%;
  bottom: -60px;
  display: block;
  margin: 0;
  padding: 0;
  width: 150px;
  height: 60px;
  background: url('../img/personal/personal_target_arrow_01.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 150px;
}
.personal-targets-item.type-02::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 45%;
  bottom: -100px;
  display: block;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 120px;
  background: url('../img/personal/personal_target_arrow_02.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}
.personal-targets-item.type-03::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: -70px;
  display: block;
  margin: 0;
  padding: 0;
  width: 150px;
  height: 90px;
  background: url('../img/personal/personal_target_arrow_03.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 150px;
}
/*------------*/
.personal-complexity {display: flex; flex-wrap: wrap; gap:20px; justify-content:center; margin: 0 0 20px 0; padding: 0 20px;}

.personal-complexity-item {
  position: relative;
  /*flex: 1;*/
  margin: 0;
  padding: 16px 26px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color:var(--font-white);
  text-align: left;
  white-space: nowrap;
  border-radius: 40px;
}
.personal-complexity-item span {
  font-size: 16px;
  font-weight: 400;
}

.personal-complexity-item.type-01 {
  background-color: rgb(95, 151, 243);
  box-shadow: 0px 10px 19px 1px rgba(0, 191, 255, 0.64);
}
.personal-complexity-item.type-02 {
  background-color: rgb(223, 177, 17);
  box-shadow: 0px 10px 19px 1px rgba(223, 177, 17, 0.64);
}
.personal-complexity-item.type-03 {
  background-color: rgb(104, 17, 223);
  box-shadow: 0px 10px 19px 1px rgba(104, 17, 223, 0.64);
}

@media only screen and (max-width: 768px) {
  .personal-top-panel { margin: 0 0 20px 0; padding: 0 10px; }
  .personal-top-title { font-size: 26px; }

  .personal-manifest {flex-direction: column; align-items: flex-start;}
  .personal-manifest-title {margin: 0 0 20px 0; padding: 0; font-size: 28px;}
  .personal-manifest-text {padding: 0;}

  /*------------*/
  .personal-targets {flex-direction: column; justify-content: space-around; margin: 0 0 50px 0; padding: 0;}
  .personal-targets-item {margin: 0 0 5px 0;}
  .personal-targets-item.type-01::after {display: none;}
  .personal-targets-item.type-02::after {display: none;}
  .personal-targets-item.type-03::after {display: none;}
  /*------------*/
  .personal-complexity {padding: 0;}
  .personal-complexity-item {flex:1; padding: 16px 26px; font-size: 16px; border-radius: 40px; }
  .personal-complexity-item span { font-size: 16px; }

}
@media only screen and (max-width: 576px) {
  .personal-top-title { font-size: 22px; }

  .personal-manifest-title img { width: 100px; }
}
/*--- end: Personal section ---*/


/*--- Promo section ---*/
.promo-top-panel { margin: 0 0 40px 0; padding: 0 10px; text-align: center; }

.promo-top-title { margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size:30px; font-weight: 600; line-height: 1.2; color:var(--font-title); text-transform:uppercase; text-align: center; }
/*-------*/
.promo-collection { margin: 0 0 20px 0; padding: 0 20px; }

.promo-item {display: flex; align-items:center; margin: 0 0 25px 0; padding: 0;}

.promo-item-image {margin: 0 16px 0 0; padding: 0; border-radius: 30px; box-shadow: 0px 3px 24px 0px rgba(103, 176, 201, 0.14);}
.promo-item-image img {margin: 0; padding: 0; max-width: 64px;}

.promo-item-text {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-title);
  text-align: left;
}

@media only screen and (max-width: 768px) {
  .promo-collection { margin: 0 0 10px 0; padding: 0 5px; }
  .promo-top-panel { margin: 0 0 20px 0; padding: 0 10px; }
  .promo-top-title { font-size: 26px; }

  .promo-item {margin: 0 0 15px 0;}
  .promo-item-text { font-size: 16px; }

  .promo-item-image img {max-width: 50px;}
}
@media only screen and (max-width: 576px) {
  .promo-top-title { font-size: 22px; }
  .promo-item-text { font-size: 14px; }

  .promo-item-image {margin: 0 8px 0 0;}
  .promo-item-image img {max-width: 50px;}
}
/*--- end: Promo section ---*/


/*--- Course secion ---*/
.course-panel { margin: 0 0 20px 0; padding: 0; text-align: center;}

.course-panel-title { display: inline-block; position: relative; margin: 0; padding: 12px 10px; font-family: 'Roboto Condensed', Arial, sans-serif; font-size:36px; font-weight: 600; line-height: 1.2; color: var(--font-white); text-transform:uppercase; text-align: center;
  text-shadow: 4px -2px 0 #195472; font-style: italic;
}
.course-panel-title span { font-size:26px; }

/*-------*/
.course-bottom-container { display: block; margin: 0 auto; padding: 26px 44px; /*background-color: rgba(30, 31, 36,0.5);*/ border-radius: 30px;
  background: url('../img/course/course_bottom_bg.png');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 900px 100%;
}
.course-bottom-box { width: 440px; margin: 0 auto; padding: 0;}

/*--- course info ---*/
.course-info {display: flex; justify-content:space-between; align-items: center; margin: 0 0 20px 0; padding: 20px 0 0 0;}

.course-info-price {width:30%; margin: 0; padding: 0;}

.course-info-top { margin: 0; padding: 0 0 5px 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size:16px; font-weight: 600; line-height: 1.2; color: #8c98a2; text-align: left; }
.course-info-top span { text-decoration: line-through; }

.course-price { margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 64px; font-weight: 600; line-height: 50px; color: var(--font-color); text-align: left; }
.course-price.price-full { display: none; }

.course-countdown {
  position: relative;
  margin: 20px 0;
  padding: 5px 10px 5px 50px;
  border-radius: 16px;
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  box-shadow: 0px 10px 19px 1px rgba(0, 191, 255, 0.64);
}
.course-countdown-text { margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; color: var(--font-white); text-align: left; }
.course-countdown-timer { margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 42px; font-weight: 400; line-height: 1.2; color: var(--font-white); text-align: left; }

.course-countdown::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -32px;
  bottom: 0px;
  display: block;
  margin: 0;
  padding: 0;
  width: 75px;
  height: 92px;
  background: url('../img/course/stopwatch.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 75px;
}

@media only screen and (max-width: 768px) {
  .course-panel-title { padding: 12px 10px; font-size: 26px; }
  .course-panel-title span { font-size:20px; }

  .course-bottom-container {
    padding: 16px 22px;
    background-position: center top;
    background-size: 100% auto;
  }
  .course-bottom-box { width: 100%;}

  .course-info {flex-direction: column; }
  .course-info-price {width:auto; align-self: center; margin: 0 0 20px 0;}
  .course-price.price-full { margin: 0;  }

  .course-price { font-size: 48px; }
  .course-countdown { margin: 10px 0; }
  .course-countdown-timer { font-size: 32px; }
  /*----------------*/
}
@media only screen and (max-width: 576px) {
  /*-------------*/
  .course-bottom-container { padding: 16px 22px;}
}
@media only screen and (max-width: 400px) {
  /*----------------*/
  .course-panel-title { padding: 12px 10px; font-size: 22px; }

  .course-bottom-box-left { padding: 10px 10px;}

  .course-price { font-size: 48px; }
  .course-countdown { margin: 10px 0; }
  .course-countdown-timer { font-size: 32px; }
  /*----------------*/
}
/*--- end: Course section ---*/

/*--- Form Course ----*/
.form-course { margin: 0; padding: 0;}

.form-control {padding: 0.625rem 0.75rem; font-weight: 400; color: #1e1f24; background-color: #d3fdff; }
.form-control::placeholder { color: #1e1f24; }
.form-control:focus { box-shadow: none; background-color: #d3fdff; }

.form-check-input {background-color: #1e1f24; border-color: #ffffff;}
.form-check-input:focus { box-shadow: none; border-color: #ffffff;}
.form-check-input:checked { background-color: #1e1f24; border-color: #5fd8d5; }
.form-check-input:checked[type=checkbox] { background: url('../img/checkbox.svg'); }
.form-check label { font-size: 10px; }

/*--- form btn ----*/
.form-btn-container {position: relative; margin: 0 0 1rem 0; padding: 5px 0; text-align: center;}

.form-btn,
.form-btn:link,
.form-btn:visited,
.form-btn:hover,
.form-btn:active {
  display: inline-block;
  margin: 0;
  padding: 12px 36px;
  width: 100%;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-color);
  text-align: center;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  box-shadow: 0px 10px 19px 1px rgba(0, 191, 255, 0.64);
}
.form-btn:disabled { opacity: 0.6; }

@media only screen and (max-width: 768px) {
  .form-btn,
  .form-btn:link,
  .form-btn:visited,
  .form-btn:hover,
  .form-btn:active {
    padding: 12px 18px;
    font-size: 18px;
  }
}
@media only screen and (max-width: 576px) {
  .form-course { padding: 0; }

  .form-control { font-size: 14px; }

  .form-btn,
  .form-btn:link,
  .form-btn:visited,
  .form-btn:hover,
  .form-btn:active {
    padding: 12px 16px;
    font-size: 16px;
  }
}
/*--- end: Form Course ----*/

/*---- Lang ----*/
.lang-btn,
.lang-btn:link,
.lang-btn:visited,
.lang-btn:hover,
.lang-btn:active {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color:var(--font-color);
  text-align: center;
  border: 0;
  border-bottom: 1px dotted #ffffff;
  cursor: pointer;
  text-decoration: none;
}
.lang-btn:hover {
  border-bottom: 1px dotted transparent;
}

@media only screen and (max-width: 768px) {
  .lang-btn,
  .lang-btn:link,
  .lang-btn:visited,
  .lang-btn:hover,
  .lang-btn:active {
    font-size: 14px;
  }
}




/*--- FAQ ---*/
.faq-top-panel{ margin: 0 0 20px 0; padding: 0; text-align: center;}

.faq-top-title {
  display: inline-block;
  margin: 0;
  padding: 16px 0px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size:30px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-title);
  text-align: center;
}
/*-------*/
.accordion {margin: 0; --bs-accordion-border-width:0px;}

.accordion-item {background: none; border: none;}

.accordion-button {font-size: 20px; color:var(--font-faq); background: none; border: none;  outline: none;}
.accordion-button::after {
  background: url('../img/faq/plus-lg.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}
.accordion-button:focus {color:var(--font-faq); background: none; border: none; border-radius: 3px; outline: none; box-shadow: 0 0 5px rgba(75,98,212,1);}
.accordion-button:not(.collapsed) {color:var(--font-faq); background: none; border: none;}
.accordion-button:not(.collapsed)::after {
  background: url('../img/faq/dash-lg.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.accordion-body {font-size: 16px; color:var(--font-faq); border: none;}

@media only screen and (max-width: 768px) {
  .faq-top-panel{ margin: 0 0 10px 0;}
  .faq-top-title { font-size: 26px; }

  .accordion-button {font-size: 18px;}
  .accordion-body {font-size: 14px;}
}
@media only screen and (max-width: 400px) {
  .faq-top-title { font-size: 22px; }

  .accordion-button {font-size: 16px;}
  .accordion-body {font-size: 14px;}
}
/*--- end: FAQ ---*/


/*--- Elements---*/
/*--- button ---*/
.btn-container {position: relative; margin: 0; padding: 25px 0; text-align: center;}

.main-btn,
.main-btn:link,
.main-btn:visited,
.main-btn:hover,
.main-btn:active {
  display: inline-block;
  margin: 0;
  padding: 12px 36px;
  min-width: 150px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color:var(--font-color);
  text-align: center;
  border: 0;
  border-radius: 15px;
  background: #ffffff;
  cursor: pointer;
  text-decoration: none;
  background: rgb(104,224,207);
  background: -moz-linear-gradient(left, rgba(104,224,207,1) 0%, rgba(32,156,255,1) 100%);
  background: -webkit-linear-gradient(left, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background: linear-gradient(to right, rgba(104,224,207,1) 0%,rgba(32,156,255,1) 100%);
  background-repeat: repeat;
  background-position: left top;
  background-size: 100%;
}

@media only screen and (max-width: 768px) {
  .btn-container {padding: 12px 0;}
  .main-btn,
  .main-btn:link,
  .main-btn:visited,
  .main-btn:hover,
  .main-btn:active {
    padding: 12px 26px;
    font-size: 22px;
  }
}

@media only screen and (max-width: 576px) {
  .main-btn,
  .main-btn:link,
  .main-btn:visited,
  .main-btn:hover,
  .main-btn:active {
    padding: 12px 18px;
    font-size: 20px;
  }
}
@media only screen and (max-width: 400px) {
  .main-btn,
  .main-btn:link,
  .main-btn:visited,
  .main-btn:hover,
  .main-btn:active {
    padding: 12px 10px;
    font-size: 16px;
  }
}
/*---- Entrance ----*/

/*--- end: Elements---*/

/*--- Simple Page ---*/
.simple-page { margin: 0 0 20px 0; padding: 0;}

.simple-page-top-panel { display: flex; justify-content:space-between; align-items: center; min-height: 60px; margin: 20px 0; padding: 10px 10px; }

.simple-page-title { display: inline-block; margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.2; color:var(--font-white); text-align: center; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.simple-page-top-link { display: inline-block; margin: 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.2; color:var(--font-white); text-align: left; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.simple-page-top-link a:link,
.simple-page-top-link a:visited,
.simple-page-top-link a:hover,
.simple-page-top-link a:active {
  margin: 0;
  padding: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color:var(--font-white);
  text-align: left;
  text-decoration: none;
}

.simple-page-top-link .bi { margin: 0; padding: 0; font-size: 18px; color:var(--font-color); }

@media only screen and (max-width: 576px) {
  .simple-page-top-panel {
    justify-content:center; align-items:flex-start; flex-direction: column;
    padding: 10px 10px;
  }
  .simple-page-top-link { display: block; margin: 0 0 16px 0;}
  .simple-page-title { display: block; font-size: 22px;}
}
/*-----------------*/
.simple-page-content {
  margin: 0 0 30px 0;
  padding: 10px 10px;
  border-radius: 10px;
  background-color:var(--main-bg);
  box-shadow: 0px 10px 19px 1px rgba(0, 191, 255, 0.5);
}

.simple-page-img { margin: 0 0 16px 0; padding: 0; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0,0,0,0.15);}
.simple-page-img img { margin: 0; padding: 0; width: 100%; border-radius: 10px; }

.simple-page-video { margin: 0 0 16px 0; padding: 0; border-radius: 10px; /*overflow: hidden;*/}
.simple-page-video img { margin: 0; padding: 0; width: 100%; border-radius: 10px; }
.simple-page-video video { margin: 0 auto; padding: 0; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 3px 3px 5px rgba(0,0,0,0.15);}
/*----- Simple Page ----*/


/*----- Footer ----*/
.footer {padding: 3rem 10px 1rem 10px; max-width: 960px; /*background-color: rgba(255, 0, 170, 0.66);*/}
.footer-line {margin: 0 0 10px 0; padding: 0; color: var(--font-white); font-size: 16px; text-align: left;}

.footer-text { display: block; margin: 0 0 10px 0; padding: 0; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.2; color:var(--font-white); text-align: center;}

.footer-image {margin: 0 0 16px 0; padding: 0; text-align: center;}
.footer-image img {display: inline-block; margin: 0 5px 5px 5px; padding: 0; max-width: 30%;}

/*---- footer menu ----*/
.footer-menu {margin: 0; padding: 0;}
.footer-menu-item:link,
.footer-menu-item:visited,
.footer-menu-item:active {
  display: block;
  margin: 0 0 5px 0;
  padding: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color:var(--font-white);
  text-align: left;
  text-decoration: none;
}
.footer-menu-item:hover { text-decoration: underline; }

@media only screen and (max-width: 768px) {
  .footer {padding: 1rem 10px;}
  .footer-text { font-size: 16px; text-align: left; }
  .footer-image {margin: 0 0 16px 0; text-align: left;}
}
@media only screen and (max-width: 400px) {
  .footer {padding: 1rem 10px;}
  .footer-text {font-size: 14px;}

  .footer-menu-item:link,
  .footer-menu-item:visited,
  .footer-menu-item:active { font-size: 14px; }
}
/*----- end: Footer ----*/
/*------- end: Custom css ----*/