@import url("../css/fontawesome.min.css");
@import url("../css/bootstrap.css");

/* 
================================================
[  BASIC STYLE START ]
================================================

01. Google Fonts
02. General Style
03. Headings Style 
04. Button Style
05. Form Style
06. Spacing Style
07. custom row and col Style
08. back-to-top Arrow 

======================================
[  BASIC STYLE END ]
======================================
      
* HEADER 
  - Header Style
  - Navigation Menu Style
  - Megamenu Style

* CONTANT
  - Banner Style
  - About-part
  - Best features
  - Token Sale 
  - Our Team
  - Pricing
  - Blog
  - Contact
  - News Letter
* FOOTER
*/

/*_______________________________________________________
// BASIC STYLE  //----------------------------
_______________________________________________________*/

/**********************
    Google Fonts
***********************/
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


/**************************
    General Style Start
***************************/

   ::-moz-selection {
   background-color: #ED735E;
   color: #FFF;
  }
  ::selection {
    background-color: #ED735E;
    color: #FFF;
  }
  body, html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body {
      background: #ffffff;
      line-height: 24px;
      color: #7a7a7a;
      font-size: 14px;
      letter-spacing: 0.5px;
      font-family: 'Sarabun', sans-serif;
      font-weight: 400;
  }
  body.dark-header {
    padding-top: 82px;
  }
  .container {
    padding-left: 0;
    padding-right: 0;
  }
  .no-js #loader {
    display: none;
  }
  .js #loader {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
  }
  .se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background:#ffffff;
  }
  .main {
    position: relative;
    overflow: hidden;
  }
  img {
    height: auto;
    max-width: 100%;
    border: none;
    outline: none;
      -webkit-transition: all 0.4s ease 0s;
         -moz-transition: all 0.4s ease 0s;
          -ms-transition: all 0.4s ease 0s;
           -o-transition: all 0.4s ease 0s;
              transition: all 0.4s ease 0s;
  }
  .owl-carousel .owl-item img {
    width: auto;
    display: inline-block;
  }
  .owl-nav button span {
    display: none;
  }
  a, a:focus, a:active, a:link, img {
    outline: none;
    text-decoration: none;
  }
  a {
    cursor: pointer;
    text-decoration: none;
    color: #7a7a7a;
      -webkit-transition: all 0.4s ease 0s;
         -moz-transition: all 0.4s ease 0s;
          -ms-transition: all 0.4s ease 0s;
           -o-transition: all 0.4s ease 0s;
              transition: all 0.4s ease 0s;
  }
  a:hover {
    color: #ED735E;
    text-decoration: none;
      -webkit-transition: all 0.4s ease 0s;
         -moz-transition: all 0.4s ease 0s;
          -ms-transition: all 0.4s ease 0s;
           -o-transition: all 0.4s ease 0s;
              transition: all 0.4s ease 0s;
  }
  a.link {
    color: #202833;
  }
  a.link:hover {
    color: #ED735E;
  }
  br {
    font-size: 0;
    line-height: 0;
  }
  hr {
    margin-bottom: 0px;
    margin-top: 0px;
    border-top: 1px solid #f1f1f1;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }
  .divider {
    position: relative;
    overflow: hidden;
    height: 4px;
    z-index: 9;
  }
  .divider:before, .divider:after {
    content: '';
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0px;
    height: 0;
    border-top: 1px solid #f1f1f1;
      -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
           -o-transform: translateY(-50%);
              transform: translateY(-50%);
  }
  .divider::before {
      margin-top: -1px;
  }
  ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0;
  }
  .position-r {
    position: relative;
  }
  .position-s {
    position: static;
  }
  .position-initial {
    position: initial;
  }
  .overflow-h{
    overflow: hidden;
  }
  .align-center {
    text-align: center;
  }
  .align-left {
    text-align: left ;
  }
  .align-right {
    text-align: right;
  }
  .dark-bg {
    background-color: #f3f2fb;
  }
  .light-bg {
    background-color: #1f0e9c;
  }
  .gray-bg {
    background: #f5f5f5;
  }
  .light-gray-bg {
      background: #f3f2fb none repeat scroll 0 0;
  }
  p {
    color: #7a7a7a;
  }
  .middle-800 p {
    display: inline-block;
    max-width: 800px;
  }
  .middle-580 p {
    display: inline-block;
    max-width: 580px;
  }
  .text-primary  {
    color: #ED735E !important;
  }
  .badge-primary, .badge-success, .badge-info, .badge-warning, .badge-danger, .badge-dark {
    color: #ffffff;
  }
  .badge-primary {
    background-color: #ED735E;
  }
  .box-wrap {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 30px;
  }


  /*------border Style-------- */
    .border {
      border:  1px solid #e1e1e1 !important;
    }
    .border-tb {
      border-top: 1px solid #e1e1e1 !important;
      border-bottom: 1px solid #e1e1e1 !important;
    }
    .border-lr {
      border-left: 1px solid #e1e1e1 !important;
      border-right: 1px solid #e1e1e1 !important;
    }
    .border-top {
      border-top: 1px solid #e1e1e1 !important;
    }
    .border-left {
      border-left: 1px solid #e1e1e1 !important;
    }
    .border-right {
      border-right: 1px solid #e1e1e1 !important;
    }
    .border-bottom {
      border-bottom: 1px solid #e1e1e1 !important;
    }

  /*------border Style End-------- */

