.home-section {
  position: relative;
  height: auto;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}
body, html {
  overflow-x: hidden;
}
.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.footer-page{
    height: 100%;
    background-size: cover;
    /* background-image: url(../images/homepict2.png); */
    width: 100%;
    background-color: #0000005b;
    background-color: #D0FF01;
    border-top-left-radius: 27px;
    border-top-right-radius: 27px;

}

.home-news-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: auto;
  min-height: 100vh;
}

.overlay-news {
  background-color: #0000008c;
  width: 100%;
  border-bottom: 5px solid #D0FF01;
  background-size: cover;
  min-height: 100vh;
}


/* .home-news-section{
    position: relative;
    height: 100%;
    min-height: 100vh;
    background-size: cover;
    width: 100%;
}
.overlay-news{
    height: 100%;
    position: absolute;
    background-size: cover;
    background-color: #0000008c;
    width: 100%;
    border-bottom: 5px solid #D0FF01;
} */
@font-face {
    font-family: 'RussoOne';
    src: url('../assets/Russo_One/RussoOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
body{
    background-color: #1C2135;
    font-family: 'RussoOne', sans-serif;
    color: white;
}

.btn-outline-success22 {
    --bs-btn-color: #D0FF01;
    --bs-btn-border-color: #D0FF01;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #D0FF01;
    --bs-btn-hover-border-color: #D0FF01;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #000000;
    --bs-btn-active-bg: #D0FF01;
    --bs-btn-active-border-color: #D0FF01;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #D0FF01;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #D0FF01;
    --bs-gradient: none;
}
.btn-outline-success33 {
    --bs-btn-color: #000000;
    --bs-btn-border-color: #000000;
    --bs-btn-hover-color: #D0FF01;
    --bs-btn-hover-bg: #000000;
    --bs-btn-hover-border-color: #000000;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #D0FF01;
    --bs-btn-active-bg: #000000;
    --bs-btn-active-border-color: #000000;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000000;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #000000;
    --bs-gradient: none;
}

.btn-success {
  --bs-btn-color: #000000;
  --bs-btn-bg: #D0FF01;
  --bs-btn-border-color: #D0FF01;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: #a5ca00;
  --bs-btn-hover-border-color: #a5ca00;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: #a5ca00;
  --bs-btn-active-border-color: #a5ca00;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-bg: #D0FF01;
  --bs-btn-disabled-border-color: #D0FF01;
}

.bg-success{
  background-color: #D0FF01 !important;
}
.text-success{
  color: #D0FF01 !important;
}
.head-judul{
  font-size: 4.5rem;
  color: #D0FF01;
}

.bg-update{
  height: 350px;
 }
 #menu-hp {
  transition: right 0.6s ease-in-out;
}


/* TEMPLATE CARD */
.content-wrapper {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 0.5rem;
}

.news-card {
  border: 0px solid aqua;
  margin: 0.5rem;
  position: relative;
  height: 12rem;
  overflow: hidden;
  border-radius: 0.5rem;
  flex: 1;
  min-width: 290px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}

@media (min-width: 900px) {

.news-card {
    height: 20rem
}
  }

.news-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);;
      z-index: 0;
    }

.news-card__card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
/*     background: rgba(255,0,0,.5); */
  }

.news-card__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 3s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    z-index: -1;
  }

.news-card__text-wrapper {
    position: absolute;
    bottom: 0rem;
    padding: 1rem;
    color: white;
/*     background-color: rgba(0, 0, 0, 0.4); */
    transition: background-color 1.5s ease;
  }

.news-card__title {
    transition: color 1s ease;
    margin-bottom: .5rem;
  }

.news-card__post-date {
    font-size: .7rem;
    margin-bottom: .5rem;
    color: #CCC;
  }

.news-card__details-wrapper {
    max-height: 0;
    opacity: 0;
    transition: max-height 1.5s ease, opacity 1s ease;
  }

@media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {
      max-height: 20rem;
      opacity: 1;
    }
    .news-card:hover .news-card__text-wrapper {
      background-color: rgba(0, 0, 0, 0.6);
    }
    .news-card:hover .news-card__title {
      color: #D0FF01;
    }
    .news-card:hover .news-card__image {
      transform: scale(1.2);
      z-index: -1;
    }
  }

