body {
        font-family: 'Poppins';
        margin: 0;
        padding: 0;
        overflow-x: hidden;
      }


      .img-radius{
        border-radius: 25px;
      }


      .breadcrumb-custom {
        color: #000000;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0.75rem 0rem;
        margin-bottom: 1rem;
        list-style: none;
        background-color: transparent;
        border-radius: 0.25rem;
      }

      .breadcrumb-item-custom + .breadcrumb-item-custom {
        padding-left: 0.5rem;
      }

      .breadcrumb-item-custom + .breadcrumb-item-custom::before {
        float: left;
        padding-right: 0.5rem;
        color: #000000;
        content: "";
      }

      .breadcrumb-item-custom + .breadcrumb-item-custom:hover::before {
        text-decoration: underline;
      }

      .breadcrumb-item-custom + .breadcrumb-item-custom:hover::before {
        text-decoration: none;
      }

      .breadcrumb-item-custom.active a{
        color: #487b24;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
      }

      .breadcrumb-item-custom a{
        color: #000000;
      }

      .breadcrumb-item-custom a:hover{
        color: #000000;
      }


      /*TOP NAV*/
      #top-nav {
        background-color: #487B24;
        color: #EDF2E9;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
      }

      .div-inline {
        display: flex;
        flex-direction: row;
      }

      #sub-top-nav {
        display: flex;
        flex-direction: row;
        padding: 10px 0px;
      }

      #top-nav .divider {
        margin: 10px 20px 0;
        width: 5px;
        height: 5px;
        border-radius: 2px;
        background: linear-gradient(180deg, rgb(255, 146, 8) 0%, rgb(255, 123.62, 28.49) 100%);
      }

      /*MID NAV*/
      #mid-nav {
        background: #F8FAF6;
      }

      .btn-login {
        margin-left: 1rem;
        border: none;
        color: #FFF5E6;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 24px */
        border-radius: 17px;
        padding: 4px 24px;
        background: linear-gradient(180deg, rgb(255, 146, 8) 0%, rgb(255, 123.62, 28.49) 100%);
      }

      .btn-section {
        border: none;
        color: #FFF5E6;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 24px */
        border-radius: 0.7rem;
        padding: 10px 24px;
        background: linear-gradient(76deg, #487B24 42.59%, #4B9318 93.82%);
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
      }

      .btn-section-nobg {
        margin-left: 1rem;
        border: none;
        color: #487B24;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 24px */
        border-radius: 0.7rem;
        padding: 10px 24px;
       background-color: transparent;
      }

      .navbar-nav>li {
        padding-left: 25px;
        padding-right: 25px;
      }

      .navbar-light .navbar-nav .nav-link {
        color: #1E1E1E;
      }

      .carousel {
        margin-top: -50px;
        z-index: -1;
      }

      .carousel img {
        height: 600px;
        object-fit: cover;
      }

      #sub-division {
        margin-top: -82px;
      }

      #sub-division-child {
        border-radius: 125px;
        padding: 20px 0;
        background-color: #FDFDFD;
        box-shadow: 0px 6px 38.3px 0px rgba(0, 0, 0, 0.12);
      }

      .img-3 {
        width: 200px;
      }

      .title {
        font-size: 38px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
      }

      .title-section {
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 135%;
        color: #1E1E1E;
      }

      .content-md {
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
      }

      .content-sm {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 165%;
      }



      .content-sm-noln {
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
      }

       .content-xsm-nobold {
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        line-height: 165%;
      }

      .content-xsm {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 165%;
      }

      .content-xxsm {
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 165%;
      }

      .bg-card {
        color: #fff;
        border-radius: 30px;
        padding: 15px;
        background: linear-gradient(76deg, #487B24 42.59%, #4B9318 93.82%);
      }

      .bg-card:hover {
        cursor: pointer;
        color: #fff;
        border-radius: 30px;
        padding: 15px;
        background: linear-gradient(180deg, #FF7701 0%, #FFAB0E 100%);
      }

      .bg-card img {
        width: 30px;
        margin-right: 5px;
      }


      #video-content{
        padding: 0;
        margin: 0;
      }

      /*FOOTER*/
      #footer {
        margin-top: 50px;
        padding: 50px 0;
        background: linear-gradient(76deg, #487B24 42.59%, #4B9318 93.82%);
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
        /* 24px */
        color: #FFF;
      }

      .title-footer {
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 135%;
      }

      .desc-footer {
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
        /* 24px */
        color: #FFF;
      }

      .ul-footer,
      .li-footer {
        margin: 0;
        padding: 0;
        list-style-type: none;
        color: #fff;
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        line-height: 35px;
      }

      .li-footer a:link,
      a:hover,
      .li-footer a:visited {
        text-decoration: none;
        color: #fff;
        background-color: transparent;
      }


      .row.no-gutters {
        margin-right: 0;
        margin-left: 0;
        & > [class^="col-"],
        & > [class*=" col-"] {
          padding-right: 0;
          padding-left: 0;
        }
      }


      #langkah{
        background: rgba(237, 242, 233, 0.45);
      }


      .bg-hijau{
        background:linear-gradient(76deg, #487B24 42.59%, #4B9318 93.82%);
        color:#fff;
      }
      .font-hijau{
        color: #487B24;
      }
      .font-orange{
        color: #FF9208;}

        .img-card{
          border-top-left-radius:20px;border-top-right-radius: 20px;
        }

        .card-ku{
          border-radius: 20px;
          border: 1px solid #F2F2F2;
          background: #FFF;
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.08), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
        }

        .no-link a{

          color: inherit; /* blue colors for links too */
          text-decoration: inherit; /* no underline */
        }