/**************************
    General Style End
***************************/


/**************************
    Headings Style Start
***************************/
  h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #202833;
    font-weight: 400;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  h1 {
    font-size: 43px;
    letter-spacing: 1px;
    line-height: 45px;
  }
  h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 15px;
    position: relative;
  }
  h2.section_title {
    font-size: 26px;
    line-height: 26px;
    margin-bottom: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    position: relative;
  }
  h2.title-bg {
    background: rgba(0, 0, 0, 0) url("../images/title-icon.png") no-repeat scroll center bottom;
    padding-bottom: 15px;
  }
  h3 {
    font-size: 20px;
    line-height: 25px;
  }
  h3.sub-heading {
     font-weight: 500;
     margin-bottom: 0;
  }
  h4 {
    font-size: 16px;
    line-height: 20px;
  }
  h5 {
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
  }
  h6 {
    font-size: 12px;
    line-height: 17px;
    font-weight: 500;
  }
  h6.heading-sub-title {
    color: #ED735E;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .sub_title.heading {
    font-weight: 600;
    font-size: 22px;
  }
  .heading-des {
    max-width: 600px;
    margin: 0 auto;
  }
  .text-left .heading-des {
    max-width: 100%;
    margin: 0;
  }
  .heading-part {
    position: relative;
  }
  .title-line {
    position: relative;
    padding-right: 40px;
    padding-left: 40px;
    display: inline-block;
  }
  .title-line:before, .title-line:after {
      top: 50%;
      background: #ED735E;
      content: "";
      position: absolute;
      height: 1px;
      width: 30px;
      z-index: 0;
      -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
           -o-transform: translateY(-50%);
              transform: translateY(-50%);
  }
  .title-line:before {
      left: 0;
  }
  .title-line:after {
      right: 0;
  }
  .text-left .heading-sub-title.title-line {
    padding-left: 0;
  }
  .text-left .heading-sub-title.title-line:before {
    display: none;
  }
  .section_title span:after {
    background: #ED735E none repeat scroll 0 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    bottom: -5px;
    width: 50px;
    z-index: 1;
  }

  /*------ Custom Headings Style Start ---------*/
  .homepage h2.section_title {
    background: #ED735E;
    display: inline-block;
    font-size: 20px;
    padding: 7px 30px 7px 20px;
    color: #fff;
    -webkit-border-radius:  0 25px 25px 0;
       -moz-border-radius:  0 25px 25px 0;
         -o-border-radius:  0 25px 25px 0;
            border-radius:  0 25px 25px 0;
  }
  /*------ Custom Headings Style End ---------*/

