.live-title {
  display: inline-block;
  border: 2px solid red;
  border-radius: 50px;
  padding: 10px 20px;
}

.nama-website{
font-size: clamp(2rem, 4vw, 2.92rem);
}

.selamat-datang{
font-size: clamp(1.5rem, 3vw, 2.08rem);
}

.keterangan-website{
font-size: clamp(0.92rem, 1.8vw, 1.25rem);
}

.img-berita{
    height: 100px;
    width: 100px;
}

.teks-panjang{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}





.banner-utama{
    object-fit: contain;
    height:570px;
    backdrop-filter: blur(10px);
}

.grid-sambutan{
    grid-template-columns: 1fr;
}

.grid-berita-beranda{
    grid-template-columns: 1fr;
}

.grid-hero-beranda{
    grid-template-columns: 1fr;
    text-align: center;
}

.grid-responsive {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-sambutan {
    grid-template-columns: 400px 1fr;
  }

  .grid-berita-beranda{
    grid-template-columns: 400px 1fr;
  }

  .grid-hero-beranda{
        grid-template-columns: 200px 1fr;
        text-align: left;

    }

  .grid-responsive {
    grid-template-columns: 1fr;
  }

  .img-berita{
        min-width: 225px;
        max-height: 225px;
    }
}

@media (min-width: 1200px) {
  .grid-sambutan {
    grid-template-columns: 400px 1fr;
  }

  .grid-berita-beranda{
    grid-template-columns: 600px 1fr;
  }

  .grid-hero-beranda{
    grid-template-columns: 200px 1fr;
    text-align: left;
    }

    .grid-responsive {
    grid-template-columns: 900px 1fr;
  }

  .img-berita{
        min-width: 225px;
        max-height: 225px;
    }


}





.ikon {
    position: relative;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    top:0px;

}


.mid-garis{
  display: flex;
  align-items: center;
}

.mid-garis .garis{
  flex: 1;
  height: 1px;
  padding: 2px 0px;
  background-color: #c0bcbca5;
}


.btn-beranda, .btn-beranda:hover{
  background-image: linear-gradient(to right, #0976a9, #1e3a8a);
  color: #ffff;
  border-radius: 10deg;
}




@keyframes slide-in {
  from {
    translate: 150vw 0;
    scale: 200% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

.main-beranda{
 width: 100%;
}

.ikon-kc{
    max-width: 150px;
    height: auto;
    position: relative;
    margin-top: 2.5%;
    align-items: end;
    align-self: end;
    inset: 0;
    justify-content: center;
    justify-items: center;
    justify-self: center;
}


.ikon-kc-txt{
  position: relative;
  padding-top:7%;
}


.ikon-kc-dsc{
  font-size: 1.5em;
  font-family: sans-serif;
}


@media screen and (width<=720px){
    .ikon-kc{
        max-height: 100px;
    }

  .ikon-kc-txt{
    font-size: 1.0em;
    position: relative;
    padding-top:10%;
  }

  .ikon-kc-dsc{
    font-size: 0.5em;
  }
}



.ikon::before {

      content: "  ";
      background: linear-gradient(300deg, rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0.60)), var(--banner);
      background-size: cover;
      background-position:center;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      padding: 0pt !important;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.4;
      animation: 10s infinite alternate fade;
}

.carousel-control-prev{
    filter: invert(100%);
}

.carousel-control-next{
    filter: invert(100%);
}


.fade {
  animation-name: fade;
  animation-duration: 9.0s;
}

@keyframes fade {
  from {opacity: 1.0}
  to {opacity: 0.8}

}

.fade-in {
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
    -moz-animation: fadeIn ease 3s;
    -o-animation: fadeIn ease 3s;
    -ms-animation: fadeIn ease 3s;
  }

  .fadeIn{animation:fadeIn 1s ease backwards;}
  @keyframes fadeIn{
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
      }
  }

  @-moz-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
      }
  }

  @-webkit-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
    }
  }

  @-o-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
    }
  }

  @-ms-keyframes fadeIn {
    0%{
        transform:
        translate(0px, 100px); opacity: 0;
       }
      100%{
        transform:translate(0px, 0); opacity: 1;
      }
  }