html,body{
    @apply text-base font-dmsans;
  }
  .gradient-bg{
    background: linear-gradient(359.9deg, #F9FFFF 8.38%, #E8F7FC 16.68%, #BCE3F4 32.52%, #7DC7EA 53.64%, #73BBEE 59.67%, #5B9CFB 71.74%, #5695FF 74%);
    min-height: 80vh;
  }

  .btn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 18px;
    gap: 10px;
    height: 40px;
    background: linear-gradient(180deg, #6ED412 0%, #63AF1E 98.5%);
    border: 1px solid #29922F;
    border-radius: 15px;
    color:#fff;
    font-size: 16px;
    text-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
    position: relative;
    cursor: pointer;
    font-family: var(--font-baloo);

}


.btn::before{
    content:"";
    display: block;
    height: 22px;
    width: 22px;
    background: url('../images/icon-btn-reflection.svg');
    position: absolute;
    left:2px;
    top:2px;
}

.btn--sm{
    padding:10px 40px;
    height: 30px;
    font-size: 14px;
}


.home-banner{
    background-image:url('../images/banner-illustration.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;

}

.section-features{
  background: linear-gradient(359.81deg, #3D6600 -55.77%, #598d02 105.65%);
  margin-top: -2px;
}

.section-title{
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 40px;
}
@media screen and (min-width:768px) {
  .section-title{
    font-size: 30px;
  }
}
@media screen and (min-width:992px) {
  .section-title{
    font-size: 35px;
  }
}
@media screen and (min-width:1200px) {
  .section-title{
    font-size: 40px;
  }
}
.cms{
  font-family: var(--font-dmsans);
}
.cms p{
  line-height: 1.6;
  margin-bottom: 45px;
  font-size: 18px;
}
.cms h4{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.cms p:last-of-type{
  margin-bottom: 0;
}
.course-tab a{
  padding: 10px 16px;
  display: block; 
  color:#fff;
  position: relative;
  width: 100%;
}

.course-tab a::before{
  content:"";
  display: block;
  width: 25px;
  height: 12px;
  background: url('../images/icon-arrow-right-black.svg') no-repeat center center/ contain;
  position: absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display: none;
}
.course-tab a.active{
  background-color: #FCC400;
  border-radius: 8px;
  font-weight: 600;
  color:#000;
}

.course-tab a.active::before{
  display: block;
}

.check-list li{
  margin-bottom: 14px;
  position: relative;
  padding-left:30px;
}

.check-list li::before{
  content:"";
  display: block;
  height: 18px;
  width: 18px;
  background: url('../images/icon-check.svg') no-repeat center center/ contain;
  position: absolute;
  left:0;
  top:2px;
}

select{
  appearance: none;

  background:#fff url('../images/icon-angle-down.svg') no-repeat calc(100% - 10px) center /20px;
}



@keyframes float {
	0% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
	50% {
		/* box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); */
		transform: translatey(-20px);
	}
	100% {
		/* box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); */
		transform: translatey(0px);
	}
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}


@keyframes floating {
    from { transform: translate(0,  0px) rotate(0deg); }
    65%  { transform: translate(0, 15px) rotate(20deg); }
    to   { transform: translate(0, -0px) rotate(0deg); }    
}

@keyframes skew-x-shaking {
 0% { transform: skewX(-15deg); }
 5% { transform: skewX(15deg); }
 10% { transform: skewX(-15deg); }
 15% { transform: skewX(15deg); }
 20% { transform: skewX(0deg); }
 100% { transform: skewX(0deg); }
}


.floater{
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

.floater-2{
  transform: translatey(0px);
  animation: floating 5s ease-in-out infinite;
}
.shaker{
   animation: tilt-shaking 2s infinite ease-in-out;
}


.shaker-2{
   animation: skew-x-shaking 1s infinite ease-in-out;

}
.shaker-2:hover{
  animation-play-state: paused;
}

.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;


  }
  .loader::before,
  .loader::after {    
    content:"";
    grid-area: 1/1;
    --c:no-repeat radial-gradient(farthest-side,#dc9e68 92%,rgba(0,0,0,0));
    background: 
      var(--c) 50%  0, 
      var(--c) 50%  100%, 
      var(--c) 100% 50%, 
      var(--c) 0    50%;
    background-size: 12px 12px;
    animation: l12 1s infinite;
  }
  .loader::before {
    margin: 4px;
    filter: hue-rotate(45deg);
    background-size: 8px 8px;
    animation-timing-function: linear
  }

  @keyframes l12 { 
    100%{transform: rotate(.5turn)}
  }


  .page-loader{
    opacity: 0;
    visibility: hidden;
  }
  .page-loader.active{
    visibility: visible;
    opacity: 1;
  }