/**************************
    Button Style Start
***************************/
  .btn, button {
    background-color: transparent;
    padding: 14px 25px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    overflow: hidden;
    position: relative;
    z-index: 0;
      -webkit-border-radius: 25px;
         -moz-border-radius: 25px;
           -o-border-radius: 25px;
              border-radius: 25px;
      -webkit-transition: all 0.4s ease 0s;
         -moz-transition: all 0.4s ease 0s;
          -ms-transition: all 0.4s ease 0s;
           -o-transition: all 0.4s ease 0s;
              transition: all 0.4s ease 0s;
  }
  button:focus, .btn:focus, .btn.focus {
      outline: 0 none;
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
  }
  .btn:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    width: 50px;
    -webkit-transform: rotate(35deg);
            transform: rotate(35deg);
    -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
  }
  .btn:hover:after {
    left: 120%;
    -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
  }
  .btn.full {
    width: 100%;
    text-align: center;
  }
  .header .btn { padding: 12px 25px; }
  .btn.big-width {
    padding: 13px 30px;
  }
  .btn.big {
    padding: 18px;
  }

  .btn.small {
    padding: 8px 12px;
    font-weight: 400;
    font-size: 14px;
  }
  .btn svg {
    width: 8px;
    height: auto;
    margin-left: 3px;
  }
  .btn i.fa.fa-lg {
    line-height: 8px;
  }
  .btn span ~ i.fa, .btn i.fa ~ span {
    margin-left: 5px;
  }

  .btn-black {
    color: #fff;
    background: #222;
    border: none;
  }
  .btn-black:hover {
    color: #fff;
    background: #ED735E;
  }
  .btn-color {
    color: #fff;
    background: #ED735E;
    border: none;
  }
  .btn-color:hover {
    color: #fff;
    background: #ED735E;
  }
  .btn-white {
    color: #222;
    background: rgba(255,255,255,1);
    border: none;
  }
  .btn-white:hover {
    color: #222;
    background: #ED735E;
  }
  .btn-transparent {
    color: #f22a59;
    background: transparent;
    border: none;
  }
  .btn-border {
    color: #3f3f3f;
    padding: 10px 15px; 
    border: 1px solid #e1e1e1;
  }
  .btn-border:hover {
    border: 1px solid #ED735E;
    color: #ED735E;
  }

/**************************
    Button Style End
***************************/

