@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon-konsentrasi/icomoon.eot?wmjnv2');
    src:  url('../fonts/icomoon-konsentrasi/icomoon.eot?wmjnv2#iefix') format('embedded-opentype'),
      url('../fonts/icomoon-konsentrasi/icomoon.ttf?wmjnv2') format('truetype'),
      url('../fonts/icomoon-konsentrasi/icomoon.woff?wmjnv2') format('woff'),
      url('../fonts/icomoon-konsentrasi/icomoon.svg?wmjnv2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak-as: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-coins:before {
    content: "\e900";
  }
  .icon-money:before {
    content: "\e900";
  }
  .icon-office:before {
    content: "\e903";
  }
  .icon-pencil:before {
    content: "\e905";
  }
  .icon-eyedropper:before {
    content: "\e90a";
  }
  .icon-film:before {
    content: "\e913";
  }
  .icon-video-camera:before {
    content: "\e914";
  }
  .icon-dice:before {
    content: "\e915";
  }
  .icon-display:before {
    content: "\e956";
  }
  .icon-user:before {
    content: "\e971";
  }
  .icon-users:before {
    content: "\e972";
  }
  .icon-user-tie:before {
    content: "\e976";
  }
  .icon-search:before {
    content: "\e986";
  }
  .icon-cog:before {
    content: "\e994";
  }
  .icon-cogs:before {
    content: "\e995";
  }
  .icon-stats-dots:before {
    content: "\e99b";
  }
  .icon-leaf:before {
    content: "\e9a4";
  }
  .icon-lab:before {
    content: "\e9aa";
  }
  .icon-airplane:before {
    content: "\e9af";
  }
  .icon-accessibility:before {
    content: "\e9b2";
  }
  .icon-clipboard:before {
    content: "\e9b8";
  }
  .icon-man-woman:before {
    content: "\e9de";
  }
  .icon-terminal:before {
    content: "\ea81";
  }
    

    
 .accordion {
    max-width: 1200px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    overflow: hidden;
    background: #2f87d8;
  }

  .accordion__label,
  .accordion__content {
    padding: 14px 20px;
  }

  .accordion__label {
      display: block;
      color: #ffffff;
      font-weight: 500;
      cursor: pointer;
      position: relative;
      transition: background 0.1s;
  }

  .accordion__label:hover {
      background: rgba(0,0,0,0.1);
  }

  .accordion__label::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      width: 12px;
      height: 6px;
      background-image: url('data:image/svg+xml;utf8,<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 100,0 50,50" style="fill:%23FFFFFF99;" /></svg>');
      background-size: contain;
      transition: transform 0.4s;
  }

  .accordion__content {
      background: #ffffff;
      line-height: 1.6;
      font-size: 0.85em;
      display: none;
  }

  .accordion__input {
      display: none;
  }

  .accordion__input:checked ~ .accordion__content {
      display: block;
  }

  .text.acc {
    font-weight: bold;
  }

  .desc {
    padding-top: 20px;
  }

  .mytabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }

  .mytabs__input {
    display: none;
  }

  .mytabs__label {
    display: block;
    padding: 25px;
    background: #e2e2e2; /*background judul*/
    font-weight: bold;
    cursor: pointer;
    transition: background 0.1s;
  }

  .mytabs__label:hover {
    background: rgba(0,0,0,0.2);
}

  .mytabs .tab {
    width: 100%;
    padding: 20px;
    background: #fff; /*background konten*/
    order: 1;
    display: none;
  }

  .mytabs .tab h2 {
    font-size: 2em;
  }

  .mytabs__input:checked + label + .tab {
    display: block;
  }

  .mytabs__input:checked + label {
    background: #2f87d8;
    color: #fff;
  }

  .imghover {
    position: relative;
    width: 300px;
    margin: 20px;
  }
  
  .imghover__img {
    display: block;
    width: 100%;
  }
  
  .imghover__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  .imghover__overlay--blur {
    backdrop-filter: blur(5px);
  }
  
  .imghover__overlay--solid {
    background: #2f87ff;
  }
  
  .imghover__overlay > * {
    transform: translateY(20px);
    transition: transform 0.7s;
  }
  
  .imghover__overlay:hover {
    opacity: 1;
  }
  
  .imghover__overlay:hover > * {
    transform: translateY(0);
  }
  
  .imghover__title {
    font-size: 2em;
    font-weight: bold;
  }
  
  .imghover__description {
    font-size: 0.9em;
    margin: 0.25em;
    margin-bottom: 1.25em;
    text-align: center;
  }
 
  .imghover__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #2f87ff;
    color: #fff;
    font-weight: bold;
  }