.news-card__excerpt {
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Maksimal 5 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.news-card__read-more {
    background: black;
    color: #bbb;
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    margin-top: 1rem;
    border: 1px solid #444;
    font-size: 0.8rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-decoration: none;
    width: 7rem;
    margin-left: auto;
    position: relative;
    z-index: 5;
  }

.news-card__read-more i {
      position: relative;
      left: 0.2rem;
      color: #888;
      transition: left 0.5s ease, color 0.6s ease;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

.news-card__read-more:hover i {
      left: 0.5rem;
      color: #D0FF01;
    }.content-wrapper {
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        padding: 0.5rem;
      }
      
      .news-card {
        border: 0px solid aqua;
        margin: 0.5rem;
        position: relative;
        height: 12rem;
        overflow: hidden;
        border-radius: 0.5rem;
        flex: 1;
        min-width: 290px;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
      }
      
      @media (min-width: 900px) {
      
      .news-card {
          height: 20rem
      }
        }
      
      .news-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);;
            z-index: 0;
          }
      
      .news-card__card-link {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
      /*     background: rgba(255,0,0,.5); */
        }
      
      .news-card__image {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
          transition: transform 3s ease;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          position: relative;
          z-index: -1;
        }
      
      .news-card__text-wrapper {
          position: absolute;
          bottom: 0rem;
          padding: 1rem;
          color: white;
      /*     background-color: rgba(0, 0, 0, 0.4); */
          transition: background-color 1.5s ease;
        }
      
      .news-card__title {
          transition: color 1s ease;
          margin-bottom: .5rem;
        }
      
      .news-card__post-date {
          font-size: 1rem;
          margin-bottom: .5rem;
          color: #CCC;
        }
      
      .news-card__details-wrapper {
          max-height: 0;
          opacity: 0;
          transition: max-height 1.5s ease, opacity 1s ease;
        }
      
      @media (min-width: 900px) {
          .news-card:hover .news-card__details-wrapper {
            max-height: 20rem;
            opacity: 1;
          }
          .news-card:hover .news-card__text-wrapper {
            background-color: rgba(0, 0, 0, 0.6);
          }
          .news-card:hover .news-card__title {
            color: #D0FF01;
          }
          .news-card:hover .news-card__image {
            transform: scale(1.2);
            z-index: -1;
          }
        }
      
      .news-card__excerpt {
          font-weight: 300;
          display: -webkit-box;
          -webkit-line-clamp: 5; /* Maksimal 5 baris */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      
      .news-card__read-more {
          background: black;
          color: #bbb;
          display: block;
          padding: 0.4rem 0.6rem;
          border-radius: 0.3rem;
          margin-top: 1rem;
          border: 1px solid #444;
          font-size: 0.8rem;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          text-decoration: none;
          width: 7rem;
          margin-left: auto;
          position: relative;
          z-index: 5;
        }
      
      .news-card__read-more i {
            position: relative;
            left: 0.2rem;
            color: #888;
            transition: left 0.5s ease, color 0.6s ease;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
          }
      
      .news-card__read-more:hover i {
            left: 0.5rem;
            color: #D0FF01;
          }

        .hover-container {
          color: white;
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }
        
        .panahkanan {
            transition: transform 0.6s ease;
        }
        
        .hover-container:hover {
            transform: translateX(10px); /* Moves the entire container */
            color: #D0FF01;
        }

        .kkn.active{
          border: 5px solid #D0FF01;
          --bs-btn-border-radius: none !important;
      }
        .kkn{
          border: 5px solid #ffffff;
          /* --bs-btn-border-radius: none !iportant; */
      }



        /* html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
} */

/*
 * Start
*/
.glassBox {
  width: 100%;
  height: 100%;
  /* max-width: 300px; */
  border-radius: 5px;
  background: #d0ff01b4;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right-color: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  padding: 15px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}
.glassBox, .glassBox * {
  box-sizing: border-box;
  transition: 400ms;
}
.glassBox__imgBox img {
  display: block;
  width: 100%;
  height: auto;
}
.glassBox__title {
  text-align: center;
  margin-top: 15px;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
}
/* .glassBox__content {
  position: absolute;
  right: 15px;
  bottom: 15px;
  left: 15px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-family: "Lato";
  letter-spacing: 0.1em;
  opacity: 0;
} */
.glassBox:hover .glassBox__imgBox {
  transform: translateY(-50px);
}
.glassBox:hover .glassBox__imgBox img {
  transform: translate(-20px, -40px)  scale(1.6);
}



.content {
  overflow: hidden;
  max-height: 50px; /* Atur tinggi awal */
  transition: max-height 0.3s ease-in-out;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked ~ .content {
  max-height: 100%; /* Atur tinggi setelah dibuka */
}
.read-more-label:hover{
  transition: .5 ease;
  color: black;
  cursor: pointer;
}
        
.ellipsis4 {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Maksimal 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis5 {
  display: -webkit-box;
  -webkit-line-clamp: 5; /* Maksimal 4 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CAROUSEL CSS EFFECT */

@media(max-width:1780px) {
    
}

@media(max-width:1360px) {
   
}

@media(max-width:1150px) {
  .bg-update{
    height: 450px;
   }
   .head-judul{
    font-size: 4rem;
    color: #D0FF01;
    text-align: center;
  }
}

@media(max-width:1080px) {
   
}

@media(max-width:991px) {
    .donlod-btn{
      display: none ;
    }
    .hp-btn{
      display: block !important;
    }
    
}

/* 780 x 487 */
@media(max-width:780px) {
    
    
}

@media(max-width:768px) {
     .bg-update{
      height: 600px;
     }
     .kt-hari{
      display: none !important;
    }
    .jarak-game.py-5{
      padding-top: 0px !important;
      padding-bottom: 0px !important;
    }
}

@media(max-width:667px) {
    
}

@media(max-width:640px) {
    
}

@media(max-width:450px) {
  .bg-update{
    height: 700px;
   }
   .head-judul{
    font-size: 3rem;
    color: #D0FF01;
  }

}

@media(max-width:384px) {

}

@media(max-width:375px) {
  .bg-update{
    height: 830px;
   }
}

@media(max-width:320px) {
  .head-judul{
    font-size: 2.5rem;
    color: #D0FF01;
  }
}