@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

img {
  text-align: right;
}

h1 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  text-align: left;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 25px;
  color: #606060;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/

::-webkit-scrollbar-thumb {
  background: #2C6169;
}

html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #2C6169;
  /*CHANGE SELECT ANY TEXT MOUSE*/
  color: #fff;
}

::-moz-selection {
  background: #3d0aca;
  color: rgb(5, 73, 64);
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

a.main-button-slider {
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #2C6169;
  /*CHANGE MAIN BUTTON COLOR*/
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button-slider:hover {
  background-color: #fff700;
  /*CHANGE MAIN BUTTON COLOR HOVER*/
  color: #606060;
}

a.main-button {
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #ffee00;
  /*CHANGE BUTTON ACERCA DE*/
  text-transform: uppercase;
  color: #2C6169;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-button:hover {
  background-color: #2C6169;
  /*CHANGE BUTTON ACERCA DE - HOVER*/
  color: rgb(255, 255, 255);
}

button.main-button {
  outline: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 25px;
  padding: 15px 25px;
  background-color: #fff700;
  /*CHANGE FOOTER BUTTON NORMAL*/
  text-transform: uppercase;
  color: #606060;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

button.main-button:hover {
  background-color: #2C6169;
  /*CHANGE FOOTER BUTTON HOVER*/
  color: #ffffff;

}


.center-heading {
  margin-bottom: 70px;
}

.center-heading h2 {
  margin-top: 0px;
  text-align: center;
  font-size: 42px;
  font-weight: 600;
  color: #2C6169;
  margin-bottom: 25px;
}

.center-heading h2 em {
  font-style: normal;
  color: #fff700;
  /*DONACIONES HIGH CONTRAST | faq*/
  background-color: #2C6169;
}

.center-heading h4 {
  margin-top: 0px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #2C6169;
  margin-bottom: 25px;
}

.center-heading p {
  font-size: 15px;
  color: #606060;
  text-align: center;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #ffffff;
  /*CHANGE APPBAR BACK COLOR NOT TOP*/
  height: 80px !important;
  position: fixed !important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px #2C6169 !important;
  /*CHANGE SHADOW APPBAR NOT TOP*/
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #bdbaba !important;
  /*CHANGE MAIN TITLE NOT TOP*/
}

.background-header .main-nav .nav li:hover a {
  color: #2C6169 !important;
  /*CHANGE TEXT MENU HOVER NOT TOP*/
}

.background-header .nav li a.active {
  color: #2C6169 !important;
  /*CHANGE TEX MENU SELECTED NOT TOP*/
}

.header-area {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 80px;
  color: #1534e6;
  /*CHANGE MAIN LOGO TOP NOT USED*/
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}


.header-area .main-nav .nav {
  float: left;
  margin-top: 27px;
  margin-left: 15%;
  margin-right: 0px;
  background-color: #ffffff;
  /*CHANGE NAV BACKGRND*/
  padding: 0px 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #bdbaba;
  /*CHANGE NAV TOP DEFAULT COLOR*/
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a {
  color: #2C6169;
  /*CHANGE NAV TOP HOVER*/
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 35px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #7a7a7a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 10px 0 #a7a7a7c6;
  /*CHANGE MAIN MENU SHADOWS*/
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transform: translateY(-2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  display: block;
  background: #fff;
  color: #7a7a7a !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5;
}

.header-area .main-nav .nav li.submenu ul li a:before {
  content: '';
  position: absolute;
  width: 0px;
  height: 40px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #fff700;
  /*CHANGE SECT PROGRAMAS*/
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #2C6169 !important;
  /*CHANGE SECT PROGRAMAS*/
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area.header-sticky .nav {
  margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
  color: #2C6169;
  /*CHANGE PRINCIPAL TEXT COLOR ACTIVE*/
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 991px) {
  .logo {
    text-align: center;
    float: none !important;
    font-size: xx-small;
  }

  .header-area {
    background-color: #ffffff;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 30px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    margin-top: 0px !important;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #2D626A !important;
  }

  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }

  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }

  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
welcome
--------------------------------------------- 
*/
.welcome-area {
  width: 100%;
  height: 100vh;
  min-height: 793px;
  background-image: url(https://assets.hicode.education/en/images/banner-bg.png);
  /*CHANGE MAIN IMAGE*/
  background-repeat: no-repeat;
  background-position: right top;

}

.welcome-area .header-text .left-text {
  position: relative;
  align-self: center;
  margin-top: 35%;
  transform: perspective(1px) translateY(-30%) !important;
}

.welcome-area .header-text h1 {
  font-weight: 600;
  font-size: 52px;
  line-height: 80px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  color: #2C6169;
  /*CHANGE WORDS MAIN TEXT 1ST*/
}

.welcome-area .header-text h1 em {
  font-style: normal;
  color: #fbff00;
  /*CHANGE WORD MAIN TEXT 2ND*/
  background-color: #2C6169;
}

.welcome-area .header-text p {
  font-weight: 300;
  font-size: 17px;
  color: #606060;
  /*CHANGE WORDS MAIN TEXT 3RD*/
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
  position: relative;
}

@media (max-width: 1420px) {
  .welcome-area .header-text {
    width: 70%;
    margin-left: 5%;
  }
}

@media (max-width: 1320px) {
  .welcome-area .header-text .left-text {
    margin-top: 50%;
  }

  .welcome-area .header-text {
    width: 50%;
    margin-left: 5%;
  }
}

@media (max-width: 1140px) {
  .welcome-area {
    height: auto;
  }

  .welcome-area .header-text {
    width: 92%;
    padding-top: 793px;
  }

  .welcome-area .header-text .left-text {
    margin-top: 5%;
    transform: none !important;
  }
}

@media (max-width: 810px) {
  .welcome-area {
    background-size: contain;
  }

  .welcome-area .header-text {
    padding-top: 100%;
    margin-left: 0;
  }

  .container-fluid .col-md-12 {
    margin-right: 0px;
    padding-right: 0px;
  }
}

/*------------------------- FIRST STEPS -------------------------------*/

.welcome-area_pr {
  width: 100%;
  height: 100vh;
  min-height: 793px;
  background-image: url(https://assets.hicode.education/en/images/banner-bg_pr.png);
  /*CHANGE MAIN IMAGE*/
  background-repeat: no-repeat;
  background-position: right top;
  margin-bottom: 30px;

}

.welcome-area_pr .header-text .left-text {
  position: relative;
  align-self: center;
  margin-top: 35%;
  transform: perspective(1px) translateY(-30%) !important;
}

.welcome-area_pr .header-text h1 {
  font-weight: 600;
  font-size: 52px;
  line-height: 80px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  color: #2C6169;
  /*CHANGE WORDS MAIN TEXT 1ST*/
}

.welcome-area_pr .header-text h1 em {
  font-style: normal;
  color: #fbff00;
  /*CHANGE WORD MAIN TEXT 2ND*/
  background-color: #2C6169;
}

.welcome-area_pr .header-text p {
  font-weight: 300;
  font-size: 17px;
  color: #606060;
  /*CHANGE WORDS MAIN TEXT 3RD*/
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
  position: relative;
}

@media (max-width: 1420px) {
  .welcome-area_pr .header-text {
    width: 70%;
    margin-left: 5%;
  }
}

@media (max-width: 1320px) {
  .welcome-area_pr .header-text .left-text {
    margin-top: 50%;
  }

  .welcome-area_pr .header-text {
    width: 50%;
    margin-left: 5%;
  }
}

@media (max-width: 1140px) {
  .welcome-area_pr {
    height: auto;
  }

  .welcome-area_pr .header-text {
    width: 92%;
    padding-top: 793px;
  }

  .welcome-area_pr .header-text .left-text {
    margin-top: 5%;
    transform: none !important;
  }
}

@media (max-width: 810px) {
  .welcome-area_pr {
    background-size: contain;
  }

  .welcome-area_pr .header-text {
    padding-top: 100%;
    margin-left: 0;
  }

  .container-fluid .col-md-12 {
    margin-right: 0px;
    padding-right: 0px;
  }
}

/*------------------------- EXPLORING TECHNOLOGY -------------------------*/

.welcome-area_et {
  width: 100%;
  height: 100vh;
  min-height: 793px;
  background-image: url(https://assets.hicode.education/en/images/banner-bg_et.png);
  /*CHANGE MAIN IMAGE*/
  background-repeat: no-repeat;
  background-position: right top;

}

.welcome-area_et .header-text .left-text {
  position: relative;
  align-self: center;
  margin-top: 35%;
  transform: perspective(1px) translateY(-30%) !important;
}

.welcome-area_et .header-text h1 {
  font-weight: 600;
  font-size: 52px;
  line-height: 80px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  color: #2C6169;
  /*CHANGE WORDS MAIN TEXT 1ST*/
}

.welcome-area_et .header-text h1 em {
  font-style: normal;
  color: #fbff00;
  /*CHANGE WORD MAIN TEXT 2ND*/
  background-color: #2C6169;
}

.welcome-area_et .header-text p {
  font-weight: 300;
  font-size: 17px;
  color: #606060;
  /*CHANGE WORDS MAIN TEXT 3RD*/
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
  position: relative;
}

@media (max-width: 1420px) {
  .welcome-area_et .header-text {
    width: 70%;
    margin-left: 5%;
  }
}

@media (max-width: 1320px) {
  .welcome-area_et .header-text .left-text {
    margin-top: 50%;
  }

  .welcome-area_et .header-text {
    width: 50%;
    margin-left: 5%;
  }
}

@media (max-width: 1140px) {
  .welcome-area_et {
    height: auto;
  }

  .welcome-area_et .header-text {
    width: 92%;
    padding-top: 793px;
  }

  .welcome-area_et .header-text .left-text {
    margin-top: 5%;
    transform: none !important;
  }
}

@media (max-width: 810px) {
  .welcome-area_et {
    background-size: contain;
  }

  .welcome-area_et .header-text {
    padding-top: 100%;
    margin-left: 0;
  }

  .container-fluid .col-md-12 {
    margin-right: 0px;
    padding-right: 0px;
  }
}

/*------------------------- CS FOR ALL -------------------------*/

.welcome-area_csfa {
  width: 100%;
  height: 100vh;
  min-height: 793px;
  background-image: url(https://assets.hicode.education/en/images/banner-bg_csfa.png);
  /*CHANGE MAIN IMAGE*/
  background-repeat: no-repeat;
  background-position: right top;

}

.welcome-area_csfa .header-text .left-text {
  position: relative;
  align-self: center;
  margin-top: 35%;
  transform: perspective(1px) translateY(-30%) !important;
}

.welcome-area_csfa .header-text h1 {
  font-weight: 600;
  font-size: 52px;
  line-height: 80px;
  letter-spacing: 1px;
  margin-bottom: 30px;
  color: #2C6169;
  /*CHANGE WORDS MAIN TEXT 1ST*/
}

.welcome-area_csfa .header-text h1 em {
  font-style: normal;
  color: #fbff00;
  /*CHANGE WORD MAIN TEXT 2ND*/
  background-color: #2C6169;
}

.welcome-area_csfa .header-text p {
  font-weight: 300;
  font-size: 17px;
  color: #606060;
  /*CHANGE WORDS MAIN TEXT 3RD*/
  line-height: 30px;
  letter-spacing: 0.25px;
  margin-bottom: 40px;
  position: relative;
}

@media (max-width: 1420px) {
  .welcome-area_csfa .header-text {
    width: 70%;
    margin-left: 5%;
  }
}

@media (max-width: 1320px) {
  .welcome-area_csfa .header-text .left-text {
    margin-top: 50%;
  }

  .welcome-area_csfa .header-text {
    width: 50%;
    margin-left: 5%;
  }
}

@media (max-width: 1140px) {
  .welcome-area_csfa {
    height: auto;
  }

  .welcome-area_csfa .header-text {
    width: 92%;
    padding-top: 793px;
  }

  .welcome-area_csfa .header-text .left-text {
    margin-top: 5%;
    transform: none !important;
  }
}

@media (max-width: 810px) {
  .welcome-area_csfa {
    background-size: contain;
  }

  .welcome-area_csfa .header-text {
    padding-top: 100%;
    margin-left: 0;
  }

  .container-fluid .col-md-12 {
    margin-right: 0px;
    padding-right: 0px;
  }
}

/*
---------------------------------------------
about
---------------------------------------------
*/

#about {
  padding: 100px 0px;
  position: relative;
  z-index: 9;
}

@media (max-width: 992px) {
  .features-item {
    margin-bottom: 45px;
  }
}

.features-item {
  border-radius: 5px;
  padding: 60px 30px;
  text-align: center;
  box-shadow: 0px 0px 10px #2C6169;
  /*CHANGE SHADOW ABOUT*/
}

.features-item h2 {
  z-index: 9;
  position: absolute;
  top: 15px;
  left: 45px;
  font-size: 100px;
  font-weight: 600;
  color: #2C6169;
  /*CHANGE NUMBER SECT ABOUT*/
}

.features-item h2 em {
  font-size: 10px;
  font-style: normal;
}

.features-item img {
  z-index: 10;
  position: relative;
  max-width: 100%;
  margin-bottom: 40px;
  left: 30%;
}

.features-item h4 {
  margin-top: 0px;
  font-size: 22px;
  color: #2C6169;
  /*CHANGE ABOUT TITLE*/
  margin-bottom: 25px;
}

.features-item .main-button {
  margin-top: 35px;
  display: inline-block;
}


/*
---------------------------------------------
promotion
---------------------------------------------
*/

.left-image-decor {
  background-image: url(https://assets.hicode.education/en/images/left-bg-decor.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

.left-image-decor_pr {
  background-image: url(https://assets.hicode.education/en/images/left-bg-decor_pr.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

.left-image-decor_et {
  background-image: url(https://assets.hicode.education/en/images/left-bg-decor_et.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

.left-image-decor_csfa {
  background-image: url(https://assets.hicode.education/en/images/left-bg-decor_csfa.png);
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

#promotion {
  padding: 100px 0px;
}

#promotion .left-image {
  align-self: center;
}

#promotion .right-text ul {
  padding: 0;
  margin: 0;
}

#promotion .right-text ul li {
  display: inline-block;
  margin-bottom: 60px;
}

#promotion .right-text ul li:last-child {
  margin-bottom: 0px;
}

#promotion .right-text img {
  display: inline-block;
  float: left;
  margin-right: 30px;
}

#promotion .right-text h4 {
  font-size: 22px;
  color: #1e1e1e;
  margin-bottom: 15px;
  margin-top: 3px;
}


/*
--------------------------------------------
faq
--------------------------------------------
*/
.right-image-decor {
  background-image: url(https://assets.hicode.education/en/images/right-bg-decor.png);
  background-repeat: no-repeat;
  background-position: right center;
  position: absolute;
  width: 100%;
  display: inline-block;
  height: 110%;
  margin-top: -200px;
}

#faq {
  padding-top: 100px;
  position: relative;
  z-index: 9;
}

#faq .item {
  position: relative;
}

#faq .item .testimonial-content {
  background: rgb(244, 129, 63);
  background: linear-gradient(145deg, rgba(244, 129, 63, 1) 0%, rgba(241, 85, 106, 1) 100%);
  margin-left: 60px;
  padding: 40px 30px;
  text-align: center;
  border-radius: 5px;
}

#faq .item .testimonial-content ul li {
  display: inline-block;
  margin: 0px 1px;
}

#faq .item .testimonial-content ul li i {
  color: #fff;
  font-size: 13px;
}

#faq .item .testimonial-content h4 {
  font-size: 22px;
  margin-top: 20px;
  color: #fff;
}

#faq .item .testimonial-content p {
  color: #fff;
  font-style: italic;
  font-weight: 200;
  margin: 20px 0px 15px 0px;
}

#faq .item .testimonial-content span {
  color: #fff;
  font-weight: 200;
  font-size: 13px;
}

#faq .author img {
  max-width: 120px;
  margin-bottom: -60px;
}

.owl-carousel .owl-nav button.owl-next span {
  z-index: 10;
  top: 45%;
  border-radius: 10px;
  font-size: 46px;
  color: #fff;
  right: -210px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  background: rgb(244, 129, 63);
  background: linear-gradient(145deg, rgba(244, 129, 63, 1) 0%, rgba(241, 85, 106, 1) 100%);
  position: absolute;
}

.owl-carousel .owl-nav button.owl-prev span {
  z-index: 9;
  top: 30%;
  border-radius: 10px;
  font-size: 46px;
  color: #fff;
  right: -150px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  display: inline-block;
  background: rgb(244, 129, 63);
  background: linear-gradient(145deg, rgba(244, 129, 63, 1) 0%, rgba(241, 85, 106, 1) 100%);
  position: absolute;
}

@media screen and (max-width: 1060px) {
  .owl-carousel .owl-nav {
    display: none !important;
  }
}

/* 
---------------------------------------------
footer
--------------------------------------------- 
*/

@media (max-width: 992px) {
  footer {
    padding-top: 0px !important;
    margin-top: 0px !important;
  }

  .contact-form {
    margin-bottom: 45px;
  }

  footer .right-content {
    text-align: center;
  }

  footer .footer-content {
    padding: 60px 0px !important;
  }
}

footer {
  margin-top: 200px;
  padding-top: 120px;
  background-image: url(https://assets.hicode.education/en/images/footer-bg_gracias.png);
  /*CHANGE IMAGE FOOTER*/
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
}

footer .footer-content {
  padding: 120px 0px;
}

.contact-form {
  position: relative;
  z-index: 10;
  padding: 45px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  /*CHANGE FOOTER CONTACT BOX BACKGRND*/
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

}

footer .right-content {
  align-self: center;
}

.contact-form input,
.contact-form textarea {
  color: #2C6169;
  /*CHANGE FOOTER CONTACT BOX WIRTING*/
  font-size: 13px;
  border: 1px solid #2C6169;
  background-color: #ffffff;
  border-radius: 5px;
  width: 100%;
  height: 50px;
  outline: none;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 30px;
}

.contact-form textarea {
  height: 150px;
  resize: none;
  padding: 20px;
}

.contact-form {
  text-align: center;
}

.contact-form ::-webkit-input-placeholder {
  /* Edge */
  color: #7a7a7a;
}

.contact-form :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #7a7a7a;
}

.contact-form ::placeholder {
  color: #7a7a7a;
}

.footer-content .right-content {
  color: #fff;
}

.footer-content .right-content h2 {
  margin-top: 0px;
  margin-bottom: 30px;
  font-size: 42px;
  text-transform: initial;
  font-weight: 600;
  letter-spacing: 1px;
}

.footer-content .right-content h2 em {
  font-style: normal;
  color: #fff700;
  /*CHANGE FOOTER TEXT DIFF WORD*/
}

.footer-content .right-content p {
  color: #FFF;
}

.footer-content .right-content a {
  color: #FFF;
}

.footer-content .right-content a:hover {
  color: #FC3;
}

footer .social {
  overflow: hidden;
  margin-top: 30px;
}

footer .social li:first-child {
  margin-left: 0px;
}

footer .social li {
  margin: 0px 7.5px;
  display: inline-block;
}

footer .social li a {
  color: #fff;
  text-align: center;
  background-color: transparent;
  border: 1px solid #fff;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  display: inline-block;
  font-size: 16px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

footer .social li a:hover {
  background-color: #fbff00;
  /*CHANGE HOVER SOCIAL NET*/
  border-color: #fbff00;
  /*CHANGE*/
  color: #fff;
}

footer .copyright {
  margin-top: 10px;
  font-weight: 400;
  font-size: 15px;
  color: #4a4a4a;
  letter-spacing: 0.88px;
  text-transform: capitalize;
}

footer .sub-footer {
  padding: 60px 0px;
  border-top: 1px solid rgba(250, 250, 250, 0.3);
  text-align: center;
}

footer .sub-footer a {
  color: #FFF;
}

footer .subsub-footer {
  padding: 5px 0px;
  text-align: center;
}

footer .subsub-footer p {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

footer .sub-footer a:hover {
  color: rgb(63, 11, 184);
}

footer .sub-footer p {
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.5px;
}

.version_logo {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  footer .copyright {
    text-align: center;
  }

  footer .social {
    text-align: center;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/
#preloader {
  overflow: hidden;
  background-image: linear-gradient(145deg, #fff700 100%, #fff700 100%);
  /*CHANGE COLOR LOADING*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: fixed;
  z-index: 9999;
  color: #fff;
}

#preloader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 50px;
  height: 50px;
}

#preloader .jumper>div {
  background-color: #fff;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 50px;
  height: 50px;
  -webkit-animation: jumper 1s 0s linear infinite;
  animation: jumper 1s 0s linear infinite;
}

#preloader .jumper>div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}

#preloader .jumper>div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  5% {
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes jumper {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  5% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}