/**************************
    Form Style Start
***************************/
  * {
    outline: none !important;
  }
  select {
    background: url(../images/select-icon.png) no-repeat scroll right 50% transparent !important;
    line-height: 18px;
    border: 1px solid #e1e1e1;
    padding: 0 25px 0 10px;
    height: 36px;
    width: 100%;
    color: #7a7a7a;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
  }
  .select-selected {
    background-color: #ED735E;
  }
  .full select {
    width: 100%;
  }
  .form-group {
    margin-bottom: 30px;
  }
  .main-form textarea {
    max-width: 100%;
  }
  input, .main-form input, .main-form textarea, .main-form select {
    background: transparent;
    padding: 0 15px;
    font-size: 14px;
    width: 100%;
    height: auto;
    border: 1px solid #e1e1e1;
    min-height: 40px;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
         -o-border-radius: 20px;
            border-radius: 20px;
  }
  input::placeholder, .main-form input::placeholder, .main-form textarea::placeholder, .main-form select::placeholder {
    color: #7a7a7a;
  }
  .main-form textarea{padding-top: 5px;}
  .main-form input:focus, .main-form textarea:focus, .main-form select:focus {
    border: 1px solid #ED735E;
    background-color : transparent;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
  }
  .check-box label {
    display: inline;
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
  }
  .check-box input, .radio input.radio-button {
    display: none;
  }
  .checkout-section .check-box input[type="checkbox"] {
    margin: 5px 0 0;
    min-height: 1px;
    display: none;
  }
  .category-dropdown {
    border: none;
    position: absolute;
    left: 0;
    top: 0;
  }
  .category-dropdown select {
    border: none;
    height: 45px;
    width: 250px;
    padding: 7px 24px 7px 15px;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
  }
  .select-dropdown fieldset {
    padding: 0;
    line-height: 0;
  }
  .select-dropdown .ui-state-default {
    border: none; 
    background: rgba(0,0,0,0) url(../images/select-icon.png) no-repeat scroll right 50% !important;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
    color: #687188;
    display: inline-block;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
  }
  .category-dropdown .ui-state-default {
    height: 40px;
  }
  .select-item .ui-state-default {
      margin-top: 2px;
      border: 1px solid #eeeeee;
      padding: 5px;
  }
  .select-dropdown .ui-selectmenu-button span.ui-selectmenu-text {
    padding: 0;
    font-weight: 400;
  }
  .category-dropdown .ui-selectmenu-button span.ui-selectmenu-text {
    margin-top: 10px;
    padding-left: 15px;
  }
  .input-box .ui-state-default {
      border: 1px solid #eeeeee;
      padding: 10px 15px;
      width: 100% !important;
  }
  .ui-selectmenu-menu {
    z-index: 10;
  }
  .ui-selectmenu-menu  .ui-widget-content {
    background: #fff;
    border-top: 2px solid #ED735E;
    max-height: 350px;
      -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
         -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  }
  .ui-selectmenu-menu .ui-menu .ui-menu-item {
    background: none;
    font-family: 'Sarabun', sans-serif;
    color: #878787;
    font-size: 14px;
  }
  .ui-selectmenu-menu .ui-state-hover, .ui-selectmenu-menu .ui-widget-content .ui-state-hover, .ui-selectmenu-menu .ui-widget-header .ui-state-hover, 
  .ui-selectmenu-menu .ui-state-focus, .ui-selectmenu-menu .ui-widget-content .ui-state-focus, .ui-selectmenu-menu .ui-widget-header .ui-state-focus {
    color: #ED735E;
    font-weight: 400;
    background: #ebebeb;
  }
  .ui-selectmenu-menu  .ui-menu .ui-state-focus, .ui-selectmenu-menu  .ui-menu .ui-state-active {
    margin: 0;
  }
  .ui-menu .ui-menu-item{
    padding : 5px 15px;
  }

  /* checkbox CSS Start */
  label {
    display: inline-block;
    font-weight: 500;
    margin-bottom: 0;
    max-width: 100%;
  }
  .checkbox + label, .radio-button + label {
      cursor: pointer;
      line-height: 17px;
      padding-left: 20px;
      position: relative;
  }
  .checkbox:checked + label::before, .radio-button:checked + label::before {
      background: #ED735E none repeat scroll 0 0;
      border-color: #ED735E;
  }
  .checkbox + label::before, .radio-button + label::before, .checkbox + label::after {
      content: "";
      height: 15px;
      left: 0;
      position: absolute;
      top: 50%;
      width: 15px;
      margin-top: 2px;
      -webkit-transform: translateY(-50%);
         -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
           -o-transform: translateY(-50%);
              transform: translateY(-50%);
  }
  .checkbox + label::before, .radio-button + label::before {
      background: transparent;
      border: 1px solid #ED735E;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
           -o-border-radius: 3px;
              border-radius: 3px;
  }
  .radio-button + label::before {
    margin-top: 6px; 
  }
  .checkbox:checked + label::after {
      background-image: url("../images/check-box-icon.png");
      background-repeat: no-repeat;
      margin-left: 2px;
      margin-top: 4px;
  }
  input.radio-button:checked + label::before {
      background-image: url("../images/radio-icon.png");
      background-position: -2px -2px;
      background-repeat: no-repeat;
  }
  .radio-button + label::before {
      -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
           -o-border-radius: 50%;
              border-radius: 50%;
  }
/**************************
    Form Style End
***************************/

/**************************
    Spacing Style Start
***************************/

  /*----- float -----*/
  .right-side {
    float: right;
  }
  .left-side {
    float: left;
  }

  /*----- Basic margin padding -----*/
  .m-10 { margin: 10px; }
  .m-15 { margin: 15px; }
  .m-20 { margin: 20px; }
  .m-30 { margin: 30px; }
  .mb-minus-30 { margin-bottom: -30px; }

  .p-10 { padding: 10px; }
  .p-15 { padding: 15px; }
  .p-20 { padding: 20px; }
  .p-30 { padding: 30px; }

  /*----- Page Section Spacing -----*/

    /*----- Padding top-bottom -----*/
    .ptb-10 { padding: 10px 0; }
    .ptb-20 { padding: 20px 0; }
    .ptb-30 { padding: 30px 0; }
    .ptb-60 { padding: 60px 0; }
    .ptb-100 { padding: 100px 0; }

    /*----- Padding left-right -----*/
    .plr-15 { padding: 0 15px; }
    .plr-20 { padding: 0 20px; }
    .plr-30 { padding: 0 30px; }

    /*----- Padding top-----*/
    .pt-10 { padding-top: 10px; }
    .pt-20 { padding-top: 20px; }
    .pt-30 { padding-top: 30px; }
    .pt-60 { padding-top: 60px; }
    .pt-100 { padding-top: 100px; }

    /*----- Padding left-----*/
    .pl-20 { padding-left: 20px; }
    .pl-30 { padding-left: 30px !important; }

    /*----- Padding bottom-----*/
    .pb-30 { padding-bottom: 30px; }
    .pb-60 { padding-bottom: 60px; }
    .pb-70 { padding-bottom: 70px; }
    .pb-100 { padding-bottom: 100px; }

    /*----- Padding right-----*/
    .pr-30 { padding-right: 30px; }

    /*----- Margin top-bottom -----*/
    .mtb-10 { margin: 10px 0; }
    .mtb-15 { margin: 15px 0; }
    .mtb-20 { margin: 20px 0; }
    .mtb-30 { margin: 30px 0; }
    .mtb-40 { margin: 40px 0; }

    /*----- Margin top -----*/
    .mt-10 { margin-top: 10px; }
    .mt-20 { margin-top: 20px; }
    .mt-30 { margin-top: 30px; }
    .mt-40 { margin-top: 40px; }


    /*----- Margin bottom -----*/ 
    .mb-10 { margin-bottom: 10px; }
    .mb-20 { margin-bottom: 20px; }
    .mb-30 { margin-bottom: 30px; }
    .mb_-30 { margin-bottom: -30px; }
    .mb-40 { margin-bottom: 40px; }

    /*----- Margin right -----*/
    .mr-20 { margin-right: 20px; }
    .mr-30 { margin-right: 30px; }

