@import url('https://fonts.googleapis.com/css2?family=Jaini&family=Jockey+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Koulen&display=swap');

.home-p{
    font-family: "Jockey One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .about-me{
    font-family: "Jockey One", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: normal;
  }

  .detail-text p{
    font-family: "Jockey One", sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.2px;
  }

.content-detail h3{
    font-family: "Jockey One", sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.2px;
  }
  .berita-tanggal{
       font-family: 'Koulen', sans-serif;
  }
  .header-bot{
       font-family: 'Koulen', sans-serif;
  }
  .berita-judul{
       font-family: 'Koulen', sans-serif;
  }
  .berita-button{
       font-family: 'Koulen', sans-serif;
  }
  .berita-slug{
         font-family: "Jockey One", sans-serif;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.2px;
  }
body {
     scroll-behavior: smooth;
     font-family: 'Koulen', sans-serif;
    background-color: #fdfdfd;
    }
footer{
    font-family: 'Koulen', sans-serif;
}

    nav {
    background-color: #fdfdfd65;

    }
    

  
    section {
    background-color: #fdfdfd;
    overflow: hidden;
    }

    span {
    color: #9500db;
    }
    h2{
    color: #323232;
    }
    .dropdown-toggle{
    margin-right: 200%;
    }
    button i:active{
        color: #9500db;
    }
    button p:hover{
        color: #9500db;
    }


    .active{
        color: #9500db;
    }
    @keyframes blink {
        0%, 100% {
            transform: scaleY(1);
        }
        50% {
            transform: scaleY(0);
        }
    }
    @keyframes strike {
        0% {
            stroke-dashoffset: -10;
        }
        100% {
            stroke-dashoffset: -100;
        }
    }

    #strike {
        stroke-dasharray: 24;
        stroke-dashoffset: 24;
        animation: strike 0.5s forwards;

    }

    #navbar {
        background-color: transparent; /* Navbar initially transparent */
        transition: background-color 0.3s ease-in-out; /* Smooth transition */
        position: fixed;
        width: 100%;
        z-index: 1000;
      }
      #navbar.scrolled {
        background-color: #fdfdfd;

      }
      #home {
        background: url('/lte/img/homebg.jpg');
        background-size: cover;
        background-position: center;
        object-fit: cover;
        max-width: 100%;
        height: 90vh;
      /* Sesuaikan tinggi sesuai kebutuhan */
     }

    /* Media Query untuk perangkat dengan lebar maksimum 768px */
    @media screen and (max-width: 768px) {
        #home {
            height: auto;
            display: block;
        }
    }
@media only screen and (max-width: 768px) {
    #navbar {
      background-color: #fdfdfd;

    }
}
.home-h1{
    text-shadow: 0 0 10px white;
}
.home-p{
    text-shadow: 0 0 10px white;
}
    .line{
    background-color: #323232;
    height: 65vh;
    right: 0;
    margin-right: 35%;
    width: 2px;
    border-radius: 25px;
    margin-top: 8%;
    z-index: 999;
    position: absolute;
    }
    .line-news{
        background-color: #323232;
        height: 65vh;
        right: 0;
        margin-right: 35%;
        width: 2px;
        transform: rotate(-90deg); /* Putar garis sebesar 90 derajat */


        border-radius: 25px;
        margin-top: 8%;
        z-index: 999;
        position: absolute;
        }
    .button-medsos{
    font-size: 30px;
    }
    .button-medsos a:first-child:hover{
    color: rgb(255, 0, 0);
    transform: scale(1.2);
    transition: 0.5s ease;
    }

    .button-medsos a:nth-child(2):hover{
    color: rgb(0, 191, 255);
    transform: scale(1.2);
    transition: 0.5s ease;
    }
    .button-medsos a:last-child:hover{
    color: #F56040;
    transform: scale(1.2);
    transition: 0.5s ease;
    }

    .button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background: #323232;
    margin-top: 10px;
    font-family: "Montserrat", sans-serif;
    box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    cursor: pointer;
    border: none;
    }

    .button:after {
    content: " ";
    width: 0%;
    height: 100%;
    background: #9500db;
    position: absolute;
    transition: all 0.4s ease-in-out;
    right: 0;
    }

    .button:hover::after {
    right: auto;
    left: 0;
    width: 100%;
    }

    .button span {
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: 10px 20px;
    color: #fff;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.1em;
    z-index: 20;
    transition: all 0.3s ease-in-out;
    }
    .button a{
        text-decoration: none;
    }
    .button:hover a{
        color: #ffd500;
    }
    .button:hover span {
    color: #ffd500;
    animation: scaleUp 0.3s ease-in-out;
    }

    .galeri-home {
        overflow: hidden;
        box-sizing: border-box;
        position: relative;


    }
    .galeri-home img{
        transition: transform 0.5s ease-in-out;
        border-radius: 10px;
        image-rendering: auto;
    }
    .galeri-home img:hover{
        transform: scale(1.1);

    }
    @keyframes scaleUp {
    0% {
    transform: scale(1);
    }

    50% {
    transform: scale(0.95);
    }

    100% {
    transform: scale(1);
    }
    }
    .swiper-container {
    width: 100%;
    height: 50vh;
    overflow: hidden;
    cursor: pointer;
    }

    .swiper-slide {
    text-align: center;
    }

    .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    image-rendering: auto;
    transition: transform 0.5s ease-in-out;
    filter: grayscale(100%);
    /* Mengurangi jarak antar gambar */
    }



    .swiper-slide img:hover{
    transform: scale(1.1);
    filter: grayscale(0%);

    }

    .swiper-slide:last-child img {
    margin-right: 0; /* Menghapus margin negatif pada gambar terakhir */
    }

    #floating {
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
    }

    @keyframes floating {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, 15px); }
    100% { transform: translate(0, -0px); }
    }

    @keyframes moveLeft {
    0% {
    transform: translateX(0%);
    }
    100% {
    transform: translateX(-100%);
    }
    }

    .slider-content:hover {
    animation-play-state: paused;
    }

    @keyframes moveLeft {
    0% {
    transform: translateX(0%);
    }
    100% {
    transform: translateX(-100%);
    }
    }

    .footer{
    background-color: #323232;
    }
    .footer-copyright{

    background-color: #222222;
    }
    .input-group {
    position: relative;
    }

    .input-group .input {
    border: solid 1.5px #9e9e9e;
    border-radius: 1rem;
    width: 100%;
    background: none;
    padding: 15px;
    font-size: 1rem;
    color: #000000;
    transition: border 150ms cubic-bezier(0.4,0,0.2,1);
    }

    .input-group .user-label {
    position: absolute;
    left: 15px;
    color: #656565;
    pointer-events: none;
    transform: translateY(1rem);
    transition: 150ms cubic-bezier(0.4,0,0.2,1);
    }

    .input-group .input:focus,
    .input-group .input:valid {
    outline: none;
    border: 1.5px solid #1a73e8;
    }

    .input-group .input:focus ~ .user-label,
    .input-group .input:valid ~ .user-label {
    transform: translateY(-50%) scale(0.8);
    background-color: #ffffff;
    padding: 0 .2em;
    color: #2196f3;
    }
    /* Gaya untuk layar dengan lebar maksimum 768px (perangkat seluler) */
    @media screen and (max-width: 576px) {
    .line {
    display: none;
    }
    }


    @media (max-width: 576px) {
        .dropdown-menu {
            background-color: transparent !important;
            border: none !important;
        }
        .dropdown-item:hover {
            background-color: transparent !important;
        }
    }

    .scrolled-shadow {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.242); /* Contoh bayangan yang dapat disesuaikan */
    }