/**************************
    Spacing Style End
***************************/


/******************************************
    Custom row and col Style Start
*******************************************/

  /*----- Custom row -----*/
    .custom-row-5 {
      margin-left: -5px;
      margin-right: -5px;
    }
    .custom-row-10 {
      margin-left: -10px;
      margin-right: -10px;
    }

    /*----- Custom col -----*/
    .custom-col-5 {
      padding-left: 5px;
      padding-right: 5px;
    }
    .custom-col-10 {
      padding-left: 10px;
      padding-right: 10px;
    }
/******************************************
    Custom row and col Style End
*******************************************/

/********************************
    back-to-top Arrow Start
*********************************/
  .scroll-top {
    bottom: 10px;
    position: fixed;
    right: 10px;
    z-index: 2;
  }
  .scroll-top .scrollup {
    position: relative;
    background: #ED735E;
    display: none;
    cursor: pointer;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 34px;
      -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
           -o-border-radius: 50%;
              border-radius: 50%;
  }
  .scroll-top .scrollup::before {
    color: #fff;
    content: "";
    background: rgba(0,0,0,0) url(../images/top-arrow.svg) no-repeat center center;
    top: 50%;
    left: 50%;
    position: absolute;
    width: 14px;
    height: 14px;
    -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
  }
/******************************** 
    back-to-top Arrow End
*********************************/
.spinner {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translateX(-50%) translateY(-50%);
     -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
       -o-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}    
.triple-spinner {
  display: block;
  position: relative;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top: 4px solid #ED735E;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}
.triple-spinner::before,
.triple-spinner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 4px solid transparent;
}
.triple-spinner::before {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-top-color: #ED735E;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3.5s linear infinite;
}
.triple-spinner::after {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-top-color: #ED735E;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.75s linear infinite;
}
@-webkit-keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
@keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
                                                                                                                                                                                                                                                                                                                                              
/*_______________________________________________________
// HEADER  //----------------------------
_______________________________________________________*/

/* - Header Style  //---------------- */
header {
	background: #2B5740;
	top: 0;
	width: 100%;
	border: none;
	padding: 10px;
	z-index: 2;
  display: inline-block;
}

.navbar .container {
    display: block;
}
.navbar-header {
    float: none;
}
.navbar-header .navbar-brand {
	height: auto;
	padding: 0;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
}
.navbar {
	margin-bottom: 0;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-o-border-radius: 0px;
}
.collapsing {
	display: inline-block;
}
/* Navigation Menu Style */
.top-nav ul li {
  float: left;
  margin-left: 15px;
  color: #fff;
}
.top-nav ul li a {
  color: #fff;
}
.top-nav ul li span {
  text-transform: uppercase;
}
.header-right-link .back a {
  color: rgb(237, 115, 94);
}
/*_______________________________________________________
// CONTANT  //----------------------------
_______________________________________________________*/

/* - Banner Style  //---------------- */
.home-banner.banner-bg {
  position: relative;
}
.banner {
  position: relative;
}
.banner img {
  width: 100%;
}
.banner-detail {
  top: 10%;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);

}
.banner-detail-inner img {
  width: auto;
}
.hero-content {
  background: #2B5740;
  /* border-radius: 25px; */
  padding: 30px;
  position: absolute;
  width: 40%;
  bottom: -40%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  left: 30%;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.hero-content::after {
  background: #2E5A43;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: -100%;
  top: 0;
}
.hero-content h1{
  font-family: Sarabun;
  font-weight: 700;
  font-style: Bold;
  font-size: 50px;
  line-height: 56px;
  letter-spacing: 1.5px;
  vertical-align: middle;
  text-transform: uppercase;
  color: #fff;
}
.hero-content p {
  font-family: Sarabun;
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  letter-spacing: 0.24px;
  vertical-align: middle;
  color: #fff;
  margin-top: 35px;
}
.banner-help {
  position: absolute;
  bottom: 10%;
  left: 56%;
}
.banner-help .btn {
  font-size: 16px;
  padding: 11px 30px;
  border-radius: 40px;
}
.quick-links ul li a {
  font-family: Sarabun;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.24px;
  display: flex;
  color: #000;
}
.quick-links ul li a svg {
  margin-top: 5px;
  margin-right: 10px;
}
.quick-links ul li {
  margin-bottom: 20px;
  min-height: 48px;
}

/*---------------- about-part Start ---------------*/
#about {
  position: relative;
}
.section-intro .callout-bold {
  font-family: Sarabun;
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0.24px;
  color: #000;
}
.section-intro .question-grid li {
  font-family: Sarabun;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.24px;
  position: relative;
  margin-left: 25px;
  color: #000;
  margin-bottom: 10px;
  min-height: 45px;
  max-width: 400px;
}
.section-intro .question-grid li::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 7px;
  color: #000;
  width: 10px;
  height: 10px;
  background: #2B5740;
  border-radius: 50%;
}
.section-intro .about-part {
  background: rgba(187, 187, 175, 0.3);
  padding: 50px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  position: relative;
}
.section-intro .about-part::after {
  background: rgba(187, 187, 175, 0.3);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  color: #000;
}
.upcoming {
  position: absolute;
  right: 0;
  bottom: -85px;
}
.intro-cta {
  background: rgba(237, 115, 94, 1);
  font-family: Sarabun;
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.24px;
  color: #fff;
  padding: 60px 50px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
/*------------- about-part End -------------------*/

    /* ── PROGRAM OVERVIEW ── */
    .overview-section { margin: 50px 0; }
    .section-label {
      font-family: Sarabun;
      font-weight: 700;
      font-size: 36px;
      line-height: 40px;
      letter-spacing: 0.24px;
      color: #000;
      margin-bottom: 30px;
    }
    .overview-body { 
      font-family: Sarabun;
      font-weight: 400;
      font-style: Regular;
      font-size: 16px;
      line-height: 30px;
      color: #000;
      line-height: 20px;
     }

    /* cards row */
    .card-pale {
      background: rgba(187, 187, 175, 1);
      color: #d5ece3;
      border-radius: 40px;
      padding: 3rem;
      height: 100%;
    }
    .card-pale h3  {
      font-family: Sarabun;
      font-weight: 700;
      font-size: 26px;
      line-height: 30px;
      letter-spacing: 0.24px;
      color: #000;
    }
    .card-pale p{
      font-family: Sarabun;
      font-weight: 400;
      font-size: 16px;
      line-height: 30px;
      color: #000;
    }
    .clean {
      margin-top: 30px;
    }
    .card-pale li {
      font-family: Sarabun;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      color: #000;
      position: relative;
      margin-left: 25px;
      margin-bottom: 20px;
    }
    .card-pale li::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 7px;
      color: #000;
      width: 10px;
      height: 10px;
      background: #2B5740;
      border-radius: 50%;
    }
    .overview-section{
      position: relative;
    }
    /*.overview-section:after{
      background: rgba(43, 87, 64, 0.5);
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      height: 90%;
      width: 200px;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      z-index: -1;
    }
*/
    .overview-section-shape .shape {
      background: rgba(43, 87, 64, 0.5);
      position: relative;
      height: 100%;
      width: 100%;
      display: contents;
    }
    .overview-section-shape .shape:after{
      background: rgba(43, 87, 64, 0.5);
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      height: 90%;
      width: calc(100% - 15px);
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      z-index: -1;
    }
    .overview-section-shape .shape::before{
      background: rgba(43, 87, 64, 0.5);
      content: "";
      position: absolute;
      right: -100%;
      bottom: 0;
      height: 90%;
      width: 100%;
      z-index: -1;
    }
    .structure-section .structure-inner {
      background: rgba(187, 187, 175, 0.3);
      padding: 50px;
      padding-bottom: 30px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      position: relative;
    }
    
    .structure-section .structure-inner:after{
      background: rgba(187, 187, 175, 0.3);
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: -100%;
      top: 0;
      z-index: -1;
    }
    .structure-img-caption {
      position: absolute;
      z-index: 1;
      bottom: -60px;
      right: 80px;
    }
    .structure-img-caption .intro-cta {
      background: rgb(43, 87, 64);
      border-radius: 0;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      margin-bottom: 0;
      padding: 30px 30px;
    }
    
    .structure-img-caption .intro-cta::after {
      background: rgb(43, 87, 64);
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: -100%;
      top: 0;
      z-index: -1;
    }
    .phase-block .phase-label {
      font-weight: 700;
    }
    .phase-block h4 {
      margin: 25px 0;
    }
    .phase-block h4, .weekly, p.phase-focus {
      font-family: Sarabun;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.24px;
      color: #000;
    }
    .phase-block ul li {
      font-family: Sarabun;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      letter-spacing: 0.24px;
      color: #000;
      margin-bottom: 10px;
      margin-left: 20px;
      position: relative;
    }
    .phase-block ul li::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 6px;
      color: #000;
      width: 10px;
      height: 10px;
      background: rgba(43, 87, 64, 1);
      border-radius: 50%;
    }
    .price-banner .intro-cta {
      padding: 50px 30px;
      position: relative;
    }
    .price-banner .intro-cta::after {
      background: rgba(237, 115, 94, 1);
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      right: -100%;
      top: 0;
      color: #000;
    }
    .hours-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 2rem;
      justify-content: center;
    }
    .hours-bubble {
      background: rgba(140, 209, 217, 1);
      color: #fff;
      border-radius: 50%;
      width: 190px;
      height: 190px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #000;
    }
    .hours-bubble strong {
      font-size: 32px;
      font-weight: 700;
      display: block;
      margin-bottom: 15px;
    }
    .hours-bubble strong sup {
      font-size: 14px;
      top: 0;
    }
    .hours-note {
      font-family: Sarabun;
      font-weight: 700;
      font-size: 18px;
      line-height: 22px;
      letter-spacing: 0.24px;
      color: #000;
      text-align: center;
      margin-top: 35px;
      max-width: 530px;
      margin: 0 auto;
    }
    .enrol-section .banner-help {
      position: relative;
      bottom: auto;
      left: auto;
      margin-top: 57px;
    }
    .enrol-section h2 {
      font-family: Sarabun;
      font-weight: 700;
      font-size: 50px;
      line-height: 60px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #fff;
    }
    .enrol-section-inner {
      background: rgb(43, 87, 64);
      padding: 70px;
      margin-top: 60px;
      border-top-left-radius: 40px;
      position: relative;
    }
    .enrol-section-inner::after {
      background: rgb(43, 87, 64);
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      right: -100%;
      top: 0;
      color: #000;
    }
    .enrol-section-inner h3 {
      font-family: Sarabun;
      font-weight: 700;
      font-size: 30px;
      line-height: 32px;
      letter-spacing: 0.24px;
      color: rgb(140, 209, 217);
      margin-bottom: 35px;
      max-width: 480px;
    }
    .enrol-section-inner p {
      font-family: Sarabun;
      font-weight: 400;
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 0.24px;
      color: #fff;
    }
    .enrol-section-inner p .email-link {
      color: #fff;
    }
    .website a {
      font-family: Sarabun;
      font-weight: 700;
      font-size: 18px;
      line-height: 30px;
      letter-spacing: 0.24px;
      text-decoration: underline;
      text-decoration-skip-ink: auto;
      color: #fff;
    }
    .website, .f-logo {
      margin-top: 32px;
    }